import WoltlabCoreMenuItemElement from "./woltlab-core-menu-item";
+interface WoltlabCoreMenuGroupEventMap {
+ change: CustomEvent;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
export class WoltlabCoreMenuGroupElement extends HTMLElement {
readonly #items = new Set<WoltlabCoreMenuItemElement>();
#value = "";
}
}
-export default WoltlabCoreMenuGroupElement;
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+export interface WoltlabCoreMenuGroupElement extends HTMLElement {
+ addEventListener: {
+ <T extends keyof WoltlabCoreMenuGroupEventMap>(
+ type: T,
+ listener: (this: WoltlabCoreMenuItemElement, ev: WoltlabCoreMenuGroupEventMap[T]) => any,
+ options?: boolean | AddEventListenerOptions,
+ ): void;
+ } & HTMLElement["addEventListener"];
+}
window.customElements.define("woltlab-core-menu-group", WoltlabCoreMenuGroupElement);
+
+export default WoltlabCoreMenuGroupElement;
+import WoltlabCoreMenuGroupElement from "./woltlab-core-menu-group";
import WoltlabCoreMenuItemElement from "./woltlab-core-menu-item";
+type MenuChild = WoltlabCoreMenuGroupElement | WoltlabCoreMenuItemElement;
+
+interface WoltlabCoreMenuEventMap {
+ change: CustomEvent;
+ close: CustomEvent;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
export class WoltlabCoreMenuElement extends HTMLElement {
#index = -1;
+ #items = new Set<MenuChild>();
constructor() {
super();
}
connectedCallback() {
+ const shadow = this.attachShadow({ mode: "open" });
+
+ const slot = document.createElement("slot");
+ shadow.append(slot);
+
+ slot.addEventListener("slotchange", () => {
+ for (const element of slot.assignedElements()) {
+ if (!(element instanceof WoltlabCoreMenuGroupElement) && !(element instanceof WoltlabCoreMenuItemElement)) {
+ element.remove();
+ continue;
+ }
+
+ if (this.#items.has(element)) {
+ continue;
+ }
+
+ this.#items.add(element);
+
+ element.addEventListener("change", () => {
+ this.#items.forEach((item) => {
+ if (item === element) {
+ return;
+ }
+
+ if (item instanceof WoltlabCoreMenuGroupElement) {
+ item.value = "";
+ } else {
+ item.selected = false;
+ }
+ });
+
+ const evt = new CustomEvent("change");
+ this.dispatchEvent(evt);
+
+ if (element instanceof WoltlabCoreMenuItemElement) {
+ const evt = new CustomEvent("close");
+ this.dispatchEvent(evt);
+ }
+ });
+ }
+ });
+
this.setAttribute("role", "menu");
this.label = this.getAttribute("label")!;
this.setAttribute("aria-label", label);
}
+ get value(): string {
+ for (const item of Array.from(this.#items)) {
+ const value = item.value;
+
+ if (item instanceof WoltlabCoreMenuGroupElement) {
+ if (value !== "") {
+ return value;
+ }
+ } else if (item.selected) {
+ return value;
+ }
+ }
+
+ return "";
+ }
+
#keydown(event: KeyboardEvent): void {
const { code, key } = event;
}
}
-export default WoltlabCoreMenuElement;
+// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
+export interface WoltlabCoreMenuElement extends HTMLElement {
+ addEventListener: {
+ <T extends keyof WoltlabCoreMenuEventMap>(
+ type: T,
+ listener: (this: WoltlabCoreMenuItemElement, ev: WoltlabCoreMenuEventMap[T]) => any,
+ options?: boolean | AddEventListenerOptions,
+ ): void;
+ } & HTMLElement["addEventListener"];
+}
window.customElements.define("woltlab-core-menu", WoltlabCoreMenuElement);
+
+export default WoltlabCoreMenuElement;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WoltlabCoreMenuGroupElement = void 0;
woltlab_core_menu_item_1 = tslib_1.__importDefault(woltlab_core_menu_item_1);
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
class WoltlabCoreMenuGroupElement extends HTMLElement {
#items = new Set();
#value = "";
}
}
exports.WoltlabCoreMenuGroupElement = WoltlabCoreMenuGroupElement;
- exports.default = WoltlabCoreMenuGroupElement;
window.customElements.define("woltlab-core-menu-group", WoltlabCoreMenuGroupElement);
+ exports.default = WoltlabCoreMenuGroupElement;
});
-define(["require", "exports"], function (require, exports) {
+define(["require", "exports", "tslib", "./woltlab-core-menu-group", "./woltlab-core-menu-item"], function (require, exports, tslib_1, woltlab_core_menu_group_1, woltlab_core_menu_item_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WoltlabCoreMenuElement = void 0;
+ woltlab_core_menu_group_1 = tslib_1.__importDefault(woltlab_core_menu_group_1);
+ woltlab_core_menu_item_1 = tslib_1.__importDefault(woltlab_core_menu_item_1);
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
class WoltlabCoreMenuElement extends HTMLElement {
#index = -1;
+ #items = new Set();
constructor() {
super();
this.addEventListener("keydown", (event) => {
});
}
connectedCallback() {
+ const shadow = this.attachShadow({ mode: "open" });
+ const slot = document.createElement("slot");
+ shadow.append(slot);
+ slot.addEventListener("slotchange", () => {
+ for (const element of slot.assignedElements()) {
+ if (!(element instanceof woltlab_core_menu_group_1.default) && !(element instanceof woltlab_core_menu_item_1.default)) {
+ element.remove();
+ continue;
+ }
+ if (this.#items.has(element)) {
+ continue;
+ }
+ this.#items.add(element);
+ element.addEventListener("change", () => {
+ this.#items.forEach((item) => {
+ if (item === element) {
+ return;
+ }
+ if (item instanceof woltlab_core_menu_group_1.default) {
+ item.value = "";
+ }
+ else {
+ item.selected = false;
+ }
+ });
+ const evt = new CustomEvent("change");
+ this.dispatchEvent(evt);
+ if (element instanceof woltlab_core_menu_item_1.default) {
+ const evt = new CustomEvent("close");
+ this.dispatchEvent(evt);
+ }
+ });
+ }
+ });
this.setAttribute("role", "menu");
this.label = this.getAttribute("label");
this.#index = 0;
this.setAttribute("label", label);
this.setAttribute("aria-label", label);
}
+ get value() {
+ for (const item of Array.from(this.#items)) {
+ const value = item.value;
+ if (item instanceof woltlab_core_menu_group_1.default) {
+ if (value !== "") {
+ return value;
+ }
+ }
+ else if (item.selected) {
+ return value;
+ }
+ }
+ return "";
+ }
#keydown(event) {
const { code, key } = event;
// Ignore any keystrokes that are most likely keyboard shortcuts.
}
}
exports.WoltlabCoreMenuElement = WoltlabCoreMenuElement;
- exports.default = WoltlabCoreMenuElement;
window.customElements.define("woltlab-core-menu", WoltlabCoreMenuElement);
+ exports.default = WoltlabCoreMenuElement;
});