@tylertech/forge-ai 0.15.3-dev.1 → 0.16.0-dev.0

package/dist/ai-dropdown-menu/ai-dropdown-menu2.mjs

@@ -0,0 +1,268 @@
+import __decorate from "../_virtual/_@oxc-project_runtime@0.154.0/helpers/esm/decorate.mjs";
+import "../core/popover/popover2.mjs";
+import { DropdownNavigationController } from "./navigation-controller.mjs";
+import { SelectionManager } from "./selection-manager.mjs";
+import ai_dropdown_menu_default from "./ai-dropdown-menu.mjs";
+import "./ai-dropdown-menu-separator2.mjs";
+import "./ai-dropdown-menu-item-group2.mjs";
+import "./ai-dropdown-menu-item2.mjs";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/lib/ai-dropdown-menu/ai-dropdown-menu.ts
+var ForgeAiDropdownMenuComponent = class ForgeAiDropdownMenuComponent extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "button";
+		this.density = "medium";
+		this.open = false;
+		this.disabled = false;
+		this.selectionMode = "none";
+		this.value = null;
+		this.popoverPlacement = "bottom-start";
+		this._isSubmenu = false;
+		this._onKeyDown = (event) => {
+			if (this.disabled || !this._navigationController) return;
+			this._navigationController.handleKeyDown(event, this.open, this._triggerButton);
+		};
+		this.#triggerTextSlot = html`<slot name="trigger-content">Choose...</slot>`;
+		this.#dropdownContentTemplate = html`
+    <slot name="header"></slot>
+    <slot @slotchange=${this._onDefaultSlotChange}></slot>
+  `;
+	}
+	static {
+		this.styles = unsafeCSS(ai_dropdown_menu_default);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._detectSubmenuMode();
+		this._initializeControllers();
+		this.addEventListener("keydown", this._onKeyDown);
+		this.addEventListener("focusout", this._onFocusOut);
+	}
+	_detectSubmenuMode() {
+		this._isSubmenu = this.parentElement?.tagName.toLowerCase() === "forge-ai-dropdown-menu-item";
+		if (this._isSubmenu) this.setAttribute("data-submenu", "true");
+	}
+	_initializeControllers() {
+		this._navigationController = new DropdownNavigationController(this, () => this._getMenuItems(), (index) => this._selectItem(index), () => {
+			this.open = false;
+		}, () => {
+			this.open = true;
+		}, () => this._isSubmenu);
+		this._selectionManager = new SelectionManager(() => this._getMenuItems(), (detail) => this._dispatchSelectionEvent(detail), { mode: this.selectionMode });
+		this._selectionManager.value = this.value;
+	}
+	firstUpdated() {
+		this._updateItemSelectionState();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("keydown", this._onKeyDown);
+		this.removeEventListener("focusout", this._onFocusOut);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) {
+			this._popover.open = this.open;
+			if (this.open) {
+				this.setAttribute("data-handles-escape", "");
+				this._navigationController?.onOpen();
+				this._dispatchOpenCloseEvent("open");
+			} else if (changedProperties.get("open") === true) {
+				this.removeAttribute("data-handles-escape");
+				this._navigationController?.onClose();
+				this._dispatchOpenCloseEvent("close");
+			}
+		}
+		if (changedProperties.has("selectionMode")) this._selectionManager?.updateConfig({ mode: this.selectionMode });
+		if (changedProperties.has("value")) {
+			if (this._selectionManager) this._selectionManager.value = this.value;
+		}
+	}
+	_updateItemSelectionState() {
+		if (this._selectionManager) this._selectionManager.value = this.value;
+	}
+	_handleTriggerClick() {
+		if (this.disabled) return;
+		this.open = !this.open;
+	}
+	focusFirstItem() {
+		this._navigationController?.focusFirstItem();
+	}
+	_getMenuItems() {
+		const items = [];
+		this._slottedItems.forEach((element) => {
+			if (element.tagName.toLowerCase() === "forge-ai-dropdown-menu-item") items.push(element);
+			else if (element.tagName.toLowerCase() === "forge-ai-dropdown-menu-item-group") {
+				const groupItems = element.querySelectorAll("forge-ai-dropdown-menu-item");
+				items.push(...Array.from(groupItems));
+			}
+		});
+		return items;
+	}
+	_selectItem(index) {
+		const selectedItem = this._getMenuItems()[index];
+		if (selectedItem && this._selectionManager) {
+			if (this._selectionManager.selectItem(selectedItem).shouldClose) this._closeAfterSelection();
+			this.value = this._selectionManager.value;
+		}
+	}
+	_closeAfterSelection() {
+		this.open = false;
+		if (this._isSubmenu) {
+			(this.parentElement?.closest("forge-ai-dropdown-menu"))?._closeAfterSelection();
+			return;
+		}
+		this._triggerButton?.focus();
+	}
+	_dispatchSelectionEvent(detail) {
+		this.dispatchEvent(new CustomEvent("forge-ai-dropdown-menu-change", {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_dispatchOpenCloseEvent(type) {
+		const init = {
+			detail: { timestamp: Date.now() },
+			bubbles: true,
+			composed: true
+		};
+		if (type === "open") this.dispatchEvent(new CustomEvent("forge-ai-dropdown-menu-open", init));
+		else this.dispatchEvent(new CustomEvent("forge-ai-dropdown-menu-close", init));
+	}
+	_onPopoverToggle(event) {
+		if (event.target !== event.currentTarget) return;
+		this.open = event.detail.open;
+		if (event.detail.open) this._navigationController?.onShown();
+	}
+	_onItemClick(event) {
+		const menuItem = event.target.closest("forge-ai-dropdown-menu-item");
+		if (!menuItem || menuItem.disabled) return;
+		const index = this._getMenuItems().findIndex((item) => item === menuItem);
+		if (index >= 0) {
+			if (menuItem.closest("forge-ai-dropdown-menu") === this) {
+				const hasOpenSubmenu = menuItem.querySelector("forge-ai-dropdown-menu[data-submenu=\"true\"]");
+				if (!(hasOpenSubmenu && hasOpenSubmenu.open)) this._selectItem(index);
+			}
+		}
+	}
+	_onFocusOut(event) {
+		if (!this.open) return;
+		const relatedTarget = event.relatedTarget;
+		if (relatedTarget && this.contains(relatedTarget)) return;
+		this.open = false;
+	}
+	_onDefaultSlotChange() {
+		if (this._selectionManager) {
+			this._selectionManager.value = this.value;
+			this.requestUpdate();
+		}
+	}
+	get _dropdownRole() {
+		switch (this.selectionMode) {
+			case "single":
+			case "multi": return "listbox";
+			default: return "menu";
+		}
+	}
+	get _ariaHasPopup() {
+		return this.selectionMode === "none" ? "menu" : "listbox";
+	}
+	get _ariaMultiSelectable() {
+		return this.selectionMode === "multi" ? "true" : void 0;
+	}
+	get _popoverPlacement() {
+		return this._isSubmenu ? "right-start" : this.popoverPlacement;
+	}
+	get _popoverAnchor() {
+		return this._isSubmenu ? this.parentElement : this._triggerButton;
+	}
+	get _selectedText() {
+		return this._selectionManager?.getSelectedText() || "";
+	}
+	get _shouldShowSelectedText() {
+		return this._selectionManager?.shouldShowSelectedText() || false;
+	}
+	#triggerTextSlot;
+	get #triggerText() {
+		if (this._shouldShowSelectedText) return html`<slot name="selected-text">${this._selectedText}</slot>`;
+		return this.#triggerTextSlot;
+	}
+	#handleSlotChange(evt) {
+		const slotName = evt.target.name;
+		if (slotName === "header" || slotName === "selected-text") this.requestUpdate();
+	}
+	#dropdownContentTemplate;
+	get #triggerButton() {
+		const isButton = this.variant === "button";
+		const isIconButton = this.variant === "icon-button" || this.variant === "icon-button-squared";
+		const isIconButtonSquared = this.variant === "icon-button-squared";
+		const densityClass = this.density !== "large" ? `${isButton ? "forge-button" : "forge-icon-button"}--${this.density}` : "";
+		return html`
+      <button
+        id="dropdown-trigger"
+        class=${classMap({
+			"forge-button": isButton,
+			"forge-icon-button": isIconButton,
+			"forge-icon-button--squared": isIconButtonSquared,
+			[densityClass]: !!densityClass
+		})}
+        type="button"
+        aria-label=${ifDefined(this.triggerLabel)}
+        aria-expanded=${this.open}
+        aria-haspopup=${this._ariaHasPopup}
+        aria-controls="dropdown-content"
+        ?disabled=${this.disabled}
+        @click=${this._handleTriggerClick}>
+        <slot name="start"></slot>
+        ${this.#triggerText}
+        <slot name="end"></slot>
+      </button>
+    `;
+	}
+	get #popoverTemplate() {
+		return html`
+      <forge-ai-popover .anchor=${this._popoverAnchor} placement=${this._popoverPlacement} .flip=${true} @forge-ai-popover-toggle=${this._onPopoverToggle}>
+        <div
+          id="dropdown-content"
+          role=${this._dropdownRole}
+          aria-labelledby="dropdown-trigger"
+          aria-multiselectable=${ifDefined(this._ariaMultiSelectable)}
+          aria-orientation="vertical"
+          @click=${this._onItemClick}
+          tabindex="0"
+          class="ai-dropdown-menu__dropdown"
+          @slotchange=${this.#handleSlotChange}>
+          ${this.#dropdownContentTemplate}
+        </div>
+      </forge-ai-popover>
+    `;
+	}
+	render() {
+		return html` ${this._isSubmenu ? "" : this.#triggerButton} ${this.#popoverTemplate} `;
+	}
+};
+__decorate([property()], ForgeAiDropdownMenuComponent.prototype, "variant", void 0);
+__decorate([property()], ForgeAiDropdownMenuComponent.prototype, "density", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ForgeAiDropdownMenuComponent.prototype, "open", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ForgeAiDropdownMenuComponent.prototype, "disabled", void 0);
+__decorate([property({ attribute: "selection-mode" })], ForgeAiDropdownMenuComponent.prototype, "selectionMode", void 0);
+__decorate([property()], ForgeAiDropdownMenuComponent.prototype, "value", void 0);
+__decorate([property({ attribute: "popover-placement" })], ForgeAiDropdownMenuComponent.prototype, "popoverPlacement", void 0);
+__decorate([property({ attribute: "trigger-label" })], ForgeAiDropdownMenuComponent.prototype, "triggerLabel", void 0);
+__decorate([state()], ForgeAiDropdownMenuComponent.prototype, "_isSubmenu", void 0);
+__decorate([query(".forge-button,.forge-icon-button")], ForgeAiDropdownMenuComponent.prototype, "_triggerButton", void 0);
+__decorate([query("forge-ai-popover")], ForgeAiDropdownMenuComponent.prototype, "_popover", void 0);
+__decorate([queryAssignedElements({ flatten: true })], ForgeAiDropdownMenuComponent.prototype, "_slottedItems", void 0);
+ForgeAiDropdownMenuComponent = __decorate([customElement("forge-ai-dropdown-menu")], ForgeAiDropdownMenuComponent);
+//#endregion
+export { ForgeAiDropdownMenuComponent };

package/dist/ai-dropdown-menu/index.d.ts

@@ -2,3 +2,4 @@ export { ForgeAiDropdownMenuComponent, type DropdownMenuVariant, type DropdownMe
 export { ForgeAiDropdownMenuItemComponent } from './ai-dropdown-menu-item.js';
 export { ForgeAiDropdownMenuItemGroupComponent } from './ai-dropdown-menu-item-group.js';
 export { ForgeAiDropdownMenuSeparatorComponent } from './ai-dropdown-menu-separator.js';
+export { type DropdownMenuSelectionMode, type DropdownChangeEventDetail } from './selection-manager.js';

package/dist/ai-dropdown-menu/index.mjs

@@ -1,10 +1,5 @@
-import { ForgeAiDropdownMenuComponent } from "./ai-dropdown-menu.mjs";
-import { ForgeAiDropdownMenuItemComponent } from "./ai-dropdown-menu-item.mjs";
-import { ForgeAiDropdownMenuItemGroupComponent } from "./ai-dropdown-menu-item-group.mjs";
-import { ForgeAiDropdownMenuSeparatorComponent } from "./ai-dropdown-menu-separator.mjs";
-export {
-  ForgeAiDropdownMenuComponent,
-  ForgeAiDropdownMenuItemComponent,
-  ForgeAiDropdownMenuItemGroupComponent,
-  ForgeAiDropdownMenuSeparatorComponent
-};
+import { ForgeAiDropdownMenuSeparatorComponent } from "./ai-dropdown-menu-separator2.mjs";
+import { ForgeAiDropdownMenuItemGroupComponent } from "./ai-dropdown-menu-item-group2.mjs";
+import { ForgeAiDropdownMenuItemComponent } from "./ai-dropdown-menu-item2.mjs";
+import { ForgeAiDropdownMenuComponent } from "./ai-dropdown-menu2.mjs";
+export { ForgeAiDropdownMenuComponent, ForgeAiDropdownMenuItemComponent, ForgeAiDropdownMenuItemGroupComponent, ForgeAiDropdownMenuSeparatorComponent };

package/dist/ai-dropdown-menu/navigation-controller.d.ts

@@ -51,7 +51,7 @@ export declare class DropdownNavigationController {
     /**
      * Handles keyboard events for the dropdown menu
      */
-    handleKeyDown(event: KeyboardEvent, isOpen: boolean, triggerButton: HTMLElement): boolean;
+    handleKeyDown(event: KeyboardEvent, isOpen: boolean, triggerButton: HTMLElement | null): boolean;
     /**
      * Moves the selection by the specified direction
      */
@@ -72,6 +72,14 @@ export declare class DropdownNavigationController {
      * Resets the navigation state when dropdown opens
      */
     onOpen(): void;
+    /**
+     * Clears pending keyboard-open state when the dropdown closes
+     */
+    onClose(): void;
+    /**
+     * Focuses the first item once the popover is visible, when opened via keyboard
+     */
+    onShown(): void;
     /**
      * Resets the navigation state
      */