Removed deprecated properties (#781)

* removed deprecated properties

* Removed show-name and show-email from samples

* fixed build

Co-authored-by: Beth Pan <[email protected]>

Author: nmetulev

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

@@ -289,7 +289,6 @@ export class MgtPersonCard extends MgtTemplatedComponent {
 
   constructor() {
     super();
-    this.handleLocalizationChanged();
     this._chatInput = '';
     this._currentSection = null;
     this._history = [];

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

@@ -70,7 +70,6 @@ export abstract class BasePersonCardSection extends MgtTemplatedComponent {
     super();
     this._isCompact = false;
     this._personDetails = null;
-    this.handleLocalizationChanged();
   }
 
   /**

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

@@ -32,6 +32,13 @@ export class MgtPersonCardOrganization extends BasePersonCardSection {
     return styles;
   }
 
+  /**
+   * returns component strings
+   *
+   * @readonly
+   * @protected
+   * @memberof MgtBaseComponent
+   */
   protected get strings() {
     return strings;
   }

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

@@ -770,10 +770,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     const graph = provider.graph.forComponent(this);
 
     if (this.personDetails) {
-      if (
-        !this.personDetails.personImage &&
-        ((this.fetchImage && !this.personImage && !this._fetchedImage) || this.personImage === '@')
-      ) {
+      if (!this.personDetails.personImage && (this.fetchImage && !this.personImage && !this._fetchedImage)) {
         const image = await getPersonImage(graph, this.personDetails, MgtPerson.config.useContactApis);
         if (image) {
           this.personDetails.personImage = image;
@@ -823,19 +820,6 @@ export class MgtPerson extends MgtTemplatedComponent {
     }
   }
 
-  private getImage(): string {
-    if (this.personImage && this.personImage !== '@') {
-      return this.personImage;
-    }
-
-    if (this._fetchedImage) {
-      return this._fetchedImage;
-    }
-
-    const person = this.personDetails;
-    return person && person.personImage ? person.personImage : null;
-  }
-
   /**
    * Gets the user initials
    *
@@ -872,6 +856,58 @@ export class MgtPerson extends MgtTemplatedComponent {
     return initials;
   }
 
+  /**
+   * Gets color from name
+   *
+   * @protected
+   * @param {string} name
+   * @returns {string}
+   * @memberof MgtPerson
+   */
+  protected getColorFromName(name: string): string {
+    const charCodes = name
+      .split('')
+      .map(char => char.charCodeAt(0))
+      .join('');
+    const nameInt = parseInt(charCodes, 10);
+    const colors = [
+      'pinkRed10',
+      'red20',
+      'red10',
+      'orange20',
+      'orangeYellow20',
+      'green10',
+      'green20',
+      'cyan20',
+      'cyan30',
+      'cyanBlue10',
+      'cyanBlue20',
+      'blue10',
+      'blueMagenta30',
+      'blueMagenta20',
+      'magenta20',
+      'magenta10',
+      'magentaPink10',
+      'orange30',
+      'gray30',
+      'gray20'
+    ];
+    return colors[nameInt % colors.length];
+  }
+
+  private getImage(): string {
+    if (this.personImage) {
+      return this.personImage;
+    }
+
+    if (this._fetchedImage) {
+      return this._fetchedImage;
+    }
+
+    const person = this.personDetails;
+    return person && person.personImage ? person.personImage : null;
+  }
+
   private isLetter(char: string) {
     try {
       return char.match(new RegExp('\\p{L}', 'u'));
@@ -954,43 +990,4 @@ export class MgtPerson extends MgtTemplatedComponent {
       flyout.isOpen = true;
     }
   }
-
-  /**
-   * Gets color from name
-   *
-   * @protected
-   * @param {string} name
-   * @returns {string}
-   * @memberof MgtPerson
-   */
-  protected getColorFromName(name: string): string {
-    const charCodes = name
-      .split('')
-      .map(char => char.charCodeAt(0))
-      .join('');
-    const nameInt = parseInt(charCodes, 10);
-    const colors = [
-      'pinkRed10',
-      'red20',
-      'red10',
-      'orange20',
-      'orangeYellow20',
-      'green10',
-      'green20',
-      'cyan20',
-      'cyan30',
-      'cyanBlue10',
-      'cyanBlue20',
-      'blue10',
-      'blueMagenta30',
-      'blueMagenta20',
-      'magenta20',
-      'magenta10',
-      'magentaPink10',
-      'orange30',
-      'gray30',
-      'gray20'
-    ];
-    return colors[nameInt % colors.length];
-  }
 }

packages/mgt-element/src/components/baseComponent.ts

@@ -22,7 +22,7 @@ export enum ComponentMediaQuery {
   mobile = '',
 
   /**
-   * devies with width < 1200
+   * devices with width < 1200
    */
   tablet = 'tablet',
 
@@ -33,7 +33,7 @@ export enum ComponentMediaQuery {
 }
 
 /**
- * BaseComponent extends LitElement including ShadowRoot toggle and fireCustomEvent features
+ * BaseComponent extends LitElement adding mgt specific features to all components
  *
  * @export  MgtBaseComponent
  * @abstract
@@ -49,26 +49,6 @@ export abstract class MgtBaseComponent extends LitElement {
    */
   @internalProperty() protected direction = 'ltr';
 
-  /**
-   * Get ShadowRoot toggle, returns value of _useShadowRoot
-   *
-   * @static _useShadowRoot
-   * @memberof MgtBaseComponent
-   */
-  public static get useShadowRoot() {
-    return this._useShadowRoot;
-  }
-
-  /**
-   * Set ShadowRoot toggle value
-   *
-   * @static _useShadowRoot
-   * @memberof MgtBaseComponent
-   */
-  public static set useShadowRoot(value: boolean) {
-    this._useShadowRoot = value;
-  }
-
   /**
    * Gets the ComponentMediaQuery of the component
    *
@@ -108,8 +88,6 @@ export abstract class MgtBaseComponent extends LitElement {
     return this._isFirstUpdated;
   }
 
-  private static _useShadowRoot: boolean = true;
-
   /**
    * returns component strings
    *
@@ -132,12 +110,10 @@ export abstract class MgtBaseComponent extends LitElement {
 
   constructor() {
     super();
-    if (this.isShadowRootDisabled()) {
-      (this as any)._needsShimAdoptedStyleSheets = true;
-    }
     this.handleLocalizationChanged = this.handleLocalizationChanged.bind(this);
-    this.updateDirection = this.updateDirection.bind(this);
-    this.updateDirection();
+    this.handleDirectionChanged = this.handleDirectionChanged.bind(this);
+    this.handleDirectionChanged();
+    this.handleLocalizationChanged();
   }
 
   /**
@@ -148,39 +124,18 @@ export abstract class MgtBaseComponent extends LitElement {
   public connectedCallback() {
     super.connectedCallback();
     LocalizationHelper.onStringsUpdated(this.handleLocalizationChanged);
-    LocalizationHelper.onDirectionUpdated(this.updateDirection);
+    LocalizationHelper.onDirectionUpdated(this.handleDirectionChanged);
   }
 
   /**
-   * Invoked each time the custom element is removed from the document
+   * Invoked each time the custom element is removed from a document-connected element
    *
    * @memberof MgtBaseComponent
    */
   public disconnectedCallback() {
     super.disconnectedCallback();
     LocalizationHelper.removeOnStringsUpdated(this.handleLocalizationChanged);
-    LocalizationHelper.removeOnDirectionUpdated(this.updateDirection);
-  }
-
-  /**
-   * Request localization changes when the 'strings' event is detected
-   *
-   * @protected
-   * @memberof MgtBaseComponent
-   */
-  protected handleLocalizationChanged() {
-    this.requestUpdate();
-    LocalizationHelper.updateStringsForTag(this.tagName, this.strings);
-  }
-
-  /**
-   * Receive ShadowRoot Disabled value
-   *
-   * @returns boolean _useShadowRoot value
-   * @memberof MgtBaseComponent
-   */
-  public isShadowRootDisabled() {
-    return !MgtBaseComponent._useShadowRoot || !(this.constructor as typeof MgtBaseComponent)._useShadowRoot;
+    LocalizationHelper.removeOnDirectionUpdated(this.handleDirectionChanged);
   }
 
   /**
@@ -232,17 +187,6 @@ export abstract class MgtBaseComponent extends LitElement {
     return this.dispatchEvent(event);
   }
 
-  /**
-   * method to create ShadowRoot if disabled flag isn't present
-   *
-   * @protected
-   * @returns boolean
-   * @memberof MgtBaseComponent
-   */
-  protected createRenderRoot() {
-    return this.isShadowRootDisabled() ? this : super.createRenderRoot();
-  }
-
   /**
    * Invoked whenever the element is updated. Implement to perform
    * post-updating tasks via DOM APIs, for example, focusing an element.
@@ -313,13 +257,12 @@ export abstract class MgtBaseComponent extends LitElement {
     this.requestUpdate('isLoadingState');
   }
 
-  /**
-   * Adds rtl attribute to component if direction is returned rtl
-   *
-   * @private
-   * @memberof MgtBaseComponent
-   */
-  protected updateDirection() {
+  private handleLocalizationChanged() {
+    LocalizationHelper.updateStringsForTag(this.tagName, this.strings);
+    this.requestUpdate();
+  }
+
+  private handleDirectionChanged() {
     this.direction = LocalizationHelper.getDocumentDirection();
   }
 }

packages/mgt-element/src/components/templatedComponent.ts

@@ -6,9 +6,10 @@
  */
 
 import { html, PropertyValues } from 'lit-element';
-import { TemplateContext } from '../utils/TemplateContext';
+
 import { equals } from '../utils/equals';
 import { MgtBaseComponent } from './baseComponent';
+import { TemplateContext } from '../utils/TemplateContext';
 import { TemplateHelper } from '../utils/TemplateHelper';
 
 /**
@@ -36,15 +37,6 @@ interface RenderedTemplates {
  * @extends {MgtBaseComponent}
  */
 export abstract class MgtTemplatedComponent extends MgtBaseComponent {
-  /**
-   * Collection of functions to be used in template binding
-   *
-   * @type {MgtElement.TemplateContext}
-   * @memberof MgtTemplatedComponent
-   * @deprecated since 1.2 - use templateContext instead
-   */
-  public templateConverters: TemplateContext;
-
   /**
    * Additional data context to be used in template binding
    * Use this to add event listeners or value converters
@@ -70,10 +62,6 @@ export abstract class MgtTemplatedComponent extends MgtBaseComponent {
     super();
 
     this.templateContext = this.templateContext || {};
-    this.templateConverters = this.templateConverters || {};
-
-    this.templateContext.lower = (str: string) => str.toLowerCase();
-    this.templateContext.upper = (str: string) => str.toUpperCase();
   }
 
   /**
@@ -137,7 +125,6 @@ export abstract class MgtTemplatedComponent extends MgtBaseComponent {
     div.dataset.generated = 'template';
 
     TemplateHelper.renderTemplate(div, this.templates[templateType], context, {
-      ...this.templateConverters,
       ...this.templateContext
     });