[FEATURE] Allow a component to receive it's provider via props

[gavinbarron]

Add a provider property to the MgtBaseComponent.

This will allow for usages in scenarios where the an application needs to have both the ability to sign in and to provide mock data when users are not authenticated, the existing Providers.globalProvider can be set to the mock provider while the mgt-login component could have an Msal2Provider object supplied as a property like this:

      <mgt-login></mgt-login>
      <mgt-agenda group-by-day></mgt-agenda>
      <script type="module">
        import { Providers, MockProvider, Msal2Provider } from './packages/mgt/dist/es6/index.js';
        const authProvider = new Msal2Provider({clientId: "client-id",
          redirectUri: "redirectUrl",
          scopes: ["user.read", "user.read.all", "calendars.read"]
        });
        const login = document.querySelector('mgt-login');
        login.provider = authProvider;
        const mockProvider = new MockProvider(true);
        Providers.globalProvider = mockProvider;
      </script>

• [ ] All component usage of Providers.globalProvider converted to this.provider
• [ ] Refactor Providers.getCacheId to IProvider.getCacheId and reference via the instance of the provider for the component in use to prevent incorrect data being shown when a component has a provider that is not the globalProvider
• [ ] Ensure that baseComponent updates event listeners so that it listens to the correct provider instance for onStateChanged (exposed via onProviderUpdated on the Proiders static class) and onActiveAccountChanged
• [ ] Ensure that each component resets its internal state on provider change

[musale]

Will this component provider always take precedence over the globalProvider?

[gavinbarron]

In the scope of that component tree, yes