@microsoft/mgt-components - npm Package Compare versions

Comparing version 2.1.0-preview.b2d9eba to 2.1.0-preview.e61861c

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

@@ -62,2 +62,6 @@ /**
  *
+ * @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
@@ -263,2 +267,5 @@ * @cssprop --avatar-border - {String} Avatar border
     protected renderAvatar(personDetails: IDynamicPerson, image: string, presence: Presence): TemplateResult;
+    private handleLine1Clicked;
+    private handleLine2Clicked;
+    private handleLine3Clicked;
     /**
@@ -265,0 +272,0 @@ * Render the details part of the person template.

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

@@ -32,2 +32,3 @@ /**
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
+import { findUsers } from '../../graph/graph.user';
 import { Providers, ProviderState, MgtTemplatedComponent } from '@microsoft/mgt-element';
@@ -72,2 +73,6 @@ import '../../styles/style-helper';
  *
+ * @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
@@ -450,2 +455,11 @@ * @cssprop --avatar-border - {String} Avatar border
     }
+    handleLine1Clicked() {
+        this.fireCustomEvent('line1clicked', this.personDetails);
+    }
+    handleLine2Clicked() {
+        this.fireCustomEvent('line2clicked', this.personDetails);
+    }
+    handleLine3Clicked() {
+        this.fireCustomEvent('line3clicked', this.personDetails);
+    }
     /**
@@ -469,3 +483,3 @@ * Render the details part of the person template.
                 details.push(html `
-          <div class="line1" aria-label="${text}">${text}</div>
+          <div class="line1" aria-label="${text}" @click=${() => this.handleLine1Clicked()}>${text}</div>
         `);
@@ -478,3 +492,3 @@ }
                 details.push(html `
-          <div class="line2" aria-label="${text}">${text}</div>
+          <div class="line2" aria-label="${text}" @click=${() => this.handleLine2Clicked()}>${text}</div>
         `);
@@ -487,3 +501,3 @@ }
                 details.push(html `
-          <div class="line3" aria-label="${text}">${text}</div>
+          <div class="line3" aria-label="${text}" @click=${() => this.handleLine3Clicked()}>${text}</div>
         `);
@@ -576,3 +590,6 @@ }
                 // Use the personQuery to find our person.
-                const people = yield findPeople(graph, this.personQuery, 1);
+                let people = yield findPeople(graph, this.personQuery, 1);
+                if (!people || people.length === 0) {
+                    people = (yield findUsers(graph, this.personQuery, 1)) || [];
+                }
                 if (people && people.length) {
@@ -579,0 +596,0 @@ this.personDetails = people[0];

dist/es6/components/mgt-teams-channel-picker/mgt-teams-channel-picker-css.js

@@ -11,5 +11,5 @@ // THIS FILE IS AUTO GENERATED
     css `
-:host([hidden]){display:none}:host{display:block;--default-font-family:'Segoe UI','Segoe UI Web (West European)','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}.ms-Icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.ms-Icon--ChevronDown::before{content:'\\\E70D'}.ms-Icon--ChevronUp::before{content:'\\\E70E'}.ms-Icon--Contact::before{content:'\\\E77B'}.ms-Icon--AddFriend::before{content:'\\\E8FA'}.ms-Icon--OutlookLogoInverse::before{content:'\\\EB6D'}.mgt-light{--color:#000000;--color-sub1:#323130;--color-sub2:#797775;--color-sub3:#979593;--background-color:#ffffff;--background-color--hover:#edebe9;--background-color--active:#e1dfdd;--background-color-sub1:#faf9f8;--background-color-sub2:#f3f2f1;--box-shadow:0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132);--box-shadow-color:rgba(0, 0, 0, 0.092);--icon-color:#605e5c;--tab-line-color:#edebe9;--tab-line-color--hover:#979593;--tab-background-color--hover:#edebe9;--title-color-main:#000000;--title-color-subtitle:#323130;--title-color-sub2:#797775;--line-seperator-color:#edebe9;--placeholder-color:#605e5c;--placeholder-color--focus:#323130;--input-background-color:#ffffff;--input-background-color--hover:#edebe9;--input-border:2px solid #605e5c;--input-border-top:2px solid #605e5c;--input-border-right:2px solid #605e5c;--input-border-bottom:2px solid #605e5c;--input-border-left:2px solid #605e5c;--input-border-color--hover:#323130;--input-border-color--focus:#0078d4;--list-background-color:#ffffff}.mgt-dark{--color:#ffffff;--color-sub1:#f3f2f1;--color-sub2:#c8c6c4;--color-sub3:#979593;--background-color:#000000;--background-color--hover:#323130;--background-color--active:#4f4f4f;--background-color-sub1:#161514;--background-color-sub2:#4f4f4f;--box-shadow:0 5px 14px 0 rgba(0, 0, 0, 0.8);--box-shadow-color:black;--icon-color:#797775;--tab-line-color:#3b3a39;--tab-line-color--hover:#979593;--tab-background-color--hover:#323130;--title-color-main:#ffffff;--title-color-subtitle:#f3f2f1;--title-color-sub2:#c8c6c4;--line-seperator-color:#3b3a39;--placeholder-color:#797775;--placeholder-color--focus:#f3f2f1;--input-background-color:#000000;--input-background-color--hover:#323130;--input-border:2px solid #8a8886;--input-border-top:2px solid #8a8886;--input-border-right:2px solid #8a8886;--input-border-bottom:2px solid #8a8886;--input-border-left:2px solid #8a8886;--input-border-color--hover:#a19f9d;--input-border-color--focus:#0078d4;--list-background-color:#161514}.mgt-light{--dropdown-item-selected-background:#deecf9;--arrow-fill:#000000}.mgt-dark{--dropdown-item-selected-background:#333d47;--arrow-fill:#605e5c}:host{font-family:var(--default-font-family)}.root{position:relative}.root .input-wrapper{font-family:var(--default-font-family);display:flex;flex-wrap:wrap;align-items:center;padding:4px 10px;position:relative;background-color:var(--input-background-color,#fff);font-size:14px;color:var(--color-sub1,#323130);height:29px;line-height:19px;cursor:text;border-top:var(--input-border-top,2px solid #605e5c);border-right:var(--input-border-right,2px solid #605e5c);border-bottom:var(--input-border-bottom,2px solid #605e5c);border-left:var(--input-border-left,2px solid #605e5c);border:var(--input-border,2px solid #605e5c)}.root .input-wrapper:hover{border-color:var(--input-border-color--hover,#323130)}.root .input-wrapper.focused{border-color:var(--input-border-color--focus,#0078d4)}.root .input-wrapper .selected-team{padding-right:10px;border:none;display:flex;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.root .input-wrapper .selected-team .arrow{margin-left:8px;margin-right:8px}.root .input-wrapper .selected-team .selected-team-name{font-weight:700}.root .input-wrapper .search-wrapper{height:14px;display:flex;flex-wrap:nowrap;align-items:center;margin-right:30px}.root .input-wrapper .team-chosen-input{display:inline-block;border:none;line-height:normal;outline:0;font-family:var(--default-font-family);font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:transparent;color:var(--color-sub1,#323130);padding-left:5px}.root .input-wrapper .team-chosen-input::placeholder{color:var(--placeholder-color,#605e5c)}.root .input-wrapper .team-chosen-input[contenteditable]:empty::after{content:attr(data-placeholder);color:var(--placeholder-color,#605e5c)}.root .input-wrapper .search-icon{align-self:flex-start;font-family:FabricMDL2Icons;color:var(--accent-color,#0078d4);line-height:normal}.root .input-wrapper .input-search{height:19px}.root .input-wrapper .input-search-start{line-height:normal;margin-inline-start:0;margin-inline-end:0}.root .input-wrapper::after{content:'';position:absolute;width:100%;height:90%;top:2px;right:2px;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%)}.root .close-icon{display:inline-block;position:absolute;right:10px;top:12px;line-height:normal;font-family:FabricMDL2Icons;cursor:pointer;color:var(--placeholder-color,#605e5c);background-color:var(--input-background-color,#fff)}.root .close-icon:hover{color:var(--color-sub1,#323130)}.root .dropdown{padding-top:5px;padding-bottom:11px;position:absolute;box-shadow:0 1.3289px 2.65781px rgba(180,180,180,.182),0 1.3289px 2.65781px rgba(68,68,68,.3);border-radius:2px;background-color:var(--dropdown-background-color,var(--list-background-color,#fff));z-index:1;width:100%;text-align:left;list-style-type:none;font-family:var(--default-font-family);font-style:normal;font-weight:400;color:var(--color-sub1,#323130);display:none;max-height:346px;overflow-y:auto}.root .dropdown.visible{display:block}.root .dropdown .item .arrow svg{fill:var(--arrow-fill,#000)}.root .dropdown .item.list-team{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;display:flex;flex-direction:row;align-items:center;padding:5px 12px 6px 14px;margin-top:6px;font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:16px;color:var(--color-sub1,#323130);flex-flow:nowrap;position:relative;overflow:hidden;white-space:nowrap;background-color:transparent}.root .dropdown .item.list-team:after{content:'';position:absolute;width:36px;height:100%;top:0;right:0;background-image:-webkit-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-moz-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-ms-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-o-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:linear-gradient(to left,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0))}.root .dropdown .item.list-team:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .item.list-team .arrow{margin-right:5px;margin-bottom:1px}.root .dropdown .item.selected{background-color:var(--dropdown-item-selected-background,#deecf9)}.root .dropdown .item.focused{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .channel-display{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;cursor:pointer;padding-left:21px;padding-right:10px}.root .dropdown .channel-display .showing{padding-left:10px;padding-top:4px;padding-bottom:4px}.root .dropdown .channel-display .showing .channel-name-text{font-size:14px;font-weight:400;color:var(--color-sub1,#323130);margin:0;padding:0}.root .dropdown .channel-display .showing .channel-name-text.highlight-search-text{font-weight:700}.root .dropdown .channel-display:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .loading-text,.root .dropdown .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;color:var(--color-sub1,#323130);line-height:19px;text-align:center}.root .dropdown .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}.root .dropdown .message-parent .loading-text{margin-top:3px;margin-left:9px;color:#0078d4}[dir=rtl] .input-wrapper::after{content:'';position:absolute;width:99%;height:90%;top:2px;left:0;background-image:linear-gradient(to left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-moz-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-o-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-ms-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-webkit-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%)}[dir=rtl] .search-wrapper{margin-right:0!important}[dir=rtl] .search-icon{margin-left:8px!important}[dir=rtl] .channel-display{padding:0 34px 0 10px!important}[dir=rtl] .close-icon{right:auto;left:10px}[dir=rtl] .dropdown{text-align:right}[dir=rtl] .arrow{-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-webkit-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;-ms-filter:FlipH;margin-right:0;margin-left:5px}[dir=rtl] .selected-team{padding-left:10px}
+:host([hidden]){display:none}:host{display:block;--default-font-family:'Segoe UI','Segoe UI Web (West European)','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}.ms-Icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.ms-Icon--ChevronDown::before{content:'\\\E70D'}.ms-Icon--ChevronUp::before{content:'\\\E70E'}.ms-Icon--Contact::before{content:'\\\E77B'}.ms-Icon--AddFriend::before{content:'\\\E8FA'}.ms-Icon--OutlookLogoInverse::before{content:'\\\EB6D'}.mgt-light{--color:#000000;--color-sub1:#323130;--color-sub2:#797775;--color-sub3:#979593;--background-color:#ffffff;--background-color--hover:#edebe9;--background-color--active:#e1dfdd;--background-color-sub1:#faf9f8;--background-color-sub2:#f3f2f1;--box-shadow:0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132);--box-shadow-color:rgba(0, 0, 0, 0.092);--icon-color:#605e5c;--tab-line-color:#edebe9;--tab-line-color--hover:#979593;--tab-background-color--hover:#edebe9;--title-color-main:#000000;--title-color-subtitle:#323130;--title-color-sub2:#797775;--line-seperator-color:#edebe9;--placeholder-color:#605e5c;--placeholder-color--focus:#323130;--input-background-color:#ffffff;--input-background-color--hover:#edebe9;--input-border:2px solid #605e5c;--input-border-top:2px solid #605e5c;--input-border-right:2px solid #605e5c;--input-border-bottom:2px solid #605e5c;--input-border-left:2px solid #605e5c;--input-border-color--hover:#323130;--input-border-color--focus:#0078d4;--list-background-color:#ffffff}.mgt-dark{--color:#ffffff;--color-sub1:#f3f2f1;--color-sub2:#c8c6c4;--color-sub3:#979593;--background-color:#000000;--background-color--hover:#323130;--background-color--active:#4f4f4f;--background-color-sub1:#161514;--background-color-sub2:#4f4f4f;--box-shadow:0 5px 14px 0 rgba(0, 0, 0, 0.8);--box-shadow-color:black;--icon-color:#797775;--tab-line-color:#3b3a39;--tab-line-color--hover:#979593;--tab-background-color--hover:#323130;--title-color-main:#ffffff;--title-color-subtitle:#f3f2f1;--title-color-sub2:#c8c6c4;--line-seperator-color:#3b3a39;--placeholder-color:#797775;--placeholder-color--focus:#f3f2f1;--input-background-color:#000000;--input-background-color--hover:#323130;--input-border:2px solid #8a8886;--input-border-top:2px solid #8a8886;--input-border-right:2px solid #8a8886;--input-border-bottom:2px solid #8a8886;--input-border-left:2px solid #8a8886;--input-border-color--hover:#a19f9d;--input-border-color--focus:#0078d4;--list-background-color:#161514}.mgt-light{--dropdown-item-selected-background:#deecf9;--arrow-fill:#000000}.mgt-dark{--dropdown-item-selected-background:#333d47;--arrow-fill:#605e5c}:host{font-family:var(--default-font-family)}.root{position:relative}.root .input-wrapper{font-family:var(--default-font-family);display:flex;flex-wrap:wrap;align-items:center;padding:4px 10px;position:relative;background-color:var(--input-background-color,#fff);font-size:14px;color:var(--color-sub1,#323130);height:29px;line-height:19px;cursor:text;border-top:var(--input-border-top,2px solid #605e5c);border-right:var(--input-border-right,2px solid #605e5c);border-bottom:var(--input-border-bottom,2px solid #605e5c);border-left:var(--input-border-left,2px solid #605e5c);border:var(--input-border,2px solid #605e5c)}.root .input-wrapper:hover{border-color:var(--input-border-color--hover,#323130)}.root .input-wrapper.focused{border-color:var(--input-border-color--focus,#0078d4)}.root .input-wrapper .selected-team{padding-right:10px;border:none;display:flex;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.root .input-wrapper .selected-team .arrow{margin-left:8px;margin-right:8px}.root .input-wrapper .selected-team .selected-team-name{font-weight:700}.root .input-wrapper .selected-team .search-wrapper{margin-left:12px;height:18px;display:flex;flex-wrap:nowrap;align-items:center;margin-right:30px}.root .input-wrapper .search-wrapper{overflow:hidden;height:18px;display:flex;flex-wrap:nowrap;align-items:center;margin-right:30px}.root .input-wrapper .hide-icon{display:none}.root .input-wrapper .team-chosen-input{display:inline-block;border:none;line-height:normal;outline:0;font-family:var(--default-font-family);font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:transparent;color:var(--color-sub1,#323130);padding-left:5px}.root .input-wrapper .team-chosen-input::placeholder{color:var(--placeholder-color,#605e5c)}.root .input-wrapper .team-chosen-input[contenteditable]:empty::after{content:attr(data-placeholder);color:var(--placeholder-color,#605e5c)}.root .input-wrapper .search-icon{margin-top:1px;align-self:flex-start;font-family:FabricMDL2Icons;color:var(--accent-color,#0078d4);line-height:normal}.root .input-wrapper .input-search{height:19px}.root .input-wrapper .input-search-start{white-space:nowrap;line-height:normal;margin-inline-start:0;margin-inline-end:0}.root .input-wrapper::after{content:'';position:absolute;width:100%;height:90%;top:2px;right:2px;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%)}.root .close-icon{display:inline-block;position:absolute;right:10px;top:12px;line-height:normal;font-family:FabricMDL2Icons;cursor:pointer;color:var(--placeholder-color,#605e5c);background-color:var(--input-background-color,#fff)}.root .close-icon:hover{color:var(--color-sub1,#323130)}.root .dropdown{padding-top:5px;padding-bottom:11px;position:absolute;box-shadow:0 1.3289px 2.65781px rgba(180,180,180,.182),0 1.3289px 2.65781px rgba(68,68,68,.3);border-radius:2px;background-color:var(--dropdown-background-color,var(--list-background-color,#fff));z-index:1;width:100%;text-align:left;list-style-type:none;font-family:var(--default-font-family);font-style:normal;font-weight:400;color:var(--color-sub1,#323130);display:none;max-height:346px;overflow-y:auto}.root .dropdown.visible{display:block}.root .dropdown .item .arrow svg{fill:var(--arrow-fill,#000)}.root .dropdown .item.list-team{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;display:flex;flex-direction:row;align-items:center;padding:5px 12px 6px 14px;margin-top:6px;font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:16px;color:var(--color-sub1,#323130);flex-flow:nowrap;position:relative;overflow:hidden;white-space:nowrap;background-color:transparent}.root .dropdown .item.list-team:after{content:'';position:absolute;width:36px;height:100%;top:0;right:0;background-image:-webkit-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-moz-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-ms-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-o-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:linear-gradient(to left,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0))}.root .dropdown .item.list-team:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .item.list-team .arrow{margin-right:5px;margin-bottom:1px}.root .dropdown .item.selected{background-color:var(--dropdown-item-selected-background,#deecf9)}.root .dropdown .item.focused{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .channel-display{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;cursor:pointer;padding-left:21px;padding-right:10px}.root .dropdown .channel-display .showing{padding-left:10px;padding-top:4px;padding-bottom:4px}.root .dropdown .channel-display .showing .channel-name-text{font-size:14px;font-weight:400;color:var(--color-sub1,#323130);margin:0;padding:0}.root .dropdown .channel-display .showing .channel-name-text.highlight-search-text{font-weight:700}.root .dropdown .channel-display:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .loading-text,.root .dropdown .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;color:var(--color-sub1,#323130);line-height:19px;text-align:center}.root .dropdown .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}.root .dropdown .message-parent .loading-text{margin-top:3px;margin-left:9px;color:#0078d4}[dir=rtl] .input-wrapper::after{content:'';position:absolute;width:99%;height:90%;top:2px;left:0;background-image:linear-gradient(to left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-moz-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-o-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-ms-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-webkit-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%)}[dir=rtl] .search-wrapper{margin-right:0!important}[dir=rtl] .search-icon{margin-left:8px!important}[dir=rtl] .channel-display{padding:0 34px 0 10px!important}[dir=rtl] .close-icon{right:auto;left:10px}[dir=rtl] .dropdown{text-align:right}[dir=rtl] .arrow{-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-webkit-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;-ms-filter:FlipH;margin-right:0;margin-left:5px}[dir=rtl] .selected-team{padding-left:10px}
 `
 ];
 //# sourceMappingURL=mgt-teams-channel-picker-css.js.map

dist/es6/components/mgt-teams-channel-picker/mgt-teams-channel-picker.js

@@ -182,2 +182,6 @@ /**
         };
+        const searchClasses = {
+            'hide-icon': !!this._selectedItemState,
+            'search-wrapper': true
+        };
         return (this.renderTemplate('default', { teams: this.items }) ||
@@ -188,3 +192,3 @@ html `
             ${this.renderSelected()}
-            <div class="search-wrapper">${this.renderSearchIcon()} ${this.renderInput()}</div>
+            <div class=${classMap(searchClasses)}>${this.renderSearchIcon()} ${this.renderInput()}</div>
           </div>
@@ -212,2 +216,3 @@ ${this.renderCloseButton()}
         ${this._selectedItemState.item.displayName}
+        <div class="search-wrapper">${this.renderSearchIcon()} ${this.renderInput()}</div>
       </li>
@@ -214,0 +219,0 @@ `;

dist/es6/graph/cacheStores.d.ts

 /**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+/**
  * All schemas and stores for caching component calls
@@ -3,0 +9,0 @@ */

dist/es6/graph/cacheStores.js

 /**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+/**
  * All schemas and stores for caching component calls
@@ -3,0 +9,0 @@ */

dist/es6/graph/graph.user.js

@@ -243,3 +243,3 @@ /**
                 .count(true)
-                .search(`"displayName:${query}"`)
+                .search(`"displayName:${query}" OR "mail:${query}"`)
                 .top(top)
@@ -246,0 +246,0 @@ .middlewareOptions(prepScopes(scopes))

dist/es6/graph/graph.userWithPhoto.d.ts

@@ -0,1 +1,7 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
 import { IGraph } from '@microsoft/mgt-element';
@@ -2,0 +8,0 @@ import { IDynamicPerson } from './types';

dist/es6/graph/graph.userWithPhoto.js

@@ -0,1 +1,7 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -2,0 +8,0 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }

dist/es6/styles/fluent-icons.d.ts

@@ -0,3 +1,9 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
 export declare type IconSize = 16 | 20 | 24 | 32 | 40 | 48 | 64 | 96;
 export declare function getFileTypeIconUri(type: string, size: IconSize, extension: 'png' | 'svg'): string;
 //# sourceMappingURL=fluent-icons.d.ts.map

dist/es6/styles/fluent-icons.js

@@ -0,1 +1,7 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
 const fileTypeMap = {
@@ -2,0 +8,0 @@ PowerPoint: 'pptx',

package.json

 {
   "name": "@microsoft/mgt-components",
-  "version": "2.1.0-preview.b2d9eba",
+  "version": "2.1.0-preview.e61861c",
   "description": "The Microsoft Graph Toolkit Components",
@@ -36,7 +36,6 @@ "keywords": [
     "sass": "gulp sass --cwd .",
-    "sass:watch": "gulp watchSass --cwd .",
-    "setLicense": "gulp setLicense --cwd ."
+    "sass:watch": "gulp watchSass --cwd ."
   },
   "dependencies": {
-    "@microsoft/mgt-element": "2.1.0-preview.b2d9eba",
+    "@microsoft/mgt-element": "2.1.0-preview.e61861c",
     "@microsoft/microsoft-graph-client": "^2.2.1",
@@ -43,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,2 +15,3 @@ /**
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
+import { findUsers } from '../../graph/graph.user';
 import { AvatarSize, IDynamicPerson } from '../../graph/types';
@@ -80,2 +81,6 @@ import { Providers, ProviderState, MgtTemplatedComponent } from '@microsoft/mgt-element';
  *
+ * @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
@@ -650,2 +655,14 @@ * @cssprop --avatar-border - {String} Avatar border
 
+  private handleLine1Clicked() {
+    this.fireCustomEvent('line1clicked', this.personDetails);
+  }
+
+  private handleLine2Clicked() {
+    this.fireCustomEvent('line2clicked', this.personDetails);
+  }
+
+  private handleLine3Clicked() {
+    this.fireCustomEvent('line3clicked', this.personDetails);
+  }
+
   /**
@@ -671,3 +688,3 @@ * Render the details part of the person template.
         details.push(html`
-          <div class="line1" aria-label="${text}">${text}</div>
+          <div class="line1" aria-label="${text}" @click=${() => this.handleLine1Clicked()}>${text}</div>
         `);
@@ -681,3 +698,3 @@ }
         details.push(html`
-          <div class="line2" aria-label="${text}">${text}</div>
+          <div class="line2" aria-label="${text}" @click=${() => this.handleLine2Clicked()}>${text}</div>
         `);
@@ -691,3 +708,3 @@ }
         details.push(html`
-          <div class="line3" aria-label="${text}">${text}</div>
+          <div class="line3" aria-label="${text}" @click=${() => this.handleLine3Clicked()}>${text}</div>
         `);
@@ -794,4 +811,8 @@ }
       // Use the personQuery to find our person.
-      const people = await findPeople(graph, this.personQuery, 1);
+      let people = await findPeople(graph, this.personQuery, 1);
 
+      if (!people || people.length === 0) {
+        people = (await findUsers(graph, this.personQuery, 1)) || [];
+      }
+
       if (people && people.length) {
@@ -798,0 +819,0 @@ this.personDetails = people[0];

src/components/mgt-teams-channel-picker/mgt-teams-channel-picker-css.ts

@@ -12,3 +12,3 @@ // THIS FILE IS AUTO GENERATED
   css`
-:host([hidden]){display:none}:host{display:block;--default-font-family:'Segoe UI','Segoe UI Web (West European)','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}.ms-Icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.ms-Icon--ChevronDown::before{content:'\\\E70D'}.ms-Icon--ChevronUp::before{content:'\\\E70E'}.ms-Icon--Contact::before{content:'\\\E77B'}.ms-Icon--AddFriend::before{content:'\\\E8FA'}.ms-Icon--OutlookLogoInverse::before{content:'\\\EB6D'}.mgt-light{--color:#000000;--color-sub1:#323130;--color-sub2:#797775;--color-sub3:#979593;--background-color:#ffffff;--background-color--hover:#edebe9;--background-color--active:#e1dfdd;--background-color-sub1:#faf9f8;--background-color-sub2:#f3f2f1;--box-shadow:0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132);--box-shadow-color:rgba(0, 0, 0, 0.092);--icon-color:#605e5c;--tab-line-color:#edebe9;--tab-line-color--hover:#979593;--tab-background-color--hover:#edebe9;--title-color-main:#000000;--title-color-subtitle:#323130;--title-color-sub2:#797775;--line-seperator-color:#edebe9;--placeholder-color:#605e5c;--placeholder-color--focus:#323130;--input-background-color:#ffffff;--input-background-color--hover:#edebe9;--input-border:2px solid #605e5c;--input-border-top:2px solid #605e5c;--input-border-right:2px solid #605e5c;--input-border-bottom:2px solid #605e5c;--input-border-left:2px solid #605e5c;--input-border-color--hover:#323130;--input-border-color--focus:#0078d4;--list-background-color:#ffffff}.mgt-dark{--color:#ffffff;--color-sub1:#f3f2f1;--color-sub2:#c8c6c4;--color-sub3:#979593;--background-color:#000000;--background-color--hover:#323130;--background-color--active:#4f4f4f;--background-color-sub1:#161514;--background-color-sub2:#4f4f4f;--box-shadow:0 5px 14px 0 rgba(0, 0, 0, 0.8);--box-shadow-color:black;--icon-color:#797775;--tab-line-color:#3b3a39;--tab-line-color--hover:#979593;--tab-background-color--hover:#323130;--title-color-main:#ffffff;--title-color-subtitle:#f3f2f1;--title-color-sub2:#c8c6c4;--line-seperator-color:#3b3a39;--placeholder-color:#797775;--placeholder-color--focus:#f3f2f1;--input-background-color:#000000;--input-background-color--hover:#323130;--input-border:2px solid #8a8886;--input-border-top:2px solid #8a8886;--input-border-right:2px solid #8a8886;--input-border-bottom:2px solid #8a8886;--input-border-left:2px solid #8a8886;--input-border-color--hover:#a19f9d;--input-border-color--focus:#0078d4;--list-background-color:#161514}.mgt-light{--dropdown-item-selected-background:#deecf9;--arrow-fill:#000000}.mgt-dark{--dropdown-item-selected-background:#333d47;--arrow-fill:#605e5c}:host{font-family:var(--default-font-family)}.root{position:relative}.root .input-wrapper{font-family:var(--default-font-family);display:flex;flex-wrap:wrap;align-items:center;padding:4px 10px;position:relative;background-color:var(--input-background-color,#fff);font-size:14px;color:var(--color-sub1,#323130);height:29px;line-height:19px;cursor:text;border-top:var(--input-border-top,2px solid #605e5c);border-right:var(--input-border-right,2px solid #605e5c);border-bottom:var(--input-border-bottom,2px solid #605e5c);border-left:var(--input-border-left,2px solid #605e5c);border:var(--input-border,2px solid #605e5c)}.root .input-wrapper:hover{border-color:var(--input-border-color--hover,#323130)}.root .input-wrapper.focused{border-color:var(--input-border-color--focus,#0078d4)}.root .input-wrapper .selected-team{padding-right:10px;border:none;display:flex;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.root .input-wrapper .selected-team .arrow{margin-left:8px;margin-right:8px}.root .input-wrapper .selected-team .selected-team-name{font-weight:700}.root .input-wrapper .search-wrapper{height:14px;display:flex;flex-wrap:nowrap;align-items:center;margin-right:30px}.root .input-wrapper .team-chosen-input{display:inline-block;border:none;line-height:normal;outline:0;font-family:var(--default-font-family);font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:transparent;color:var(--color-sub1,#323130);padding-left:5px}.root .input-wrapper .team-chosen-input::placeholder{color:var(--placeholder-color,#605e5c)}.root .input-wrapper .team-chosen-input[contenteditable]:empty::after{content:attr(data-placeholder);color:var(--placeholder-color,#605e5c)}.root .input-wrapper .search-icon{align-self:flex-start;font-family:FabricMDL2Icons;color:var(--accent-color,#0078d4);line-height:normal}.root .input-wrapper .input-search{height:19px}.root .input-wrapper .input-search-start{line-height:normal;margin-inline-start:0;margin-inline-end:0}.root .input-wrapper::after{content:'';position:absolute;width:100%;height:90%;top:2px;right:2px;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%)}.root .close-icon{display:inline-block;position:absolute;right:10px;top:12px;line-height:normal;font-family:FabricMDL2Icons;cursor:pointer;color:var(--placeholder-color,#605e5c);background-color:var(--input-background-color,#fff)}.root .close-icon:hover{color:var(--color-sub1,#323130)}.root .dropdown{padding-top:5px;padding-bottom:11px;position:absolute;box-shadow:0 1.3289px 2.65781px rgba(180,180,180,.182),0 1.3289px 2.65781px rgba(68,68,68,.3);border-radius:2px;background-color:var(--dropdown-background-color,var(--list-background-color,#fff));z-index:1;width:100%;text-align:left;list-style-type:none;font-family:var(--default-font-family);font-style:normal;font-weight:400;color:var(--color-sub1,#323130);display:none;max-height:346px;overflow-y:auto}.root .dropdown.visible{display:block}.root .dropdown .item .arrow svg{fill:var(--arrow-fill,#000)}.root .dropdown .item.list-team{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;display:flex;flex-direction:row;align-items:center;padding:5px 12px 6px 14px;margin-top:6px;font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:16px;color:var(--color-sub1,#323130);flex-flow:nowrap;position:relative;overflow:hidden;white-space:nowrap;background-color:transparent}.root .dropdown .item.list-team:after{content:'';position:absolute;width:36px;height:100%;top:0;right:0;background-image:-webkit-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-moz-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-ms-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-o-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:linear-gradient(to left,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0))}.root .dropdown .item.list-team:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .item.list-team .arrow{margin-right:5px;margin-bottom:1px}.root .dropdown .item.selected{background-color:var(--dropdown-item-selected-background,#deecf9)}.root .dropdown .item.focused{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .channel-display{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;cursor:pointer;padding-left:21px;padding-right:10px}.root .dropdown .channel-display .showing{padding-left:10px;padding-top:4px;padding-bottom:4px}.root .dropdown .channel-display .showing .channel-name-text{font-size:14px;font-weight:400;color:var(--color-sub1,#323130);margin:0;padding:0}.root .dropdown .channel-display .showing .channel-name-text.highlight-search-text{font-weight:700}.root .dropdown .channel-display:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .loading-text,.root .dropdown .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;color:var(--color-sub1,#323130);line-height:19px;text-align:center}.root .dropdown .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}.root .dropdown .message-parent .loading-text{margin-top:3px;margin-left:9px;color:#0078d4}[dir=rtl] .input-wrapper::after{content:'';position:absolute;width:99%;height:90%;top:2px;left:0;background-image:linear-gradient(to left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-moz-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-o-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-ms-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-webkit-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%)}[dir=rtl] .search-wrapper{margin-right:0!important}[dir=rtl] .search-icon{margin-left:8px!important}[dir=rtl] .channel-display{padding:0 34px 0 10px!important}[dir=rtl] .close-icon{right:auto;left:10px}[dir=rtl] .dropdown{text-align:right}[dir=rtl] .arrow{-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-webkit-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;-ms-filter:FlipH;margin-right:0;margin-left:5px}[dir=rtl] .selected-team{padding-left:10px}
+:host([hidden]){display:none}:host{display:block;--default-font-family:'Segoe UI','Segoe UI Web (West European)','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,'Helvetica Neue',sans-serif;--theme-primary-color:#0078d7;--theme-dark-color:#005a9e}.ms-Icon{display:inline-block;font-family:FabricMDL2Icons;font-style:normal;font-weight:400;font-size:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin:4px 0}.ms-Icon--ChevronDown::before{content:'\\\E70D'}.ms-Icon--ChevronUp::before{content:'\\\E70E'}.ms-Icon--Contact::before{content:'\\\E77B'}.ms-Icon--AddFriend::before{content:'\\\E8FA'}.ms-Icon--OutlookLogoInverse::before{content:'\\\EB6D'}.mgt-light{--color:#000000;--color-sub1:#323130;--color-sub2:#797775;--color-sub3:#979593;--background-color:#ffffff;--background-color--hover:#edebe9;--background-color--active:#e1dfdd;--background-color-sub1:#faf9f8;--background-color-sub2:#f3f2f1;--box-shadow:0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132);--box-shadow-color:rgba(0, 0, 0, 0.092);--icon-color:#605e5c;--tab-line-color:#edebe9;--tab-line-color--hover:#979593;--tab-background-color--hover:#edebe9;--title-color-main:#000000;--title-color-subtitle:#323130;--title-color-sub2:#797775;--line-seperator-color:#edebe9;--placeholder-color:#605e5c;--placeholder-color--focus:#323130;--input-background-color:#ffffff;--input-background-color--hover:#edebe9;--input-border:2px solid #605e5c;--input-border-top:2px solid #605e5c;--input-border-right:2px solid #605e5c;--input-border-bottom:2px solid #605e5c;--input-border-left:2px solid #605e5c;--input-border-color--hover:#323130;--input-border-color--focus:#0078d4;--list-background-color:#ffffff}.mgt-dark{--color:#ffffff;--color-sub1:#f3f2f1;--color-sub2:#c8c6c4;--color-sub3:#979593;--background-color:#000000;--background-color--hover:#323130;--background-color--active:#4f4f4f;--background-color-sub1:#161514;--background-color-sub2:#4f4f4f;--box-shadow:0 5px 14px 0 rgba(0, 0, 0, 0.8);--box-shadow-color:black;--icon-color:#797775;--tab-line-color:#3b3a39;--tab-line-color--hover:#979593;--tab-background-color--hover:#323130;--title-color-main:#ffffff;--title-color-subtitle:#f3f2f1;--title-color-sub2:#c8c6c4;--line-seperator-color:#3b3a39;--placeholder-color:#797775;--placeholder-color--focus:#f3f2f1;--input-background-color:#000000;--input-background-color--hover:#323130;--input-border:2px solid #8a8886;--input-border-top:2px solid #8a8886;--input-border-right:2px solid #8a8886;--input-border-bottom:2px solid #8a8886;--input-border-left:2px solid #8a8886;--input-border-color--hover:#a19f9d;--input-border-color--focus:#0078d4;--list-background-color:#161514}.mgt-light{--dropdown-item-selected-background:#deecf9;--arrow-fill:#000000}.mgt-dark{--dropdown-item-selected-background:#333d47;--arrow-fill:#605e5c}:host{font-family:var(--default-font-family)}.root{position:relative}.root .input-wrapper{font-family:var(--default-font-family);display:flex;flex-wrap:wrap;align-items:center;padding:4px 10px;position:relative;background-color:var(--input-background-color,#fff);font-size:14px;color:var(--color-sub1,#323130);height:29px;line-height:19px;cursor:text;border-top:var(--input-border-top,2px solid #605e5c);border-right:var(--input-border-right,2px solid #605e5c);border-bottom:var(--input-border-bottom,2px solid #605e5c);border-left:var(--input-border-left,2px solid #605e5c);border:var(--input-border,2px solid #605e5c)}.root .input-wrapper:hover{border-color:var(--input-border-color--hover,#323130)}.root .input-wrapper.focused{border-color:var(--input-border-color--focus,#0078d4)}.root .input-wrapper .selected-team{padding-right:10px;border:none;display:flex;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;align-items:center;height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.root .input-wrapper .selected-team .arrow{margin-left:8px;margin-right:8px}.root .input-wrapper .selected-team .selected-team-name{font-weight:700}.root .input-wrapper .selected-team .search-wrapper{margin-left:12px;height:18px;display:flex;flex-wrap:nowrap;align-items:center;margin-right:30px}.root .input-wrapper .search-wrapper{overflow:hidden;height:18px;display:flex;flex-wrap:nowrap;align-items:center;margin-right:30px}.root .input-wrapper .hide-icon{display:none}.root .input-wrapper .team-chosen-input{display:inline-block;border:none;line-height:normal;outline:0;font-family:var(--default-font-family);font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:transparent;color:var(--color-sub1,#323130);padding-left:5px}.root .input-wrapper .team-chosen-input::placeholder{color:var(--placeholder-color,#605e5c)}.root .input-wrapper .team-chosen-input[contenteditable]:empty::after{content:attr(data-placeholder);color:var(--placeholder-color,#605e5c)}.root .input-wrapper .search-icon{margin-top:1px;align-self:flex-start;font-family:FabricMDL2Icons;color:var(--accent-color,#0078d4);line-height:normal}.root .input-wrapper .input-search{height:19px}.root .input-wrapper .input-search-start{white-space:nowrap;line-height:normal;margin-inline-start:0;margin-inline-end:0}.root .input-wrapper::after{content:'';position:absolute;width:100%;height:90%;top:2px;right:2px;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%)}.root .close-icon{display:inline-block;position:absolute;right:10px;top:12px;line-height:normal;font-family:FabricMDL2Icons;cursor:pointer;color:var(--placeholder-color,#605e5c);background-color:var(--input-background-color,#fff)}.root .close-icon:hover{color:var(--color-sub1,#323130)}.root .dropdown{padding-top:5px;padding-bottom:11px;position:absolute;box-shadow:0 1.3289px 2.65781px rgba(180,180,180,.182),0 1.3289px 2.65781px rgba(68,68,68,.3);border-radius:2px;background-color:var(--dropdown-background-color,var(--list-background-color,#fff));z-index:1;width:100%;text-align:left;list-style-type:none;font-family:var(--default-font-family);font-style:normal;font-weight:400;color:var(--color-sub1,#323130);display:none;max-height:346px;overflow-y:auto}.root .dropdown.visible{display:block}.root .dropdown .item .arrow svg{fill:var(--arrow-fill,#000)}.root .dropdown .item.list-team{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;display:flex;flex-direction:row;align-items:center;padding:5px 12px 6px 14px;margin-top:6px;font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:16px;color:var(--color-sub1,#323130);flex-flow:nowrap;position:relative;overflow:hidden;white-space:nowrap;background-color:transparent}.root .dropdown .item.list-team:after{content:'';position:absolute;width:36px;height:100%;top:0;right:0;background-image:-webkit-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-moz-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-ms-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:-o-linear-gradient(right,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0));background-image:linear-gradient(to left,var(--dropdown-background-color,var(--list-background-color,#fff)),rgba(var(--dropdown-background-color,var(--list-background-color,#fff)),0))}.root .dropdown .item.list-team:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .item.list-team .arrow{margin-right:5px;margin-bottom:1px}.root .dropdown .item.selected{background-color:var(--dropdown-item-selected-background,#deecf9)}.root .dropdown .item.focused{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .channel-display{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-o-user-select:none;cursor:pointer;padding-left:21px;padding-right:10px}.root .dropdown .channel-display .showing{padding-left:10px;padding-top:4px;padding-bottom:4px}.root .dropdown .channel-display .showing .channel-name-text{font-size:14px;font-weight:400;color:var(--color-sub1,#323130);margin:0;padding:0}.root .dropdown .channel-display .showing .channel-name-text.highlight-search-text{font-weight:700}.root .dropdown .channel-display:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.root .dropdown .loading-text,.root .dropdown .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;color:var(--color-sub1,#323130);line-height:19px;text-align:center}.root .dropdown .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}.root .dropdown .message-parent .loading-text{margin-top:3px;margin-left:9px;color:#0078d4}[dir=rtl] .input-wrapper::after{content:'';position:absolute;width:99%;height:90%;top:2px;left:0;background-image:linear-gradient(to left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-moz-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-o-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-ms-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%);background-image:-webkit-linear-gradient(right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 80%,var(--input-background-color,#fff) 100%)}[dir=rtl] .search-wrapper{margin-right:0!important}[dir=rtl] .search-icon{margin-left:8px!important}[dir=rtl] .channel-display{padding:0 34px 0 10px!important}[dir=rtl] .close-icon{right:auto;left:10px}[dir=rtl] .dropdown{text-align:right}[dir=rtl] .arrow{-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-webkit-transform:scaleX(-1);transform:scaleX(-1);filter:FlipH;-ms-filter:FlipH;margin-right:0;margin-left:5px}[dir=rtl] .selected-team{padding-left:10px}
 `];

src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts

@@ -285,2 +285,7 @@ /**
 
+    const searchClasses = {
+      'hide-icon': !!this._selectedItemState,
+      'search-wrapper': true
+    };
+
     return (
@@ -292,3 +297,3 @@ this.renderTemplate('default', { teams: this.items }) ||
             ${this.renderSelected()}
-            <div class="search-wrapper">${this.renderSearchIcon()} ${this.renderInput()}</div>
+            <div class=${classMap(searchClasses)}>${this.renderSearchIcon()} ${this.renderInput()}</div>
           </div>
@@ -319,2 +324,3 @@ ${this.renderCloseButton()}
         ${this._selectedItemState.item.displayName}
+        <div class="search-wrapper">${this.renderSearchIcon()} ${this.renderInput()}</div>
       </li>
@@ -321,0 +327,0 @@ `;

src/graph/cacheStores.ts

 /**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+/**
  * All schemas and stores for caching component calls
@@ -3,0 +10,0 @@ */

src/graph/graph.user.ts

@@ -271,3 +271,3 @@ /**
       .count(true)
-      .search(`"displayName:${query}"`)
+      .search(`"displayName:${query}" OR "mail:${query}"`)
       .top(top)
@@ -274,0 +274,0 @@ .middlewareOptions(prepScopes(scopes))

src/graph/graph.userWithPhoto.ts

@@ -0,1 +1,8 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
 import { CacheService, IGraph, prepScopes } from '@microsoft/mgt-element';
@@ -2,0 +9,0 @@

src/styles/fluent-icons.ts

@@ -0,1 +1,8 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
 const fileTypeMap = {
@@ -2,0 +9,0 @@ PowerPoint: 'pptx',

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

3003071

increased by0.13%

Lines of code

33433

increased by0.5%

Dependency changes

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

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

• Updated@microsoft/mgt-element@2.1.0-preview.e61861c