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

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

@@ -1,545 +0,0 @@
-/**
- * The `auro-select` element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
- * @customElement auro-select
- *
- * @slot - Default slot for the menu content.
- * @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 {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
- * @slot helpText - Defines the content of the helpText.
- * @slot valueText - Dropdown value text display.
- * @slot displayValue - Allows custom HTML content to display the selected value when select is not focused.
- * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
- * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
- * @csspart dropdownTrigger - Apply CSS to the trigger content container.
- * @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
- * @csspart dropdownSize - Apply size styles to the dropdown bib (height, width, maxHeight, maxWidth only).
- * @csspart helpText - Apply CSS to the help text.
- */
-export class AuroSelect extends AuroElement {
-    static get properties(): {
-        /**
-         * Defines whether the component will be on lighter or darker backgrounds.
-         * @type {'default' | 'inverse'}
-         * @default 'default'
-         */
-        appearance: "default" | "inverse";
-        /**
-         * If declared, bib's position will be automatically calculated where to appear.
-         */
-        autoPlacement: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, sets the autocomplete attribute for the select element.
-         */
-        autocomplete: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * When attribute is present, element shows disabled state.
-         */
-        disabled: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
-         */
-        error: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, make the width of the bib match the width of the content, rather than the trigger.
-         */
-        flexMenuWidth: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * When attribute is present, element will be 100% width of container element.
-         */
-        fluid: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.
-         */
-        forceDisplayValue: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Defines the screen size breakpoint at 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";
-        /**
-         * @private
-         */
-        hasDisplayValueContent: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * @private
-         */
-        hasFocus: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * @private
-         */
-        isPopoverVisible: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * If declared, make bib.fullscreen.headline in HeadingDisplay.
-         * Otherwise, Heading 600.
-         */
-        largeFullscreenHeadline: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Determines the overall layout of the select component.
-         * @type {'classic' | 'emphasized' | 'snowflake'}
-         * @default 'classic'
-         */
-        layout: "classic" | "emphasized" | "snowflake";
-        /**
-         * If declared, the popover and trigger will be set to the same width.
-         */
-        matchWidth: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Sets multi-select mode, allowing multiple options to be selected at once.
-         */
-        multiSelect: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: string;
-        };
-        /**
-         * The name for the select element.
-         */
-        name: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * When true, checkmark on selected option will no longer be present.
-         */
-        noCheckmark: {
-            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 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;
-        };
-        /**
-         * @private
-         */
-        options: {
-            type: ArrayConstructor;
-            state: boolean;
-        };
-        /**
-         * Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
-         * @type {HTMLElement|Array<HTMLElement>}
-         */
-        optionSelected: HTMLElement | Array<HTMLElement>;
-        /**
-         * Define custom placeholder text.
-         */
-        placeholder: {
-            type: StringConstructor;
-            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";
-        /**
-         * Populates the `required` attribute on the element. 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;
-        };
-        /**
-         * Determines the shape of the dropdown bib.
-         * @type {'classic' | 'pill' | 'pill-left' | 'pill-right' | 'snowflake'}
-         */
-        shape: "classic" | "pill" | "pill-left" | "pill-right" | "snowflake";
-        /**
-         * If set, the dropdown will shift its position to avoid being cut off by the viewport.
-         */
-        shift: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Determines the size of the dropdown bib. Only the `emphasized` layout supports size=`xl`, while all other layouts support size=`lg`.
-         * @type {'lg' | 'xl'}
-         */
-        size: "lg" | "xl";
-        /**
-         * Indicates whether the input is in a dirty state (has been interacted with).
-         * @private
-         */
-        touched: {
-            type: BooleanConstructor;
-            reflect: boolean;
-            attribute: boolean;
-        };
-        /**
-         * Specifies the `validityState` this element is in.
-         */
-        validity: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        /**
-         * Value selected for the component.
-         */
-        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-select"] - The name of element that you want to register to.
-     *
-     * @example
-     * AuroSelect.register("custom-select") // this will register this element to <custom-select/>
-     *
-     */
-    static register(name?: string): void;
-    matchWidth: boolean;
-    placement: string;
-    offset: number;
-    noFlip: boolean;
-    shift: boolean;
-    autoPlacement: boolean;
-    forceDisplayValue: boolean;
-    /**
-     * @private
-     */
-    private uniqueId;
-    /**
-     * @private
-     */
-    private validation;
-    /**
-     * @private
-     */
-    private runtimeUtils;
-    /**
-     * @private
-     */
-    private dropdownTag;
-    /**
-     * @private
-     */
-    private bibtemplateTag;
-    /**
-     * @private
-     */
-    private helpTextTag;
-    /**
-     * @private
-     */
-    private isHiddenWhileLoading;
-    /**
-     * @private
-     */
-    private hasFocus;
-    /**
-     * @private
-     */
-    private hasDisplayValueContent;
-    /**
-     * @private
-     * @returns {void} Internal defaults.
-     */
-    private _initializeDefaults;
-    appearance: string;
-    value: any;
-    fullscreenBreakpoint: string;
-    onDark: boolean;
-    isPopoverVisible: any;
-    shape: string;
-    size: string;
-    /**
-     * 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();
-    /**
-     * Returns classmap configuration for html5 input labels in all layouts.
-     * @private
-     * @returns {Record<string, boolean>}
-     */
-    private get commonLabelClasses();
-    /**
-     * Returns the label font class based on layout and selection state.
-     * @private
-     * @returns {string} - The font class for the label.
-     */
-    private get labelFontClass();
-    /**
-     * Whether or not the component has a value.
-     * @returns {boolean} - Returns true if the component has a value or placeholder.
-     * @private
-     */
-    private get hasValue();
-    /**
-     * Binds all behavior needed to the dropdown after rendering.
-     * @private
-     * @returns {void}
-     */
-    private configureDropdown;
-    dropdown: any;
-    optionActive: any;
-    bibtemplate: any;
-    /**
-     * Updates the displayed value in an Auro dropdown component based on optionSelected.
-     * @private
-     * @returns {void}
-     */
-    private updateDisplayedValue;
-    /**
-     * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
-     * @private
-     */
-    private updateMenuShapeSize;
-    /**
-     * Sets aria-setsize and aria-posinset on each menu option so screen readers
-     * can announce position even when the listbox context is broken by
-     * shadow DOM boundaries.
-     * @private
-     * @returns {void}
-     */
-    private updateOptionPositions;
-    /**
-     * Binds all behavior needed to the menu after rendering.
-     * @private
-     * @returns {void}
-     */
-    private configureMenu;
-    menu: Element;
-    defaultMenuSize: string;
-    defaultMenuShape: string;
-    options: any;
-    optionSelected: any;
-    /**
-     * Binds all behavior needed to the component after rendering.
-     * @private
-     * @returns {void}
-     */
-    private configureSelect;
-    nativeSelect: HTMLSelectElement;
-    /**
-     * Updates the active option in the menu.
-     * @param {number} index - Index of the option to make active.
-     */
-    updateActiveOption(index: number): void;
-    /**
-     * Updates the active option in the menu based on keyboard input.
-     * @private
-     * @param {string} _key - The key pressed by the user.
-     * @returns {void}
-     */
-    private updateActiveOptionBasedOnKey;
-    sameLetterTimes: any;
-    lastLetter: string;
-    /**
-     * 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;
-    /**
-     * 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;
-    /**
-     * Function to support @focusin event.
-     * @private
-     * @return {void}
-     */
-    private handleFocusin;
-    touched: boolean;
-    /**
-     * Watch for slot changes and recalculate the menuoptions.
-     * @private
-     * @param {Event} event - `slotchange` event.
-     * @returns {void}
-     */
-    private handleSlotChange;
-    /**
-     * Resets all options to their default state.
-     * @private
-     */
-    private clearSelection;
-    firstUpdated(): void;
-    setMenuValue(value: any): void;
-    /**
-     * Scrolls the currently active option into view.
-     * Respects user's motion preferences for accessibility.
-     * @private
-     */
-    private scrollActiveOptionIntoView;
-    /**
-     * Scrolls the currently selected option into view.
-     * Respects user's motion preferences for accessibility.
-     * @private
-     */
-    private scrollSelectedOptionIntoView;
-    updated(changedProperties: any): void;
-    /**
-     * Resets component to initial state.
-     * @returns {void}
-     */
-    reset(): void;
-    /**
-     * Validates value.
-     * @param {boolean} [force=false] - Whether to force validation.
-     */
-    validate(force?: boolean): void;
-    /**
-     * Syncs the value from the native select element to the component's value.
-     * @param {Event} event // The change event from the native select element.
-     * @returns {void}
-     * @private
-     */
-    private _handleNativeSelectChange;
-    /**
-     * Updates the native select element's value based on the component's value.
-     * @returns {void}
-     * @private
-     */
-    private _updateNativeSelect;
-    /**
-     * Returns HTML for the hidden HTML5 select.
-     * @private
-     * @returns {html} - Returns HTML for the hidden HTML5 select.
-     */
-    private renderNativeSelect;
-    /**
-     * Returns HTML for the help text and error message.
-     * @private
-     * @returns {html} - Returns HTML for the help text and error message.
-     */
-    private renderHtmlHelpText;
-    /**
-     * Returns HTML for the emphasized layout.
-     * @private
-     * @returns {import("lit").TemplateResult} - Returns HTML for the emphasized layout.
-     */
-    private renderLayoutEmphasized;
-    /**
-     * Returns HTML for the snowflake layout.
-     * @private
-     * @returns {import("lit").TemplateResult} - Returns HTML for the snowflake layout.
-     */
-    private renderLayoutSnowflake;
-    /**
-     * Returns HTML for the classic layout.
-     * @private
-     * @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
-     */
-    private renderLayoutClassic;
-    /**
-     * Logic to determine the layout of the component.
-     * @private
-     * @param {string} [ForcedLayout] - Used to force a specific layout, pass in the layout name to use.
-     * @returns {void}
-     */
-    private renderLayout;
-}
-import { AuroElement } from '../../layoutElement/src/auroElement.js';

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

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