Merge branch 'main' into 3916-distinguish-label-3903

container/cypress/e2e/test-app/compound/wc-compound-container.cy.js

@@ -105,6 +105,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);
 

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',
@@ -27,6 +28,7 @@
         reflect: false,
         attribute: 'search-params',
       },
+      theme: { type: 'String', reflect: false, attribute: 'theme' },
       userSettings: {
         type: 'Object',
         reflect: false,
@@ -64,6 +66,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;
@@ -76,6 +79,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;
@@ -90,6 +94,7 @@
   // Only needed for get rid of "unused export property" svelte compiler warnings
   export const unwarn = () => {
     return (
+      activeFeatureToggleList &&
       anchor &&
       clientPermissions &&
       dirtyStatus &&
@@ -99,6 +104,7 @@
       nodeParams &&
       pathParams &&
       searchParams &&
+      theme &&
       userSettings
     );
   };

container/test-app/compound/compoundClientAPI.html

@@ -26,6 +26,7 @@ <h3>
       <luigi-compound-container
         data-test-id="luigi-client-api-test-compound-01"
         id="dashboard"
+        active-feature-toggle-list='["ft1", "ft2"]'
         context='{"label": "Dashboard"}'
         node-params='{"Luigi":"rocks"}'
         search-params='{"test":"searchParam1"}'
@@ -35,6 +36,7 @@ <h3>
         anchor="testAnchorCompound"
         defer-init="false"
         webcomponent="true"
+        theme="sap_fiori_3"
       ></luigi-compound-container>
     </div>
 

container/test-app/compound/helloWorldWC.js

@@ -43,6 +43,12 @@ export default class extends HTMLElement {
     const getAnchorBtn = document.createElement('template');
     getAnchorBtn.innerHTML = '<button id="getAnchor">getAnchor</button>';
 
+    const getFeatureToggleListBtn = document.createElement('template');
+    getFeatureToggleListBtn.innerHTML = '<button id="getFeatureToggleList">getFeatureToggleList</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 +103,8 @@ 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(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));
@@ -188,6 +196,7 @@ export default class extends HTMLElement {
         });
       }
     });
+
     this.$getAnchorBtn = this._shadowRoot.querySelector('#getAnchor');
     this.$getAnchorBtn.addEventListener('click', () => {
       let getAnchor = this.LuigiClient.getAnchor();
@@ -197,6 +206,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();

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
@@ -97,6 +103,18 @@ export default class LuigiCompoundContainer extends HTMLElement {
    */
   webcomponent: boolean | WebComponentSettings | string;
 
+  /**
+   * 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

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;

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.
@@ -170,6 +180,26 @@ Type: ([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Glo
 
 *   **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
 
 Function that updates the context of the compound microfrontend.

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)