Add another provider example

packages/provider/README.md

@@ -47,16 +47,17 @@ or entry point urls on the same page) or to deliver attribute changes across dif
 
 ### Flow
 
-#### Example 1
+#### Example 1 - Simple communication
 
 ```html
 <dbp-provider lang>
   <dbp-language-select></dbp-language-select>
+  <!-- 'subscribe="lang"' is short for 'subscribe="lang:lang"' --> 
   <dbp-person-select subscribe="lang"></dbp-person-select>
 </dbp-provider>
 ```
 
-There is a provider, a language selector and a person selector.
+There is a provider around a language selector and a person selector.
 The flow looks like this:
 
 ```mermaid
@@ -72,6 +73,53 @@ sequenceDiagram
     P->>PS: "lang" was updated to "en"
 ```
 
+1) The language selector propagates a change of `lang` (because the user clicked on it)
+2) The provider receives that event, because it has the attribute `lang` set
+3) The provider executes a callback with the updated value for `lang` in all components that subscribed `lang`
+
+#### Example 2 - Two providers
+
+```html
+<!--  Provider1 -->
+<dbp-provider auth>
+  <!--  Provider2 -->
+  <dbp-provider lang>
+    <dbp-auth-keycloak></dbp-auth-keycloak>
+    <dbp-language-select></dbp-language-select>
+    <dbp-person-select subscribe="auth,lang"></dbp-person-select>
+  </dbp-provider>
+</dbp-provider>
+```
+
+There is two cascaded providers around an auth component, a language selector and a person selector.
+The flow looks like this:
+
+```mermaid
+sequenceDiagram
+    participant P1 as Provider1
+    participant P2 as Provider2
+    participant AK as AuthKeycloak
+    participant LS as LanguageSelect
+    participant PS as PersonSelect
+    Note over P1,PS: Initialization
+    P1-->P1: Has attribute "auth"
+    P2-->P2: Has attribute "lang"
+    PS->>P1: Subscribe to "auth"
+    PS->>P2: Subscribe to "lang"
+    Note over P1,PS: Communication
+    LS->>P2: "lang" should be "en"
+    P2->>PS: "lang" was updated to "en"
+    AK->>P1: "auth" should be "{...json...}"
+    P1->>PS: "auth" was updated to "{...json...}"
+```
+
+1) The language selector propagates a change of `lang` (because the user clicked on it)
+2) The provider 2 receives that event, because it has the attribute `lang` set
+3) The provider 2 executes a callback with the updated value for `lang` in all components that subscribed `lang`
+4) The auth component propagates a change of `auth` (because a new token was issued by Keycloak)
+5) The provider 1 receives that event, because it has the attribute `auth` set
+6) The provider 1 executes a callback with the updated value for `auth` in all components that subscribed `auth`
+
 ### Attributes
 
 - `init` (optional): set your vars to values