@furystack/shades-common-components/esm/components/inputs/autocomplete.js

import { Shade, createComponent } from '@furystack/shades';
import { Input } from './input.js';
export const Autocomplete = Shade({
    shadowDomName: 'shade-autocomplete',
    constructed({ element, useState }) {
        const [dataListId] = useState('dataListId', (Math.random() + 1).toString(36).substring(3));
        element.querySelector('input')?.setAttribute('list', dataListId);
    },
    render: ({ props, useState }) => {
        const [dataListId] = useState('dataListId', (Math.random() + 1).toString(36).substring(3));
        return (createComponent(createComponent, null,
            createComponent(Input, { ...props.inputProps, onchange: (ev) => {
                    const { value } = ev.target;
                    if (props.strict) {
                        if (!props.suggestions.includes(value)) {
                            ;
                            ev.target.setCustomValidity('Please select a valid entry!');
                            return;
                        }
                    }
                    props.onchange?.(value);
                } }),
            createComponent("datalist", { id: dataListId }, props.suggestions.map((s) => (createComponent("option", { value: s }))))));
    },
});
//# sourceMappingURL=autocomplete.js.map