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.