fix(core/menu-settings): update labels dynamically (#937)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>

packages/angular/src/components.ts

@@ -1520,11 +1520,17 @@ export class IxMenuSettingsItem {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['labelChange']);
   }
 }
 
 
-export declare interface IxMenuSettingsItem extends Components.IxMenuSettingsItem {}
+export declare interface IxMenuSettingsItem extends Components.IxMenuSettingsItem {
+  /**
+   * Label changed
+   */
+  labelChange: EventEmitter<CustomEvent<{ name: string; oldLabel: string; newLabel: string; }>>;
+}
 
 
 @ProxyCmp({

packages/core/component-doc.json

@@ -8026,7 +8026,17 @@
         }
       ],
       "methods": [],
-      "events": [],
+      "events": [
+        {
+          "event": "labelChange",
+          "detail": "{ name: string; oldLabel: string; newLabel: string; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Label changed",
+          "docsTags": []
+        }
+      ],
       "styles": [],
       "slots": [],
       "parts": [],

packages/core/src/components.d.ts

@@ -2520,6 +2520,10 @@ export interface IxMenuSettingsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxMenuSettingsElement;
 }
+export interface IxMenuSettingsItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxMenuSettingsItemElement;
+}
 export interface IxMessageBarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxMessageBarElement;
@@ -5064,6 +5068,14 @@ declare namespace LocalJSX {
           * Label
          */
         "label"?: string;
+        /**
+          * Label changed
+         */
+        "onLabelChange"?: (event: IxMenuSettingsItemCustomEvent<{
+    name: string;
+    oldLabel: string;
+    newLabel: string;
+  }>) => void;
     }
     interface IxMessageBar {
         /**

packages/core/src/components/menu-settings-item/menu-settings-item.tsx

@@ -7,7 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, h, Host, Prop } from '@stencil/core';
+import {
+  Component,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+  Watch,
+} from '@stencil/core';
 
 @Component({
   tag: 'ix-menu-settings-item',
@@ -20,6 +28,24 @@ export class MenuSettingsItem {
    */
   @Prop() label: string;
 
+  /**
+   * Label changed
+   */
+  @Event() labelChange: EventEmitter<{
+    name: string;
+    oldLabel: string;
+    newLabel: string;
+  }>;
+
+  @Watch('label')
+  watchLabel(newValue: string, oldValue: string) {
+    this.labelChange.emit({
+      name: 'ix-menu-settings-item',
+      oldLabel: oldValue,
+      newLabel: newValue,
+    });
+  }
+
   render() {
     return (
       <Host>

packages/core/src/components/menu-settings/menu-settings.tsx

@@ -16,6 +16,7 @@ import {
   h,
   Host,
   Prop,
+  State,
   Watch,
 } from '@stencil/core';
 
@@ -25,6 +26,8 @@ import {
   shadow: true,
 })
 export class MenuAbout {
+  @Element() el!: HTMLIxMenuSettingsElement;
+
   /**
    * active tab
    */
@@ -40,8 +43,6 @@ export class MenuAbout {
    */
   @Prop() show = false;
 
-  @Element() el!: HTMLIxMenuSettingsElement;
-
   /**
    * Popover closed
    */
@@ -50,9 +51,7 @@ export class MenuAbout {
     name: string;
   }>;
 
-  get settingsItems(): HTMLIxMenuSettingsItemElement[] {
-    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));
-  }
+  @State() settingsItems: HTMLIxMenuSettingsItemElement[];
 
   private setTab(label: string) {
     this.activeTabLabel = label;
@@ -65,10 +64,39 @@ export class MenuAbout {
     });
   }
 
+  private getTabItems() {
+    return this.settingsItems.map(({ label }) => {
+      return (
+        <ix-tab-item
+          selected={label === this.activeTabLabel}
+          onClick={() => this.setTab(label)}
+        >
+          {label}
+        </ix-tab-item>
+      );
+    });
+  }
+
   componentWillLoad() {
+    this.settingsItems = Array.from(
+      this.el.querySelectorAll('ix-menu-settings-item')
+    );
+
     if (this.settingsItems.length) {
       this.setTab(this.activeTabLabel || this.settingsItems[0].label);
     }
+
+    this.settingsItems.forEach((item) => {
+      item.addEventListener('labelChange', (e: CustomEvent) => {
+        this.settingsItems = Array.from(
+          this.el.querySelectorAll('ix-menu-settings-item')
+        );
+
+        if (e.detail.oldLabel === this.activeTabLabel) {
+          this.activeTabLabel = e.detail.newLabel;
+        }
+      });
+    });
   }
 
   componentDidLoad() {
@@ -80,21 +108,6 @@ export class MenuAbout {
     this.setTab(value);
   }
 
-  private getTabItems() {
-    return this.settingsItems.map(({ label }) => {
-      return (
-        <ix-tab-item
-          class={{
-            active: label === this.activeTabLabel,
-          }}
-          onClick={() => this.setTab(label)}
-        >
-          {label}
-        </ix-tab-item>
-      );
-    });
-  }
-
   render() {
     return (
       <Host

packages/core/src/tests/menu-settings/basic/index.html

@@ -20,15 +20,24 @@
         <ix-menu-item>Item 2</ix-menu-item>
         <ix-menu-item>Item 3</ix-menu-item>
         <ix-menu-settings>
-          <ix-menu-settings-item label="Test 1"
-            >Content test 1</ix-menu-settings-item
+          <ix-menu-settings-item label="Label 1"
+            >First Label - <span id="changeSpan">First Content</span></ix-menu-settings-item
           >
-          <ix-menu-settings-item label="Test 2"
-            >Content test 2</ix-menu-settings-item
+          <ix-menu-settings-item id="changeTab" label="Label 2"
+            >Other Label - Other Content</ix-menu-settings-item
           >
         </ix-menu-settings>
       </ix-menu>
     </ix-basic-navigation>
+    <script>
+      window.onload = function() {
+        var changeTab = document.getElementById('changeTab');
+        var changeSpan = document.getElementById('changeSpan');
+        changeSpan.addEventListener('click', function() {
+          changeTab.setAttribute('label', 'Changed Label');
+        });
+      }
+    </script>
     <script>
       document.querySelector('ix-basic-navigation').breakpoints = [
         'small',

packages/core/src/tests/menu-settings/menu-settings.e2e.ts

@@ -17,7 +17,29 @@ regressionTest.describe('menu-settings', () => {
     await page.waitForTimeout(500);
 
     //Click is needed otherwise tab item is still hovered
-    await page.getByText('Content test 1').click();
+    await page.getByText('First Label - ').click();
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('label', async ({ page }) => {
+    await page.goto('menu-settings/basic');
+    await page.locator('ix-menu-item#settings').click();
+    await page.waitForTimeout(500);
+
+    await page.getByText('First Content').click();
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('switch', async ({ page }) => {
+    await page.goto('menu-settings/basic');
+    await page.locator('ix-menu-item#settings').click();
+    await page.waitForTimeout(500);
+
+    await page.getByText('First Content').click();
+
+    await page.getByText('Changed Label').click();
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });

packages/vue/src/components.ts

@@ -632,7 +632,8 @@ export const IxMenuSettings = /*@__PURE__*/ defineContainer<JSX.IxMenuSettings>(
 
 
 export const IxMenuSettingsItem = /*@__PURE__*/ defineContainer<JSX.IxMenuSettingsItem>('ix-menu-settings-item', defineIxMenuSettingsItem, [
-  'label'
+  'label',
+  'labelChange'
 ]);