From 6e1ede3fa50a84900bc84631ecaaeb4c62cb517c Mon Sep 17 00:00:00 2001 From: goncalosard Date: Fri, 28 Oct 2022 12:02:44 +0100 Subject: [PATCH 01/11] fix(core): close overlays --- packages/core/src/components.d.ts | 12 ++++++++++-- .../core/src/components/menu-about/menu-about.tsx | 10 +++++++++- .../core/src/components/menu-item/menu-item.tsx | 12 +++++++++++- .../components/menu-settings/menu-settings.tsx | 10 +++++++++- packages/core/src/components/menu/menu.tsx | 15 +++++++++++++++ 5 files changed, 54 insertions(+), 5 deletions(-) diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index f57cda014f0..28953dff58e 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2579,6 +2579,10 @@ declare namespace LocalJSX { * Map Sidebar expanded */ "onMapExpandChange"?: (event: CustomEvent) => void; + /** + * Event to emit to parent that the item was selected + */ + "onOverlayClose"?: (event: CustomEvent) => void; /** * Is about tab visible */ @@ -2601,7 +2605,7 @@ declare namespace LocalJSX { /** * About and Legal closed */ - "onClose"?: (event: CustomEvent) => void; + "onClose"?: (event: CustomEvent) => void; /** * Internal */ @@ -2694,6 +2698,10 @@ declare namespace LocalJSX { * Show notification cound on tab */ "notifications"?: number; + /** + * Event to emit to parent that the item was selected + */ + "onItemClicked"?: (event: CustomEvent) => void; /** * Icon name from @siemens/ix-icons */ @@ -2711,7 +2719,7 @@ declare namespace LocalJSX { /** * Popover closed */ - "onClose"?: (event: CustomEvent) => void; + "onClose"?: (event: CustomEvent) => void; /** * Internal */ diff --git a/packages/core/src/components/menu-about/menu-about.tsx b/packages/core/src/components/menu-about/menu-about.tsx index ba091591186..83d6cd2f8e1 100644 --- a/packages/core/src/components/menu-about/menu-about.tsx +++ b/packages/core/src/components/menu-about/menu-about.tsx @@ -15,6 +15,7 @@ import { forceUpdate, h, Host, + Listen, Prop, State, Watch @@ -52,7 +53,7 @@ export class MenuAbout { /** * About and Legal closed */ - @Event() close: EventEmitter; + @Event() close: EventEmitter; @State() labels: string[] = []; @@ -98,6 +99,13 @@ export class MenuAbout { return this.aboutItems.indexOf(selectedItem); } + @Listen('overlayClose',{target: "body"}) + closeMenu(event: CustomEvent) { + if(event.detail === true){ + this.close.emit(event) + } + } + render() { return ( ; + get tabLabel() { return this.hostElement.querySelector('.tab-text'); } @@ -61,9 +66,14 @@ export class MenuItem { } } + private clicked = () => { + this.itemClicked.emit(true) + } + render() { return ( ; + @Event() close: EventEmitter; + + @Listen('overlayClose',{target: "body"}) + closeMenu(event: CustomEvent) { + if(event.detail === true){ + this.close.emit(event) + } + } get settingsItems(): HTMLIxMenuSettingsItemElement[] { return Array.from(this.el.querySelectorAll('ix-menu-settings-item')); diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index a1884bafb13..bd13631a1d6 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -123,6 +123,19 @@ export class Menu { @State() isMoreTabEmpty = false; + /** + * Event to emit to parent that the item was selected + */ + @Event() overlayClose: EventEmitter; + + @Listen('itemClicked',{target: "body"}) + closeMenu(event: CustomEvent) { + if(event.detail === true){ + this.expand = false; + this.overlayClose.emit(true) + } + } + private readonly domObserver = new MutationObserver( this.onDomChange.bind(this) ); @@ -658,6 +671,8 @@ export class Menu { return this.mapExpand ? 'double-chevron-left' : 'double-chevron-right'; } + + render() { return ( Date: Fri, 28 Oct 2022 12:51:39 +0100 Subject: [PATCH 02/11] fix(core): fix build error --- packages/angular/src/components.ts | 19 +++++++++++++++---- .../core/src/components/menu-about/readme.md | 6 +++--- .../core/src/components/menu-item/readme.md | 7 +++++++ .../src/components/menu-settings/readme.md | 6 +++--- packages/core/src/components/menu/readme.md | 9 +++++---- 5 files changed, 33 insertions(+), 14 deletions(-) diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 0b196acfde9..44a87626475 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -837,6 +837,10 @@ export declare interface IxMenu extends Components.IxMenu { * Map Sidebar expanded */ mapExpandChange: EventEmitter>; + /** + * Event to emit to parent that the item was selected + */ + overlayClose: EventEmitter>; } @@ -856,7 +860,7 @@ export class IxMenu { constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ['expandChange', 'mapExpandChange']); + proxyOutputs(this, this.el, ['expandChange', 'mapExpandChange', 'overlayClose']); } } @@ -865,7 +869,7 @@ export declare interface IxMenuAbout extends Components.IxMenuAbout { /** * About and Legal closed */ - close: EventEmitter>; + close: EventEmitter>; } @@ -998,7 +1002,13 @@ export class IxMenuAvatarItem { } -export declare interface IxMenuItem extends Components.IxMenuItem {} +export declare interface IxMenuItem extends Components.IxMenuItem { + /** + * Event to emit to parent that the item was selected + */ + itemClicked: EventEmitter>; + +} @ProxyCmp({ defineCustomElementFn: undefined, @@ -1015,6 +1025,7 @@ export class IxMenuItem { constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; + proxyOutputs(this, this.el, ['itemClicked']); } } @@ -1023,7 +1034,7 @@ export declare interface IxMenuSettings extends Components.IxMenuSettings { /** * Popover closed */ - close: EventEmitter>; + close: EventEmitter>; } diff --git a/packages/core/src/components/menu-about/readme.md b/packages/core/src/components/menu-about/readme.md index 0075beea6bd..04bf2bf87e5 100644 --- a/packages/core/src/components/menu-about/readme.md +++ b/packages/core/src/components/menu-about/readme.md @@ -20,9 +20,9 @@ SPDX-License-Identifier: MIT ## Events -| Event | Description | Type | -| ------- | ---------------------- | ------------------------- | -| `close` | About and Legal closed | `CustomEvent` | +| Event | Description | Type | +| ------- | ---------------------- | ------------------ | +| `close` | About and Legal closed | `CustomEvent` | ---------------------------------------------- diff --git a/packages/core/src/components/menu-item/readme.md b/packages/core/src/components/menu-item/readme.md index 9c991aac897..5929fe344f4 100644 --- a/packages/core/src/components/menu-item/readme.md +++ b/packages/core/src/components/menu-item/readme.md @@ -21,6 +21,13 @@ SPDX-License-Identifier: MIT | `tabIcon` | `tab-icon` | Icon name from @siemens/ix-icons | `string` | `'document'` | +## Events + +| Event | Description | Type | +| ------------- | -------------------------------------------------- | ---------------------- | +| `itemClicked` | Event to emit to parent that the item was selected | `CustomEvent` | + + ---------------------------------------------- diff --git a/packages/core/src/components/menu-settings/readme.md b/packages/core/src/components/menu-settings/readme.md index 25370215465..348b32f6c5e 100644 --- a/packages/core/src/components/menu-settings/readme.md +++ b/packages/core/src/components/menu-settings/readme.md @@ -20,9 +20,9 @@ SPDX-License-Identifier: MIT ## Events -| Event | Description | Type | -| ------- | -------------- | ------------------------- | -| `close` | Popover closed | `CustomEvent` | +| Event | Description | Type | +| ------- | -------------- | ------------------ | +| `close` | Popover closed | `CustomEvent` | ---------------------------------------------- diff --git a/packages/core/src/components/menu/readme.md b/packages/core/src/components/menu/readme.md index 8a1635a2065..26df8d01d4f 100644 --- a/packages/core/src/components/menu/readme.md +++ b/packages/core/src/components/menu/readme.md @@ -32,10 +32,11 @@ SPDX-License-Identifier: MIT ## Events -| Event | Description | Type | -| ----------------- | -------------------- | ---------------------- | -| `expandChange` | Menu expanded | `CustomEvent` | -| `mapExpandChange` | Map Sidebar expanded | `CustomEvent` | +| Event | Description | Type | +| ----------------- | -------------------------------------------------- | ---------------------- | +| `expandChange` | Menu expanded | `CustomEvent` | +| `mapExpandChange` | Map Sidebar expanded | `CustomEvent` | +| `overlayClose` | Event to emit to parent that the item was selected | `CustomEvent` | ## Methods From 2a98ae9ce6e5bdd6026104bfb8062f4d6496eda8 Mon Sep 17 00:00:00 2001 From: goncalosard Date: Fri, 28 Oct 2022 15:23:18 +0100 Subject: [PATCH 03/11] fix(core): build fix --- packages/core/component-doc.json | 49 ++++++++++++++++++++++++++++---- 1 file changed, 44 insertions(+), 5 deletions(-) diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index ec9670286c3..a44b4482c18 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -4446,12 +4446,27 @@ "composed": true, "docs": "Map Sidebar expanded", "docsTags": [] + }, + { + "event": "overlayClose", + "detail": "boolean", + "bubbles": true, + "cancelable": true, + "composed": true, + "docs": "Event to emit to parent that the item was selected", + "docsTags": [] } ], "styles": [], "slots": [], "parts": [], "listeners": [ + { + "event": "itemClicked", + "target": "body", + "capture": false, + "passive": false + }, { "event": "resize", "target": "window", @@ -4549,7 +4564,7 @@ "events": [ { "event": "close", - "detail": "MouseEvent", + "detail": "any", "bubbles": true, "cancelable": true, "composed": true, @@ -4560,7 +4575,14 @@ "styles": [], "slots": [], "parts": [], - "listeners": [] + "listeners": [ + { + "event": "overlayClose", + "target": "body", + "capture": false, + "passive": false + } + ] }, { "dirPath": "./src/components/menu-about-item", @@ -5062,7 +5084,17 @@ } ], "methods": [], - "events": [], + "events": [ + { + "event": "itemClicked", + "detail": "boolean", + "bubbles": true, + "cancelable": true, + "composed": true, + "docs": "Event to emit to parent that the item was selected", + "docsTags": [] + } + ], "styles": [], "slots": [], "parts": [], @@ -5152,7 +5184,7 @@ "events": [ { "event": "close", - "detail": "MouseEvent", + "detail": "any", "bubbles": true, "cancelable": true, "composed": true, @@ -5163,7 +5195,14 @@ "styles": [], "slots": [], "parts": [], - "listeners": [] + "listeners": [ + { + "event": "overlayClose", + "target": "body", + "capture": false, + "passive": false + } + ] }, { "dirPath": "./src/components/menu-settings-item", From e000263b1f4fce46bde467d41f55eecbc50a40f4 Mon Sep 17 00:00:00 2001 From: goncalosard Date: Thu, 3 Nov 2022 11:00:41 +0000 Subject: [PATCH 04/11] fix(core): changed to MouseEvent --- packages/angular/src/components.ts | 4 ++-- packages/core/component-doc.json | 6 +++--- packages/core/src/components.d.ts | 4 ++-- packages/core/src/components/menu-about/menu-about.tsx | 4 ++-- packages/core/src/components/menu-about/readme.md | 6 +++--- .../core/src/components/menu-settings/menu-settings.tsx | 4 ++-- packages/core/src/components/menu-settings/readme.md | 6 +++--- 7 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 44a87626475..00c47f9089c 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -869,7 +869,7 @@ export declare interface IxMenuAbout extends Components.IxMenuAbout { /** * About and Legal closed */ - close: EventEmitter>; + close: EventEmitter>; } @@ -1034,7 +1034,7 @@ export declare interface IxMenuSettings extends Components.IxMenuSettings { /** * Popover closed */ - close: EventEmitter>; + close: EventEmitter>; } diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index a44b4482c18..7a4ed09f65c 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -4564,7 +4564,7 @@ "events": [ { "event": "close", - "detail": "any", + "detail": "MouseEvent", "bubbles": true, "cancelable": true, "composed": true, @@ -5184,7 +5184,7 @@ "events": [ { "event": "close", - "detail": "any", + "detail": "MouseEvent", "bubbles": true, "cancelable": true, "composed": true, @@ -8626,4 +8626,4 @@ "listeners": [] } ] -} \ No newline at end of file +} diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index b96f8737cbf..0ebf53dc41c 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2603,7 +2603,7 @@ declare namespace LocalJSX { /** * About and Legal closed */ - "onClose"?: (event: CustomEvent) => void; + "onClose"?: (event: CustomEvent) => void; /** * Internal */ @@ -2717,7 +2717,7 @@ declare namespace LocalJSX { /** * Popover closed */ - "onClose"?: (event: CustomEvent) => void; + "onClose"?: (event: CustomEvent) => void; /** * Internal */ diff --git a/packages/core/src/components/menu-about/menu-about.tsx b/packages/core/src/components/menu-about/menu-about.tsx index 4f199a0426a..5e4ed5ac786 100644 --- a/packages/core/src/components/menu-about/menu-about.tsx +++ b/packages/core/src/components/menu-about/menu-about.tsx @@ -47,7 +47,7 @@ export class MenuAbout { /** * About and Legal closed */ - @Event() close: EventEmitter; + @Event() close: EventEmitter; @State() labels: string[] = []; @@ -97,7 +97,7 @@ export class MenuAbout { @Listen('overlayClose',{target: "body"}) closeMenu(event: CustomEvent) { if(event.detail === true){ - this.close.emit(event) + this.close.emit() } } diff --git a/packages/core/src/components/menu-about/readme.md b/packages/core/src/components/menu-about/readme.md index 04bf2bf87e5..0075beea6bd 100644 --- a/packages/core/src/components/menu-about/readme.md +++ b/packages/core/src/components/menu-about/readme.md @@ -20,9 +20,9 @@ SPDX-License-Identifier: MIT ## Events -| Event | Description | Type | -| ------- | ---------------------- | ------------------ | -| `close` | About and Legal closed | `CustomEvent` | +| Event | Description | Type | +| ------- | ---------------------- | ------------------------- | +| `close` | About and Legal closed | `CustomEvent` | ---------------------------------------------- diff --git a/packages/core/src/components/menu-settings/menu-settings.tsx b/packages/core/src/components/menu-settings/menu-settings.tsx index 62735648dc7..52847297c27 100644 --- a/packages/core/src/components/menu-settings/menu-settings.tsx +++ b/packages/core/src/components/menu-settings/menu-settings.tsx @@ -46,12 +46,12 @@ export class MenuAbout { /** * Popover closed */ - @Event() close: EventEmitter; + @Event() close: EventEmitter; @Listen('overlayClose',{target: "body"}) closeMenu(event: CustomEvent) { if(event.detail === true){ - this.close.emit(event) + this.close.emit() } } diff --git a/packages/core/src/components/menu-settings/readme.md b/packages/core/src/components/menu-settings/readme.md index 348b32f6c5e..25370215465 100644 --- a/packages/core/src/components/menu-settings/readme.md +++ b/packages/core/src/components/menu-settings/readme.md @@ -20,9 +20,9 @@ SPDX-License-Identifier: MIT ## Events -| Event | Description | Type | -| ------- | -------------- | ------------------ | -| `close` | Popover closed | `CustomEvent` | +| Event | Description | Type | +| ------- | -------------- | ------------------------- | +| `close` | Popover closed | `CustomEvent` | ---------------------------------------------- From efa2019872d12d30828762256f531710decba24f Mon Sep 17 00:00:00 2001 From: goncalosard Date: Thu, 3 Nov 2022 16:20:58 +0000 Subject: [PATCH 05/11] fix(core): event name changed --- packages/core/src/components/menu-item/menu-item.tsx | 4 ++-- packages/core/src/components/menu/menu.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/menu-item/menu-item.tsx b/packages/core/src/components/menu-item/menu-item.tsx index a01b0d1fe55..0147cebf111 100644 --- a/packages/core/src/components/menu-item/menu-item.tsx +++ b/packages/core/src/components/menu-item/menu-item.tsx @@ -52,7 +52,7 @@ export class MenuItem { /** * Event to emit to parent that the item was selected */ - @Event() itemClicked: EventEmitter; + @Event() onClick: EventEmitter; get tabLabel() { return this.hostElement.querySelector('.tab-text'); @@ -67,7 +67,7 @@ export class MenuItem { } private clicked = () => { - this.itemClicked.emit(true) + this.onClick.emit(true) } render() { diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index bd13631a1d6..56617967193 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -128,7 +128,7 @@ export class Menu { */ @Event() overlayClose: EventEmitter; - @Listen('itemClicked',{target: "body"}) + @Listen('onClick',{target: "body"}) closeMenu(event: CustomEvent) { if(event.detail === true){ this.expand = false; From 39ff691d1bdae88bb12d4031c09b32a4877c998b Mon Sep 17 00:00:00 2001 From: goncalosard Date: Thu, 3 Nov 2022 16:36:35 +0000 Subject: [PATCH 06/11] fix(core): updated --- packages/angular/src/components.ts | 4 ++-- packages/core/component-doc.json | 4 ++-- packages/core/src/components.d.ts | 2 +- packages/core/src/components/menu-item/readme.md | 6 +++--- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 00c47f9089c..2972994e7fd 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -1006,7 +1006,7 @@ export declare interface IxMenuItem extends Components.IxMenuItem { /** * Event to emit to parent that the item was selected */ - itemClicked: EventEmitter>; + onClick: EventEmitter>; } @@ -1025,7 +1025,7 @@ export class IxMenuItem { constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ['itemClicked']); + proxyOutputs(this, this.el, ['onClick']); } } diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 7a4ed09f65c..dbfab6b22ee 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -4462,7 +4462,7 @@ "parts": [], "listeners": [ { - "event": "itemClicked", + "event": "onClick", "target": "body", "capture": false, "passive": false @@ -5086,7 +5086,7 @@ "methods": [], "events": [ { - "event": "itemClicked", + "event": "onClick", "detail": "boolean", "bubbles": true, "cancelable": true, diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 0ebf53dc41c..687c259afa0 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2699,7 +2699,7 @@ declare namespace LocalJSX { /** * Event to emit to parent that the item was selected */ - "onItemClicked"?: (event: CustomEvent) => void; + "onOnClick"?: (event: CustomEvent) => void; /** * Icon name from @siemens/ix-icons */ diff --git a/packages/core/src/components/menu-item/readme.md b/packages/core/src/components/menu-item/readme.md index 5929fe344f4..85e6a59de5d 100644 --- a/packages/core/src/components/menu-item/readme.md +++ b/packages/core/src/components/menu-item/readme.md @@ -23,9 +23,9 @@ SPDX-License-Identifier: MIT ## Events -| Event | Description | Type | -| ------------- | -------------------------------------------------- | ---------------------- | -| `itemClicked` | Event to emit to parent that the item was selected | `CustomEvent` | +| Event | Description | Type | +| --------- | -------------------------------------------------- | ---------------------- | +| `onClick` | Event to emit to parent that the item was selected | `CustomEvent` | ---------------------------------------------- From 59b5fe412ab2cd45b0bb67692a0710100bd8a9d3 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Fri, 4 Nov 2022 08:20:31 +0100 Subject: [PATCH 07/11] fix(core/menu): close overlays if menu item is clicked --- packages/core/component-doc.json | 2 +- packages/core/src/components.d.ts | 8 ----- .../src/components/menu-item/menu-item.tsx | 12 +------ packages/core/src/components/menu/menu.tsx | 31 ++++++++++--------- 4 files changed, 19 insertions(+), 34 deletions(-) diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index dbfab6b22ee..dc901aa13d9 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -8626,4 +8626,4 @@ "listeners": [] } ] -} +} \ No newline at end of file diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 687c259afa0..ceaf4d98e96 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -2578,10 +2578,6 @@ declare namespace LocalJSX { * Map Sidebar expanded */ "onMapExpandChange"?: (event: CustomEvent) => void; - /** - * Event to emit to parent that the item was selected - */ - "onOverlayClose"?: (event: CustomEvent) => void; /** * Is about tab visible */ @@ -2696,10 +2692,6 @@ declare namespace LocalJSX { * Show notification cound on tab */ "notifications"?: number; - /** - * Event to emit to parent that the item was selected - */ - "onOnClick"?: (event: CustomEvent) => void; /** * Icon name from @siemens/ix-icons */ diff --git a/packages/core/src/components/menu-item/menu-item.tsx b/packages/core/src/components/menu-item/menu-item.tsx index 0147cebf111..4b6f6d388d9 100644 --- a/packages/core/src/components/menu-item/menu-item.tsx +++ b/packages/core/src/components/menu-item/menu-item.tsx @@ -7,7 +7,7 @@ * LICENSE file in the root directory of this source tree. */ -import { Component, Element, h, Host, Prop, State, Event, EventEmitter } from '@stencil/core'; +import { Component, Element, h, Host, Prop, State } from '@stencil/core'; @Component({ tag: 'ix-menu-item', @@ -49,11 +49,6 @@ export class MenuItem { @State() title: string; - /** - * Event to emit to parent that the item was selected - */ - @Event() onClick: EventEmitter; - get tabLabel() { return this.hostElement.querySelector('.tab-text'); } @@ -66,14 +61,9 @@ export class MenuItem { } } - private clicked = () => { - this.onClick.emit(true) - } - render() { return ( ; - - @Listen('onClick',{target: "body"}) - closeMenu(event: CustomEvent) { - if(event.detail === true){ - this.expand = false; - this.overlayClose.emit(true) - } - } - private readonly domObserver = new MutationObserver( this.onDomChange.bind(this) ); @@ -671,7 +658,19 @@ export class Menu { return this.mapExpand ? 'double-chevron-left' : 'double-chevron-right'; } + private closeOverlay(event: MouseEvent) { + const path = event.composedPath(); + const shouldCloseOverlay = path.some((element: HTMLElement) => { + if (element.tagName !== 'IX-MENU-ITEM') { + return false; + } + if (!element.id) { + return true; + } + }); + return shouldCloseOverlay; + } render() { return ( @@ -685,8 +684,11 @@ export class Menu { menu: true, expanded: this.expand, }} - onClick={() => { + onClick={(event) => { this.resetActiveTab(); + if (this.closeOverlay(event)) { + this.resetOverlay(); + } }} >
{this.enableSettings && !this.isSettingsEmpty ? ( Date: Fri, 4 Nov 2022 11:11:03 +0100 Subject: [PATCH 08/11] fix(core/menu): use container to collapse overlay --- packages/angular/src/components.ts | 15 +- packages/core/component-doc.json | 122 +++++++++++----- .../core/src/components/menu-item/readme.md | 7 - packages/core/src/components/menu/menu.tsx | 134 ++++++++++-------- packages/core/src/components/menu/readme.md | 9 +- .../src/components/menu/test/menu.spec.tsx | 60 ++++++++ .../components/my-component/my-component.tsx | 27 +++- 7 files changed, 251 insertions(+), 123 deletions(-) create mode 100644 packages/core/src/components/menu/test/menu.spec.tsx diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts index 2972994e7fd..0b196acfde9 100644 --- a/packages/angular/src/components.ts +++ b/packages/angular/src/components.ts @@ -837,10 +837,6 @@ export declare interface IxMenu extends Components.IxMenu { * Map Sidebar expanded */ mapExpandChange: EventEmitter>; - /** - * Event to emit to parent that the item was selected - */ - overlayClose: EventEmitter>; } @@ -860,7 +856,7 @@ export class IxMenu { constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ['expandChange', 'mapExpandChange', 'overlayClose']); + proxyOutputs(this, this.el, ['expandChange', 'mapExpandChange']); } } @@ -1002,13 +998,7 @@ export class IxMenuAvatarItem { } -export declare interface IxMenuItem extends Components.IxMenuItem { - /** - * Event to emit to parent that the item was selected - */ - onClick: EventEmitter>; - -} +export declare interface IxMenuItem extends Components.IxMenuItem {} @ProxyCmp({ defineCustomElementFn: undefined, @@ -1025,7 +1015,6 @@ export class IxMenuItem { constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ['onClick']); } } diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index dc901aa13d9..812f57c82b5 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -228,13 +228,18 @@ "docs": "", "docsTags": [], "encapsulation": "scoped", - "dependents": [], + "dependents": [ + "my-component" + ], "dependencies": [ "ix-application-header" ], "dependencyGraph": { "ix-basic-navigation": [ "ix-application-header" + ], + "my-component": [ + "ix-basic-navigation" ] }, "props": [ @@ -4095,7 +4100,9 @@ "docs": "", "docsTags": [], "encapsulation": "none", - "dependents": [], + "dependents": [ + "my-component" + ], "dependencies": [ "ix-menu-item", "ix-dropdown" @@ -4104,6 +4111,9 @@ "ix-menu": [ "ix-menu-item", "ix-dropdown" + ], + "my-component": [ + "ix-menu" ] }, "props": [ @@ -4446,27 +4456,12 @@ "composed": true, "docs": "Map Sidebar expanded", "docsTags": [] - }, - { - "event": "overlayClose", - "detail": "boolean", - "bubbles": true, - "cancelable": true, - "composed": true, - "docs": "Event to emit to parent that the item was selected", - "docsTags": [] } ], "styles": [], "slots": [], "parts": [], "listeners": [ - { - "event": "onClick", - "target": "body", - "capture": false, - "passive": false - }, { "event": "resize", "target": "window", @@ -4488,7 +4483,8 @@ "docsTags": [], "encapsulation": "scoped", "dependents": [ - "ix-map-navigation" + "ix-map-navigation", + "my-component" ], "dependencies": [ "ix-tab-item", @@ -4506,6 +4502,9 @@ ], "ix-map-navigation": [ "ix-menu-about" + ], + "my-component": [ + "ix-menu-about" ] }, "props": [ @@ -4596,9 +4595,15 @@ "docs": "", "docsTags": [], "encapsulation": "scoped", - "dependents": [], + "dependents": [ + "my-component" + ], "dependencies": [], - "dependencyGraph": {}, + "dependencyGraph": { + "my-component": [ + "ix-menu-about-item" + ] + }, "props": [ { "name": "label", @@ -4974,12 +4979,16 @@ "docsTags": [], "encapsulation": "none", "dependents": [ - "ix-menu" + "ix-menu", + "my-component" ], "dependencies": [], "dependencyGraph": { "ix-menu": [ "ix-menu-item" + ], + "my-component": [ + "ix-menu-item" ] }, "props": [ @@ -5084,17 +5093,7 @@ } ], "methods": [], - "events": [ - { - "event": "onClick", - "detail": "boolean", - "bubbles": true, - "cancelable": true, - "composed": true, - "docs": "Event to emit to parent that the item was selected", - "docsTags": [] - } - ], + "events": [], "styles": [], "slots": [], "parts": [], @@ -5112,7 +5111,9 @@ "docs": "", "docsTags": [], "encapsulation": "scoped", - "dependents": [], + "dependents": [ + "my-component" + ], "dependencies": [ "ix-tab-item", "ix-icon-button", @@ -5126,6 +5127,9 @@ ], "ix-icon-button": [ "ix-icon" + ], + "my-component": [ + "ix-menu-settings" ] }, "props": [ @@ -5216,9 +5220,15 @@ "docs": "", "docsTags": [], "encapsulation": "scoped", - "dependents": [], + "dependents": [ + "my-component" + ], "dependencies": [], - "dependencyGraph": {}, + "dependencyGraph": { + "my-component": [ + "ix-menu-settings-item" + ] + }, "props": [ { "name": "label", @@ -8615,8 +8625,46 @@ "docsTags": [], "encapsulation": "scoped", "dependents": [], - "dependencies": [], - "dependencyGraph": {}, + "dependencies": [ + "ix-basic-navigation", + "ix-menu", + "ix-menu-item", + "ix-menu-settings", + "ix-menu-settings-item", + "ix-menu-about", + "ix-menu-about-item" + ], + "dependencyGraph": { + "my-component": [ + "ix-basic-navigation", + "ix-menu", + "ix-menu-item", + "ix-menu-settings", + "ix-menu-settings-item", + "ix-menu-about", + "ix-menu-about-item" + ], + "ix-basic-navigation": [ + "ix-application-header" + ], + "ix-menu": [ + "ix-menu-item", + "ix-dropdown" + ], + "ix-menu-settings": [ + "ix-tab-item", + "ix-icon-button", + "ix-tabs" + ], + "ix-icon-button": [ + "ix-icon" + ], + "ix-menu-about": [ + "ix-tab-item", + "ix-icon-button", + "ix-tabs" + ] + }, "props": [], "methods": [], "events": [], diff --git a/packages/core/src/components/menu-item/readme.md b/packages/core/src/components/menu-item/readme.md index 85e6a59de5d..9c991aac897 100644 --- a/packages/core/src/components/menu-item/readme.md +++ b/packages/core/src/components/menu-item/readme.md @@ -21,13 +21,6 @@ SPDX-License-Identifier: MIT | `tabIcon` | `tab-icon` | Icon name from @siemens/ix-icons | `string` | `'document'` | -## Events - -| Event | Description | Type | -| --------- | -------------------------------------------------- | ---------------------- | -| `onClick` | Event to emit to parent that the item was selected | `CustomEvent` | - - ---------------------------------------------- diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx index b1d103a4303..db1d56f4052 100644 --- a/packages/core/src/components/menu/menu.tsx +++ b/packages/core/src/components/menu/menu.tsx @@ -257,6 +257,10 @@ export class Menu { return this.hostElement.querySelector('ix-menu-avatar'); } + get tabsContainer(): HTMLDivElement { + return this.hostElement.querySelector('#menu-tabs'); + } + private popoverListener: Popover; private showTab(index: number) { @@ -658,18 +662,17 @@ export class Menu { return this.mapExpand ? 'double-chevron-left' : 'double-chevron-right'; } - private closeOverlay(event: MouseEvent) { + private isMenuItemClicked(event: MouseEvent) { const path = event.composedPath(); - const shouldCloseOverlay = path.some((element: HTMLElement) => { - if (element.tagName !== 'IX-MENU-ITEM') { - return false; - } - if (!element.id) { - return true; - } - }); - return shouldCloseOverlay; + const menuItems = (path as HTMLElement[]) + + .filter((element) => element.id !== 'more-tab') + .filter((element) => { + return element.tagName === 'IX-MENU-ITEM'; + }); + + return menuItems.some((menu) => this.tabsContainer.contains(menu)); } render() { @@ -684,11 +687,8 @@ export class Menu { menu: true, expanded: this.expand, }} - onClick={(event) => { + onClick={() => { this.resetActiveTab(); - if (this.closeOverlay(event)) { - this.resetOverlay(); - } }} >
-
- -
- {this.activeTab ? ( - - {this.activeTab.innerText} - - ) : null} -
- { + if (this.isMenuItemClicked(event)) { + this.resetOverlay(); + } }} - title="Show more" - notifications={this.countMoreNotifications} - onClick={() => this.toggleShowMoreDropdown()} > - {this.i18nMore} - - {this.menuItems - .filter( - (elm: HTMLIxMenuItemElement, index) => - !this.showTab(index) && - !this.isMenuItemActive(elm) && - this.isVisible(elm) - ) - .map((e: HTMLIxMenuItemElement) => { - return ( - e.dispatchEvent(new CustomEvent('click'))} - > - {e.innerText} - - ); - })} - - +
+ +
+ {this.activeTab ? ( + + {this.activeTab.innerText} + + ) : null} +
+ this.toggleShowMoreDropdown()} + > + {this.i18nMore} + + {this.menuItems + .filter( + (elm: HTMLIxMenuItemElement, index) => + !this.showTab(index) && + !this.isMenuItemActive(elm) && + this.isVisible(elm) + ) + .map((e: HTMLIxMenuItemElement) => { + return ( + + e.dispatchEvent(new CustomEvent('click')) + } + > + {e.innerText} + + ); + })} + + +
{this.enableSettings && !this.isSettingsEmpty ? ( ` | -| `mapExpandChange` | Map Sidebar expanded | `CustomEvent` | -| `overlayClose` | Event to emit to parent that the item was selected | `CustomEvent` | +| Event | Description | Type | +| ----------------- | -------------------- | ---------------------- | +| `expandChange` | Menu expanded | `CustomEvent` | +| `mapExpandChange` | Map Sidebar expanded | `CustomEvent` | ## Methods diff --git a/packages/core/src/components/menu/test/menu.spec.tsx b/packages/core/src/components/menu/test/menu.spec.tsx new file mode 100644 index 00000000000..c3ea9b53be5 --- /dev/null +++ b/packages/core/src/components/menu/test/menu.spec.tsx @@ -0,0 +1,60 @@ +/* + * SPDX-FileCopyrightText: 2022 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { newSpecPage } from '@stencil/core/testing'; +import { fireEvent } from '@testing-library/dom'; +import { MenuAbout } from '../../menu-about/menu-about'; +import { MenuItem } from '../../menu-item/menu-item'; +import { Menu } from '../menu'; + +const mutationObserverMock = jest.fn(function MutationObserver(callback) { + this.observe = jest.fn(); + this.disconnect = jest.fn(); + // Optionally add a trigger() method to manually trigger a change + this.trigger = (mockedMutationsList) => { + callback(mockedMutationsList, this); + }; +}); +(global as any).MutationObserver = mutationObserverMock; + +describe('ix-menu', () => { + it('should close overlay', async () => { + const page = await newSpecPage({ + components: [Menu, MenuItem, MenuAbout], + html: ` + Test + + `, + }); + await page.waitForChanges(); + + const element = page.doc.querySelector('.menu-overlay'); + expect(element.className).toContain('d-none'); + + fireEvent( + page.root.querySelector('#aboutAndLegal'), + new MouseEvent('click') + ); + await page.waitForChanges(); + + expect(element.className).not.toContain('d-none'); + + const item = page.root.querySelector('#test-item'); + fireEvent( + item, + new MouseEvent('click', { + bubbles: true, + cancelable: true, + }) + ); + await page.waitForChanges(); + + expect(element.className).not.toContain('d-block'); + }); +}); diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx index f75c4d6c966..a93c41698d4 100644 --- a/packages/core/src/components/my-component/my-component.tsx +++ b/packages/core/src/components/my-component/my-component.tsx @@ -16,6 +16,31 @@ import { Component, h, Host } from '@stencil/core'; }) export class MyComponent { render() { - return ; + return ( + + + + 123 + 456 + 123 + 456 + 123 + 456 + 123 + 456 + 123 + 456 + 123 + 456 + + Test + + + Test + + + + + ); } } From f9c72b279ff63b43db7c9bebc50dcbd2126dc75d Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Fri, 4 Nov 2022 11:24:12 +0100 Subject: [PATCH 09/11] refactor(core/menu): remove listener --- .../src/components/menu-about/menu-about.tsx | 28 +++++++------------ .../menu-settings/menu-settings.tsx | 26 ++++++----------- 2 files changed, 19 insertions(+), 35 deletions(-) diff --git a/packages/core/src/components/menu-about/menu-about.tsx b/packages/core/src/components/menu-about/menu-about.tsx index 5e4ed5ac786..833f6ba1506 100644 --- a/packages/core/src/components/menu-about/menu-about.tsx +++ b/packages/core/src/components/menu-about/menu-about.tsx @@ -8,17 +8,16 @@ */ import { - Component, - Element, - Event, - EventEmitter, - forceUpdate, - h, - Host, - Listen, - Prop, - State, - Watch + Component, + Element, + Event, + EventEmitter, + forceUpdate, + h, + Host, + Prop, + State, + Watch, } from '@stencil/core'; @Component({ @@ -94,13 +93,6 @@ export class MenuAbout { return this.aboutItems.indexOf(selectedItem); } - @Listen('overlayClose',{target: "body"}) - closeMenu(event: CustomEvent) { - if(event.detail === true){ - this.close.emit() - } - } - private getTabItems() { return this.aboutItems.map(({ label }) => { return ( diff --git a/packages/core/src/components/menu-settings/menu-settings.tsx b/packages/core/src/components/menu-settings/menu-settings.tsx index 52847297c27..25903b66078 100644 --- a/packages/core/src/components/menu-settings/menu-settings.tsx +++ b/packages/core/src/components/menu-settings/menu-settings.tsx @@ -8,16 +8,15 @@ */ import { - Component, - Element, - Event, - EventEmitter, - forceUpdate, - h, - Host, - Listen, - Prop, - Watch + Component, + Element, + Event, + EventEmitter, + forceUpdate, + h, + Host, + Prop, + Watch, } from '@stencil/core'; @Component({ @@ -48,13 +47,6 @@ export class MenuAbout { */ @Event() close: EventEmitter; - @Listen('overlayClose',{target: "body"}) - closeMenu(event: CustomEvent) { - if(event.detail === true){ - this.close.emit() - } - } - get settingsItems(): HTMLIxMenuSettingsItemElement[] { return Array.from(this.el.querySelectorAll('ix-menu-settings-item')); } From 45ef951f1f7391fc722a4adfc54ecdc2d355c859 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Fri, 4 Nov 2022 11:49:04 +0100 Subject: [PATCH 10/11] ci(lint-build): replace with git command --- scripts/lint-build.sh | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/scripts/lint-build.sh b/scripts/lint-build.sh index 1ff98f75899..a93316f807d 100755 --- a/scripts/lint-build.sh +++ b/scripts/lint-build.sh @@ -9,12 +9,15 @@ # LICENSE file in the root directory of this source tree. # -git diff --quiet -p ./packages/core/component-doc.json +RESULT=$(git status --porcelain) STATUS=$? -if [ $STATUS -eq 0 ] +if [[ $STATUS -eq 0 && $RESULT == '' ]] then exit 0 fi +echo There are some changed files after 'yarn build' +echo $RESULT + exit 1 From 4bc086ea76b20c488f00cf209bcf1baaf1888814 Mon Sep 17 00:00:00 2001 From: Daniel Leroux Date: Fri, 4 Nov 2022 11:59:03 +0100 Subject: [PATCH 11/11] fix(core): update generated files --- .gitignore | 2 +- packages/core/component-doc.json | 18 ++---------------- 2 files changed, 3 insertions(+), 17 deletions(-) diff --git a/.gitignore b/.gitignore index 9da5ae49e59..3481285e770 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ # See http://help.github.com/ignore-files/ for more about ignoring files. - +.yarn-cache # compiled output /dist diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json index 812f57c82b5..5785fc9ebe3 100644 --- a/packages/core/component-doc.json +++ b/packages/core/component-doc.json @@ -4574,14 +4574,7 @@ "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "overlayClose", - "target": "body", - "capture": false, - "passive": false - } - ] + "listeners": [] }, { "dirPath": "./src/components/menu-about-item", @@ -5199,14 +5192,7 @@ "styles": [], "slots": [], "parts": [], - "listeners": [ - { - "event": "overlayClose", - "target": "body", - "capture": false, - "passive": false - } - ] + "listeners": [] }, { "dirPath": "./src/components/menu-settings-item",