@aurodesignsystem-dev/auro-formkit 0.0.0-pr1422.0 → 0.0.0-pr1422.2

package/components/menu/dist/auro-menu.d.ts

@@ -0,0 +1,317 @@
+/**
+ * The `auro-menu` element provides users a way to select from a list of options.
+ * @customElement auro-menu
+ *
+ * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
+ * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
+ * @event {CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>} auroMenu-loadingChange - Notifies when the loading attribute is changed.
+ * @event {CustomEvent<any>} auroMenu-selectValueFailure - Notifies that an attempt to select a menuoption by matching a value has failed.
+ * @event {CustomEvent<{ values: HTMLElement[] }>} auroMenu-deselectPrevented - Notifies that deselection was prevented and includes the affected options in `detail.values`.
+ * @event {CustomEvent<any>} auroMenu-selectValueReset - Notifies that the component value has been reset.
+ * @event {CustomEvent<any>} auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
+ * @slot loadingText - Text to show while loading attribute is set
+ * @slot loadingIcon - Icon to show while loading attribute is set
+ * @slot - Slot for insertion of menu options.
+ */
+export class AuroMenu extends AuroElement {
+    static get properties(): {
+        /**
+         * Allows deselecting an already selected option when clicked again in single-select mode.
+         */
+        allowDeselect: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * When true, the entire menu and all options are disabled.
+         */
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
+         */
+        hasLoadingPlaceholder: {
+            type: BooleanConstructor;
+        };
+        /**
+         * @private
+         */
+        layout: {
+            type: StringConstructor;
+        };
+        /**
+         * Indent level for submenus.
+         * @private
+         */
+        level: {
+            type: NumberConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * When true, displays a loading state using the loadingIcon and loadingText slots if provided.
+         */
+        loading: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Specifies a string used to highlight matched string parts in options.
+         */
+        matchWord: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        /**
+         * When true, the selected option can be multiple options.
+         */
+        multiSelect: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        /**
+         * When true, selected option will not show the checkmark.
+         */
+        noCheckmark: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        /**
+         * Specifies the current active menuOption.
+         */
+        optionActive: {
+            type: ObjectConstructor;
+            attribute: string;
+        };
+        /**
+         * An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements.
+         */
+        optionSelected: {
+            type: ObjectConstructor;
+        };
+        options: {
+            type: ArrayConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * Sets the size of the menu.
+         * @type {'sm' | 'md'}
+         * @default 'sm'
+         */
+        size: "sm" | "md";
+        /**
+         * When true, selects all options that match the provided value/key when setting value and multiselect is enabled.
+         */
+        selectAllMatchingOptions: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Sets the shape of the menu.
+         * @type {'box' | 'round'}
+         * @default 'box'
+         */
+        shape: "box" | "round";
+        /**
+         * The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.
+         */
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    /**
+     * This will register this element with the browser.
+     * @param {string} [name="auro-menu"] - The name of the element that you want to register.
+     *
+     * @example
+     * AuroMenu.register("custom-menu") // this will register this element to <custom-menu/>
+     *
+     */
+    static register(name?: string): void;
+    /**
+     * @private
+     */
+    private shape;
+    /**
+     * @private
+     */
+    private size;
+    value: any;
+    optionSelected: any;
+    matchWord: any;
+    noCheckmark: boolean;
+    optionActive: any;
+    loading: boolean;
+    multiSelect: boolean;
+    allowDeselect: boolean;
+    selectAllMatchingOptions: boolean;
+    /**
+     * Handles slot change events.
+     * @private
+     */
+    private handleSlotChange;
+    /**
+     * @readonly
+     * @returns {string} - Returns the label of the currently selected option(s).
+     */
+    readonly get currentLabel(): string;
+    /**
+     * @readonly
+     * @returns {Array<HTMLElement>} - Returns the array of available menu options.
+     * @deprecated Use `options` property instead.
+     */
+    readonly get items(): Array<HTMLElement>;
+    /**
+     * @param {number} value - Sets the index of the currently active option.
+     */
+    set index(value: number);
+    /**
+     * @returns {number} - Returns the index of the currently active option.
+     */
+    get index(): number;
+    /**
+     * Formatted value based on `multiSelect` state.
+     * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+     * @private
+     * @returns {String|Array<String>}
+     */
+    private get formattedValue();
+    /**
+     * Gets the current property values for the menu service.
+     * @private
+     * @returns {Object}
+     */
+    private get propertyValues();
+    /**
+     * Provides the menu context to child components.
+     * Initializes the MenuService and subscribes to menu changes.
+     * @protected
+     */
+    protected provideContext(): void;
+    rootMenu: boolean;
+    menuService: any;
+    _contextProvider: any;
+    /**
+     * Updates the currently active option in the menu.
+     * @param {HTMLElement} option - The option to set as active.
+     */
+    updateActiveOption(option: HTMLElement): void;
+    /**
+     * Sets the internal value and manages update state.
+     * @param {String|Array<String>} value - The value to set.
+     * @protected
+     */
+    protected setInternalValue(value: string | Array<string>): void;
+    internalUpdateInProgress: boolean;
+    /**
+     * Handles changes from the menu service and updates component state.
+     * @param {Object} event - The event object from the menu service.
+     * @protected
+     */
+    protected handleMenuChange(event: any): void;
+    _index: any;
+    options: any;
+    /**
+     * Gets the currently selected options.
+     * @returns {Array<HTMLElement>}
+     */
+    get selectedOptions(): Array<HTMLElement>;
+    /**
+     * Gets the first selected option, or null if none.
+     * @returns {HTMLElement|null}
+     */
+    get selectedOption(): HTMLElement | null;
+    firstUpdated(): void;
+    loadingSlots: NodeListOf<Element>;
+    updated(changedProperties: any): void;
+    /**
+     * Sets an attribute that matches the default tag name if the tag name is not the default.
+     * @param {string} tagName - The tag name to set as an attribute.
+     * @private
+     */
+    private setTagAttribute;
+    /**
+     * Sets the loading state and dispatches a loading change event.
+     * @param {boolean} isLoading - Whether the menu is loading.
+     * @protected
+     */
+    protected setLoadingState(isLoading: boolean): void;
+    /**
+     * Initializes the menu's state and structure.
+     * @private
+     */
+    private initializeMenu;
+    /**
+     * Selects the currently highlighted option.
+     * @protected
+     */
+    protected makeSelection(): void;
+    /**
+     * Resets all options to their default state.
+     * @private
+     */
+    private clearSelection;
+    /**
+     * Resets the menu to its initial state.
+     * This is the only way to return value to undefined.
+     * @public
+     */
+    public reset(): void;
+    /**
+     * Handles nested menu structure.
+     * @private
+     * @param {HTMLElement} menu - Root menu element.
+     */
+    private handleNestedMenus;
+    /**
+     * Navigates the menu options in the specified direction.
+     * @param {'up'|'down'} direction - The direction to navigate.
+     * @protected
+     */
+    protected navigateOptions(direction: "up" | "down"): void;
+    /**
+     * Handles custom events defined on options.
+     * @private
+     * @param {HTMLElement} option - Option with custom event.
+     */
+    private handleCustomEvent;
+    /**
+     * Notifies selection change to parent components.
+     * @param {any} source - The source that triggers this event.
+     * @private
+     */
+    private notifySelectionChange;
+    /**
+     * Checks if an option is currently selected.
+     * @private
+     * @param {HTMLElement} option - The option to check.
+     * @returns {boolean}
+     */
+    private isOptionSelected;
+    /**
+     * Getter for loading placeholder state.
+     * @returns {boolean} - True if loading slots are present and non-empty.
+     */
+    get hasLoadingPlaceholder(): boolean;
+    /**
+     * Getter for wrapper classes based on size.
+     * @returns {Object} - Class map for the wrapper element.
+     * @private
+     */
+    private get wrapperClasses();
+    /**
+     * Logic to determine the layout of the component.
+     * @protected
+     * @returns {void}
+     */
+    protected renderLayout(): void;
+}
+import { AuroElement } from "../../layoutElement/src/auroElement.js";

package/components/menu/dist/auro-menuoption.d.ts

@@ -0,0 +1,210 @@
+/**
+ * The `auro-menuoption` element provides users a way to define a menu option.
+ * @customElement auro-menuoption
+ *
+ * @slot default - The default slot for the menu option text.
+ *
+ * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
+ */
+export class AuroMenuOption extends AuroElement {
+    /**
+     * This will register this element with the browser.
+     * @param {string} [name="auro-menuoption"] - The name of the element that you want to register.
+     *
+     * @example
+     * AuroMenuOption.register("custom-menuoption") // this will register this element to <custom-menuoption/>
+     *
+     */
+    static register(name?: string): void;
+    static get properties(): {
+        /**
+         * When true, disables the menu option.
+         */
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * @private
+         */
+        event: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * @private
+         */
+        layout: {
+            type: StringConstructor;
+        };
+        /**
+         * Allows users to set a unique key for the menu option for specified option selection. If no key is provided, the value property will be used.
+         */
+        key: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * @private
+         */
+        menuService: {
+            type: ObjectConstructor;
+            state: boolean;
+        };
+        /**
+         * @private
+         */
+        matchWord: {
+            type: StringConstructor;
+            state: boolean;
+        };
+        /**
+         * @private
+         */
+        noCheckmark: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Specifies that an option is selected.
+         */
+        selected: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Specifies the tab index of the menu option.
+         */
+        tabIndex: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Specifies the value to be sent to a server.
+         */
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    /**
+     * Returns whether the menu option is currently active and selectable.
+     * An option is considered active if it is not hidden, not disabled, and not static.
+     * @returns {boolean} True if the option is active, false otherwise.
+     */
+    get isActive(): boolean;
+    /**
+     * @private
+     */
+    private shape;
+    /**
+     * @private
+     */
+    private size;
+    iconTag: any;
+    selected: boolean;
+    noCheckmark: boolean;
+    disabled: boolean;
+    /**
+     * @private
+     */
+    private runtimeUtils;
+    menuService: any;
+    unsubscribe: any;
+    /**
+     * Handles changes from the menu service and updates the option's state.
+     * This function synchronizes the option's properties and selection/highlight state with menu events.
+     * @param {Object} event - The event object from the menu service.
+     */
+    handleMenuChange(event: any): void;
+    _contextConsumer: ContextConsumer<import("@lit/context").Context<"menu-context", any>, this>;
+    key: any;
+    firstUpdated(): void;
+    updated(changedProperties: any): void;
+    /**
+     * Sets up event listeners for user interaction with the menu option.
+     * This function enables click and mouse enter events to trigger selection and highlighting logic.
+     */
+    bindEvents(): void;
+    /**
+     * Attaches this menu option to a menu service and subscribes to its events.
+     * This method enables the option to participate in menu selection and highlighting logic.
+     * @param {Object} service - The menu service instance to attach to.
+     */
+    attachTo(service: any): void;
+    active: boolean;
+    /**
+     * Updates the internal selected state of the menu option bypassing 'updated' and triggers custom events if selected.
+     * This function ensures the option's selection state is synchronized with menu logic and notifies listeners.
+     * @param {boolean} isSelected - Whether the option should be marked as selected.
+     */
+    setInternalSelected(isSelected: boolean): void;
+    internalUpdateInProgress: boolean;
+    /**
+     * Sets the selected state of the menu option.
+     * This function updates whether the option is currently selected.
+     * @param {boolean} isSelected - Whether the option should be marked as selected.
+     * @deprecated Simply modify the `selected` property directly instead.
+     */
+    setSelected(isSelected: boolean): void;
+    /**
+     * Updates the active state and visual highlighting of the menu option.
+     * This function toggles the option's active status and applies or removes the active CSS class.
+     * @param {boolean} isActive - Whether the option should be marked as active.
+     * @deprecated Simply modify the `active` property directly instead.
+     */
+    updateActive(isActive: boolean): void;
+    /**
+     * Updates the CSS class for the menu option based on its active state.
+     * This function adds or removes the 'active' class to visually indicate the option's active status.
+     * @private
+     */
+    private updateActiveClasses;
+    /**
+     * Updates the visual highlighting of text within the menu option based on the current match word.
+     * This function highlights matching text segments and manages nested spacers for display formatting.
+     * @private
+     */
+    private updateTextHighlight;
+    /**
+     * Handles click events on the menu option, toggling its selected state.
+     * This function dispatches a click event and updates selection if the option is not disabled.
+     * @private
+     */
+    private handleClick;
+    /**
+     * Handles mouse enter events to highlight the menu option.
+     * This function updates the menu service to set this option as the currently highlighted item if not disabled.
+     * @private
+     */
+    private handleMouseEnter;
+    /**
+     * Dispatches custom events defined for this menu option.
+     * This function notifies listeners when a custom event is triggered by the option.
+     * @private
+     */
+    private handleCustomEvent;
+    /**
+     * Dispatches a click event for this menu option.
+     * This function notifies listeners that the option has been clicked.
+     * @private
+     */
+    private dispatchClickEvent;
+    /**
+     * Generates an HTML element containing an SVG icon based on the provided `svgContent`.
+     *
+     * @private
+     * @param {string} svgContent - The SVG content to be embedded.
+     * @returns {Element} The HTML element containing the SVG icon.
+     */
+    private generateIconHtml;
+    /**
+     * Logic to determine the layout of the component.
+     * @protected
+     * @returns {void}
+     */
+    protected renderLayout(): void;
+}
+import { AuroElement } from "../../layoutElement/src/auroElement.js";
+import { ContextConsumer } from '@lit/context';

package/components/menu/dist/iconVersion.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "9.1.2";
+export default _default;

package/components/menu/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { AuroMenu } from './auro-menu.js';
+import { AuroMenuOption } from './auro-menuoption.js';
+export { AuroMenu, AuroMenuOption };
+export { arrayConverter, isOptionInteractive, dispatchMenuEvent } from "./auro-menu-utils.js";