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 bc647e32a6..e29eacd24f 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 @@ -117,6 +117,30 @@ describe('Compound Container Tests', () => { }); }); + it('LuigiClient API - getActiveFeatureToggles', () => { + cy.on('window:alert', stub); + + cy.get(containerSelector) + .shadow() + .contains('getFeatureToggleList') + .click() + .then(() => { + expect(stub.getCall(0)).to.be.calledWith('LuigiClient.getActiveFeatureToggles()=["ft1","ft2"]'); + }); + }); + + 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 f287a1e83d..d900f970aa 100644 --- a/container/src/LuigiCompoundContainer.svelte +++ b/container/src/LuigiCompoundContainer.svelte @@ -3,6 +3,7 @@ tag: null, shadow: 'none', props: { + activeFeatureToggleList: { type: 'Array', reflect: false, attribute: 'active-feature-toggle-list' }, anchor: { type: 'String', reflect: false, attribute: 'anchor' }, clientPermissions: { type: 'Object', @@ -28,6 +29,7 @@ attribute: 'search-params', }, skipInitCheck: { type: 'Boolean', reflect: false, attribute: 'skip-init-check' }, + theme: { type: 'String', reflect: false, attribute: 'theme' }, userSettings: { type: 'Object', reflect: false, @@ -65,6 +67,7 @@ import { Events } from './constants/communication'; import { GenericHelperFunctions } from './utilities/helpers'; + export let activeFeatureToggleList: string[]; export let anchor: string; export let clientPermissions: any; export let compoundConfig: any; @@ -78,6 +81,7 @@ export let pathParams: any; export let searchParams: any; export let skipInitCheck: boolean; + export let theme: string; export let userSettings: any; export let viewurl: string; export let webcomponent: any; @@ -92,6 +96,7 @@ // Only needed for get rid of "unused export property" svelte compiler warnings export const unwarn = () => { return ( + activeFeatureToggleList && anchor && clientPermissions && dirtyStatus && @@ -102,6 +107,7 @@ pathParams && searchParams && skipInitCheck && + theme && userSettings ); }; diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index 43be1553c0..f0603bcef1 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -26,6 +26,7 @@

defer-init="false" skip-init-check="true" webcomponent="true" + theme="sap_fiori_3" > diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js index ef7dfb5b45..b5e7dc5050 100644 --- a/container/test-app/compound/helloWorldWC.js +++ b/container/test-app/compound/helloWorldWC.js @@ -46,6 +46,12 @@ export default class extends HTMLElement { const getSkipInitCheckBtn = document.createElement('template'); getSkipInitCheckBtn.innerHTML = ''; + const getFeatureToggleListBtn = document.createElement('template'); + getFeatureToggleListBtn.innerHTML = ''; + + const getThemeBtn = document.createElement('template'); + getThemeBtn.innerHTML = ''; + const setViewGroupDataBtn = document.createElement('template'); setViewGroupDataBtn.innerHTML = ''; @@ -101,6 +107,8 @@ export default class extends HTMLElement { this._shadowRoot.appendChild(getUserSettingsBtn.content.cloneNode(true)); this._shadowRoot.appendChild(getAnchorBtn.content.cloneNode(true)); this._shadowRoot.appendChild(getSkipInitCheckBtn.content.cloneNode(true)); + this._shadowRoot.appendChild(getFeatureToggleListBtn.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)); @@ -212,6 +220,26 @@ export default class extends HTMLElement { }); }); + this.$getFeatureToggleListBtn = this._shadowRoot.querySelector('#getFeatureToggleList'); + this.$getFeatureToggleListBtn.addEventListener('click', () => { + const activeFeatureToggleList = this.LuigiClient.getActiveFeatureToggles(); + + this.LuigiClient.uxManager().showAlert({ + text: 'LuigiClient.getActiveFeatureToggles()=' + JSON.stringify(activeFeatureToggleList), + type: 'info' + }); + }); + + 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 c76e519aca..c24e9b3882 100644 --- a/container/typings/LuigiCompoundContainer.svelte.d.ts +++ b/container/typings/LuigiCompoundContainer.svelte.d.ts @@ -24,6 +24,12 @@ export default class LuigiCompoundContainer extends HTMLElement { */ deferInit: boolean; + /** + * The parameters to be passed to the compound micro frontend. Will not be passed to the compound children. + * @since 1.0.0 + */ + nodeParams: Object; + /** * If set to true, the Luigi compound container webcomponent will not use the shadow DOM for rendering. * @since 1.2.0 @@ -103,6 +109,18 @@ export default class LuigiCompoundContainer extends HTMLElement { */ skipInitCheck: boolean; + /** + * The list of active feature toggles to be passed to the compound microfrontend. + * @since NEXT_RELEASE_CONTAINER + */ + activeFeatureToggleList: 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/container/typings/LuigiContainer.svelte.d.ts b/container/typings/LuigiContainer.svelte.d.ts index 091254814c..6d763c1238 100644 --- a/container/typings/LuigiContainer.svelte.d.ts +++ b/container/typings/LuigiContainer.svelte.d.ts @@ -78,7 +78,7 @@ export default class LuigiContainer extends HTMLElement { skipInitCheck: boolean; /** - * The parameters to be passed to the web-component-based micro frontend. Will not be passed to the compound children. + * The parameters to be passed to the web-component-based micro frontend. * @since 1.0.0 */ nodeParams: Object; diff --git a/docs/luigi-compound-container-api.md b/docs/luigi-compound-container-api.md index f7a38d5397..5fa5bbd7bb 100644 --- a/docs/luigi-compound-container-api.md +++ b/docs/luigi-compound-container-api.md @@ -49,6 +49,16 @@ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glob * **since**: 1.0.0 +### nodeParams + +The parameters to be passed to the compound micro frontend. Will not be passed to the compound children. + +Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) + +**Meta** + +* **since**: 1.0.0 + ### noShadow If set to true, the Luigi compound container webcomponent will not use the shadow DOM for rendering. @@ -178,6 +188,26 @@ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glob **Meta** +* **since**: 1.0.0 + +### activeFeatureToggleList + +The list of active feature toggles to be passed to the compound microfrontend. + +Type: [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)> + +**Meta** + +* **since**: NEXT_RELEASE_CONTAINER + +### 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 diff --git a/docs/luigi-container-api.md b/docs/luigi-container-api.md index b3d52fcf2b..1128a99e5e 100644 --- a/docs/luigi-container-api.md +++ b/docs/luigi-container-api.md @@ -133,7 +133,7 @@ Type: [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glob ### nodeParams -The parameters to be passed to the web-component-based micro frontend. Will not be passed to the compound children. +The parameters to be passed to the web-component-based micro frontend. Type: [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)