@siemens/ix 2.1.0-beta.1 → 2.1.0-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/card.js +8 -3
- package/components/card.js.map +1 -1
- package/components/dropdown.js +55 -47
- package/components/dropdown.js.map +1 -1
- package/components/ix-action-card.js +2 -4
- package/components/ix-action-card.js.map +1 -1
- package/components/ix-push-card.js +1 -1
- package/components/ix-push-card.js.map +1 -1
- package/dist/cjs/ix-action-card.cjs.entry.js +2 -4
- package/dist/cjs/ix-action-card.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-card_2.cjs.entry.js +6 -2
- package/dist/cjs/ix-card_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-dropdown.cjs.entry.js +55 -47
- package/dist/cjs/ix-dropdown.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-push-card.cjs.entry.js +1 -1
- package/dist/cjs/ix-push-card.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/siemens-ix.cjs.js +1 -1
- package/dist/collection/components/action-card/action-card.css +0 -141
- package/dist/collection/components/action-card/action-card.js +1 -3
- package/dist/collection/components/action-card/action-card.js.map +1 -1
- package/dist/collection/components/card/card.css +103 -0
- package/dist/collection/components/card/card.js +25 -1
- package/dist/collection/components/card/card.js.map +1 -1
- package/dist/collection/components/dropdown/dropdown-controller.js +39 -22
- package/dist/collection/components/dropdown/dropdown-controller.js.map +1 -1
- package/dist/collection/components/dropdown/dropdown.js +20 -29
- package/dist/collection/components/dropdown/dropdown.js.map +1 -1
- package/dist/collection/components/dropdown/test/dropdown.ct.js +112 -21
- package/dist/collection/components/dropdown/test/dropdown.ct.js.map +1 -1
- package/dist/collection/components/push-card/push-card.css +0 -56
- package/dist/collection/tests/card/card.e2e.js +23 -0
- package/dist/collection/tests/card/card.e2e.js.map +1 -0
- package/dist/esm/ix-action-card.entry.js +2 -4
- package/dist/esm/ix-action-card.entry.js.map +1 -1
- package/dist/esm/ix-card_2.entry.js +6 -2
- package/dist/esm/ix-card_2.entry.js.map +1 -1
- package/dist/esm/ix-dropdown.entry.js +55 -47
- package/dist/esm/ix-dropdown.entry.js.map +1 -1
- package/dist/esm/ix-push-card.entry.js +1 -1
- package/dist/esm/ix-push-card.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/siemens-ix.js +1 -1
- package/dist/siemens-ix/p-731a81c6.entry.js +2 -0
- package/dist/siemens-ix/p-731a81c6.entry.js.map +1 -0
- package/dist/siemens-ix/p-9f03e475.entry.js +2 -0
- package/dist/siemens-ix/p-9f03e475.entry.js.map +1 -0
- package/dist/siemens-ix/p-ba379675.entry.js +2 -0
- package/dist/siemens-ix/p-ba379675.entry.js.map +1 -0
- package/dist/siemens-ix/p-c5965787.entry.js +2 -0
- package/dist/siemens-ix/p-c5965787.entry.js.map +1 -0
- package/dist/siemens-ix/siemens-ix.esm.js +1 -1
- package/dist/siemens-ix/siemens-ix.esm.js.map +1 -1
- package/dist/types/components/card/card.d.ts +4 -0
- package/dist/types/components/dropdown/dropdown-controller.d.ts +8 -5
- package/dist/types/components/dropdown/dropdown.d.ts +4 -2
- package/dist/types/components.d.ts +14 -6
- package/package.json +1 -1
- package/dist/siemens-ix/p-0872fe61.entry.js +0 -2
- package/dist/siemens-ix/p-0872fe61.entry.js.map +0 -1
- package/dist/siemens-ix/p-a38ec9e8.entry.js +0 -2
- package/dist/siemens-ix/p-a38ec9e8.entry.js.map +0 -1
- package/dist/siemens-ix/p-e12d4a6f.entry.js +0 -2
- package/dist/siemens-ix/p-e12d4a6f.entry.js.map +0 -1
- package/dist/siemens-ix/p-e359d3c5.entry.js +0 -2
- package/dist/siemens-ix/p-e359d3c5.entry.js.map +0 -1
|
@@ -5,9 +5,13 @@ import { h, Host } from "@stencil/core";
|
|
|
5
5
|
export class Card {
|
|
6
6
|
constructor() {
|
|
7
7
|
this.variant = 'insight';
|
|
8
|
+
this.selected = undefined;
|
|
8
9
|
}
|
|
9
10
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
11
|
+
return (h(Host, { key: 'f91df8c114ec01e95ae0eba29c8acf3cacbdec25', class: {
|
|
12
|
+
selected: this.selected,
|
|
13
|
+
[`card-${this.variant}`]: true,
|
|
14
|
+
} }, h("div", { key: '24c775b7ae7b2940df9e101b702b91a17a0f6749', class: "card-content" }, h("slot", { key: '57bfc8eb49985aae6aff8ea277475b2012ac8ba2' })), h("div", { key: '8eac7eefd8020827e0ebf38be231de2c7b934797', class: "card-footer" }, h("slot", { key: '207dc0b0ce6279ecb9dfda76e3d03a145a5ff168', name: "card-accordion" }))));
|
|
11
15
|
}
|
|
12
16
|
static get is() { return "ix-card"; }
|
|
13
17
|
static get encapsulation() { return "shadow"; }
|
|
@@ -46,6 +50,26 @@ export class Card {
|
|
|
46
50
|
"attribute": "variant",
|
|
47
51
|
"reflect": false,
|
|
48
52
|
"defaultValue": "'insight'"
|
|
53
|
+
},
|
|
54
|
+
"selected": {
|
|
55
|
+
"type": "boolean",
|
|
56
|
+
"mutable": false,
|
|
57
|
+
"complexType": {
|
|
58
|
+
"original": "boolean",
|
|
59
|
+
"resolved": "boolean",
|
|
60
|
+
"references": {}
|
|
61
|
+
},
|
|
62
|
+
"required": false,
|
|
63
|
+
"optional": false,
|
|
64
|
+
"docs": {
|
|
65
|
+
"tags": [{
|
|
66
|
+
"name": "since",
|
|
67
|
+
"text": "2.1.0"
|
|
68
|
+
}],
|
|
69
|
+
"text": ""
|
|
70
|
+
},
|
|
71
|
+
"attribute": "selected",
|
|
72
|
+
"reflect": false
|
|
49
73
|
}
|
|
50
74
|
};
|
|
51
75
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAalE;;GAEG;AAMH,MAAM,OAAO,IAAI;;uBAMgB,SAAS
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAalE;;GAEG;AAMH,MAAM,OAAO,IAAI;;uBAMgB,SAAS;;;IAOxC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;aAC/B;YAED,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAa,CACT;YACN,4DAAK,KAAK,EAAC,aAAa;gBACtB,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n | 'insight'\n | 'notification'\n | 'alarm'\n | 'critical'\n | 'warning'\n | 'info'\n | 'neutral'\n | 'success'\n | 'primary';\n\n/**\n * @since 1.6.0\n */\n@Component({\n tag: 'ix-card',\n styleUrl: 'card.scss',\n shadow: true,\n})\nexport class Card {\n @Element() hostElement: HTMLIxCardElement;\n\n /**\n * Card variant\n */\n @Prop() variant: CardVariant = 'insight';\n\n /**\n * @since 2.1.0\n */\n @Prop() selected: boolean;\n\n render() {\n return (\n <Host\n class={{\n selected: this.selected,\n [`card-${this.variant}`]: true,\n }}\n >\n <div class=\"card-content\">\n <slot></slot>\n </div>\n <div class=\"card-footer\">\n <slot name=\"card-accordion\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -12,21 +12,21 @@ export function hasDropdownItemWrapperImplemented(item) {
|
|
|
12
12
|
}
|
|
13
13
|
class DropdownController {
|
|
14
14
|
constructor() {
|
|
15
|
-
this.dropdowns = new
|
|
16
|
-
this.
|
|
15
|
+
this.dropdowns = new Map();
|
|
16
|
+
this.submenuIds = {};
|
|
17
17
|
this.isWindowListenerActive = false;
|
|
18
18
|
}
|
|
19
19
|
connected(dropdown) {
|
|
20
20
|
if (!this.isWindowListenerActive) {
|
|
21
21
|
this.addOverlayListeners();
|
|
22
22
|
}
|
|
23
|
-
this.dropdowns.
|
|
23
|
+
this.dropdowns.set(dropdown.getId(), dropdown);
|
|
24
24
|
if (dropdown.discoverAllSubmenus) {
|
|
25
25
|
this.discoverSubmenus();
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
disconnected(dropdown) {
|
|
29
|
-
this.dropdowns.delete(dropdown);
|
|
29
|
+
this.dropdowns.delete(dropdown.getId());
|
|
30
30
|
}
|
|
31
31
|
discoverSubmenus() {
|
|
32
32
|
this.dropdowns.forEach((dropdown) => {
|
|
@@ -34,44 +34,57 @@ class DropdownController {
|
|
|
34
34
|
});
|
|
35
35
|
}
|
|
36
36
|
present(dropdown) {
|
|
37
|
-
this.dropdownRules[dropdown.getId()] = dropdown.getAssignedSubmenuIds();
|
|
38
37
|
if (!dropdown.isPresent() && dropdown.willPresent()) {
|
|
38
|
+
this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();
|
|
39
39
|
dropdown.present();
|
|
40
|
-
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
dismissChildren(uid) {
|
|
43
|
+
const childIds = this.submenuIds[uid] || [];
|
|
44
|
+
for (const id of childIds) {
|
|
45
|
+
this.dismiss(this.dropdowns.get(id));
|
|
41
46
|
}
|
|
42
47
|
}
|
|
43
48
|
dismiss(dropdown) {
|
|
44
49
|
if (dropdown.isPresent() && dropdown.willDismiss()) {
|
|
50
|
+
this.dismissChildren(dropdown.getId());
|
|
45
51
|
dropdown.dismiss();
|
|
46
|
-
delete this.
|
|
52
|
+
delete this.submenuIds[dropdown.getId()];
|
|
47
53
|
}
|
|
48
54
|
}
|
|
49
|
-
dismissAll() {
|
|
50
|
-
|
|
51
|
-
if (
|
|
52
|
-
dropdown.closeBehavior ===
|
|
53
|
-
|
|
55
|
+
dismissAll(includeUids) {
|
|
56
|
+
this.dropdowns.forEach((dropdown) => {
|
|
57
|
+
if (!(includeUids === null || includeUids === void 0 ? void 0 : includeUids.includes(dropdown.getId())) &&
|
|
58
|
+
(dropdown.closeBehavior === 'inside' ||
|
|
59
|
+
dropdown.closeBehavior === false)) {
|
|
60
|
+
return;
|
|
54
61
|
}
|
|
55
62
|
this.dismiss(dropdown);
|
|
56
|
-
}
|
|
63
|
+
});
|
|
57
64
|
}
|
|
58
|
-
|
|
65
|
+
dismissOthers(uid) {
|
|
59
66
|
let path = this.buildComposedPath(uid, new Set());
|
|
60
|
-
|
|
67
|
+
this.dropdowns.forEach((dropdown) => {
|
|
61
68
|
if (dropdown.isPresent() &&
|
|
62
69
|
dropdown.closeBehavior !== 'inside' &&
|
|
63
70
|
dropdown.closeBehavior !== false &&
|
|
64
71
|
!path.has(dropdown.getId())) {
|
|
65
72
|
this.dismiss(dropdown);
|
|
66
73
|
}
|
|
67
|
-
}
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
pathIncludesTrigger(eventTargets) {
|
|
77
|
+
return !!eventTargets.find((element) => { var _a; return !!((_a = element.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(element, 'data-ix-dropdown-trigger')); });
|
|
78
|
+
}
|
|
79
|
+
pathIncludesDropdown(eventTargets) {
|
|
80
|
+
return !!eventTargets.find((element) => element.tagName === 'IX-DROPDOWN');
|
|
68
81
|
}
|
|
69
82
|
buildComposedPath(id, path) {
|
|
70
|
-
if (this.
|
|
83
|
+
if (this.submenuIds[id]) {
|
|
71
84
|
path.add(id);
|
|
72
85
|
}
|
|
73
|
-
for (const ruleKey of Object.keys(this.
|
|
74
|
-
if (this.
|
|
86
|
+
for (const ruleKey of Object.keys(this.submenuIds)) {
|
|
87
|
+
if (this.submenuIds[ruleKey].includes(id)) {
|
|
75
88
|
this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));
|
|
76
89
|
}
|
|
77
90
|
}
|
|
@@ -79,12 +92,16 @@ class DropdownController {
|
|
|
79
92
|
}
|
|
80
93
|
addOverlayListeners() {
|
|
81
94
|
this.isWindowListenerActive = true;
|
|
82
|
-
window.addEventListener('click', () => {
|
|
83
|
-
this.
|
|
95
|
+
window.addEventListener('click', (event) => {
|
|
96
|
+
const hasTrigger = this.pathIncludesTrigger(event.composedPath());
|
|
97
|
+
const hasDropdown = this.pathIncludesDropdown(event.composedPath());
|
|
98
|
+
if (!hasTrigger && !hasDropdown) {
|
|
99
|
+
this.dismissAll();
|
|
100
|
+
}
|
|
84
101
|
});
|
|
85
102
|
window.addEventListener('keydown', (event) => {
|
|
86
103
|
if (event.key === 'Escape') {
|
|
87
|
-
this.dismissAll();
|
|
104
|
+
this.dismissAll([...this.dropdowns.keys()]);
|
|
88
105
|
}
|
|
89
106
|
});
|
|
90
107
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-controller.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-controller.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAuBH,MAAM,UAAU,iCAAiC,CAC/C,IAAa;IAEb,OAAO,CACJ,IAA4B,CAAC,sBAAsB,KAAK,SAAS;QAClE,OAAQ,IAA4B,CAAC,sBAAsB,KAAK,UAAU,CAC3E,CAAC;AACJ,CAAC;AAQD,MAAM,kBAAkB;IAAxB;QACU,cAAS,
|
|
1
|
+
{"version":3,"file":"dropdown-controller.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-controller.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { IxComponent } from '../utils/internal';\nexport type CloseBehavior = 'inside' | 'outside' | 'both' | boolean;\n\nexport interface DropdownInterface extends IxComponent {\n closeBehavior: CloseBehavior;\n discoverAllSubmenus: boolean;\n\n getAssignedSubmenuIds(): string[];\n getId(): string;\n\n discoverSubmenu(): void;\n\n isPresent(): boolean;\n\n willPresent?(): boolean;\n willDismiss?(): boolean;\n\n present(): void;\n dismiss(): void;\n}\n\nexport function hasDropdownItemWrapperImplemented(\n item: unknown\n): item is DropdownItemWrapper {\n return (\n (item as DropdownItemWrapper).getDropdownItemElement !== undefined &&\n typeof (item as DropdownItemWrapper).getDropdownItemElement === 'function'\n );\n}\n\nexport interface DropdownItemWrapper {\n getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;\n}\n\ntype SubmenuIds = Record<string, string[]>;\n\nclass DropdownController {\n private dropdowns: Map<string, DropdownInterface> = new Map<\n string,\n DropdownInterface\n >();\n private submenuIds: SubmenuIds = {};\n\n private isWindowListenerActive = false;\n\n connected(dropdown: DropdownInterface) {\n if (!this.isWindowListenerActive) {\n this.addOverlayListeners();\n }\n this.dropdowns.set(dropdown.getId(), dropdown);\n\n if (dropdown.discoverAllSubmenus) {\n this.discoverSubmenus();\n }\n }\n\n disconnected(dropdown: DropdownInterface) {\n this.dropdowns.delete(dropdown.getId());\n }\n\n discoverSubmenus() {\n this.dropdowns.forEach((dropdown) => {\n dropdown.discoverSubmenu();\n });\n }\n\n present(dropdown: DropdownInterface) {\n if (!dropdown.isPresent() && dropdown.willPresent()) {\n this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();\n dropdown.present();\n }\n }\n\n dismissChildren(uid: string) {\n const childIds = this.submenuIds[uid] || [];\n for (const id of childIds) {\n this.dismiss(this.dropdowns.get(id));\n }\n }\n\n dismiss(dropdown: DropdownInterface) {\n if (dropdown.isPresent() && dropdown.willDismiss()) {\n this.dismissChildren(dropdown.getId());\n dropdown.dismiss();\n delete this.submenuIds[dropdown.getId()];\n }\n }\n\n dismissAll(includeUids?: string[]) {\n this.dropdowns.forEach((dropdown) => {\n if (\n !includeUids?.includes(dropdown.getId()) &&\n (dropdown.closeBehavior === 'inside' ||\n dropdown.closeBehavior === false)\n ) {\n return;\n }\n\n this.dismiss(dropdown);\n });\n }\n\n dismissOthers(uid: string) {\n let path = this.buildComposedPath(uid, new Set<string>());\n\n this.dropdowns.forEach((dropdown) => {\n if (\n dropdown.isPresent() &&\n dropdown.closeBehavior !== 'inside' &&\n dropdown.closeBehavior !== false &&\n !path.has(dropdown.getId())\n ) {\n this.dismiss(dropdown);\n }\n });\n }\n\n pathIncludesTrigger(eventTargets: EventTarget[]) {\n return !!eventTargets.find(\n (element: HTMLElement) =>\n !!element.hasAttribute?.('data-ix-dropdown-trigger')\n );\n }\n\n private pathIncludesDropdown(eventTargets: EventTarget[]) {\n return !!eventTargets.find(\n (element: HTMLElement) => element.tagName === 'IX-DROPDOWN'\n );\n }\n\n private buildComposedPath(id: string, path: Set<string>): Set<string> {\n if (this.submenuIds[id]) {\n path.add(id);\n }\n\n for (const ruleKey of Object.keys(this.submenuIds)) {\n if (this.submenuIds[ruleKey].includes(id)) {\n this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));\n }\n }\n\n return path;\n }\n\n private addOverlayListeners() {\n this.isWindowListenerActive = true;\n\n window.addEventListener('click', (event: PointerEvent) => {\n const hasTrigger = this.pathIncludesTrigger(event.composedPath());\n const hasDropdown = this.pathIncludesDropdown(event.composedPath());\n\n if (!hasTrigger && !hasDropdown) {\n this.dismissAll();\n }\n });\n\n window.addEventListener('keydown', (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.dismissAll([...this.dropdowns.keys()]);\n }\n });\n }\n}\n\nexport const addDisposableEventListener = (\n element: Element | Window | Document,\n eventType: string,\n callback: EventListenerOrEventListenerObject\n) => {\n element.addEventListener(eventType, callback);\n\n return () => {\n element.removeEventListener(eventType, callback);\n };\n};\n\nexport const addDisposableEventListenerAsArray = (\n listener: {\n element: Element | Window | Document;\n eventType: string;\n callback: EventListenerOrEventListenerObject;\n }[]\n) => {\n const disposables = listener.map(({ callback, element, eventType }) =>\n addDisposableEventListener(element, eventType, callback)\n );\n\n return () => disposables.forEach((dispose) => dispose());\n};\n\nexport const dropdownController = new DropdownController();\n"]}
|
|
@@ -78,25 +78,18 @@ export class Dropdown {
|
|
|
78
78
|
addEventListenersFor() {
|
|
79
79
|
var _a;
|
|
80
80
|
(_a = this.disposeListener) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
81
|
-
const stopEventDispatching = (event) => {
|
|
82
|
-
// Prevent default and stop event bubbling to window, otherwise controller will close all dropdowns
|
|
83
|
-
if (this.triggerElement.hasAttribute('data-ix-dropdown-trigger')) {
|
|
84
|
-
event.preventDefault();
|
|
85
|
-
event.stopPropagation();
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
81
|
const toggleController = () => {
|
|
89
82
|
if (!this.isPresent()) {
|
|
90
83
|
dropdownController.present(this);
|
|
91
84
|
}
|
|
92
85
|
else {
|
|
93
86
|
dropdownController.dismiss(this);
|
|
94
|
-
dropdownController.dismissPath(this.getId());
|
|
95
87
|
}
|
|
88
|
+
dropdownController.dismissOthers(this.getId());
|
|
96
89
|
};
|
|
97
90
|
this.disposeListener = addDisposableEventListener(this.triggerElement, 'click', (event) => {
|
|
98
|
-
|
|
99
|
-
|
|
91
|
+
if (!event.defaultPrevented)
|
|
92
|
+
toggleController();
|
|
100
93
|
});
|
|
101
94
|
this.triggerElement.setAttribute('data-ix-dropdown-trigger', this.localUId);
|
|
102
95
|
}
|
|
@@ -231,15 +224,6 @@ export class Dropdown {
|
|
|
231
224
|
}
|
|
232
225
|
async componentDidLoad() {
|
|
233
226
|
this.changedTrigger(this.trigger);
|
|
234
|
-
// Event listener to check if a dropdown is inside another dropdown
|
|
235
|
-
// Cancellation of the event will prevent the closing of the parent dropdown
|
|
236
|
-
this.hostElement.addEventListener('check-nested-dropdown', (event) => {
|
|
237
|
-
if (event.detail === this.localUId) {
|
|
238
|
-
return;
|
|
239
|
-
}
|
|
240
|
-
event.preventDefault();
|
|
241
|
-
event.stopPropagation();
|
|
242
|
-
});
|
|
243
227
|
}
|
|
244
228
|
async componentDidRender() {
|
|
245
229
|
await this.applyDropdownPosition();
|
|
@@ -247,13 +231,20 @@ export class Dropdown {
|
|
|
247
231
|
? this.resolveElement(this.anchor)
|
|
248
232
|
: this.resolveElement(this.trigger));
|
|
249
233
|
}
|
|
234
|
+
isTriggerElement(element) {
|
|
235
|
+
const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');
|
|
236
|
+
return trigger;
|
|
237
|
+
}
|
|
250
238
|
onDropdownClick(event) {
|
|
251
|
-
event.
|
|
252
|
-
|
|
239
|
+
if (dropdownController.pathIncludesTrigger(event.composedPath())) {
|
|
240
|
+
event.preventDefault();
|
|
241
|
+
if (this.isTriggerElement(event.target))
|
|
242
|
+
return;
|
|
243
|
+
}
|
|
253
244
|
if (this.closeBehavior === 'inside' || this.closeBehavior === 'both') {
|
|
254
|
-
dropdownController.
|
|
255
|
-
dropdownController.dismissAll();
|
|
245
|
+
dropdownController.dismissAll([this.getId()]);
|
|
256
246
|
}
|
|
247
|
+
dropdownController.dismissOthers(this.getId());
|
|
257
248
|
}
|
|
258
249
|
/**
|
|
259
250
|
* Update position of dropdown
|
|
@@ -262,7 +253,7 @@ export class Dropdown {
|
|
|
262
253
|
this.applyDropdownPosition();
|
|
263
254
|
}
|
|
264
255
|
render() {
|
|
265
|
-
return (h(Host, { key: '
|
|
256
|
+
return (h(Host, { key: '6747db1bc7c303781400a3ede0635fc84a32d61b', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
|
|
266
257
|
'dropdown-menu': true,
|
|
267
258
|
show: this.show,
|
|
268
259
|
overflow: true,
|
|
@@ -270,7 +261,7 @@ export class Dropdown {
|
|
|
270
261
|
margin: '0',
|
|
271
262
|
minWidth: '0px',
|
|
272
263
|
position: this.positioningStrategy,
|
|
273
|
-
}, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: '
|
|
264
|
+
}, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: '3407be8208d5fb220b80744afb9a5aa938b4b658', style: { display: 'contents' } }, this.header && h("div", { class: "dropdown-header" }, this.header), h("slot", { key: '48df3c460330d7ef698b1624d93ad548e95902d0' }))));
|
|
274
265
|
}
|
|
275
266
|
static get is() { return "ix-dropdown"; }
|
|
276
267
|
static get encapsulation() { return "shadow"; }
|
|
@@ -377,13 +368,13 @@ export class Dropdown {
|
|
|
377
368
|
"type": "any",
|
|
378
369
|
"mutable": false,
|
|
379
370
|
"complexType": {
|
|
380
|
-
"original": "
|
|
371
|
+
"original": "CloseBehavior",
|
|
381
372
|
"resolved": "\"both\" | \"inside\" | \"outside\" | boolean",
|
|
382
373
|
"references": {
|
|
383
|
-
"
|
|
374
|
+
"CloseBehavior": {
|
|
384
375
|
"location": "import",
|
|
385
376
|
"path": "./dropdown-controller",
|
|
386
|
-
"id": "src/components/dropdown/dropdown-controller.ts::
|
|
377
|
+
"id": "src/components/dropdown/dropdown-controller.ts::CloseBehavior"
|
|
387
378
|
}
|
|
388
379
|
}
|
|
389
380
|
},
|
|
@@ -391,7 +382,7 @@ export class Dropdown {
|
|
|
391
382
|
"optional": false,
|
|
392
383
|
"docs": {
|
|
393
384
|
"tags": [],
|
|
394
|
-
"text": "Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown."
|
|
385
|
+
"text": "Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\nIf the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior."
|
|
395
386
|
},
|
|
396
387
|
"attribute": "close-behavior",
|
|
397
388
|
"reflect": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n autoUpdate,\n computePosition,\n ComputePositionConfig,\n flip,\n inline,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { ComponentInterface } from '@stencil/core/internal';\nimport {\n addDisposableEventListener,\n CloseBehaviour,\n dropdownController,\n DropdownInterface,\n hasDropdownItemWrapperImplemented,\n} from './dropdown-controller';\nimport { AlignedPlacement } from './placement';\n\nlet sequenceId = 0;\n\n@Component({\n tag: 'ix-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown implements ComponentInterface, DropdownInterface {\n @Element() hostElement!: HTMLIxDropdownElement;\n\n /**\n * Suppress the automatic placement of the dropdown.\n *\n * @since 2.0.0\n */\n @Prop() suppressAutomaticPlacement = false;\n\n /**\n * Show dropdown\n */\n @Prop({ mutable: true, reflect: true }) show = false;\n\n /**\n * Define an element that triggers the dropdown.\n * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n */\n @Prop() trigger: string | HTMLElement | Promise<HTMLElement>;\n\n /**\n * Define an anchor element\n */\n @Prop() anchor: string | HTMLElement;\n\n /**\n * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n */\n @Prop() closeBehavior: CloseBehaviour = 'both';\n\n /**\n * Placement of the dropdown\n */\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n /**\n * Position strategy\n */\n @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n /**\n * An optional header shown at the top of the dropdown\n */\n @Prop() header?: string;\n\n /**\n * Move dropdown along main axis of alignment\n *\n * @internal\n */\n @Prop() offset: {\n mainAxis?: number;\n crossAxis?: number;\n alignmentAxis?: number;\n };\n\n /**\n * @internal\n */\n @Prop() overwriteDropdownStyle: (delegate: {\n dropdownRef: HTMLElement;\n triggerRef?: HTMLElement;\n }) => Promise<Partial<CSSStyleDeclaration>>;\n\n /**\n * @internal\n * If initialisation of this dropdown is expected to be defered submenu discovery will have to be re-run globally by the controller.\n * This property indicates the need for that to the controller.\n */\n @Prop() discoverAllSubmenus = false;\n\n /**\n * Fire event after visibility of dropdown has changed\n */\n @Event() showChanged: EventEmitter<boolean>;\n\n private autoUpdateCleanup: () => void = null;\n\n private triggerElement?: Element;\n private anchorElement?: Element;\n\n private dropdownRef: HTMLElement;\n private localUId = `dropdown-${sequenceId++}`;\n private assignedSubmenu: string[] = [];\n\n connectedCallback(): void {\n dropdownController.connected(this);\n }\n\n @Listen('ix-assign-sub-menu')\n cacheSubmenuId(event: CustomEvent<string>) {\n event.stopImmediatePropagation();\n event.preventDefault();\n\n const { detail } = event;\n\n if (this.assignedSubmenu.indexOf(detail) === -1) {\n this.assignedSubmenu.push(detail);\n }\n }\n\n disconnectedCallback() {\n this.disposeListener?.();\n dropdownController.disconnected(this);\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n }\n\n getAssignedSubmenuIds() {\n return this.assignedSubmenu;\n }\n\n isPresent() {\n return this.show;\n }\n\n present() {\n this.show = true;\n }\n\n dismiss() {\n this.show = false;\n }\n\n getId() {\n return this.localUId;\n }\n\n willDismiss() {\n const { defaultPrevented } = this.showChanged.emit(false);\n return !defaultPrevented;\n }\n\n willPresent() {\n const { defaultPrevented } = this.showChanged.emit(true);\n return !defaultPrevented;\n }\n\n get dropdownItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n }\n\n get slotElement() {\n return this.hostElement.shadowRoot.querySelector('slot');\n }\n\n private disposeListener?: Function;\n\n private addEventListenersFor() {\n this.disposeListener?.();\n\n const stopEventDispatching = (event: Event) => {\n // Prevent default and stop event bubbling to window, otherwise controller will close all dropdowns\n if (this.triggerElement.hasAttribute('data-ix-dropdown-trigger')) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n\n const toggleController = () => {\n if (!this.isPresent()) {\n dropdownController.present(this);\n } else {\n dropdownController.dismiss(this);\n dropdownController.dismissPath(this.getId());\n }\n };\n\n this.disposeListener = addDisposableEventListener(\n this.triggerElement,\n 'click',\n (event) => {\n stopEventDispatching(event);\n toggleController();\n }\n );\n this.triggerElement.setAttribute('data-ix-dropdown-trigger', this.localUId);\n }\n\n /** @internal */\n @Method()\n async discoverSubmenu() {\n this.triggerElement?.dispatchEvent(\n new CustomEvent('ix-assign-sub-menu', {\n bubbles: true,\n composed: false,\n cancelable: true,\n detail: this.localUId,\n })\n );\n }\n\n private async registerListener(\n element: string | HTMLElement | Promise<HTMLElement>\n ) {\n this.triggerElement = await this.resolveElement(element);\n if (this.triggerElement) {\n this.addEventListenersFor();\n this.discoverSubmenu();\n }\n }\n\n private async resolveElement(\n element: string | HTMLElement | Promise<HTMLElement>\n ) {\n const el = await this.findElement(element);\n\n return this.checkForSubmenuAnchor(el);\n }\n\n private async checkForSubmenuAnchor(element: Element) {\n if (hasDropdownItemWrapperImplemented(element)) {\n const dropdownItem = await element.getDropdownItemElement();\n dropdownItem.isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n\n return dropdownItem;\n }\n\n if (element.tagName === 'IX-DROPDOWN-ITEM') {\n (element as HTMLIxDropdownItemElement).isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n }\n\n return element;\n }\n\n private findElement(\n element: string | HTMLElement | Promise<HTMLElement>\n ): Promise<Element> {\n if (element instanceof Promise) {\n return element;\n }\n\n if (typeof element === 'object') {\n return Promise.resolve(element);\n }\n\n const selector = `#${element}`;\n return new Promise((resolve) => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector));\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector));\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n }\n\n @Watch('show')\n async changedShow(newShow: boolean) {\n if (newShow) {\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n\n if (this.anchorElement) {\n this.applyDropdownPosition();\n // await this.checkForSubmenuAnchor();\n }\n }\n }\n\n @Watch('trigger')\n changedTrigger(newTriggerValue: string | HTMLElement | Promise<HTMLElement>) {\n this.registerListener(newTriggerValue);\n }\n\n private isAnchorSubmenu(): boolean {\n if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {\n // Is no official dropdown-item, but check if any dropdown-item\n // is placed somewhere up the DOM\n return !!this.anchorElement?.closest('ix-dropdown-item');\n }\n\n return true;\n }\n\n private async applyDropdownPosition() {\n if (!this.anchorElement) {\n return;\n }\n if (!this.dropdownRef) {\n return;\n }\n const isSubmenu = this.isAnchorSubmenu();\n\n let positionConfig: Partial<ComputePositionConfig> = {\n strategy: this.positioningStrategy,\n middleware: [],\n };\n\n if (!this.suppressAutomaticPlacement) {\n positionConfig.middleware.push(\n flip({ fallbackStrategy: 'initialPlacement' })\n );\n }\n\n positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n positionConfig.middleware = [\n ...positionConfig.middleware,\n inline(),\n shift(),\n ];\n\n if (this.offset) {\n positionConfig.middleware.push(offset(this.offset));\n }\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n this.autoUpdateCleanup = null;\n }\n\n this.autoUpdateCleanup = autoUpdate(\n this.anchorElement,\n this.dropdownRef,\n async () => {\n const computeResponse = await computePosition(\n this.anchorElement,\n this.dropdownRef,\n positionConfig\n );\n\n Object.assign(this.dropdownRef.style, {\n top: '0',\n left: '0',\n transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n computeResponse.y\n )}px)`,\n });\n if (this.overwriteDropdownStyle) {\n const overwriteStyle = await this.overwriteDropdownStyle({\n dropdownRef: this.dropdownRef,\n triggerRef: this.triggerElement as HTMLElement,\n });\n\n Object.assign(this.dropdownRef.style, overwriteStyle);\n }\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n }\n );\n }\n\n async componentDidLoad() {\n this.changedTrigger(this.trigger);\n\n // Event listener to check if a dropdown is inside another dropdown\n // Cancellation of the event will prevent the closing of the parent dropdown\n this.hostElement.addEventListener(\n 'check-nested-dropdown',\n (event: CustomEvent<string>) => {\n if (event.detail === this.localUId) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n }\n );\n }\n\n async componentDidRender() {\n await this.applyDropdownPosition();\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n }\n\n private onDropdownClick(event: PointerEvent) {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.closeBehavior === 'inside' || this.closeBehavior === 'both') {\n dropdownController.dismiss(this);\n dropdownController.dismissAll();\n }\n }\n\n /**\n * Update position of dropdown\n */\n @Method()\n async updatePosition() {\n this.applyDropdownPosition();\n }\n\n render() {\n return (\n <Host\n data-ix-dropdown={this.localUId}\n ref={(ref) => (this.dropdownRef = ref)}\n class={{\n 'dropdown-menu': true,\n show: this.show,\n overflow: true,\n }}\n style={{\n margin: '0',\n minWidth: '0px',\n position: this.positioningStrategy,\n }}\n role=\"list\"\n onClick={(event: PointerEvent) => this.onDropdownClick(event)}\n >\n <div style={{ display: 'contents' }}>\n {this.header && <div class=\"dropdown-header\">{this.header}</div>}\n\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n autoUpdate,\n computePosition,\n ComputePositionConfig,\n flip,\n inline,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { ComponentInterface } from '@stencil/core/internal';\nimport {\n addDisposableEventListener,\n CloseBehavior,\n dropdownController,\n DropdownInterface,\n hasDropdownItemWrapperImplemented,\n} from './dropdown-controller';\nimport { AlignedPlacement } from './placement';\n\nlet sequenceId = 0;\n\n@Component({\n tag: 'ix-dropdown',\n styleUrl: 'dropdown.scss',\n shadow: true,\n})\nexport class Dropdown implements ComponentInterface, DropdownInterface {\n @Element() hostElement!: HTMLIxDropdownElement;\n\n /**\n * Suppress the automatic placement of the dropdown.\n *\n * @since 2.0.0\n */\n @Prop() suppressAutomaticPlacement = false;\n\n /**\n * Show dropdown\n */\n @Prop({ mutable: true, reflect: true }) show = false;\n\n /**\n * Define an element that triggers the dropdown.\n * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n */\n @Prop() trigger: string | HTMLElement | Promise<HTMLElement>;\n\n /**\n * Define an anchor element\n */\n @Prop() anchor: string | HTMLElement;\n\n /**\n * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n * If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.\n */\n @Prop() closeBehavior: CloseBehavior = 'both';\n\n /**\n * Placement of the dropdown\n */\n @Prop() placement: AlignedPlacement = 'bottom-start';\n\n /**\n * Position strategy\n */\n @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n /**\n * An optional header shown at the top of the dropdown\n */\n @Prop() header?: string;\n\n /**\n * Move dropdown along main axis of alignment\n *\n * @internal\n */\n @Prop() offset: {\n mainAxis?: number;\n crossAxis?: number;\n alignmentAxis?: number;\n };\n\n /**\n * @internal\n */\n @Prop() overwriteDropdownStyle: (delegate: {\n dropdownRef: HTMLElement;\n triggerRef?: HTMLElement;\n }) => Promise<Partial<CSSStyleDeclaration>>;\n\n /**\n * @internal\n * If initialisation of this dropdown is expected to be defered submenu discovery will have to be re-run globally by the controller.\n * This property indicates the need for that to the controller.\n */\n @Prop() discoverAllSubmenus = false;\n\n /**\n * Fire event after visibility of dropdown has changed\n */\n @Event() showChanged: EventEmitter<boolean>;\n\n private autoUpdateCleanup: () => void = null;\n\n private triggerElement?: Element;\n private anchorElement?: Element;\n\n private dropdownRef: HTMLElement;\n private localUId = `dropdown-${sequenceId++}`;\n private assignedSubmenu: string[] = [];\n\n connectedCallback(): void {\n dropdownController.connected(this);\n }\n\n @Listen('ix-assign-sub-menu')\n cacheSubmenuId(event: CustomEvent<string>) {\n event.stopImmediatePropagation();\n event.preventDefault();\n\n const { detail } = event;\n\n if (this.assignedSubmenu.indexOf(detail) === -1) {\n this.assignedSubmenu.push(detail);\n }\n }\n\n disconnectedCallback() {\n this.disposeListener?.();\n dropdownController.disconnected(this);\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n }\n\n getAssignedSubmenuIds() {\n return this.assignedSubmenu;\n }\n\n isPresent() {\n return this.show;\n }\n\n present() {\n this.show = true;\n }\n\n dismiss() {\n this.show = false;\n }\n\n getId() {\n return this.localUId;\n }\n\n willDismiss() {\n const { defaultPrevented } = this.showChanged.emit(false);\n return !defaultPrevented;\n }\n\n willPresent() {\n const { defaultPrevented } = this.showChanged.emit(true);\n return !defaultPrevented;\n }\n\n get dropdownItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n }\n\n get slotElement() {\n return this.hostElement.shadowRoot.querySelector('slot');\n }\n\n private disposeListener?: Function;\n\n private addEventListenersFor() {\n this.disposeListener?.();\n\n const toggleController = () => {\n if (!this.isPresent()) {\n dropdownController.present(this);\n } else {\n dropdownController.dismiss(this);\n }\n\n dropdownController.dismissOthers(this.getId());\n };\n\n this.disposeListener = addDisposableEventListener(\n this.triggerElement,\n 'click',\n (event: PointerEvent) => {\n if (!event.defaultPrevented) toggleController();\n }\n );\n this.triggerElement.setAttribute('data-ix-dropdown-trigger', this.localUId);\n }\n\n /** @internal */\n @Method()\n async discoverSubmenu() {\n this.triggerElement?.dispatchEvent(\n new CustomEvent('ix-assign-sub-menu', {\n bubbles: true,\n composed: false,\n cancelable: true,\n detail: this.localUId,\n })\n );\n }\n\n private async registerListener(\n element: string | HTMLElement | Promise<HTMLElement>\n ) {\n this.triggerElement = await this.resolveElement(element);\n if (this.triggerElement) {\n this.addEventListenersFor();\n this.discoverSubmenu();\n }\n }\n\n private async resolveElement(\n element: string | HTMLElement | Promise<HTMLElement>\n ) {\n const el = await this.findElement(element);\n\n return this.checkForSubmenuAnchor(el);\n }\n\n private async checkForSubmenuAnchor(element: Element) {\n if (hasDropdownItemWrapperImplemented(element)) {\n const dropdownItem = await element.getDropdownItemElement();\n dropdownItem.isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n\n return dropdownItem;\n }\n\n if (element.tagName === 'IX-DROPDOWN-ITEM') {\n (element as HTMLIxDropdownItemElement).isSubMenu = true;\n this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n }\n\n return element;\n }\n\n private findElement(\n element: string | HTMLElement | Promise<HTMLElement>\n ): Promise<Element> {\n if (element instanceof Promise) {\n return element;\n }\n\n if (typeof element === 'object') {\n return Promise.resolve(element);\n }\n\n const selector = `#${element}`;\n return new Promise((resolve) => {\n if (document.querySelector(selector)) {\n return resolve(document.querySelector(selector));\n }\n\n const observer = new MutationObserver(() => {\n if (document.querySelector(selector)) {\n resolve(document.querySelector(selector));\n observer.disconnect();\n }\n });\n\n observer.observe(document.body, {\n childList: true,\n subtree: true,\n });\n });\n }\n\n @Watch('show')\n async changedShow(newShow: boolean) {\n if (newShow) {\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n\n if (this.anchorElement) {\n this.applyDropdownPosition();\n // await this.checkForSubmenuAnchor();\n }\n }\n }\n\n @Watch('trigger')\n changedTrigger(newTriggerValue: string | HTMLElement | Promise<HTMLElement>) {\n this.registerListener(newTriggerValue);\n }\n\n private isAnchorSubmenu(): boolean {\n if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {\n // Is no official dropdown-item, but check if any dropdown-item\n // is placed somewhere up the DOM\n return !!this.anchorElement?.closest('ix-dropdown-item');\n }\n\n return true;\n }\n\n private async applyDropdownPosition() {\n if (!this.anchorElement) {\n return;\n }\n if (!this.dropdownRef) {\n return;\n }\n const isSubmenu = this.isAnchorSubmenu();\n\n let positionConfig: Partial<ComputePositionConfig> = {\n strategy: this.positioningStrategy,\n middleware: [],\n };\n\n if (!this.suppressAutomaticPlacement) {\n positionConfig.middleware.push(\n flip({ fallbackStrategy: 'initialPlacement' })\n );\n }\n\n positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n positionConfig.middleware = [\n ...positionConfig.middleware,\n inline(),\n shift(),\n ];\n\n if (this.offset) {\n positionConfig.middleware.push(offset(this.offset));\n }\n\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n this.autoUpdateCleanup = null;\n }\n\n this.autoUpdateCleanup = autoUpdate(\n this.anchorElement,\n this.dropdownRef,\n async () => {\n const computeResponse = await computePosition(\n this.anchorElement,\n this.dropdownRef,\n positionConfig\n );\n\n Object.assign(this.dropdownRef.style, {\n top: '0',\n left: '0',\n transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n computeResponse.y\n )}px)`,\n });\n if (this.overwriteDropdownStyle) {\n const overwriteStyle = await this.overwriteDropdownStyle({\n dropdownRef: this.dropdownRef,\n triggerRef: this.triggerElement as HTMLElement,\n });\n\n Object.assign(this.dropdownRef.style, overwriteStyle);\n }\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n }\n );\n }\n\n async componentDidLoad() {\n this.changedTrigger(this.trigger);\n }\n\n async componentDidRender() {\n await this.applyDropdownPosition();\n this.anchorElement = await (this.anchor\n ? this.resolveElement(this.anchor)\n : this.resolveElement(this.trigger));\n }\n\n private isTriggerElement(element: HTMLElement) {\n const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');\n\n return trigger;\n }\n\n private onDropdownClick(event: PointerEvent) {\n if (dropdownController.pathIncludesTrigger(event.composedPath())) {\n event.preventDefault();\n\n if (this.isTriggerElement(event.target as HTMLElement)) return;\n }\n\n if (this.closeBehavior === 'inside' || this.closeBehavior === 'both') {\n dropdownController.dismissAll([this.getId()]);\n }\n\n dropdownController.dismissOthers(this.getId());\n }\n\n /**\n * Update position of dropdown\n */\n @Method()\n async updatePosition() {\n this.applyDropdownPosition();\n }\n\n render() {\n return (\n <Host\n data-ix-dropdown={this.localUId}\n ref={(ref) => (this.dropdownRef = ref)}\n class={{\n 'dropdown-menu': true,\n show: this.show,\n overflow: true,\n }}\n style={{\n margin: '0',\n minWidth: '0px',\n position: this.positioningStrategy,\n }}\n role=\"list\"\n onClick={(event: PointerEvent) => this.onDropdownClick(event)}\n >\n <div style={{ display: 'contents' }}>\n {this.header && <div class=\"dropdown-header\">{this.header}</div>}\n\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -173,11 +173,16 @@ test.describe('Close behavior', () => {
|
|
|
173
173
|
await expect(dropdownLevel1).toBeVisible();
|
|
174
174
|
});
|
|
175
175
|
});
|
|
176
|
-
test.describe('Nested dropdowns 1/
|
|
177
|
-
function mountDropdown(mount) {
|
|
176
|
+
test.describe('Nested dropdowns 1/3', () => {
|
|
177
|
+
function mountDropdown(mount, config) {
|
|
178
|
+
var _a;
|
|
178
179
|
return mount(html `
|
|
179
180
|
<ix-button id="trigger-dropdown-1">Trigger 1</ix-button>
|
|
180
|
-
<ix-dropdown
|
|
181
|
+
<ix-dropdown
|
|
182
|
+
close-behavior="${(_a = config === null || config === void 0 ? void 0 : config.closeBehavior) !== null && _a !== void 0 ? _a : 'both'}"
|
|
183
|
+
id="dropdown-1"
|
|
184
|
+
trigger="trigger-dropdown-1"
|
|
185
|
+
>
|
|
181
186
|
<ix-dropdown-item id="trigger-dropdown-2">Item 1</ix-dropdown-item>
|
|
182
187
|
<ix-dropdown-item>Item 2</ix-dropdown-item>
|
|
183
188
|
<ix-dropdown-item id="trigger-dropdown-3">Item 3</ix-dropdown-item>
|
|
@@ -265,26 +270,84 @@ test.describe('Nested dropdowns 1/2', () => {
|
|
|
265
270
|
await expect(dropdown3).not.toBeVisible();
|
|
266
271
|
await expect(dropdown4).not.toBeVisible();
|
|
267
272
|
});
|
|
268
|
-
test('close by Escape
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
273
|
+
test.describe('close by Escape with close behavior', () => {
|
|
274
|
+
test(' = both', async ({ mount, page }) => {
|
|
275
|
+
await mountDropdown(mount);
|
|
276
|
+
setupTest(page);
|
|
277
|
+
await triggerDropdown1.click();
|
|
278
|
+
await expect(dropdown1).toBeVisible();
|
|
279
|
+
await triggerDropdown2.click();
|
|
280
|
+
await expect(dropdown2).toBeVisible();
|
|
281
|
+
await triggerDropdown3.click();
|
|
282
|
+
await expect(dropdown2).not.toBeVisible();
|
|
283
|
+
await expect(dropdown3).toBeVisible();
|
|
284
|
+
await triggerDropdown4.click();
|
|
285
|
+
await expect(dropdown4).toBeVisible();
|
|
286
|
+
await page.keyboard.press('Escape');
|
|
287
|
+
await expect(dropdown1).not.toBeVisible();
|
|
288
|
+
await expect(dropdown2).not.toBeVisible();
|
|
289
|
+
await expect(dropdown3).not.toBeVisible();
|
|
290
|
+
await expect(dropdown4).not.toBeVisible();
|
|
291
|
+
});
|
|
292
|
+
test(' = inside', async ({ mount, page }) => {
|
|
293
|
+
await mountDropdown(mount, {
|
|
294
|
+
closeBehavior: 'inside',
|
|
295
|
+
});
|
|
296
|
+
setupTest(page);
|
|
297
|
+
await triggerDropdown1.click();
|
|
298
|
+
await expect(dropdown1).toBeVisible();
|
|
299
|
+
await triggerDropdown2.click();
|
|
300
|
+
await expect(dropdown2).toBeVisible();
|
|
301
|
+
await triggerDropdown3.click();
|
|
302
|
+
await expect(dropdown2).not.toBeVisible();
|
|
303
|
+
await expect(dropdown3).toBeVisible();
|
|
304
|
+
await triggerDropdown4.click();
|
|
305
|
+
await expect(dropdown4).toBeVisible();
|
|
306
|
+
await page.keyboard.press('Escape');
|
|
307
|
+
await expect(dropdown1).not.toBeVisible();
|
|
308
|
+
await expect(dropdown2).not.toBeVisible();
|
|
309
|
+
await expect(dropdown3).not.toBeVisible();
|
|
310
|
+
await expect(dropdown4).not.toBeVisible();
|
|
311
|
+
});
|
|
312
|
+
test(' = outside', async ({ mount, page }) => {
|
|
313
|
+
await mountDropdown(mount, { closeBehavior: 'outside' });
|
|
314
|
+
setupTest(page);
|
|
315
|
+
await triggerDropdown1.click();
|
|
316
|
+
await expect(dropdown1).toBeVisible();
|
|
317
|
+
await triggerDropdown2.click();
|
|
318
|
+
await expect(dropdown2).toBeVisible();
|
|
319
|
+
await triggerDropdown3.click();
|
|
320
|
+
await expect(dropdown2).not.toBeVisible();
|
|
321
|
+
await expect(dropdown3).toBeVisible();
|
|
322
|
+
await triggerDropdown4.click();
|
|
323
|
+
await expect(dropdown4).toBeVisible();
|
|
324
|
+
await page.keyboard.press('Escape');
|
|
325
|
+
await expect(dropdown1).not.toBeVisible();
|
|
326
|
+
await expect(dropdown2).not.toBeVisible();
|
|
327
|
+
await expect(dropdown3).not.toBeVisible();
|
|
328
|
+
await expect(dropdown4).not.toBeVisible();
|
|
329
|
+
});
|
|
330
|
+
test(' = false', async ({ mount, page }) => {
|
|
331
|
+
await mountDropdown(mount, { closeBehavior: false });
|
|
332
|
+
setupTest(page);
|
|
333
|
+
await triggerDropdown1.click();
|
|
334
|
+
await expect(dropdown1).toBeVisible();
|
|
335
|
+
await triggerDropdown2.click();
|
|
336
|
+
await expect(dropdown2).toBeVisible();
|
|
337
|
+
await triggerDropdown3.click();
|
|
338
|
+
await expect(dropdown2).not.toBeVisible();
|
|
339
|
+
await expect(dropdown3).toBeVisible();
|
|
340
|
+
await triggerDropdown4.click();
|
|
341
|
+
await expect(dropdown4).toBeVisible();
|
|
342
|
+
await page.keyboard.press('Escape');
|
|
343
|
+
await expect(dropdown1).not.toBeVisible();
|
|
344
|
+
await expect(dropdown2).not.toBeVisible();
|
|
345
|
+
await expect(dropdown3).not.toBeVisible();
|
|
346
|
+
await expect(dropdown4).not.toBeVisible();
|
|
347
|
+
});
|
|
285
348
|
});
|
|
286
349
|
});
|
|
287
|
-
test.describe('nested dropdown 2/
|
|
350
|
+
test.describe('nested dropdown 2/3', () => {
|
|
288
351
|
const button1Text = 'Triggerbutton1';
|
|
289
352
|
const button2Text = 'Triggerbutton2';
|
|
290
353
|
test.beforeEach(async ({ mount }) => {
|
|
@@ -305,6 +368,34 @@ test.describe('nested dropdown 2/2', () => {
|
|
|
305
368
|
await expect(nestedDropdownItem).toHaveClass(/hydrated/);
|
|
306
369
|
});
|
|
307
370
|
});
|
|
371
|
+
test.describe('nested dropdown 3/3', () => {
|
|
372
|
+
test.beforeEach(async ({ mount }) => {
|
|
373
|
+
await mount(`
|
|
374
|
+
<ix-button id="trigger-dropdown-1">Trigger 1</ix-button>
|
|
375
|
+
<ix-dropdown id="dropdown-1" close-behavior="outside" trigger="trigger-dropdown-1">
|
|
376
|
+
<ix-dropdown-item id="trigger-dropdown-2">Item 1</ix-dropdown-item>
|
|
377
|
+
<ix-dropdown-item>Item 2</ix-dropdown-item>
|
|
378
|
+
</ix-dropdown>
|
|
379
|
+
|
|
380
|
+
<ix-dropdown trigger="trigger-dropdown-2" id="dropdown-2" close-behavior="inside">
|
|
381
|
+
<ix-dropdown-item>Item 1.1</ix-dropdown-item>
|
|
382
|
+
<ix-dropdown-item>Item 1.2</ix-dropdown-item>
|
|
383
|
+
<ix-dropdown-item>Item 1.3</ix-dropdown-item>
|
|
384
|
+
</ix-dropdown>
|
|
385
|
+
`);
|
|
386
|
+
});
|
|
387
|
+
test('close child on parent dismiss', async ({ page }) => {
|
|
388
|
+
const triggerDropdown1 = page.locator('#trigger-dropdown-1');
|
|
389
|
+
const triggerDropdown2 = page.locator('#trigger-dropdown-2');
|
|
390
|
+
const dropdown1 = page.locator('#dropdown-1');
|
|
391
|
+
const dropdown2 = page.locator('#dropdown-2');
|
|
392
|
+
await triggerDropdown1.click();
|
|
393
|
+
await triggerDropdown2.click();
|
|
394
|
+
await triggerDropdown1.click();
|
|
395
|
+
await expect(dropdown1).not.toBeVisible();
|
|
396
|
+
await expect(dropdown2).not.toBeVisible();
|
|
397
|
+
});
|
|
398
|
+
});
|
|
308
399
|
test('Nested dropdowns within application-header', async ({ mount, page }) => {
|
|
309
400
|
await mount(html `
|
|
310
401
|
<ix-application-header>
|