Adds theme property for compound container (#3936)

SAP · Sep 24, 2024 · cbef792 · cbef792
1 parent cdd4f4d
commit cbef792
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 0 deletions.
diff --git a/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js b/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js
@@ -105,6 +105,18 @@ describe('Compound Container Tests', () => {
         });
     });
 
+    it('LuigiClient API - getCurrentTheme', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .contains('getTheme')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith('LuigiClient.getCurrentTheme()="sap_fiori_3"');
+        });
+    });
+
     it('LuigiClient API updateContext', () => {
       cy.on('window:alert', stub);
 

diff --git a/container/src/LuigiCompoundContainer.svelte b/container/src/LuigiCompoundContainer.svelte
@@ -27,6 +27,7 @@
         reflect: false,
         attribute: 'search-params',
       },
+      theme: { type: 'String', reflect: false, attribute: 'theme' },
       userSettings: {
         type: 'Object',
         reflect: false,
@@ -76,6 +77,7 @@
   export let nodeParams: any;
   export let pathParams: any;
   export let searchParams: any;
+  export let theme: string;
   export let userSettings: any;
   export let viewurl: string;
   export let webcomponent: any;
@@ -99,6 +101,7 @@
       nodeParams &&
       pathParams &&
       searchParams &&
+      theme &&
       userSettings
     );
   };

diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html
@@ -35,6 +35,7 @@ <h3>
         anchor="testAnchorCompound"
         defer-init="false"
         webcomponent="true"
+        theme="sap_fiori_3"
       ></luigi-compound-container>
     </div>
 

diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js
@@ -43,6 +43,9 @@ export default class extends HTMLElement {
     const getAnchorBtn = document.createElement('template');
     getAnchorBtn.innerHTML = '<button id="getAnchor">getAnchor</button>';
 
+    const getThemeBtn = document.createElement('template');
+    getThemeBtn.innerHTML = '<button id="getTheme">getTheme</button>';
+
     const setViewGroupDataBtn = document.createElement('template');
     setViewGroupDataBtn.innerHTML = '<button id="setViewGroupData">setViewGroupData</button>';
 
@@ -97,6 +100,7 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(getClientPermissionsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getUserSettingsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getAnchorBtn.content.cloneNode(true));
+    this._shadowRoot.appendChild(getThemeBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getDirtyStatusBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(retrieveContextValueBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(uxManagerMultipleRequestsBtn.content.cloneNode(true));
@@ -188,6 +192,7 @@ export default class extends HTMLElement {
         });
       }
     });
+
     this.$getAnchorBtn = this._shadowRoot.querySelector('#getAnchor');
     this.$getAnchorBtn.addEventListener('click', () => {
       let getAnchor = this.LuigiClient.getAnchor();
@@ -197,6 +202,16 @@ export default class extends HTMLElement {
       });
     });
 
+    this.$getThemeBtn = this._shadowRoot.querySelector('#getTheme');
+    this.$getThemeBtn.addEventListener('click', () => {
+      const currentTheme = this.LuigiClient.uxManager().getCurrentTheme();
+
+      this.LuigiClient.uxManager().showAlert({
+        text: 'LuigiClient.getCurrentTheme()=' + JSON.stringify(currentTheme),
+        type: 'info'
+      });
+    });
+
     this.$getDirtyStatusBtn = this._shadowRoot.querySelector('#getDirtyStatus');
     this.$getDirtyStatusBtn.addEventListener('click', () => {
       let dirtyStatus = this.LuigiClient.uxManager().getDirtyStatus();

diff --git a/container/typings/LuigiCompoundContainer.svelte.d.ts b/container/typings/LuigiCompoundContainer.svelte.d.ts
@@ -103,6 +103,12 @@ export default class LuigiCompoundContainer extends HTMLElement {
    */
   webcomponent: boolean | WebComponentSettings | string;
 
+  /**
+   * The theme to be passed to the compound microfrontend.
+   * @since NEXT_RELEASE_CONTAINER
+   */
+  theme: string;
+
   /**
    * Function that updates the context of the compound microfrontend.
    * @param contextObj The context data

diff --git a/docs/luigi-compound-container-api.md b/docs/luigi-compound-container-api.md
@@ -180,6 +180,16 @@ Type: ([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glo
 
 *   **since**: 1.0.0
 
+### theme
+
+The theme to be passed to the compound microfrontend.
+
+Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
+
+**Meta**
+
+*   **since**: NEXT_RELEASE_CONTAINER
+
 ### updateContext
 
 Function that updates the context of the compound microfrontend.