@umbraco-ui/uui-select/lib/uui-select.element.d.ts

Umbraco UI select component

import { LitElement } from 'lit';
declare global {
    interface Option {
        name: string;
        value: string;
        group?: string;
        selected?: boolean;
        disabled?: boolean;
    }
}
declare const UUISelectElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").UUIFormControlMixinElement<FormDataEntryValue | FormData>) & typeof LitElement;
/**
 * Custom element wrapping the native select element. Pass an array of options to it.
 * This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.
 * @element uui-select
 * @fires change - when the user changes value
 * @cssprop --uui-select-height - Height of the element
 * @cssprop --uui-select-font-size - Font size of the element
 * @cssprop --uui-select-text-color - Color of the text
 * @cssprop --uui-select-padding-y - Padding on the y axis
 * @cssprop --uui-select-padding-x - Padding on the x axis
 * @cssprop --uui-select-border-color - Border color
 * @cssprop --uui-select-border-color-hover - Border color on hover
 * @cssprop --uui-select-selected-option-background-color - Background color of the selected option
 * @cssprop --uui-select-selected-option-color - Color of the selected option
 * @cssprop --uui-select-outline-color - Outline color
 * @cssprop --uui-select-background-color - Background color
 * @cssprop --uui-select-disabled-background-color - Background color when disabled
 * @extends UUIFormControlMixin
 */
export declare class UUISelectElement extends UUISelectElement_base {
    /**
     * Text with which component should be labeled
     * @type {string}
     * @attr
     */
    label: string;
    /**
     * Defines the select's placeholder.
     * @type {string}
     * @attr
     */
    placeholder: string;
    /**
     * Disables the select.
     * @type {boolean}
     * @attr
     * @default false
     */
    disabled: boolean;
    /**
     * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
     * @type {boolean}
     * @attr
     * @default false
     */
    readonly: boolean;
    /**
     * Set to true if the component should have an error state.Property is reflected to the corresponding attribute.
     * @type {boolean}
     * @attr
     * @default false
     */
    error: boolean;
    /**
     * An array of options to be rendered by the element. If you want the element The option interface has up to 5 properties:
     * `interface Option {
      name: string;
      value: string;
      group?: string;
      selected?: boolean;
      disabled?: boolean;
    }`
     */
    options: Option[];
    private _groups;
    /**
     * An array of options to be rendered by the element. Put the names of the groups you wanna disable, separated by a coma: `disabledGroups='fruits, vegetables'`. It's not case sensitive
     */
    disabledGroups: string;
    private _disabledGroups;
    private _values;
    protected _input: HTMLSelectElement;
    constructor();
    /**
     * This method enables <label for="..."> to focus the select
     */
    focus(): Promise<void>;
    blur(): Promise<void>;
    /**
     * This method enables <label for="..."> to open the select
     */
    click(): Promise<void>;
    protected getFormElement(): HTMLElement;
    connectedCallback(): void;
    private _createDisabledGroups;
    private _extractGroups;
    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
    protected setValue(e: Event): void;
    private _renderOption;
    private _renderGrouped;
    private _getDisplayValue;
    render(): import("lit-html").TemplateResult<1>;
    static styles: import("lit").CSSResult[];
}
declare global {
    interface HTMLElementTagNameMap {
        'uui-select': UUISelectElement;
    }
}
export {};