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

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

@@ -0,0 +1,578 @@
+/**
+ * The `auro-combobox` element provides users with a way to select an option from a list of filtered or suggested options based on user input.
+ * @customElement auro-combobox
+ *
+ * @slot - Default slot for the menu content.
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
+ * @slot ariaLabel.input.clear - Sets aria-label on clear button
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
+ * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
+ * @slot label - Defines the content of the label.
+ * @slot helpText - Defines the content of the helpText.
+ * @slot displayValue - Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts.
+ * @event auroCombobox-valueSet - (Deprecated) Notifies that the component has a new value set.
+ * @event input - Notifies that the component has a new value set.
+ * @event inputValue - Notifies that the components internal HTML5 input value has changed.
+ * @event auroFormElement-validated - Notifies that the component value(s) have been validated.
+ */
+export class AuroCombobox extends AuroElement {
+    static get properties(): {
+        /**
+         * Defines whether the component will be on lighter or darker backgrounds.
+         * @property {'default' | 'inverse'} appearance - The visual appearance of the component.
+         * @default 'default'
+         */
+        appearance: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
+         */
+        autocomplete: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, bib's position will be automatically calculated where to appear.
+         */
+        autoPlacement: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Array of available options to display in the dropdown.
+         * This array contains all non-hidden options (e.g., hidden by filtering on input value).
+         * @private
+         */
+        availableOptions: {
+            state: boolean;
+            type: ArrayConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Sets the behavior of the combobox, "filter" or "suggestion".
+         * "filter" requires the user to select an option from the menu.
+         * "suggestion" allows the user to enter a value not present in the menu options.
+         * @type {'filter' | 'suggestion'}
+         * @default 'suggestion'
+         */
+        behavior: "filter" | "suggestion";
+        /**
+         * When attribute is present auro-menu will apply check marks to selected options.
+         */
+        checkmark: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If set, disables the combobox.
+         */
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * ID for the dropdown.
+         * @private
+         */
+        dropdownId: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * Whether or not the dropdown is open.
+         * @private
+         */
+        dropdownOpen: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked.
+         */
+        dvInputOnly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
+         */
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Specifies the input mask format.
+         */
+        format: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /** Exposes inputmode attribute for input.  */
+        inputmode: {
+            type: StringConstructor;
+            attribute: boolean;
+            reflect: boolean;
+        };
+        /**
+         * Sets the layout of the combobox.
+         * @type {'classic' | 'emphasized' | 'snowflake'}
+         * @default 'classic'
+         */
+        layout: "classic" | "emphasized" | "snowflake";
+        /**
+         * If declared, the popover and trigger will be set to the same width.
+         * @private
+         */
+        matchWidth: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If set, combobox will not filter menuoptions based on input.
+         */
+        noFilter: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, the bib will NOT flip to an alternate position
+         * when there isn't enough space in the specified `placement`.
+         */
+        noFlip: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, the dropdown will shift its position to avoid being cut off by the viewport.
+         */
+        shift: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If set, disables auto-validation on blur.
+         */
+        noValidate: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Gap between the trigger element and bib.
+         * @default 0
+         */
+        offset: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        /**
+         * DEPRECATED - use `appearance="inverse"` instead.
+         */
+        onDark: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Specifies the current selected option.
+         * @type {HTMLElement}
+         */
+        optionSelected: HTMLElement;
+        /**
+         * If declared, selecting a menu option will not change the input value. By doing so,
+         * the current menu filter will be preserved and the user can continue from their last
+         * filter state. It is recommended to use this in combination with the `displayValue` slot.
+         */
+        persistInput: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Position where the bib should appear relative to the trigger.
+         * @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'}
+         * @default 'bottom-start'
+         */
+        placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end";
+        /**
+         * Define custom placeholder text, only supported by date input formats.
+         */
+        placeholder: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Populates the `required` attribute on the input. Used for client-side validation.
+         */
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Sets a custom help text message to display for all validityStates.
+         */
+        setCustomValidity: {
+            type: StringConstructor;
+        };
+        /**
+         * Custom help text message to display when validity = `customError`.
+         */
+        setCustomValidityCustomError: {
+            type: StringConstructor;
+        };
+        /**
+         * Custom help text message to display when validity = `valueMissing`.
+         */
+        setCustomValidityValueMissing: {
+            type: StringConstructor;
+        };
+        /**
+         * Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter".
+         */
+        setCustomValidityValueMissingFilter: {
+            type: StringConstructor;
+        };
+        /**
+         * Indicates whether the combobox is in a dirty state (has been interacted with).
+         * @private
+         */
+        touched: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
+         */
+        triggerIcon: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Applies the defined value as the type attribute on `auro-input`.
+         */
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Specifies the value of the input element within the combobox.
+         */
+        typedValue: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Specifies the `validityState` this element is in.
+         */
+        validity: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Value selected for the dropdown menu.
+         */
+        value: {
+            type: StringConstructor;
+        };
+        /**
+         * If declared, make bib.fullscreen.headline in HeadingDisplay.
+         * Otherwise, Heading 600
+         */
+        largeFullscreenHeadline: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Defines the screen size breakpointat which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
+         *
+         * When expanded, the dropdown will automatically display in fullscreen mode
+         * if the screen size is equal to or smaller than the selected breakpoint.
+         * @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'}
+         * @default 'sm'
+         */
+        fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled";
+        /**
+         * Specifies the currently active option.
+         * @private
+         */
+        optionActive: {
+            type: ObjectConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * Deferred aria-expanded state for the trigger input.
+         * Delays the "true" transition so VoiceOver finishes its character echo
+         * before announcing "expanded".
+         * @private
+         */
+        triggerExpandedState: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    /**
+     * This will register this element with the browser.
+     * @param {string} [name='auro-combobox'] - The name of the element that you want to register.
+     *
+     * @example
+     * AuroCombobox.register('custom-combobox') // this will register this element to <custom-combobox/>
+     *
+     */
+    static register(name?: string): void;
+    /**
+     * @private
+     * @returns {void} Internal defaults.
+     */
+    private _initializeDefaults;
+    appearance: string;
+    disabled: boolean;
+    msgSelectionMissing: string;
+    noFilter: boolean;
+    noValidate: boolean;
+    optionActive: any;
+    persistInput: boolean;
+    required: boolean;
+    value: any;
+    typedValue: any;
+    behavior: string;
+    clearBtnFocused: boolean;
+    checkmark: boolean;
+    dvInputOnly: boolean;
+    fullscreenBreakpoint: string;
+    matchWidth: boolean;
+    shape: string;
+    size: string;
+    triggerIcon: boolean;
+    placement: string;
+    offset: number;
+    noFlip: boolean;
+    shift: boolean;
+    autoPlacement: boolean;
+    dropdownTag: any;
+    bibtemplateTag: any;
+    inputTag: any;
+    helpTextTag: any;
+    availableOptions: any[] | any[];
+    dropdownId: any;
+    dropdownOpen: any;
+    triggerExpandedState: boolean;
+    _expandedTimeout: NodeJS.Timeout;
+    _inFullscreenTransition: boolean;
+    errorMessage: any;
+    isHiddenWhileLoading: boolean;
+    largeFullscreenHeadline: boolean;
+    onDark: boolean;
+    optionSelected: any;
+    runtimeUtils: any;
+    touched: boolean;
+    validation: AuroFormValidation;
+    validity: any;
+    /**
+     * Returns the current value of the input element within the combobox.
+     * @returns {string|undefined} The value of the input element, or undefined if the input is not present.
+     */
+    get inputValue(): string | undefined;
+    /**
+     * Checks if the element is valid.
+     * @returns {boolean} - Returns true if the element is valid, false otherwise.
+     */
+    isValid(): boolean;
+    /**
+     * Mark the first available (non-hidden), enabled option as `active`.
+     * @private
+     * @returns {void}
+     */
+    private activateFirstEnabledAvailableOption;
+    /**
+     * Mark the last available (non-hidden), enabled option as `active`.
+     * @private
+     * @returns {void}
+     */
+    private activateLastEnabledAvailableOption;
+    /**
+     * Updates the filter for the available options based on the input value.
+     * @private
+     */
+    private updateFilter;
+    noMatchOption: any;
+    /**
+     * Syncs the values and states of this component, the input, and the menu, including this.optionSelected and this.menu.optionSelected.
+     * @private
+     * @returns {void}
+     */
+    private syncValuesAndStates;
+    /**
+     * Update displayValue or input.value, it's called when making a selection.
+     * @param {string} label - The label of the selected option.
+     * @private
+     */
+    private updateTriggerTextDisplay;
+    /**
+     * Processes hidden state of all menu options and determines if there are any available options not hidden.
+     * @private
+     * @returns {void}
+     */
+    private handleMenuOptions;
+    /**
+     * Determines the element error state based on the `required` attribute and input value.
+     * @private
+     * @returns {void}
+     */
+    private generateOptionsArray;
+    options: any;
+    /**
+     * Hides the dropdown bib if its open.
+     * @returns {void}
+     */
+    hideBib(): void;
+    /**
+     * Shows the dropdown bib if there are options to show.
+     * @returns {void}
+     */
+    showBib(): void;
+    /**
+     * Binds all behavior needed to the dropdown after rendering.
+     * @private
+     * @returns {void}
+     */
+    private configureDropdown;
+    bibtemplate: any;
+    inputInBib: any;
+    /**
+     * @private
+     */
+    private setInputFocus;
+    /**
+     * @private
+     */
+    private setClearBtnFocus;
+    /**
+     * @private
+     */
+    private setTriggerInputFocus;
+    /**
+     * Suppresses or restores dialog semantics on the bib's dialog element.
+     * On desktop (non-fullscreen), VoiceOver verbosely announces "listbox inside
+     * of a dialog" which disrupts combobox usage. Setting role="presentation"
+     * suppresses this. In fullscreen mode, dialog semantics are restored.
+     * @private
+     */
+    private updateBibDialogRole;
+    /**
+     * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
+     * @private
+     */
+    private updateMenuShapeSize;
+    /**
+     * Returns the shadow root containing the live region for screen reader announcements.
+     * When the bib is open in fullscreen modal mode, everything outside the <dialog>
+     * is inert, so we target the bib's own shadow root instead of the host's.
+     * @private
+     * @returns {ShadowRoot}
+     */
+    private _getAnnouncementRoot;
+    /**
+     * Binds all behavior needed to the menu after rendering.
+     * @private
+     * @returns {void}
+     */
+    private configureMenu;
+    menu: Element;
+    defaultMenuShape: string;
+    /**
+     * Binds all behavior needed to the input after rendering.
+     * @private
+     * @returns {void}
+     */
+    private configureInput;
+    /**
+     * Manages the visibility of the dropdown based on loading state changes.
+     *
+     * This method listens for loading state changes and adjusts the visibility of the dropdown accordingly.
+     * If the dropdown is visible and loading is true without any loading placeholders, it hides the dropdown
+     * and sets a flag to indicate it is hidden while loading. If loading is false and the dropdown was previously
+     * hidden, it checks if the active element is within the dropdown and shows it again if true.
+     *
+     * @private
+     * @param {CustomEvent} event - The event object containing details about the loading state change.
+     * @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
+     * @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
+     * @returns {void}
+     */
+    private handleMenuLoadingChange;
+    /**
+     * Handle changes to the input value and trigger changes that should result.
+     * @private
+     * @param {Event} event - The input event triggered by the input element.
+     * @returns {void}
+     */
+    private handleInputValueChange;
+    _syncingBibValue: boolean;
+    /**
+     * Binds all behavior needed to the combobox after rendering.
+     * @private
+     * @returns {void}
+     */
+    private configureCombobox;
+    menus: Element[];
+    firstUpdated(): void;
+    dropdown: any;
+    input: any;
+    /**
+     * Focuses the combobox trigger input.
+     * @returns {void}
+     */
+    focus(): void;
+    /**
+     * Sets the menu value if menu is available.
+     * @param {string} value - The value to set on the menu.
+     * @returns {void}
+     */
+    setMenuValue(value: string): void;
+    /**
+     * Resets component to initial state.
+     * @returns {void}
+     */
+    reset(): void;
+    /**
+     * Clears the current value of the combobox.
+     * @returns {void}
+     */
+    clear(): void;
+    /**
+     * Validates value.
+     * @param {boolean} [force=false] - Whether to force validation.
+     */
+    validate(force?: boolean): void;
+    updated(changedProperties: any): void;
+    hasValue: boolean;
+    /**
+     * Applies slotted nodes to a target element with a new slot name.
+     * @private
+     * @param {HTMLSlotElement} slot - The slot element containing the nodes to apply.
+     * @param {HTMLElement} target - The target element to apply the nodes to.
+     * @param {string} newSlotName - The new slot name for the applied nodes.
+     * @returns {void}
+     */
+    private transportAssignedNodes;
+    /**
+     * Updates the active option in the menu.
+     * @param {number} index - Index of the option to make active.
+     */
+    updateActiveOption(index: number): void;
+    /**
+     * Watch for slot changes and recalculate the menuoptions.
+     * @private
+     * @param {Event} event - `slotchange` event.
+     * @returns {void}
+     */
+    private handleSlotChange;
+    render(): import("lit-html").TemplateResult;
+}
+import { AuroElement } from '../../layoutElement/src/auroElement.js';
+import AuroFormValidation from '@aurodesignsystem/form-validation';

package/components/combobox/dist/comboboxKeyboardStrategy.d.ts

@@ -0,0 +1,9 @@
+export namespace comboboxKeyboardStrategy {
+    function ArrowDown(component: any, evt: any, ctx: any): void;
+    function ArrowUp(component: any, evt: any, ctx: any): void;
+    function End(component: any, evt: any, ctx: any): void;
+    function Enter(component: any, evt: any, ctx: any): void;
+    function Escape(component: any, _evt: any, ctx: any): void;
+    function Home(component: any, evt: any, ctx: any): void;
+    function Tab(component: any, evt: any, ctx: any): void;
+}

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

@@ -0,0 +1,2 @@
+export { AuroCombobox };
+import { AuroCombobox } from './auro-combobox.js';