fix(core/menu-about/-settings): unwanted behavior on fast tab change (#…

…933) Co-authored-by: jul-lam <julian.lamplmair.ext@siemens.com> Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · Feb 8, 2024 · 1558e92 · 1558e92
1 parent 39d88a6
commit 1558e92
Show file tree

Hide file tree

Showing 10 changed files with 301 additions and 232 deletions.
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -1355,11 +1355,13 @@ export class IxMenuAbout {
 }
 
 
+import type { CustomCloseEvent as IIxMenuAboutCustomCloseEvent } from '@siemens/ix';
+
 export declare interface IxMenuAbout extends Components.IxMenuAbout {
   /**
    * About and Legal closed
    */
-  close: EventEmitter<CustomEvent<{ nativeEvent: MouseEvent; name: string; }>>;
+  close: EventEmitter<CustomEvent<IIxMenuAboutCustomCloseEvent>>;
 }
 
 
@@ -1378,11 +1380,19 @@ export class IxMenuAboutItem {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['labelChange']);
   }
 }
 
 
-export declare interface IxMenuAboutItem extends Components.IxMenuAboutItem {}
+import type { CustomLabelChangeEvent as IIxMenuAboutItemCustomLabelChangeEvent } from '@siemens/ix';
+
+export declare interface IxMenuAboutItem extends Components.IxMenuAboutItem {
+  /**
+   * Label changed
+   */
+  labelChange: EventEmitter<CustomEvent<IIxMenuAboutItemCustomLabelChangeEvent>>;
+}
 
 
 @ProxyCmp({
@@ -1537,11 +1547,13 @@ export class IxMenuSettings {
 }
 
 
+import type { CustomCloseEvent as IIxMenuSettingsCustomCloseEvent } from '@siemens/ix';
+
 export declare interface IxMenuSettings extends Components.IxMenuSettings {
   /**
    * Popover closed
    */
-  close: EventEmitter<CustomEvent<{ nativeEvent: MouseEvent; name: string; }>>;
+  close: EventEmitter<CustomEvent<IIxMenuSettingsCustomCloseEvent>>;
 }
 
 
@@ -1565,11 +1577,13 @@ export class IxMenuSettingsItem {
 }
 
 
+import type { CustomLabelChangeEvent as IIxMenuSettingsItemCustomLabelChangeEvent } from '@siemens/ix';
+
 export declare interface IxMenuSettingsItem extends Components.IxMenuSettingsItem {
   /**
    * Label changed
    */
-  labelChange: EventEmitter<CustomEvent<{ name: string; oldLabel: string; newLabel: string; }>>;
+  labelChange: EventEmitter<CustomEvent<IIxMenuSettingsItemCustomLabelChangeEvent>>;
 }
 
 

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -9654,15 +9654,16 @@
       "events": [
         {
           "event": "close",
-          "detail": "{ nativeEvent: MouseEvent; name: string; }",
+          "detail": "CustomCloseEvent",
           "bubbles": true,
           "complexType": {
-            "original": "{\n    nativeEvent: MouseEvent;\n    name: string;\n  }",
-            "resolved": "{ nativeEvent: MouseEvent; name: string; }",
+            "original": "CustomCloseEvent",
+            "resolved": "CustomCloseEvent",
             "references": {
-              "MouseEvent": {
-                "location": "global",
-                "id": "global::MouseEvent"
+              "CustomCloseEvent": {
+                "location": "import",
+                "path": "../utils/menu-tabs/menu-tabs-utils",
+                "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomCloseEvent"
               }
             }
           },
@@ -9716,7 +9717,28 @@
         }
       ],
       "methods": [],
-      "events": [],
+      "events": [
+        {
+          "event": "labelChange",
+          "detail": "CustomLabelChangeEvent",
+          "bubbles": true,
+          "complexType": {
+            "original": "CustomLabelChangeEvent",
+            "resolved": "CustomLabelChangeEvent",
+            "references": {
+              "CustomLabelChangeEvent": {
+                "location": "import",
+                "path": "../utils/menu-tabs/menu-tabs-utils",
+                "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomLabelChangeEvent"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Label changed",
+          "docsTags": []
+        }
+      ],
       "styles": [],
       "slots": [],
       "parts": [],
@@ -10579,7 +10601,7 @@
           "mutable": true,
           "attr": "active-tab-label",
           "reflectToAttr": false,
-          "docs": "active tab",
+          "docs": "Active tab",
           "docsTags": [],
           "values": [
             {
@@ -10600,7 +10622,7 @@
           "mutable": false,
           "attr": "label",
           "reflectToAttr": false,
-          "docs": "Label",
+          "docs": "Label of first tab",
           "docsTags": [],
           "default": "'Settings'",
           "values": [
@@ -10638,15 +10660,16 @@
       "events": [
         {
           "event": "close",
-          "detail": "{ nativeEvent: MouseEvent; name: string; }",
+          "detail": "CustomCloseEvent",
           "bubbles": true,
           "complexType": {
-            "original": "{\n    nativeEvent: MouseEvent;\n    name: string;\n  }",
-            "resolved": "{ nativeEvent: MouseEvent; name: string; }",
+            "original": "CustomCloseEvent",
+            "resolved": "CustomCloseEvent",
             "references": {
-              "MouseEvent": {
-                "location": "global",
-                "id": "global::MouseEvent"
+              "CustomCloseEvent": {
+                "location": "import",
+                "path": "../utils/menu-tabs/menu-tabs-utils",
+                "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomCloseEvent"
               }
             }
           },
@@ -10687,8 +10710,8 @@
           },
           "mutable": false,
           "attr": "label",
-          "reflectToAttr": false,
-          "docs": "Label",
+          "reflectToAttr": true,
+          "docs": "Settings Item label",
           "docsTags": [],
           "values": [
             {
@@ -10703,12 +10726,18 @@
       "events": [
         {
           "event": "labelChange",
-          "detail": "{ name: string; oldLabel: string; newLabel: string; }",
+          "detail": "CustomLabelChangeEvent",
           "bubbles": true,
           "complexType": {
-            "original": "{\n    name: string;\n    oldLabel: string;\n    newLabel: string;\n  }",
-            "resolved": "{ name: string; oldLabel: string; newLabel: string; }",
-            "references": {}
+            "original": "CustomLabelChangeEvent",
+            "resolved": "CustomLabelChangeEvent",
+            "references": {
+              "CustomLabelChangeEvent": {
+                "location": "import",
+                "path": "../utils/menu-tabs/menu-tabs-utils",
+                "id": "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomLabelChangeEvent"
+              }
+            }
           },
           "cancelable": true,
           "composed": true,
@@ -16868,6 +16897,11 @@
       "docstring": "",
       "path": "src/components/key-value/key-value.tsx"
     },
+    "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomCloseEvent": {
+      "declaration": "export interface CustomCloseEvent {\n  nativeEvent: MouseEvent;\n  name: string;\n}",
+      "docstring": "",
+      "path": "src/components/utils/menu-tabs/menu-tabs-utils.ts"
+    },
     "src/components/modal/modal.tsx::IxModalSize": {
       "declaration": "export type IxModalSize = IxModalFixedSize | IxModalDynamicSize;",
       "docstring": "",
@@ -16953,6 +16987,11 @@
       "docstring": "",
       "path": "src/components/flip-tile/flip-tile-state.ts"
     },
+    "src/components/utils/menu-tabs/menu-tabs-utils.ts::CustomLabelChangeEvent": {
+      "declaration": "export interface CustomLabelChangeEvent {\n  name: string;\n  oldLabel: string;\n  newLabel: string;\n}",
+      "docstring": "",
+      "path": "src/components/utils/menu-tabs/menu-tabs-utils.ts"
+    },
     "src/components/utils/typed-event.ts::TypedEvent": {
       "declaration": "any",
       "docstring": "",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -31,6 +31,7 @@ import { FlipTileState } from "./components/flip-tile/flip-tile-state";
 import { IconButtonVariant } from "./components/icon-button/icon-button";
 import { ButtonVariant as ButtonVariant1 } from "./components/button/button";
 import { KeyValueLabelPosition } from "./components/key-value/key-value";
+import { CustomCloseEvent, CustomLabelChangeEvent } from "./components/utils/menu-tabs/menu-tabs-utils";
 import { IxModalSize } from "./components/modal/modal";
 import { PushCardVariant } from "./components/push-card/push-card";
 import { SliderMarker } from "./components/slider/slider";
@@ -68,6 +69,7 @@ export { FlipTileState } from "./components/flip-tile/flip-tile-state";
 export { IconButtonVariant } from "./components/icon-button/icon-button";
 export { ButtonVariant as ButtonVariant1 } from "./components/button/button";
 export { KeyValueLabelPosition } from "./components/key-value/key-value";
+export { CustomCloseEvent, CustomLabelChangeEvent } from "./components/utils/menu-tabs/menu-tabs-utils";
 export { IxModalSize } from "./components/modal/modal";
 export { PushCardVariant } from "./components/push-card/push-card";
 export { SliderMarker } from "./components/slider/slider";
@@ -1520,11 +1522,11 @@ export namespace Components {
     }
     interface IxMenuSettings {
         /**
-          * active tab
+          * Active tab
          */
         "activeTabLabel": string;
         /**
-          * Label
+          * Label of first tab
          */
         "label": string;
         /**
@@ -1534,7 +1536,7 @@ export namespace Components {
     }
     interface IxMenuSettingsItem {
         /**
-          * Label
+          * Settings Item label
          */
         "label": string;
     }
@@ -2436,6 +2438,10 @@ export interface IxMenuAboutCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxMenuAboutElement;
 }
+export interface IxMenuAboutItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxMenuAboutItemElement;
+}
 export interface IxMenuAboutNewsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxMenuAboutNewsElement;
@@ -3227,10 +3233,7 @@ declare global {
         new (): HTMLIxMenuElement;
     };
     interface HTMLIxMenuAboutElementEventMap {
-        "close": {
-    nativeEvent: MouseEvent;
-    name: string;
-  };
+        "close": CustomCloseEvent;
     }
     interface HTMLIxMenuAboutElement extends Components.IxMenuAbout, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIxMenuAboutElementEventMap>(type: K, listener: (this: HTMLIxMenuAboutElement, ev: IxMenuAboutCustomEvent<HTMLIxMenuAboutElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3246,7 +3249,18 @@ declare global {
         prototype: HTMLIxMenuAboutElement;
         new (): HTMLIxMenuAboutElement;
     };
+    interface HTMLIxMenuAboutItemElementEventMap {
+        "labelChange": CustomLabelChangeEvent;
+    }
     interface HTMLIxMenuAboutItemElement extends Components.IxMenuAboutItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIxMenuAboutItemElementEventMap>(type: K, listener: (this: HTMLIxMenuAboutItemElement, ev: IxMenuAboutItemCustomEvent<HTMLIxMenuAboutItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIxMenuAboutItemElementEventMap>(type: K, listener: (this: HTMLIxMenuAboutItemElement, ev: IxMenuAboutItemCustomEvent<HTMLIxMenuAboutItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLIxMenuAboutItemElement: {
         prototype: HTMLIxMenuAboutItemElement;
@@ -3320,10 +3334,7 @@ declare global {
         new (): HTMLIxMenuItemElement;
     };
     interface HTMLIxMenuSettingsElementEventMap {
-        "close": {
-    nativeEvent: MouseEvent;
-    name: string;
-  };
+        "close": CustomCloseEvent;
     }
     interface HTMLIxMenuSettingsElement extends Components.IxMenuSettings, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIxMenuSettingsElementEventMap>(type: K, listener: (this: HTMLIxMenuSettingsElement, ev: IxMenuSettingsCustomEvent<HTMLIxMenuSettingsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3340,11 +3351,7 @@ declare global {
         new (): HTMLIxMenuSettingsElement;
     };
     interface HTMLIxMenuSettingsItemElementEventMap {
-        "labelChange": {
-    name: string;
-    oldLabel: string;
-    newLabel: string;
-  };
+        "labelChange": CustomLabelChangeEvent;
     }
     interface HTMLIxMenuSettingsItemElement extends Components.IxMenuSettingsItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIxMenuSettingsItemElementEventMap>(type: K, listener: (this: HTMLIxMenuSettingsItemElement, ev: IxMenuSettingsItemCustomEvent<HTMLIxMenuSettingsItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5350,10 +5357,7 @@ declare namespace LocalJSX {
         /**
           * About and Legal closed
          */
-        "onClose"?: (event: IxMenuAboutCustomEvent<{
-    nativeEvent: MouseEvent;
-    name: string;
-  }>) => void;
+        "onClose"?: (event: IxMenuAboutCustomEvent<CustomCloseEvent>) => void;
         /**
           * Internal
          */
@@ -5364,6 +5368,10 @@ declare namespace LocalJSX {
           * About Item label
          */
         "label"?: string;
+        /**
+          * Label changed
+         */
+        "onLabelChange"?: (event: IxMenuAboutItemCustomEvent<CustomLabelChangeEvent>) => void;
     }
     interface IxMenuAboutNews {
         /**
@@ -5495,38 +5503,31 @@ declare namespace LocalJSX {
     }
     interface IxMenuSettings {
         /**
-          * active tab
+          * Active tab
          */
         "activeTabLabel"?: string;
         /**
-          * Label
+          * Label of first tab
          */
         "label"?: string;
         /**
           * Popover closed
          */
-        "onClose"?: (event: IxMenuSettingsCustomEvent<{
-    nativeEvent: MouseEvent;
-    name: string;
-  }>) => void;
+        "onClose"?: (event: IxMenuSettingsCustomEvent<CustomCloseEvent>) => void;
         /**
           * Internal
          */
         "show"?: boolean;
     }
     interface IxMenuSettingsItem {
         /**
-          * Label
+          * Settings Item label
          */
         "label"?: string;
         /**
           * Label changed
          */
-        "onLabelChange"?: (event: IxMenuSettingsItemCustomEvent<{
-    name: string;
-    oldLabel: string;
-    newLabel: string;
-  }>) => void;
+        "onLabelChange"?: (event: IxMenuSettingsItemCustomEvent<CustomLabelChangeEvent>) => void;
     }
     interface IxMessageBar {
         /**