@trendyol/baklava/dist/components/select/bl-select.d.ts

Trendyol Baklava Design System

import { CSSResultGroup, LitElement, PropertyValues } from "lit";
import { FormValue } from "@open-wc/form-helpers";
import "element-internals-polyfill";
import "../icon/bl-icon";
import "../select/option/bl-select-option";
import type BlSelectOption from "./option/bl-select-option";
export interface ISelectOption<T = string> {
    value: T;
    text: string;
    selected: boolean;
}
export declare type SelectSize = "medium" | "large" | "small";
export declare type CleanUpFunction = () => void;
declare const BlSelect_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
/**
 * @tag bl-select
 * @summary Baklava Select component
 *
 * @cssproperty [--bl-popover-position=fixed] Sets the positioning strategy of select popover. You can set it as `absolute` if you need to show popover relative to its trigger element.
 */
export default class BlSelect<ValueType extends FormValue = string> extends BlSelect_base {
    static get styles(): CSSResultGroup;
    static shadowRootOptions: {
        delegatesFocus: boolean;
        mode: ShadowRootMode;
        slotAssignment?: SlotAssignmentMode | undefined;
        customElements?: CustomElementRegistry | undefined;
    };
    static formControlValidators: import("@open-wc/form-control").Validator[];
    /**
     * Sets name of the select field
     */
    name: string;
    private _value;
    private _initialValue;
    /**
     * Sets the value of the select
     */
    get value(): ValueType | ValueType[] | null;
    set value(val: ValueType | ValueType[] | null);
    shouldFormValueUpdate(): boolean;
    /**
     * Sets the label value
     */
    label?: string;
    /**
     * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.
     */
    placeholder?: string;
    /**
     * Sets the size value. Select component's height value will be changed accordingly
     */
    size: SelectSize;
    /**
     * When option is not selected, shows component in error state
     */
    required: boolean;
    /**
     * Shows the component in disabled state.
     */
    disabled: boolean;
    /**
     * Sets whether the selected option is clearable
     */
    clearable: boolean;
    /**
     * Allows multiple options to be selected
     */
    multiple: boolean;
    /**
     * Sets input to get keyboard focus automatically
     */
    autofocus: boolean;
    /**
     * Makes label as fixed positioned
     */
    labelFixed: boolean;
    /**
     * Adds help text
     */
    helpText?: string;
    /**
     * Set custom error message
     */
    customInvalidText?: string;
    private _isPopoverOpen;
    private _additionalSelectedOptionCount;
    private selectedOptionsContainer;
    private selectedOptionsItems;
    private _popover;
    private _selectInput;
    /**
     * Fires when selection changes
     */
    private _onBlSelect;
    private _connectedOptions;
    private _cleanUpPopover;
    private setOptionsSelected;
    get options(): BlSelectOption<ValueType>[];
    get opened(): boolean;
    private _selectedOptions;
    private dirty;
    get selectedOptions(): BlSelectOption<ValueType>[];
    get additionalSelectedOptionCount(): number;
    validityCallback(): string | void;
    reportValidity(): boolean;
    resetFormControl(): void;
    validationTarget: HTMLElement;
    open(): void;
    close(): void;
    private _interactOutsideHandler;
    private _setupPopover;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private inputTemplate;
    render(): import("lit-html").TemplateResult<1>;
    private focusedOptionIndex;
    private handleKeydown;
    private togglePopover;
    private _handleSelectEvent;
    private _handleSingleSelect;
    private _handleMultipleSelect;
    private _handleSelectOptionEvent;
    private _onClickRemove;
    private _checkAdditionalItemCount;
    protected firstUpdated(): void;
    protected updated(_changedProperties: PropertyValues): void;
    /**
     * This method is used by `bl-select-option` component to register itself to bl-select.
     * @param option BlSelectOption reference to be registered
     */
    registerOption(option: BlSelectOption<ValueType>): void;
    /**
     * This method is used by `bl-select-option` component to unregister itself from bl-select.
     * @param option BlSelectOption reference to be unregistered
     */
    unregisterOption(option: BlSelectOption<ValueType>): void;
}
declare global {
    interface HTMLElementTagNameMap {
        "bl-select": BlSelect;
    }
}
export {};
//# sourceMappingURL=bl-select.d.ts.map