@microsoft/mgt-components - npm Package Compare versions

Comparing version 2.2.0-preview.3bf867f to 2.2.0-preview.3e7211a

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

@@ -136,2 +136,9 @@ /**
     /**
+     * Clears state of the component
+     *
+     * @protected
+     * @memberof MgtAgenda
+     */
+    protected clearState(): void;
+    /**
      * Render the no-data state.
@@ -138,0 +145,0 @@ *

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

@@ -235,2 +235,11 @@ /**
     /**
+     * Clears state of the component
+     *
+     * @protected
+     * @memberof MgtAgenda
+     */
+    clearState() {
+        this.events = null;
+    }
+    /**
      * Render the no-data state.
@@ -237,0 +246,0 @@ *

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

@@ -131,2 +131,9 @@ /**
     /**
+     * Clears state of the component
+     *
+     * @protected
+     * @memberof MgtGet
+     */
+    protected clearState(): void;
+    /**
      * Invoked on each update to perform rendering tasks. This method must return
@@ -133,0 +140,0 @@ * a lit-html TemplateResult. Setting properties inside this method will *not*

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

@@ -152,2 +152,11 @@ /**
     /**
+     * Clears state of the component
+     *
+     * @protected
+     * @memberof MgtGet
+     */
+    clearState() {
+        this.response = null;
+    }
+    /**
      * Invoked on each update to perform rendering tasks. This method must return
@@ -154,0 +163,0 @@ * a lit-html TemplateResult. Setting properties inside this method will *not*

dist/es6/components/mgt-people-picker/mgt-people-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{--selected-person-background-color:#f3f2f1}.mgt-dark{--selected-person-background-color:#4f4f4f}:host{border-radius:2px;font-family:var(--default-font-family);height:38px;display:contents;height:100%;overflow:hidden}:host .root,mgt-people-picker .root{display:block}.people-picker{background-color:var(--input-background-color,#fff);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);padding:6px 0 0}.people-picker:hover{border-color:var(--input-border-color--hover,#323130)}.people-picker.focused{border-color:var(--input-border-color--focus,#0078d4)}.people-picker .selected-list{flex:1 0 auto;display:flex;flex-wrap:wrap;vertical-align:middle;margin:0 8px;list-style-type:none;font-style:normal;font-weight:400;overflow:hidden}.people-picker .selected-list__person-wrapper{display:flex;margin:0 5px 6px 0;align-items:center;border-radius:15px;height:24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;background-color:var(--selected-person-background-color,#f3f2f1)}.people-picker .selected-list__person-wrapper__person{overflow:hidden;min-width:100%;--avatar-size-s:24px;margin-left:0;--color:var(--color-sub1, #323130);color:var(--color-sub1,#323130);padding-bottom:1px;padding-right:4px}.people-picker .selected-list__person-wrapper__overflow{margin-left:25px}.people-picker .selected-list__person-wrapper__overflow__gradient{content:'';position:absolute;margin-right:23px;width:10px;height:90%;top:0;right:0;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%)}.people-picker .selected-list__person-wrapper__overflow__close-icon{height:100%;top:0;margin-top:4px;margin-left:10px;position:absolute;line-height:normal;font-family:FabricMDL2Icons;padding-right:7px;cursor:pointer;right:0;background-color:var(--selected-person-background-color,#f3f2f1);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box{margin:1px 2px 8px}.people-picker .selected-list .flyout .search-box.search-box-start{line-height:normal;margin-inline-start:0;margin-inline-end:0}.people-picker .selected-list .flyout .search-box__input{box-sizing:border-box;border-width:0;border-style:none;width:100%;display:flex;flex:1 0 auto;font-family:var(--default-font-family);position:relative;line-height:normal;outline:0;font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:var(--input-background-color,#fff);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box__input::placeholder{color:var(--placeholder-color,#605e5c)}.people-picker .selected-list .flyout .flyout-root{padding:0;border-radius:2px;min-width:260px;overflow-y:auto;text-align:left;list-style-type:none;background-color:var(--dropdown-background-color,var(--list-background-color,#fff));max-height:var(--mgt-flyout-set-height,unset)}.people-picker .selected-list .flyout .flyout-root li{cursor:pointer}.people-picker .selected-list .flyout .flyout-root .people-list .list-person{display:flex;flex-direction:row;align-items:center;padding:12px;font-style:normal;font-weight:600;font-size:14px}.people-picker .selected-list .flyout .flyout-root .people-list .list-person.focused,.people-picker .selected-list .flyout .flyout-root .people-list .list-person:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area{margin-left:13px;flex:1 1 0;max-height:40px;overflow:hidden;color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text{font-size:14px;font-weight:400;margin:0;padding:0}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text.highlight-search-text{font-weight:700}mgt-person{--avatar-size-s:32px;margin-left:12px;cursor:default}:host .loading-text,:host .search-error-text,mgt-people-picker .loading-text,mgt-people-picker .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;line-height:19px;text-align:center;margin-left:50px;margin-right:50px;color:#0078d4}:host .message-parent,mgt-people-picker .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}:host .people-person-job-title,mgt-people-picker .people-person-job-title{flex:100%;order:3;font-weight:400;font-size:12px}:host .people-person-job-title.uppercase,mgt-people-picker .people-person-job-title.uppercase{text-transform:uppercase}mgt-flyout{flex:1 0 auto}[dir=rtl] mgt-person{margin:0 12px 0 0}[dir=rtl] .selected-list{margin-right:8px!important}[dir=rtl] .selected-list__person-wrapper{margin-left:6px!important}[dir=rtl] .selected-list__person-wrapper__person{margin-right:0!important;margin-left:4px!important}[dir=rtl] .selected-list__person-wrapper__overflow__gradient{right:auto!important;position:absolute!important;margin-right:0!important;width:10px!important;height:90%;top:0}[dir=rtl] .selected-list__person-wrapper__overflow__close-icon{right:auto!important;margin-left:5px!important;left:0!important}[dir=rtl] .people-person-text-area{margin-right:13px;margin-left:0!important}[dir=rtl] .flyout-root{text-align:right!important}
+: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{--selected-person-background-color:#f3f2f1}.mgt-dark{--selected-person-background-color:#4f4f4f}:host{border-radius:2px;font-family:var(--default-font-family);height:38px;display:contents;height:100%;overflow:hidden}:host .root,mgt-people-picker .root{display:block}.people-picker{background-color:var(--input-background-color,#fff);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);padding:6px 0 0}.people-picker:hover{border-color:var(--input-border-color--hover,#323130)}.people-picker.focused{border-color:var(--input-border-color--focus,#0078d4)}.people-picker.disabled{pointer-events:none}.people-picker .selected-list{flex:1 0 auto;display:flex;flex-wrap:wrap;vertical-align:middle;margin:0 8px;list-style-type:none;font-style:normal;font-weight:400;overflow:hidden}.people-picker .selected-list__person-wrapper{display:flex;margin:0 5px 6px 0;align-items:center;border-radius:15px;height:24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;background-color:var(--selected-person-background-color,#f3f2f1)}.people-picker .selected-list__person-wrapper__person{overflow:hidden;min-width:100%;--avatar-size-s:24px;margin-left:0;--color:var(--color-sub1, #323130);color:var(--color-sub1,#323130);padding-bottom:1px;padding-right:4px}.people-picker .selected-list__person-wrapper__overflow{margin-left:25px}.people-picker .selected-list__person-wrapper__overflow__gradient{content:'';position:absolute;margin-right:23px;width:10px;height:90%;top:0;right:0;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%)}.people-picker .selected-list__person-wrapper__overflow__close-icon{height:100%;top:0;margin-top:4px;margin-left:10px;position:absolute;line-height:normal;font-family:FabricMDL2Icons;padding-right:7px;cursor:pointer;right:0;background-color:var(--selected-person-background-color,#f3f2f1);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box{margin:1px 2px 8px}.people-picker .selected-list .flyout .search-box.search-box-start{line-height:normal;margin-inline-start:0;margin-inline-end:0}.people-picker .selected-list .flyout .search-box__input{box-sizing:border-box;border-width:0;border-style:none;width:100%;display:flex;flex:1 0 auto;font-family:var(--default-font-family);position:relative;line-height:normal;outline:0;font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:var(--input-background-color,#fff);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box__input::placeholder{color:var(--placeholder-color,#605e5c)}.people-picker .selected-list .flyout .flyout-root{padding:0;border-radius:2px;min-width:260px;overflow-y:auto;text-align:left;list-style-type:none;background-color:var(--dropdown-background-color,var(--list-background-color,#fff));max-height:var(--mgt-flyout-set-height,unset)}.people-picker .selected-list .flyout .flyout-root li{cursor:pointer}.people-picker .selected-list .flyout .flyout-root .people-list .list-person{display:flex;flex-direction:row;align-items:center;padding:12px;font-style:normal;font-weight:600;font-size:14px}.people-picker .selected-list .flyout .flyout-root .people-list .list-person.focused,.people-picker .selected-list .flyout .flyout-root .people-list .list-person:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area{margin-left:13px;flex:1 1 0;max-height:40px;overflow:hidden;color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text{font-size:14px;font-weight:400;margin:0;padding:0}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text.highlight-search-text{font-weight:700}mgt-person{--avatar-size-s:32px;margin-left:12px;cursor:default}:host .loading-text,:host .search-error-text,mgt-people-picker .loading-text,mgt-people-picker .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;line-height:19px;text-align:center;margin-left:50px;margin-right:50px;color:#0078d4}:host .message-parent,mgt-people-picker .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}:host .people-person-job-title,mgt-people-picker .people-person-job-title{flex:100%;order:3;font-weight:400;font-size:12px}:host .people-person-job-title.uppercase,mgt-people-picker .people-person-job-title.uppercase{text-transform:uppercase}mgt-flyout{flex:1 0 auto}[dir=rtl] mgt-person{margin:0 12px 0 0}[dir=rtl] .selected-list{margin-right:8px!important}[dir=rtl] .selected-list__person-wrapper{margin-left:6px!important}[dir=rtl] .selected-list__person-wrapper__person{margin-right:0!important;margin-left:4px!important}[dir=rtl] .selected-list__person-wrapper__overflow__gradient{right:auto!important;position:absolute!important;margin-right:0!important;width:10px!important;height:90%;top:0}[dir=rtl] .selected-list__person-wrapper__overflow__close-icon{right:auto!important;margin-left:5px!important;left:0!important}[dir=rtl] .people-person-text-area{margin-right:13px;margin-left:0!important}[dir=rtl] .flyout-root{text-align:right!important}
 `
 ];
 //# sourceMappingURL=mgt-people-picker-css.js.map

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

@@ -183,2 +183,9 @@ /**
     /**
+     * Clears state of the component
+     *
+     * @protected
+     * @memberof MgtPeoplePicker
+     */
+    protected clearState(): void;
+    /**
      * Request to reload the state.
@@ -185,0 +192,0 @@ * Use reload instead of load to ensure loading events are fired.

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

@@ -78,7 +78,5 @@ /**
         this._isFocused = false;
+        this.clearState();
         this._showLoading = true;
-        this._groupId = null;
-        this.userInput = '';
         this.showMax = 6;
-        this.selectedPeople = [];
         this.disabled = false;
@@ -213,3 +211,4 @@ }
             focused: this._isFocused,
-            'people-picker': true
+            'people-picker': true,
+            disabled: this.disabled
         };
@@ -225,2 +224,13 @@ return html `
     /**
+     * Clears state of the component
+     *
+     * @protected
+     * @memberof MgtPeoplePicker
+     */
+    clearState() {
+        this._groupId = null;
+        this.selectedPeople = [];
+        this.userInput = '';
+    }
+    /**
      * Request to reload the state.
@@ -249,3 +259,7 @@ * Use reload instead of load to ensure loading events are fired.
         const hasSelectedPeople = !!this.selectedPeople.length;
-        const placeholder = this.placeholder ? this.placeholder : this.strings.inputPlaceholderText;
+        const placeholder = !this.disabled
+            ? this.placeholder
+                ? this.placeholder
+                : this.strings.inputPlaceholderText
+            : this.placeholder || '';
         const selectionMode = this.selectionMode ? this.selectionMode : 'multiple';
@@ -252,0 +266,0 @@ const inputClasses = {

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

@@ -78,2 +78,9 @@ /**
     /**
+     * Clears the state of the component
+     *
+     * @protected
+     * @memberof MgtPeople
+     */
+    protected clearState(): void;
+    /**
      * Request to reload the state.
@@ -80,0 +87,0 @@ * Use reload instead of load to ensure loading events are fired.

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

@@ -109,2 +109,11 @@ /**
     /**
+     * Clears the state of the component
+     *
+     * @protected
+     * @memberof MgtPeople
+     */
+    clearState() {
+        this.people = null;
+    }
+    /**
      * Request to reload the state.
@@ -111,0 +120,0 @@ * Use reload instead of load to ensure loading events are fired.

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

@@ -259,2 +259,9 @@ /**
     /**
+     * Clears state of the component
+     *
+     * @protected
+     * @memberof MgtPerson
+     */
+    protected clearState(): void;
+    /**
      * Render the state when no data is available
@@ -261,0 +268,0 @@ *

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

@@ -321,2 +321,15 @@ /**
     /**
+     * Clears state of the component
+     *
+     * @protected
+     * @memberof MgtPerson
+     */
+    clearState() {
+        this._personImage = '';
+        this._personDetails = null;
+        this._fallbackDetails = null;
+        this._fetchedImage = null;
+        this._fetchedPresence = null;
+    }
+    /**
      * Render the state when no data is available
@@ -848,3 +861,3 @@ *
         if (flyout) {
-            flyout.isOpen = false;
+            flyout.close();
         }
@@ -864,3 +877,3 @@ const personCard = (this.querySelector('mgt-person-card') ||
         if (flyout) {
-            flyout.isOpen = true;
+            flyout.open();
         }
@@ -867,0 +880,0 @@ }

dist/es6/components/mgt-teams-channel-picker/mgt-teams-channel-picker.d.ts

@@ -180,2 +180,9 @@ /**
     /**
+     * Clears the state of the component
+     *
+     * @protected
+     * @memberof MgtTeamsChannelPicker
+     */
+    protected clearState(): void;
+    /**
      * Renders search icon
@@ -182,0 +189,0 @@ *

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

@@ -219,2 +219,14 @@ /**
     /**
+     * Clears the state of the component
+     *
+     * @protected
+     * @memberof MgtTeamsChannelPicker
+     */
+    clearState() {
+        this._items = [];
+        this._inputValue = '';
+        this._treeViewState = [];
+        this._focusList = [];
+    }
+    /**
      * Renders search icon
@@ -221,0 +233,0 @@ *

dist/es6/components/sub-components/mgt-flyout/mgt-flyout-css.js

@@ -11,5 +11,5 @@ // THIS FILE IS AUTO GENERATED
     css `
-.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}.root .flyout{display:none;position:fixed;z-index:9999999;opacity:0;box-shadow:var(--box-shadow,0 3.2px 7.2px 0 rgba(0,0,0,.132))}.root.visible .flyout{display:inline-block;animation-name:fadeIn;animation-duration:.3s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both;transition:top .3s ease,bottom .3s ease,left .3s ease}@keyframes fadeIn{from{opacity:0;margin-top:-10px;margin-bottom:-10px}to{opacity:1;margin-top:0;margin-bottom:0}}
+.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}.root .scout-top{position:fixed;top:0;left:0}.root .scout-bottom{position:fixed;bottom:0;right:0}.root .flyout{display:none;position:fixed;z-index:9999999;opacity:0;box-shadow:var(--box-shadow,0 3.2px 7.2px 0 rgba(0,0,0,.132))}.root.visible .flyout{display:inline-block;animation-name:fadeIn;animation-duration:.3s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both;transition:top .3s ease,bottom .3s ease,left .3s ease}@keyframes fadeIn{from{opacity:0;margin-top:-10px;margin-bottom:-10px}to{opacity:1;margin-top:0;margin-bottom:0}}
 `
 ];
 //# sourceMappingURL=mgt-flyout-css.js.map

dist/es6/components/sub-components/mgt-flyout/mgt-flyout.d.ts

@@ -49,2 +49,4 @@ /**
     private get _anchor();
+    private get _topScout();
+    private get _bottomScout();
     private _isOpen;
@@ -51,0 +53,0 @@ constructor();

dist/es6/components/sub-components/mgt-flyout/mgt-flyout.js

@@ -91,2 +91,8 @@ /**
     }
+    get _topScout() {
+        return this.renderRoot.querySelector('.scout-top');
+    }
+    get _bottomScout() {
+        return this.renderRoot.querySelector('.scout-bottom');
+    }
     /**
@@ -154,2 +160,4 @@ * Show the flyout.
         </div>
+        <div class="scout-top"></div>
+        <div class="scout-bottom"></div>
         ${flyoutTemplate}
@@ -199,2 +207,4 @@ </div>
             const anchorRect = anchor.getBoundingClientRect();
+            const topScoutRect = this._topScout.getBoundingClientRect();
+            const bottomScoutRect = this._bottomScout.getBoundingClientRect();
             const windowRect = {
@@ -296,2 +306,16 @@ height: windowHeight,
             }
+            // check the scout is positioned where it is supposed to be
+            // if it's not, then we are no longer fixed position and should assume
+            // absolute positioning
+            // this is a workaround when a transform is applied to a parent
+            // https://stackoverflow.com/questions/42660332/css-transform-parent-and-fixed-child
+            if (topScoutRect.top !== 0 || topScoutRect.left !== 0) {
+                left -= topScoutRect.left;
+                if (typeof bottom !== 'undefined') {
+                    bottom += bottomScoutRect.top - windowHeight;
+                }
+                else {
+                    top -= topScoutRect.top;
+                }
+            }
             if (this.direction === 'rtl') {
@@ -298,0 +322,0 @@ if (left > 100 && this.offsetLeft > 100) {

package.json

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

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

@@ -304,2 +304,12 @@ /**
   /**
+   * Clears state of the component
+   *
+   * @protected
+   * @memberof MgtAgenda
+   */
+  protected clearState(): void {
+    this.events = null;
+  }
+
+  /**
    * Render the no-data state.
@@ -306,0 +316,0 @@ *

src/components/mgt-get/mgt-get.ts

@@ -235,2 +235,12 @@ /**
   /**
+   * Clears state of the component
+   *
+   * @protected
+   * @memberof MgtGet
+   */
+  protected clearState(): void {
+    this.response = null;
+  }
+
+  /**
    * Invoked on each update to perform rendering tasks. This method must return
@@ -237,0 +247,0 @@ * a lit-html TemplateResult. Setting properties inside this method will *not*

src/components/mgt-people-picker/mgt-people-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{--selected-person-background-color:#f3f2f1}.mgt-dark{--selected-person-background-color:#4f4f4f}:host{border-radius:2px;font-family:var(--default-font-family);height:38px;display:contents;height:100%;overflow:hidden}:host .root,mgt-people-picker .root{display:block}.people-picker{background-color:var(--input-background-color,#fff);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);padding:6px 0 0}.people-picker:hover{border-color:var(--input-border-color--hover,#323130)}.people-picker.focused{border-color:var(--input-border-color--focus,#0078d4)}.people-picker .selected-list{flex:1 0 auto;display:flex;flex-wrap:wrap;vertical-align:middle;margin:0 8px;list-style-type:none;font-style:normal;font-weight:400;overflow:hidden}.people-picker .selected-list__person-wrapper{display:flex;margin:0 5px 6px 0;align-items:center;border-radius:15px;height:24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;background-color:var(--selected-person-background-color,#f3f2f1)}.people-picker .selected-list__person-wrapper__person{overflow:hidden;min-width:100%;--avatar-size-s:24px;margin-left:0;--color:var(--color-sub1, #323130);color:var(--color-sub1,#323130);padding-bottom:1px;padding-right:4px}.people-picker .selected-list__person-wrapper__overflow{margin-left:25px}.people-picker .selected-list__person-wrapper__overflow__gradient{content:'';position:absolute;margin-right:23px;width:10px;height:90%;top:0;right:0;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%)}.people-picker .selected-list__person-wrapper__overflow__close-icon{height:100%;top:0;margin-top:4px;margin-left:10px;position:absolute;line-height:normal;font-family:FabricMDL2Icons;padding-right:7px;cursor:pointer;right:0;background-color:var(--selected-person-background-color,#f3f2f1);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box{margin:1px 2px 8px}.people-picker .selected-list .flyout .search-box.search-box-start{line-height:normal;margin-inline-start:0;margin-inline-end:0}.people-picker .selected-list .flyout .search-box__input{box-sizing:border-box;border-width:0;border-style:none;width:100%;display:flex;flex:1 0 auto;font-family:var(--default-font-family);position:relative;line-height:normal;outline:0;font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:var(--input-background-color,#fff);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box__input::placeholder{color:var(--placeholder-color,#605e5c)}.people-picker .selected-list .flyout .flyout-root{padding:0;border-radius:2px;min-width:260px;overflow-y:auto;text-align:left;list-style-type:none;background-color:var(--dropdown-background-color,var(--list-background-color,#fff));max-height:var(--mgt-flyout-set-height,unset)}.people-picker .selected-list .flyout .flyout-root li{cursor:pointer}.people-picker .selected-list .flyout .flyout-root .people-list .list-person{display:flex;flex-direction:row;align-items:center;padding:12px;font-style:normal;font-weight:600;font-size:14px}.people-picker .selected-list .flyout .flyout-root .people-list .list-person.focused,.people-picker .selected-list .flyout .flyout-root .people-list .list-person:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area{margin-left:13px;flex:1 1 0;max-height:40px;overflow:hidden;color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text{font-size:14px;font-weight:400;margin:0;padding:0}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text.highlight-search-text{font-weight:700}mgt-person{--avatar-size-s:32px;margin-left:12px;cursor:default}:host .loading-text,:host .search-error-text,mgt-people-picker .loading-text,mgt-people-picker .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;line-height:19px;text-align:center;margin-left:50px;margin-right:50px;color:#0078d4}:host .message-parent,mgt-people-picker .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}:host .people-person-job-title,mgt-people-picker .people-person-job-title{flex:100%;order:3;font-weight:400;font-size:12px}:host .people-person-job-title.uppercase,mgt-people-picker .people-person-job-title.uppercase{text-transform:uppercase}mgt-flyout{flex:1 0 auto}[dir=rtl] mgt-person{margin:0 12px 0 0}[dir=rtl] .selected-list{margin-right:8px!important}[dir=rtl] .selected-list__person-wrapper{margin-left:6px!important}[dir=rtl] .selected-list__person-wrapper__person{margin-right:0!important;margin-left:4px!important}[dir=rtl] .selected-list__person-wrapper__overflow__gradient{right:auto!important;position:absolute!important;margin-right:0!important;width:10px!important;height:90%;top:0}[dir=rtl] .selected-list__person-wrapper__overflow__close-icon{right:auto!important;margin-left:5px!important;left:0!important}[dir=rtl] .people-person-text-area{margin-right:13px;margin-left:0!important}[dir=rtl] .flyout-root{text-align:right!important}
+: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{--selected-person-background-color:#f3f2f1}.mgt-dark{--selected-person-background-color:#4f4f4f}:host{border-radius:2px;font-family:var(--default-font-family);height:38px;display:contents;height:100%;overflow:hidden}:host .root,mgt-people-picker .root{display:block}.people-picker{background-color:var(--input-background-color,#fff);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);padding:6px 0 0}.people-picker:hover{border-color:var(--input-border-color--hover,#323130)}.people-picker.focused{border-color:var(--input-border-color--focus,#0078d4)}.people-picker.disabled{pointer-events:none}.people-picker .selected-list{flex:1 0 auto;display:flex;flex-wrap:wrap;vertical-align:middle;margin:0 8px;list-style-type:none;font-style:normal;font-weight:400;overflow:hidden}.people-picker .selected-list__person-wrapper{display:flex;margin:0 5px 6px 0;align-items:center;border-radius:15px;height:24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;background-color:var(--selected-person-background-color,#f3f2f1)}.people-picker .selected-list__person-wrapper__person{overflow:hidden;min-width:100%;--avatar-size-s:24px;margin-left:0;--color:var(--color-sub1, #323130);color:var(--color-sub1,#323130);padding-bottom:1px;padding-right:4px}.people-picker .selected-list__person-wrapper__overflow{margin-left:25px}.people-picker .selected-list__person-wrapper__overflow__gradient{content:'';position:absolute;margin-right:23px;width:10px;height:90%;top:0;right:0;background-image:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%);background-image:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0) 60%,var(--selected-person-background-color,#f3f2f1) 100%)}.people-picker .selected-list__person-wrapper__overflow__close-icon{height:100%;top:0;margin-top:4px;margin-left:10px;position:absolute;line-height:normal;font-family:FabricMDL2Icons;padding-right:7px;cursor:pointer;right:0;background-color:var(--selected-person-background-color,#f3f2f1);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box{margin:1px 2px 8px}.people-picker .selected-list .flyout .search-box.search-box-start{line-height:normal;margin-inline-start:0;margin-inline-end:0}.people-picker .selected-list .flyout .search-box__input{box-sizing:border-box;border-width:0;border-style:none;width:100%;display:flex;flex:1 0 auto;font-family:var(--default-font-family);position:relative;line-height:normal;outline:0;font-style:normal;font-weight:400;font-size:14px;line-height:19px;background-color:var(--input-background-color,#fff);color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .search-box__input::placeholder{color:var(--placeholder-color,#605e5c)}.people-picker .selected-list .flyout .flyout-root{padding:0;border-radius:2px;min-width:260px;overflow-y:auto;text-align:left;list-style-type:none;background-color:var(--dropdown-background-color,var(--list-background-color,#fff));max-height:var(--mgt-flyout-set-height,unset)}.people-picker .selected-list .flyout .flyout-root li{cursor:pointer}.people-picker .selected-list .flyout .flyout-root .people-list .list-person{display:flex;flex-direction:row;align-items:center;padding:12px;font-style:normal;font-weight:600;font-size:14px}.people-picker .selected-list .flyout .flyout-root .people-list .list-person.focused,.people-picker .selected-list .flyout .flyout-root .people-list .list-person:hover{background-color:var(--dropdown-item-hover-background,var(--input-background-color--hover,#edebe9))}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area{margin-left:13px;flex:1 1 0;max-height:40px;overflow:hidden;color:var(--color-sub1,#323130)}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text{font-size:14px;font-weight:400;margin:0;padding:0}.people-picker .selected-list .flyout .flyout-root .people-list .list-person .people-person-text-area .people-person-text.highlight-search-text{font-weight:700}mgt-person{--avatar-size-s:32px;margin-left:12px;cursor:default}:host .loading-text,:host .search-error-text,mgt-people-picker .loading-text,mgt-people-picker .search-error-text{font-family:var(--default-font-family);font-style:normal;font-weight:600;font-size:14px;line-height:19px;text-align:center;margin-left:50px;margin-right:50px;color:#0078d4}:host .message-parent,mgt-people-picker .message-parent{padding:2px;margin-top:30px;margin-bottom:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;vertical-align:middle}:host .people-person-job-title,mgt-people-picker .people-person-job-title{flex:100%;order:3;font-weight:400;font-size:12px}:host .people-person-job-title.uppercase,mgt-people-picker .people-person-job-title.uppercase{text-transform:uppercase}mgt-flyout{flex:1 0 auto}[dir=rtl] mgt-person{margin:0 12px 0 0}[dir=rtl] .selected-list{margin-right:8px!important}[dir=rtl] .selected-list__person-wrapper{margin-left:6px!important}[dir=rtl] .selected-list__person-wrapper__person{margin-right:0!important;margin-left:4px!important}[dir=rtl] .selected-list__person-wrapper__overflow__gradient{right:auto!important;position:absolute!important;margin-right:0!important;width:10px!important;height:90%;top:0}[dir=rtl] .selected-list__person-wrapper__overflow__close-icon{right:auto!important;margin-left:5px!important;left:0!important}[dir=rtl] .people-person-text-area{margin-right:13px;margin-left:0!important}[dir=rtl] .flyout-root{text-align:right!important}
 `];

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

@@ -318,8 +318,6 @@ /**
     super();
-
+    this.clearState();
     this._showLoading = true;
-    this._groupId = null;
-    this.userInput = '';
     this.showMax = 6;
-    this.selectedPeople = [];
+
     this.disabled = false;
@@ -383,3 +381,4 @@ }
       focused: this._isFocused,
-      'people-picker': true
+      'people-picker': true,
+      disabled: this.disabled
     };
@@ -397,2 +396,14 @@
   /**
+   * Clears state of the component
+   *
+   * @protected
+   * @memberof MgtPeoplePicker
+   */
+  protected clearState(): void {
+    this._groupId = null;
+    this.selectedPeople = [];
+    this.userInput = '';
+  }
+
+  /**
    * Request to reload the state.
@@ -424,3 +435,7 @@ * Use reload instead of load to ensure loading events are fired.
 
-    const placeholder = this.placeholder ? this.placeholder : this.strings.inputPlaceholderText;
+    const placeholder = !this.disabled
+      ? this.placeholder
+        ? this.placeholder
+        : this.strings.inputPlaceholderText
+      : this.placeholder || '';
 
@@ -427,0 +442,0 @@ const selectionMode = this.selectionMode ? this.selectionMode : 'multiple';

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

@@ -162,3 +162,2 @@ /**
     super();
-
     this.showMax = 3;
@@ -168,2 +167,12 @@ }
   /**
+   * Clears the state of the component
+   *
+   * @protected
+   * @memberof MgtPeople
+   */
+  protected clearState(): void {
+    this.people = null;
+  }
+
+  /**
    * Request to reload the state.
@@ -170,0 +179,0 @@ * Use reload instead of load to ensure loading events are fired.

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

@@ -529,2 +529,16 @@ /**
   /**
+   * Clears state of the component
+   *
+   * @protected
+   * @memberof MgtPerson
+   */
+  protected clearState(): void {
+    this._personImage = '';
+    this._personDetails = null;
+    this._fallbackDetails = null;
+    this._fetchedImage = null;
+    this._fetchedPresence = null;
+  }
+
+  /**
    * Render the state when no data is available
@@ -1107,3 +1121,3 @@ *
     if (flyout) {
-      flyout.isOpen = false;
+      flyout.close();
     }
@@ -1126,5 +1140,5 @@
     if (flyout) {
-      flyout.isOpen = true;
+      flyout.open();
     }
   }
 }

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

@@ -328,2 +328,15 @@ /**
   /**
+   * Clears the state of the component
+   *
+   * @protected
+   * @memberof MgtTeamsChannelPicker
+   */
+  protected clearState(): void {
+    this._items = [];
+    this._inputValue = '';
+    this._treeViewState = [];
+    this._focusList = [];
+  }
+
+  /**
    * Renders search icon
@@ -330,0 +343,0 @@ *

src/components/sub-components/mgt-flyout/mgt-flyout-css.ts

@@ -12,3 +12,3 @@ // THIS FILE IS AUTO GENERATED
   css`
-.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}.root .flyout{display:none;position:fixed;z-index:9999999;opacity:0;box-shadow:var(--box-shadow,0 3.2px 7.2px 0 rgba(0,0,0,.132))}.root.visible .flyout{display:inline-block;animation-name:fadeIn;animation-duration:.3s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both;transition:top .3s ease,bottom .3s ease,left .3s ease}@keyframes fadeIn{from{opacity:0;margin-top:-10px;margin-bottom:-10px}to{opacity:1;margin-top:0;margin-bottom:0}}
+.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}.root .scout-top{position:fixed;top:0;left:0}.root .scout-bottom{position:fixed;bottom:0;right:0}.root .flyout{display:none;position:fixed;z-index:9999999;opacity:0;box-shadow:var(--box-shadow,0 3.2px 7.2px 0 rgba(0,0,0,.132))}.root.visible .flyout{display:inline-block;animation-name:fadeIn;animation-duration:.3s;animation-timing-function:cubic-bezier(.1,.9,.2,1);animation-fill-mode:both;transition:top .3s ease,bottom .3s ease,left .3s ease}@keyframes fadeIn{from{opacity:0;margin-top:-10px;margin-bottom:-10px}to{opacity:1;margin-top:0;margin-bottom:0}}
 `];

src/components/sub-components/mgt-flyout/mgt-flyout.ts

@@ -105,2 +105,3 @@ /**
   }
+
   private get _anchor(): HTMLElement {
@@ -110,2 +111,10 @@ return this.renderRoot.querySelector('.anchor');
 
+  private get _topScout(): HTMLElement {
+    return this.renderRoot.querySelector('.scout-top');
+  }
+
+  private get _bottomScout(): HTMLElement {
+    return this.renderRoot.querySelector('.scout-bottom');
+  }
+
   private _isOpen: boolean;
@@ -200,2 +209,4 @@
         </div>
+        <div class="scout-top"></div>
+        <div class="scout-bottom"></div>
         ${flyoutTemplate}
@@ -255,2 +266,4 @@ </div>
       const anchorRect = anchor.getBoundingClientRect();
+      const topScoutRect = this._topScout.getBoundingClientRect();
+      const bottomScoutRect = this._bottomScout.getBoundingClientRect();
 
@@ -351,2 +364,17 @@ const windowRect: IWindowSegment = {
 
+      // check the scout is positioned where it is supposed to be
+      // if it's not, then we are no longer fixed position and should assume
+      // absolute positioning
+      // this is a workaround when a transform is applied to a parent
+      // https://stackoverflow.com/questions/42660332/css-transform-parent-and-fixed-child
+      if (topScoutRect.top !== 0 || topScoutRect.left !== 0) {
+        left -= topScoutRect.left;
+
+        if (typeof bottom !== 'undefined') {
+          bottom += bottomScoutRect.top - windowHeight;
+        } else {
+          top -= topScoutRect.top;
+        }
+      }
+
       if (this.direction === 'rtl') {
@@ -353,0 +381,0 @@ if (left > 100 && this.offsetLeft > 100) {

No alert changes

Improved metrics

Total package byte prevSize

3039635

increased by0.34%

Lines of code

33947

increased by0.66%

Dependency changes

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

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

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