@api-client/ui 0.5.24 → 0.5.25

package/build/src/md/select/internals/Select.d.ts

@@ -0,0 +1,250 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import type UiOption from './Option.js';
+import type { UiMenuElement } from '../../menu/ui-menu.js';
+import '../../text-field/ui-outlined-text-field.js';
+import '../../menu/ui-menu.js';
+import '../../icons/ui-icon.js';
+import '@material/web/focus/md-focus-ring.js';
+export interface UiSelectChangeEvent {
+    value: string | undefined;
+    item: UiOption | null;
+}
+/**
+ * Material Design 3 Select component that behaves like an outlined text field with dropdown.
+ *
+ * @fires change - Dispatched when the selection changes. The event is non-bubbling and non-cancelable.
+ *                 The `event.detail` object contains the `value` and `item` properties.
+ * @fires open - Dispatched when the dropdown opens
+ * @fires close - Dispatched when the dropdown closes
+ */
+export default class UiSelect extends LitElement {
+    #private;
+    static readonly formAssociated = true;
+    /**
+     * The currently selected value. Corresponds to the `value` attribute of the selected `ui-option`.
+     * When set programmatically, it will update the selected option if a matching option exists.
+     *
+     * @example
+     * ```html
+     * <ui-select value="apple">
+     *   <ui-option value="apple">Apple</ui-option>
+     *   <ui-option value="banana">Banana</ui-option>
+     * </ui-select>
+     * ```
+     */
+    get value(): string | undefined;
+    set value(newValue: string | undefined);
+    /**
+     * The name attribute for form submission. This value will be used as the key
+     * when the form is submitted.
+     *
+     * @example
+     * ```html
+     * <ui-select name="country" value="us">
+     *   <ui-option value="us">United States</ui-option>
+     * </ui-select>
+     * ```
+     */
+    accessor name: string | undefined;
+    /**
+     * The label text displayed in the select field. Provides accessible labeling
+     * and is shown as the floating label in the outlined text field.
+     *
+     * @example
+     * ```html
+     * <ui-select label="Select a country">
+     *   <ui-option value="us">United States</ui-option>
+     * </ui-select>
+     * ```
+     */
+    accessor label: string | undefined;
+    /**
+     * Whether the select is required for form validation. When true, the select
+     * must have a value selected for the form to be valid.
+     *
+     * @default false
+     * @example
+     * ```html
+     * <ui-select required label="Required field">
+     *   <ui-option value="option1">Option 1</ui-option>
+     * </ui-select>
+     * ```
+     */
+    accessor required: boolean;
+    /**
+     * Whether the select is in an invalid state. This is typically set automatically
+     * during validation, but can be set manually to indicate validation errors.
+     *
+     * @example
+     * ```html
+     * <ui-select invalid invalidText="Please select a valid option">
+     *   <ui-option value="option1">Option 1</ui-option>
+     * </ui-select>
+     * ```
+     */
+    accessor invalid: boolean | undefined;
+    /**
+     * The error message to display when the select is invalid. This text is shown
+     * below the select field when `invalid` is true.
+     *
+     * @example
+     * ```html
+     * <ui-select invalid invalidText="This field is required">
+     *   <ui-option value="option1">Option 1</ui-option>
+     * </ui-select>
+     * ```
+     */
+    accessor invalidText: string | undefined;
+    /**
+     * Whether the select is disabled. When disabled, the select cannot be interacted
+     * with and will not receive focus or respond to user input.
+     *
+     * @default false
+     * @example
+     * ```html
+     * <ui-select disabled label="Disabled select">
+     *   <ui-option value="option1">Option 1</ui-option>
+     * </ui-select>
+     * ```
+     */
+    accessor disabled: boolean;
+    /**
+     * Whether the dropdown menu is currently open. This property reflects the
+     * current state of the dropdown and can be set programmatically to open/close it.
+     *
+     * @default false
+     * @example
+     * ```javascript
+     * // Open the dropdown programmatically
+     * selectElement.open = true;
+     *
+     * // Close the dropdown
+     * selectElement.open = false;
+     * ```
+     */
+    accessor open: boolean;
+    accessor selectedOption: UiOption | null;
+    accessor ariaActiveDescendant: string | undefined;
+    accessor menu: UiMenuElement;
+    /**
+     * Returns the currently selected option element. This provides access to the
+     * full `ui-option` element, not just its value.
+     *
+     * @readonly
+     * @example
+     * ```javascript
+     * const select = document.querySelector('ui-select');
+     * const selectedItem = select.selectedItem;
+     * if (selectedItem) {
+     *   console.log('Selected option:', selectedItem.textContent);
+     * }
+     * ```
+     */
+    get selectedItem(): UiOption | null;
+    /**
+     * Returns the text content that should be displayed in the select field.
+     * This is the rendered value of the currently selected option.
+     *
+     * @readonly
+     * @example
+     * ```javascript
+     * const select = document.querySelector('ui-select');
+     * console.log('Display text:', select.renderValue);
+     * ```
+     */
+    get renderValue(): string;
+    /**
+     * Returns the form element that contains this select, if any.
+     * Part of the form-associated custom element API.
+     *
+     * @readonly
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * Returns the validity state of the select element.
+     * Part of the form-associated custom element API.
+     *
+     * @readonly
+     */
+    get validity(): ValidityState;
+    /**
+     * Returns the validation message for the select element.
+     * Part of the form-associated custom element API.
+     *
+     * @readonly
+     */
+    get validationMessage(): string;
+    /**
+     * Returns whether the select element will be validated when the form is submitted.
+     * Part of the form-associated custom element API.
+     *
+     * @readonly
+     */
+    get willValidate(): boolean;
+    /**
+     * Checks the validity of the select element and returns true if valid.
+     * Part of the form-associated custom element API.
+     *
+     * @returns {boolean} True if the element is valid, false otherwise
+     * @example
+     * ```javascript
+     * const select = document.querySelector('ui-select');
+     * if (!select.checkValidity()) {
+     *   console.log('Select is invalid:', select.validationMessage);
+     * }
+     * ```
+     */
+    checkValidity(): boolean;
+    constructor();
+    connectedCallback(): void;
+    /**
+     * Resets the select to its initial state. Called automatically when the parent
+     * form is reset. Part of the form-associated custom element API.
+     *
+     * @example
+     * ```javascript
+     * const select = document.querySelector('ui-select');
+     * select.formResetCallback(); // Clears the selection
+     * ```
+     */
+    formResetCallback(): void;
+    /**
+     * Restores the select's state from saved form data. Called automatically when
+     * the browser restores form state. Part of the form-associated custom element API.
+     *
+     * @param {string | null} state - The saved state to restore
+     */
+    formStateRestoreCallback(state: string | null): void;
+    /**
+     * Validates the select element and updates its validity state. This is called
+     * automatically during property changes, but can be called manually to trigger validation.
+     *
+     * @example
+     * ```javascript
+     * const select = document.querySelector('ui-select');
+     * select.validate();
+     * if (select.invalid) {
+     *   console.log('Validation failed:', select.invalidText);
+     * }
+     * ```
+     */
+    validate(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected setCurrentOption(): Promise<void>;
+    protected handleKeydown(e: KeyboardEvent): void;
+    protected handleBlur(e: FocusEvent): void;
+    protected handleClick(e: Event): void;
+    protected handleOpenChange(): Promise<void>;
+    handleSelect(e: CustomEvent<{
+        item: UiOption;
+    }>): void;
+    handleHighlightChange(e: CustomEvent<{
+        item: UiOption | null;
+    }>): void;
+    handleMenuClose(): void;
+    render(): TemplateResult;
+    protected renderInput(): TemplateResult;
+    protected renderMenu(): TemplateResult;
+    protected renderFocusRing(): TemplateResult;
+}
+//# sourceMappingURL=Select.d.ts.map

package/build/src/md/select/internals/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.ts"],"names":[],"mappings":"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"}