feat: expose updated event on mgt components (#3357)

* feat: expose updated event

makes updated event of MgtBaseTaskComponent accessible on Person control

* add updated event to baseTaskComponent

* method order

* Update agenda.html.stories.js

* stories

* login story

* people

* peoplePicker

* personCard

* picker

* planner

* search

* taxonomy

* teamsChannel

* themeToggle

* todo

---------

Co-authored-by: Musale Martin <[email protected]>

Author: ThomasPe

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

@@ -27,6 +27,7 @@ import { registerComponent } from '@microsoft/mgt-element';
  * @class MgtAgenda
  * @extends {MgtTemplatedComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<MicrosoftGraph.Event>} eventClick - Fired when user click an event
  *
  * @cssprop --event-box-shadow - {String} Event box shadow color and size

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts

@@ -71,6 +71,7 @@ const isSharedInsight = (sharedInsightFile: SharedInsight): sharedInsightFile is
  * @export
  * @class MgtFileList
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<MicrosoftGraph.DriveItem>} itemClick - Fired when a user clicks on a file.
  * it returns the file (DriveItem) details.
  *

packages/mgt-components/src/components/mgt-file/mgt-file.ts

@@ -42,6 +42,8 @@ export const registerMgtFileComponent = () => registerComponent('file', MgtFile)
  * @class MgtFile
  * @extends {MgtTemplatedComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
+ *
  * @cssprop --file-type-icon-height - {Length} file type icon height. Default value is 28px.
  * @cssprop --file-border - {String} file item border style. Default value is "1px solid transparent".
  * @cssprop --file-border-radius - {String} the border radius of the file component. Default value is 4px.

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

@@ -83,6 +83,7 @@ export const registerMgtGetComponent = () => registerComponent('get', MgtGet);
 /**
  * Custom element for making Microsoft Graph get queries
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<DataChangedDetail>} dataChange - Fired when data changes bubbles, composed, and is not cancelable.
  *
  * @export

packages/mgt-components/src/components/mgt-login/mgt-login.ts

@@ -54,6 +54,7 @@ export const registerMgtLoginComponent = () => {
  * @class MgtLogin
  * @extends {MgtTemplatedTaskComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<undefined>} loginInitiated - Fired when login is initiated by the user
  * @fires {CustomEvent<undefined>} loginCompleted - Fired when login completes
  * @fires {CustomEvent<undefined>} loginFailed - Fired when login fails

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

@@ -77,6 +77,7 @@ export const registerMgtPeoplePickerComponent = () => {
  * @class MgtPicker
  * @extends {MgtTemplatedTaskComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<IDynamicPerson[]>} selectionChanged - Fired when set of selected people changes
  *
  * @cssprop --people-picker-selected-option-background-color - {Color} the background color of the selected person.

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

@@ -33,6 +33,8 @@ import { MgtPerson, registerMgtPersonComponent } from '../mgt-person/mgt-person'
  * @class MgtPeople
  * @extends {MgtTemplatedTaskComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
+ *
  * @cssprop --people-list-margin- {String} the margin around the list of people. Default is 8px 4px 8px 8px.
  * @cssprop --people-avatar-gap - {String} the gap between the people in the list. Default is 4px.
  * @cssprop --people-overflow-font-color - {Color} the color of the overflow text.

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

@@ -86,6 +86,7 @@ export const registerMgtPersonCardComponent = () => {
  * @class MgtPersonCard
  * @extends {MgtTemplatedComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<null>} expanded - Fired when expanded details section is opened
  *
  * @cssprop --person-card-line1-font-size - {Length} Font size of line 1

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

@@ -75,6 +75,7 @@ export const registerMgtPersonComponent = () => {
  * @class MgtPerson
  * @extends {MgtTemplatedComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
  * @fires {CustomEvent<IDynamicPerson>} line1clicked - Fired when line1 is clicked
  * @fires {CustomEvent<IDynamicPerson>} line2clicked - Fired when line2 is clicked
  * @fires {CustomEvent<IDynamicPerson>} line3clicked - Fired when line3 is clicked
@@ -952,7 +953,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     }
 
     // if we have more than one line we add the second line
-    if (this.view !== 'oneline') {
+    if (!this.isOneLine()) {
       const text = this.getTextFromProperty(person, this.line2Property);
       if (this.hasTemplate('line2')) {
         // Render the line2 template
@@ -973,7 +974,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     }
 
     // if we have a third or fourth line we add the third line
-    if (this.view === 'threelines' || this.view === 'fourlines') {
+    if (this.isThreeLines() || this.isFourLines()) {
       const text = this.getTextFromProperty(person, this.line3Property);
       if (this.hasTemplate('line3')) {
         // Render the line3 template
@@ -994,7 +995,7 @@ export class MgtPerson extends MgtTemplatedTaskComponent {
     }
 
     // add the fourth line if necessary
-    if (this.view === 'fourlines') {
+    if (this.isFourLines()) {
       const text = this.getTextFromProperty(person, this.line4Property);
       if (this.hasTemplate('line4')) {
         // Render the line4 template

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

@@ -34,6 +34,8 @@ export const registerMgtPickerComponent = () => {
  * @class MgtPicker
  * @extends {MgtTemplatedTaskComponent}
  *
+ * @fires {CustomEvent<undefined>} updated - Fired when the component is updated
+ *
  * @cssprop --picker-background-color - {Color} Picker component background color
  * @cssprop --picker-list-max-height - {String} max height for options list. Default value is 380px.
  */