@microsoft/mgt-components - npm Package Compare versions

Comparing version 2.0.0-preview.7 to 2.0.0-preview.8

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

@@ -40,2 +40,7 @@ /**
     static get styles(): import("lit-element").CSSResult[];
+    protected get strings(): {
+        sendEmailLinkSubtitle: string;
+        startChatLinkSubtitle: string;
+        showMoreSectionButton: string;
+    };
     /**
@@ -42,0 +47,0 @@ * Get the scopes required for the person card

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

@@ -42,2 +42,3 @@ /**
 import { MgtPersonCardProfile } from './sections/mgt-person-card-profile/mgt-person-card-profile';
+import { strings } from './strings';
 import '../sub-components/mgt-spinner/mgt-spinner';
@@ -67,2 +68,3 @@ export * from './mgt-person-card.types';
         super();
+        this.handleLocalizationChanged();
         this._chatInput = '';
@@ -80,2 +82,5 @@ this._currentSection = null;
     }
+    get strings() {
+        return strings;
+    }
     /**
@@ -347,3 +352,3 @@ * Get the scopes required for the person card
           ${getSvg(SvgIcon.SmallEmail)}
-          <span>Send email</span>
+          <span>${this.strings.sendEmailLinkSubtitle}</span>
         </div>
@@ -358,3 +363,3 @@ `;
           ${getSvg(SvgIcon.SmallChat)}
-          <span>Start chat</span>
+          <span>${this.strings.startChatLinkSubtitle}</span>
         </div>
@@ -455,3 +460,5 @@ `;
             <div class="section__title">${section.displayName}</div>
-            <a class="section__show-more" @click=${() => this.updateCurrentSection(section)}>Show more</a>
+            <a class="section__show-more" @click=${() => this.updateCurrentSection(section)}
+              >${this.strings.showMoreSectionButton}</a
+            >
           </div>
@@ -458,0 +465,0 @@ <div class="section__content">${section.asCompactView()}</div>

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

@@ -31,2 +31,3 @@ /**
         this._personDetails = null;
+        this.handleLocalizationChanged();
     }
@@ -33,0 +34,0 @@ /**

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

@@ -35,2 +35,5 @@ /**
     static get styles(): import("lit-element").CSSResult[];
+    protected get strings(): {
+        contactSectionTitle: string;
+    };
     /**
@@ -37,0 +40,0 @@ * Returns true if the component has data it can render

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

@@ -23,2 +23,3 @@ /**
 import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
+import { strings } from './strings';
 /**
@@ -95,2 +96,5 @@ * The contact details subsection of the person card
     }
+    get strings() {
+        return strings;
+    }
     /**
@@ -119,3 +123,3 @@ * Returns true if the component has data it can render
     get displayName() {
-        return 'Contact';
+        return this.strings.contactSectionTitle;
     }
@@ -122,0 +126,0 @@ // Defines the skeleton for what contact fields are available and what they do.

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

@@ -23,2 +23,6 @@ /**
     static get styles(): import("lit-element").CSSResult[];
+    protected get strings(): {
+        filesSectionTitle: string;
+        sharedTextSubtitle: string;
+    };
     private _files;
@@ -25,0 +29,0 @@ constructor(files: SharedInsight[]);

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

@@ -22,2 +22,3 @@ /**
 import { styles } from './mgt-person-card-files-css';
+import { strings } from './strings';
 /**
@@ -42,2 +43,5 @@ * The files subsection of the person card
     }
+    get strings() {
+        return strings;
+    }
     /**
@@ -51,3 +55,3 @@ * The name for display in the overview section.
     get displayName() {
-        return 'Files';
+        return this.strings.filesSectionTitle;
     }
@@ -117,3 +121,3 @@ /**
       <div class="root" dir=${this.direction}>
-        <div class="title">Files</div>
+        <div class="title">${this.strings.filesSectionTitle}</div>
         ${contentTemplate}
@@ -135,3 +139,3 @@ </div>
           <div class="file__last-modified">
-            Shared ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
+            ${this.strings.sharedTextSubtitle} ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
           </div>
@@ -138,0 +142,0 @@ `

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

@@ -23,2 +23,5 @@ /**
     static get styles(): import("lit-element").CSSResult[];
+    protected get strings(): {
+        emailsSectionTitle: string;
+    };
     private _messages;
@@ -25,0 +28,0 @@ constructor(messages: Message[]);

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

@@ -21,2 +21,3 @@ /**
 import { styles } from './mgt-person-card-messages-css';
+import { strings } from './strings';
 /**
@@ -41,2 +42,5 @@ * The email messages subsection of the person card
     }
+    get strings() {
+        return strings;
+    }
     /**
@@ -50,3 +54,3 @@ * The name for display in the overview section.
     get displayName() {
-        return 'Emails';
+        return this.strings.emailsSectionTitle;
     }
@@ -121,3 +125,3 @@ /**
       <div class="root">
-        <div class="title">Emails</div>
+        <div class="title">${this.strings.emailsSectionTitle}</div>
         ${contentTemplate}
@@ -124,0 +128,0 @@ </div>

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

@@ -24,2 +24,9 @@ /**
     static get styles(): import("lit-element").CSSResult[];
+    protected get strings(): {
+        reportsToSectionTitle: string;
+        directReportsSectionTitle: string;
+        organizationSectionTitle: string;
+        youWorkWithSubSectionTitle: string;
+        userWorksWithSubSectionTitle: string;
+    };
     private _state;
@@ -26,0 +33,0 @@ private _me;

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

@@ -21,2 +21,3 @@ /**
 import { styles } from './mgt-person-card-organization-css';
+import { strings } from './strings';
 /**
@@ -42,2 +43,5 @@ * The member organization subsection of the person card
     }
+    get strings() {
+        return strings;
+    }
     /**
@@ -53,5 +57,5 @@ * The name for display in the overview section.
         if (!person.manager && directReports && directReports.length) {
-            return `Direct reports (${directReports.length})`;
+            return `${this.strings.directReportsSectionTitle} (${directReports.length})`;
         }
-        return 'Reports to';
+        return this.strings.reportsToSectionTitle;
     }
@@ -121,3 +125,3 @@ /**
       <div class="root" dir=${this.direction}>
-        <div class="title">Organization</div>
+        <div class="title">${this.strings.organizationSectionTitle}</div>
         ${contentTemplate}
@@ -290,3 +294,5 @@ </div>
         }
-        const subtitle = this._me.id === this._state.person.id ? 'You work with' : `${this._state.person.givenName} works with`;
+        const subtitle = this._me.id === this._state.person.id
+            ? this.strings.youWorkWithSubSectionTitle
+            : `${this._state.person.givenName} ${this.strings.userWorksWithSubSectionTitle}`;
         return html `
@@ -293,0 +299,0 @@ <div class="divider"></div>

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

@@ -23,2 +23,20 @@ /**
     static get styles(): import("lit-element").CSSResult[];
+    protected get strings(): {
+        SkillsAndExperienceSectionTitle: string;
+        AboutCompactSectionTitle: string;
+        SkillsSubSectionTitle: string;
+        LanguagesSubSectionTitle: string;
+        WorkExperienceSubSectionTitle: string;
+        EducationSubSectionTitle: string;
+        professionalInterestsSubSectionTitle: string;
+        personalInterestsSubSectionTitle: string; /**
+         * The user profile subsection of the person card
+         *
+         * @export
+         * @class MgtPersonCardProfile
+         * @extends {MgtTemplatedComponent}
+         */
+        birthdaySubSectionTitle: string;
+        currentYearSubtitle: string;
+    };
     /**
@@ -25,0 +43,0 @@ * The name for display in the overview section.

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

@@ -20,2 +20,3 @@ /**
 import { styles } from './mgt-person-card-profile-css';
+import { strings } from './strings';
 /**
@@ -40,2 +41,5 @@ * The user profile subsection of the person card
     }
+    get strings() {
+        return strings;
+    }
     /**
@@ -49,3 +53,3 @@ * The name for display in the overview section.
     get displayName() {
-        return 'Skills & Experience';
+        return this.strings.SkillsAndExperienceSectionTitle;
     }
@@ -138,3 +142,3 @@ /**
       <div class="root" dir=${this.direction}>
-        <div class="title">About</div>
+        <div class="title">${this.strings.AboutCompactSectionTitle}</div>
         ${this.renderSubSections()}
@@ -195,3 +199,3 @@ </div>
       <section>
-        <div class="section__title">Languages</div>
+        <div class="section__title">${this.strings.LanguagesSubSectionTitle}</div>
         <div class="section__content">
@@ -227,3 +231,3 @@ <div class="token-list">
       <section>
-        <div class="section__title">Skills</div>
+        <div class="section__title">${this.strings.SkillsSubSectionTitle}</div>
         <div class="section__content">
@@ -271,3 +275,3 @@ <div class="token-list">
       <section>
-        <div class="section__title">Work Experience</div>
+        <div class="section__title">${this.strings.WorkExperienceSubSectionTitle}</div>
         <div class="section__content">
@@ -313,3 +317,3 @@ <div class="data-list">
       <section>
-        <div class="section__title">Education</div>
+        <div class="section__title">${this.strings.EducationSubSectionTitle}</div>
         <div class="section__content">
@@ -344,3 +348,3 @@ <div class="data-list">
       <section>
-        <div class="section__title">Professional Interests</div>
+        <div class="section__title">${this.strings.professionalInterestsSubSectionTitle}</div>
         <div class="section__content">
@@ -375,3 +379,3 @@ <div class="token-list">
       <section>
-        <div class="section__title">Personal Interests</div>
+        <div class="section__title">${this.strings.personalInterestsSubSectionTitle}</div>
         <div class="section__content">
@@ -433,3 +437,3 @@ <div class="token-list">
         }
-        const end = event.endMonthYear ? new Date(event.endMonthYear).getFullYear() : 'Current';
+        const end = event.endMonthYear ? new Date(event.endMonthYear).getFullYear() : this.strings.currentYearSubtitle;
         return `${start} — ${end}`;
@@ -436,0 +440,0 @@ }

package.json

 {
   "name": "@microsoft/mgt-components",
-  "version": "2.0.0-preview.7",
+  "version": "2.0.0-preview.8",
   "description": "The Microsoft Graph Toolkit Components",
@@ -43,3 +43,3 @@ "keywords": [
     "@microsoft/microsoft-graph-types-beta": "github:microsoftgraph/msgraph-typescript-typings#beta",
-    "@microsoft/mgt-element": "2.0.0-preview.7",
+    "@microsoft/mgt-element": "2.0.0-preview.8",
     "office-ui-fabric-core": "11.0.0"
@@ -46,0 +46,0 @@ },

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

@@ -30,2 +30,3 @@ /**
 import { MgtPersonCardConfig, MgtPersonCardState } from './mgt-person-card.types';
+import { strings } from './strings';
 
@@ -75,2 +76,6 @@ import '../sub-components/mgt-spinner/mgt-spinner';
 
+  protected get strings() {
+    return strings;
+  }
+
   /**
@@ -289,2 +294,3 @@ * Get the scopes required for the person card
     super();
+    this.handleLocalizationChanged();
     this._chatInput = '';
@@ -514,3 +520,3 @@ this._currentSection = null;
           ${getSvg(SvgIcon.SmallEmail)}
-          <span>Send email</span>
+          <span>${this.strings.sendEmailLinkSubtitle}</span>
         </div>
@@ -526,3 +532,3 @@ `;
           ${getSvg(SvgIcon.SmallChat)}
-          <span>Start chat</span>
+          <span>${this.strings.startChatLinkSubtitle}</span>
         </div>
@@ -635,3 +641,5 @@ `;
             <div class="section__title">${section.displayName}</div>
-            <a class="section__show-more" @click=${() => this.updateCurrentSection(section)}>Show more</a>
+            <a class="section__show-more" @click=${() => this.updateCurrentSection(section)}
+              >${this.strings.showMoreSectionButton}</a
+            >
           </div>
@@ -638,0 +646,0 @@ <div class="section__content">${section.asCompactView()}</div>

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

@@ -73,2 +73,3 @@ /**
     this._personDetails = null;
+    this.handleLocalizationChanged();
   }
@@ -75,0 +76,0 @@

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

@@ -17,2 +17,3 @@ /**
 import { getSvg, SvgIcon } from '../../../../utils/SvgHelper';
+import { strings } from './strings';
 
@@ -54,2 +55,6 @@ /**
 
+  protected get strings() {
+    return strings;
+  }
+
   /**
@@ -143,3 +148,3 @@ * Returns true if the component has data it can render
   public get displayName(): string {
-    return 'Contact';
+    return this.strings.contactSectionTitle;
   }
@@ -146,0 +151,0 @@

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

@@ -15,2 +15,3 @@ /**
 import { styles } from './mgt-person-card-files-css';
+import { strings } from './strings';
 
@@ -34,2 +35,6 @@ /**
 
+  protected get strings() {
+    return strings;
+  }
+
   private _files: SharedInsight[];
@@ -50,3 +55,3 @@
   public get displayName(): string {
-    return 'Files';
+    return this.strings.filesSectionTitle;
   }
@@ -120,3 +125,3 @@
       <div class="root" dir=${this.direction}>
-        <div class="title">Files</div>
+        <div class="title">${this.strings.filesSectionTitle}</div>
         ${contentTemplate}
@@ -139,3 +144,3 @@ </div>
           <div class="file__last-modified">
-            Shared ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
+            ${this.strings.sharedTextSubtitle} ${getRelativeDisplayDate(new Date(file.lastShared.sharedDateTime))}
           </div>
@@ -142,0 +147,0 @@ `

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

@@ -15,2 +15,3 @@ /**
 import { styles } from './mgt-person-card-messages-css';
+import { strings } from './strings';
 
@@ -34,2 +35,6 @@ /**
 
+  protected get strings() {
+    return strings;
+  }
+
   private _messages: Message[];
@@ -50,3 +55,3 @@
   public get displayName(): string {
-    return 'Emails';
+    return this.strings.emailsSectionTitle;
   }
@@ -125,3 +130,3 @@
       <div class="root">
-        <div class="title">Emails</div>
+        <div class="title">${this.strings.emailsSectionTitle}</div>
         ${contentTemplate}
@@ -128,0 +133,0 @@ </div>

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

@@ -16,2 +16,3 @@ /**
 import { styles } from './mgt-person-card-organization-css';
+import { strings } from './strings';
 
@@ -35,2 +36,6 @@ /**
 
+  protected get strings() {
+    return strings;
+  }
+
   private _state: MgtPersonCardState;
@@ -56,6 +61,6 @@ private _me: User;
     if (!person.manager && directReports && directReports.length) {
-      return `Direct reports (${directReports.length})`;
+      return `${this.strings.directReportsSectionTitle} (${directReports.length})`;
     }
 
-    return 'Reports to';
+    return this.strings.reportsToSectionTitle;
   }
@@ -134,3 +139,3 @@
       <div class="root" dir=${this.direction}>
-        <div class="title">Organization</div>
+        <div class="title">${this.strings.organizationSectionTitle}</div>
         ${contentTemplate}
@@ -321,3 +326,5 @@ </div>
     const subtitle =
-      this._me.id === this._state.person.id ? 'You work with' : `${this._state.person.givenName} works with`;
+      this._me.id === this._state.person.id
+        ? this.strings.youWorkWithSubSectionTitle
+        : `${this._state.person.givenName} ${this.strings.userWorksWithSubSectionTitle}`;
 
@@ -324,0 +331,0 @@ return html`

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

@@ -13,2 +13,3 @@ /**
 import { styles } from './mgt-person-card-profile-css';
+import { strings } from './strings';
 
@@ -32,2 +33,6 @@ /**
 
+  protected get strings() {
+    return strings;
+  }
+
   /**
@@ -41,3 +46,3 @@ * The name for display in the overview section.
   public get displayName(): string {
-    return 'Skills & Experience';
+    return this.strings.SkillsAndExperienceSectionTitle;
   }
@@ -153,3 +158,3 @@
       <div class="root" dir=${this.direction}>
-        <div class="title">About</div>
+        <div class="title">${this.strings.AboutCompactSectionTitle}</div>
         ${this.renderSubSections()}
@@ -216,3 +221,3 @@ </div>
       <section>
-        <div class="section__title">Languages</div>
+        <div class="section__title">${this.strings.LanguagesSubSectionTitle}</div>
         <div class="section__content">
@@ -252,3 +257,3 @@ <div class="token-list">
       <section>
-        <div class="section__title">Skills</div>
+        <div class="section__title">${this.strings.SkillsSubSectionTitle}</div>
         <div class="section__content">
@@ -299,3 +304,3 @@ <div class="token-list">
       <section>
-        <div class="section__title">Work Experience</div>
+        <div class="section__title">${this.strings.WorkExperienceSubSectionTitle}</div>
         <div class="section__content">
@@ -345,3 +350,3 @@ <div class="data-list">
       <section>
-        <div class="section__title">Education</div>
+        <div class="section__title">${this.strings.EducationSubSectionTitle}</div>
         <div class="section__content">
@@ -379,3 +384,3 @@ <div class="data-list">
       <section>
-        <div class="section__title">Professional Interests</div>
+        <div class="section__title">${this.strings.professionalInterestsSubSectionTitle}</div>
         <div class="section__content">
@@ -413,3 +418,3 @@ <div class="token-list">
       <section>
-        <div class="section__title">Personal Interests</div>
+        <div class="section__title">${this.strings.personalInterestsSubSectionTitle}</div>
         <div class="section__content">
@@ -479,3 +484,3 @@ <div class="token-list">
 
-    const end = event.endMonthYear ? new Date(event.endMonthYear).getFullYear() : 'Current';
+    const end = event.endMonthYear ? new Date(event.endMonthYear).getFullYear() : this.strings.currentYearSubtitle;
     return `${start} — ${end}`;
@@ -482,0 +487,0 @@ }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of package files

454

increased by7.08%

Lines of code

33130

increased by0.94%

Worsened metrics

Total package byte prevSize

2949011

decreased by-0.64%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/runtime@7.26.7(transitive)

• + Added@microsoft/mgt-element@2.0.0-preview.8(transitive)

• + Added@microsoft/microsoft-graph-client@2.2.1(transitive)

• + Addedidb@5.0.8(transitive)

• + Addedlit-element@2.5.1(transitive)

• + Addedlit-html@1.4.1(transitive)

• + Addedmsal@1.4.18(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedtslib@1.14.1(transitive)

• Updated@microsoft/mgt-element@2.0.0-preview.8