@aurodesignsystem-dev/auro-formkit 0.0.0-pr1001.0

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

@@ -0,0 +1,512 @@
+/**
+ * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
+ *
+ * @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(): {
+        /**
+         * If declared, sets the autocomplete attribute for the select element.
+         */
+        autocomplete: {
+            type: StringConstructor;
+            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;
+        };
+        /**
+         * If declared, bib's position will be automatically calculated where to appear.
+         * @default false
+         */
+        autoPlacement: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * When attribute is present, element shows disabled state.
+         */
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * When attribute is present, element will be 100% width of container element.
+         */
+        fluid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * @private
+         */
+        isPopoverVisible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, the popover and trigger will be set to the same width.
+         */
+        matchWidth: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * The name for the select element.
+         */
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
+         * 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.
+         * @default sm
+         */
+        fullscreenBreakpoint: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If declared, make bib.fullscreen.headline in HeadingDisplay.
+         * Otherwise, Heading 600.
+         */
+        largeFullscreenHeadline: {
+            type: BooleanConstructor;
+            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`.
+         * @default false
+         */
+        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;
+        };
+        /**
+         * If declared, onDark styles will be applied to the trigger.
+         */
+        onDark: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * @private
+         */
+        optionActive: {
+            type: ObjectConstructor;
+        };
+        /**
+         * 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>;
+        /**
+         * @private
+         */
+        options: {
+            type: ArrayConstructor;
+        };
+        /**
+         * Position where the bib should appear relative to the trigger.
+         * Accepted values:
+         * "top" | "right" | "bottom" | "left" |
+         * "bottom-start" | "top-start" | "top-end" |
+         * "right-start" | "right-end" | "bottom-end" |
+         * "left-start" | "left-end".
+         * @default bottom-start
+         */
+        placement: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Define custom placeholder text.
+         */
+        placeholder: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Populates the `required` attribute on the element. Used for client-side validation.
+         */
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.
+         */
+        error: {
+            type: StringConstructor;
+            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;
+        };
+        /**
+         * Specifies the `validityState` this element is in.
+         */
+        validity: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Value selected for the component.
+         */
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        /**
+         * Sets multi-select mode, allowing multiple options to be selected at once.
+         */
+        multiSelect: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        /**
+         * Indicates whether the input is in a dirty state (has been interacted with).
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        touched: boolean;
+        /**
+         * @private
+         */
+        hasFocus: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * @private
+         */
+        hasDisplayValueContent: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+    };
+    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;
+    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 privateDefaults;
+    options: any[] | Element[];
+    optionActive: any;
+    optionSelected: any;
+    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;
+    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;
+    /**
+     * Binds all behavior needed to the menu after rendering.
+     * @private
+     * @returns {void}
+     */
+    private configureMenu;
+    menu: Element;
+    /**
+     * Binds all behavior needed to the component after rendering.
+     * @private
+     * @returns {void}
+     */
+    private configureSelect;
+    /**
+     * 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;
+    /**
+     * Determines the element error state based on the `required` attribute and input value.
+     * @private
+     * @returns {void}
+     */
+    private generateOptionsArray;
+    /**
+     * Resets all options to their default state.
+     * @private
+     */
+    private clearSelection;
+    firstUpdated(): void;
+    /**
+     * Update the menu value. With checks for menu existence. Awaits value update.
+     * @param {string} value - The value to set in the menu.
+     * @returns {void}
+     * @private
+     */
+    private updateMenuValue;
+    updated(changedProperties: any): Promise<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 a11y screen reader content.
+     * @private
+     * @returns {html} - Returns HTML for the hidden a11y screen reader content.
+     */
+    private renderAriaHtml;
+    /**
+     * 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/bibtemplateVersion.d.ts

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

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

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

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

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

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

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