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
index 1cd7582460..4bf9966660 100644
--- 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
index 84bd01ed5c..2dd289b597 100644
--- 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
index 37a6a7495f..d76a17e1ee 100644
--- a/container/test-app/compound/compoundClientAPI.html
+++ b/container/test-app/compound/compoundClientAPI.html
@@ -35,6 +35,7 @@
anchor="testAnchorCompound"
defer-init="false"
webcomponent="true"
+ theme="sap_fiori_3"
>
diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js
index e4214bfb75..868999db58 100644
--- 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 = '';
+ const getThemeBtn = document.createElement('template');
+ getThemeBtn.innerHTML = '';
+
const setViewGroupDataBtn = document.createElement('template');
setViewGroupDataBtn.innerHTML = '';
@@ -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
index 74f4d9e3fc..2347c48a1d 100644
--- 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
index dd4be93b3a..51ca82d095 100644
--- 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.