import { r as registerInstance, h } from './index-D0dWnGvB.js';

const DgaDropdownUsage = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.activeStep = 1;
        this.selectedValue = 'Option-1';
    }
    render() {
        return (h("div", { key: '8cf795962ef99ced3d4ab47b2cb0e81268fcc2a6' }, h("h1", { key: 'fa99399ed45bb19c65674b26a5175e3e1d55a7d8' }, "Dropdown Example"), h("div", { key: 'cf2e02be0ba05f91153f6b5adb1a012fcf607ceb', style: { padding: '50px', display: 'flex', gap: '20px' } }, h("div", { key: '0d0618200046653502fdfa62099b7b5d981833f7', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }, h("dga-dropdown", { key: '40ef0b84920469a189c2ef46f327a4ec8f442534', placeholder: "Placeholder text", variant: "default", optionLabel: "label", trackBy: "value", value: this.selectedValue, options: [
                {
                    label: 'Netherlands Antiles',
                    value: 'Option-1',
                },
                {
                    label: 'Option 2',
                    value: 'Option-2',
                },
                {
                    label: 'Option 3',
                    value: 'Option-3',
                },
            ], onChange: (value) => this.selectedValue = value }), this.selectedValue, h("dga-dropdown", { key: '4713a4e538b20f02ea07edaa5a3d0f1dd41a6497', placeholder: "Placeholder text", variant: "darker", optionLabel: "label", trackBy: "value", options: [
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option Optionbbb',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
            ] }), h("dga-dropdown", { key: 'f8d420d5e90fbb5c08ca9eb06699221d9582e404', placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
            ] }), h("dga-dropdown", { key: '8f98629301e371dd8d007d5077634bd256bb1561', error: true, placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
            ] }), ['lg', 'md'].map((size) => (h("dga-dropdown", { key: size, size: size, placeholder: "Placeholder text", variant: "default", optionLabel: "label", trackBy: "value", options: [
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
            ] }))), h("dga-dropdown", { key: '70110c95a87fe801a7b0c24e55a7a6109482c0f7', multiSelect: true, placeholder: "Placeholder text", variant: "lighter", optionLabel: "label", trackBy: "value", options: [
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
                {
                    label: 'Option',
                    value: 'Option',
                },
            ] })), h("div", { key: '14464d3baebd1591fa732189a928c5a346fe971c', style: { display: 'flex', flexDirection: 'column', gap: '20px' } }))));
    }
};

export { DgaDropdownUsage as dga_dropdown_usage };
