From df8189cd66c4c56982aa522f1a22539e06263733 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Tue, 17 Mar 2026 10:32:59 -0400
Subject: [PATCH] cherry: import element_input_v2.svelte from
 wip-modal-fix-attempt

---
 src/lib/elements/element_input_v2.svelte | 801 +++++++++++++++++++++++
 1 file changed, 801 insertions(+)
 create mode 100644 src/lib/elements/element_input_v2.svelte

diff --git a/src/lib/elements/element_input_v2.svelte b/src/lib/elements/element_input_v2.svelte
new file mode 100644
index 00000000..803ad623
--- /dev/null
+++ b/src/lib/elements/element_input_v2.svelte
@@ -0,0 +1,801 @@
+<script lang="ts">
+    import { run } from 'svelte/legacy';
+
+    import { createEventDispatcher, onMount } from 'svelte';
+
+    import util from './utilities.js';
+
+    // import Select_element_lu from './element_select_lu.svelte';
+
+    console.log(`Input name=${name} value=${value}`);
+
+    console.log('Original Value', original_value);
+    console.log('Data Type:', data_type);
+
+    let set_input_type = $state((node) => {
+        node.type = 'text';
+    });
+    let input_element_type_list = ['checkbox', 'date', 'email', 'hidden', 'number', 'text'];
+    if (input_element_type_list.includes(type)) {
+        set_input_type = (node) => {
+            node.type = type;
+        };
+    } else {
+    }
+
+    console.log(`Input name=${name} value=${value} type=${type}`);
+
+    /* *** END *** Core input settings */
+
+    /* *** BEGIN *** Container content, layout, and behavior */
+
+    console.log(`Input input_mode=${input_mode}`);
+
+    /* *** END *** Container content, layout, and behavior */
+
+    /* *** BEGIN *** Input type specific */
+
+    if (type == 'textarea') {
+        console.log(`Input textarea size=${size} rows=${rows} cols=${cols}`);
+    }
+
+    interface Props {
+        /* *** BEGIN *** Core input settings */
+        id_random?: string; // OSIT Aether specific
+        obj_type?: string; // OSIT Aether specific
+        obj_prop_name?: string; // OSIT Aether specific
+        use_name_prefix?: boolean;
+        name?: string;
+        // console.log(name);
+        id?: string; // Same as the value for "for"
+        // console.log(id);
+        value?: null | boolean | number | string; // The current value of the property
+        default_value?: null | boolean | number | string; // The default value for when value is ''
+        // console.log('Default Value:', default_value);
+        original_value?: null | boolean | number | string; // The original value
+        data_type?: string; // boolean, number, string, json
+        // hidden, text, email, date, number, select, checkbox, radio, textarea, etc
+        type?: string; // Input type
+        disabled?: boolean; // attribute format: disabled
+        readonly?: boolean; // attribute format: readonly="readonly"
+        required?: boolean; // attribute format: required="required"
+        pattern?: null | string;
+        focus?: boolean;
+        // Input element specific label and placeholder
+        label?: string;
+        label_date?: string;
+        label_time?: string;
+        placeholder?: string;
+        // Input description for container
+        description?: string; // Description
+        // Layout and style
+        content_layout?: string; // Default empty is label wrap first, label_start, label_end, floating_input
+        class_li?: string[]; // Classes for the input element
+        style?: string; // Style for the input element
+        display?: string; // Default empty is inline. inline, block, inline-block, break (break after)
+        label_class_li?: string[];
+        label_style?: string;
+        label_display?: string; // Default empty is inline. inline, block, inline-block, break (break after)
+        label_location?: string; // start, end
+        description_location?: string; // start, end
+        container_class_li?: string[]; // Classes for the container element
+        container_style?: string;
+        container_display?: string; // Default empty is div block. inline, block, inline-block, break (break after)
+        multipart_class_li?: string[];
+        input_mode?: null | string; // This is for special/custom modes like a rich text editor or search.
+        // For checkbox, radio, and select option
+        option_li?: any[]; // For checkbox, radio, and select inputs. Not specific to select options. List of key value pairs.
+        option_none?: boolean; // If set to true then it will add an option using the select_option_none_text value
+        option_none_text?: string; // If set to true then it will add an option using the select_option_none_text value
+        // For textarea
+        size?: number;
+        rows?: number;
+        cols?: number;
+        // For custom date_time. Not "date" or "time" input type only.
+        date_time_tz?: null | string;
+        more_html?: import('svelte').Snippet;
+    }
+
+    let {
+        id_random = '',
+        obj_type = '',
+        obj_prop_name = '',
+        use_name_prefix = false,
+        name = use_name_prefix ? `${obj_type}__${obj_prop_name}` : obj_prop_name,
+        id = `${obj_type}__${obj_prop_name}--${id_random}`,
+        value = $bindable(null),
+        default_value = null,
+        original_value = value,
+        data_type = typeof value,
+        type = 'text',
+        disabled = $bindable(false),
+        readonly = $bindable(false),
+        required = $bindable(false),
+        pattern = null,
+        focus = false,
+        label = '',
+        label_date = 'Date',
+        label_time = 'Time',
+        placeholder = label,
+        description = '',
+        content_layout = '',
+        class_li = [],
+        style = $bindable(''),
+        display = '',
+        label_class_li = [],
+        label_style = '',
+        label_display = '',
+        label_location = 'start',
+        description_location = 'end',
+        container_class_li = [],
+        container_style = $bindable(''),
+        container_display = '',
+        multipart_class_li = [],
+        input_mode = null,
+        option_li = [],
+        option_none = false,
+        option_none_text = '-- Not Selected --',
+        size = null,
+        rows = 3,
+        cols = 80,
+        date_time_tz = null,
+        more_html
+    }: Props = $props();
+    let value_datetime = null;
+    let value_date = $state(null);
+    let value_time = $state(null);
+
+    if (type == 'date_time' && value) {
+        console.log(`date_time value: ${value}`);
+        value_datetime = new Date(value + 'Z'); // Append the Z so it knows it is UTC (YYY-MM-DDTHH:mm:ssZ)
+        console.log(value_datetime);
+
+        value_datetime = util.iso_datetime_formatter(value_datetime, 'datetime_iso');
+        value_date = util.iso_datetime_formatter(value_datetime, 'date_iso');
+        value_time = util.iso_datetime_formatter(value_datetime, 'time_iso');
+        // value_date = value_datetime.toLocaleDateString();
+        // value_date = value_datetime.toISOString();
+        // value_time = value_datetime.toLocaleTimeString();
+        // value_time = value_datetime.toISOString();
+    } else if (type == 'date_time') {
+        console.log('No datetime value passed');
+    }
+    if (type == 'date_time') {
+        console.log(
+            `Input date_time value_datetime=${value_datetime} value_date=${value_date} value_time=${value_time} date_time_tz=${date_time_tz}`
+        );
+    }
+
+    /* *** END *** Input type specific */
+
+    /* THIS NEEDS TO BE CLEANED UP */
+    let multipart_style;
+    let label_begin;
+    let checkbox_none;
+    let checked = $state();
+    let checkbox_none_text;
+    let checkbox_li;
+    let radio_option_class_li;
+    let radio_none;
+    let radio_none_text;
+    let radio_li;
+    let value_new_line;
+    let select_option_none;
+    let select_option_li_lu_name;
+    let select_option_li;
+    let select_option_none_text;
+    /* ^^^ THIS NEEDS TO BE CLEANED UP ^^^ */
+
+    const dispatch = createEventDispatcher();
+
+    // type Input = {
+    //   name: string;
+    //   value: number;
+    // };
+    // let input: Input;
+
+    /*
+     * container_element: span, div, section
+     * container_class_li: []
+     * content_layout: inline, break, bs_floating
+     * content_order: label_value_description, value_label_description, label_description_value
+     * label_class_li: []
+     * class_li: []
+     * start_desc: string
+     * end_desc: string
+     *
+     */
+
+    onMount(() => {
+        console.log(
+            `** Element Mounted: ** Element Input v2: ${obj_type} ${obj_prop_name}; type=${data_type}; value=${value}`
+        );
+
+        if (input_mode == 'editor_basic_200') {
+            rich_editor();
+        }
+    });
+
+    // $: if (value) {
+    //     console.log(`input name=${name} value=${value}`);
+    //     console.log(typeof value);
+    // } else if (typeof value === 'undefined') {
+    //     console.log(`input name=${name} value=undefined; resetting to ''`);
+    //     value = '';
+    // }
+
+    run(() => {
+        if (disabled) {
+            disabled = true;
+        }
+    }); // else { disabled=false; }
+    run(() => {
+        if (readonly) {
+            readonly = true;
+        }
+    }); // else { readonly=false; }
+    run(() => {
+        if (required) {
+            required = true;
+        }
+    }); // else { required=true; }
+
+    run(() => {
+        if (data_type) {
+            console.log(`Input value data_type=${data_type}`);
+        } else if (data_type == 'json') {
+            console.log(`Need to convert JSON object to string.`);
+            if (typeof value === 'object') {
+                value = JSON.stringify(value);
+                console.log(`Value as data type (${data_type}): ${value}`);
+            } else {
+                console.log('Value is not an object type');
+                console.log(typeof value);
+            }
+        }
+    });
+
+    // // input_mode options: null or '' assume 'text', 'none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', and 'search'
+    // $: if (input_mode === null || input_mode == '') {
+    //     input_mode = 'text';
+    // } else if (input_mode == 'json') {
+    // } else if (input_mode == 'editor_basic_200') {
+    // }
+    // console.log(`input_mode=${input_mode}`);
+
+    run(() => {
+        if (container_display == '' || container_display == 'block') {
+            console.log(`input name=${name} container_display=${container_display}`);
+            // NOTE: Using a div will be displayed as block by default
+        } else if (container_display == 'inline') {
+            console.log(`input name=${name} container_display=${container_display}`);
+            container_class_li.push('container_inline');
+            container_style = 'display: inline;';
+        } else if (container_display == 'inline-block') {
+            console.log(`input name=${name} container_display=${container_display}`);
+            container_class_li.push('container_inline_block');
+            container_style = 'display: inline-block;';
+        } else if (typeof container_display === 'undefined') {
+            console.log(`input name=${name} container_display=${container_display}`);
+        }
+    });
+
+    run(() => {
+        if (content_layout == '' || content_layout == 'label_begin') {
+            console.log(`input name=${name} content_layout=${content_layout}`);
+            // label_begin = true;
+        } else if (content_layout == 'label_end') {
+            console.log(`input name=${name} content_layout=${content_layout}`);
+            // label_begin = false;
+        } else if (content_layout == 'floating_input') {
+            console.log(`input name=${name} content_layout=${content_layout}`);
+            // label_begin = false;
+
+            if (type != 'date_time') {
+                container_class_li.push('form-floating'); // set the container class list
+            } else {
+                multipart_class_li.push('form-floating'); // set the container with multi input parts class list
+            }
+
+            if (type === 'select') {
+                class_li.push('form-select'); // set the select class list
+            } else {
+                console.log('Make form-control???');
+                class_li.push('form-control'); // set the input, select, textarea class list
+            }
+
+            if (type === 'textarea') {
+                let estimate_row_rem = rows + 5.5;
+                style = `height: calc(2px + ${estimate_row_rem}rem);`;
+            }
+        } else if (typeof content_layout === 'undefined') {
+            console.log(`input name=${name} content_layout=${content_layout}`);
+        }
+    });
+
+    // function handle_oninput_dispatch() {
+    //     console.log(input);
+    //     dispatch('oninput', {
+    //         name: input.name,
+    //         value: input.value,
+    //     });
+    // }
+
+    function handle_oninput_dispatch(event: InputEvent) {
+        console.log(event.target);
+        console.log(value);
+        dispatch('oninput', {
+            name: event.target.name,
+            value: (event.target as HTMLInputElement).value
+        });
+    }
+
+    function rich_editor() {
+        console.log('*** rich_editor() ***');
+
+        // let test_element = $('.editor_basic_200');
+        // console.log(test_element);
+
+        // let textarea_element = document.querySelector('.editor_basic_200');
+
+        // let toolbar_element = document.querySelector('.quilljs_toolbar');
+        // console.log(toolbar_element);
+
+        let editor_element = document.querySelector('.quilljs_editor');
+        console.log(editor_element);
+
+        // var editor = new Quill(editor_element, {
+        //     modules: {
+        //         'multi-cursor': true,
+        //         'toolbar': { container: '#quilljs_toolbar' },
+        //         // 'link-tooltip': true,
+        //     },
+        //     placeholder: 'Text goes here',
+        //     theme: 'snow'
+        // });
+
+        var editor = new Quill(editor_element, {
+            modules: {
+                'multi-cursor': true,
+                toolbar: [
+                    [
+                        {
+                            header: [1, 2, false]
+                        }
+                    ],
+                    ['bold', 'italic', 'underline'],
+                    ['image', 'code-block']
+                ]
+                // 'link-tooltip': true,
+            },
+            placeholder: 'Text goes here',
+            theme: 'snow'
+        });
+
+        /*
+    textarea_element.summernote(
+    {
+        tabsize: 4,
+        height: 200,
+        toolbar: [
+            ['cleaner',['cleaner']], // The Button
+            ['edit', ['undo', 'redo']],
+            ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
+            ['color', ['forecolor']],
+            ['para', ['ul', 'ol', 'paragraph']],
+            ['insert', ['link']],
+            ['view', ['codeview', 'help']]
+        ],
+        cleaner:{
+            action: 'both', // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
+            newline: '<br>', // Summernote's default is to use '<p><br></p>'
+            notStyle: '', // Position of Notification
+            icon: '<i class="fas fa-paste"></i>',
+            keepHtml: true, // Remove all Html formats
+            keepOnlyTags: ['<p>', '<br>', '<ul>', '<li>', '<b>', '<strong>','<i>', '<a>'], // If keepHtml is true, remove all tags except these
+            keepClasses: false, // Remove Classes
+            badTags: ['style', 'script', 'applet', 'embed', 'noframes', 'noscript', 'html'], // Remove full tags with contents
+            badAttributes: ['style', 'start'], // Remove attributes from remaining tags
+            limitChars: false, // 0/false|# 0/false disables option
+            limitDisplay: 'none', // none|text|html|both
+            limitStop: false // true/false
+        }
+    });
+    */
+    }
+</script>
+
+<div class="element element_input {container_class_li.join(' ')}" style={container_style}>
+    {#if type === 'email' || type === 'date' || type === 'number' || type === 'tel' || type === 'text' || type === 'time' || type === 'url'}
+        {#if content_layout == 'label_start' && label}
+            <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+        {/if}
+
+        <input
+            {id}
+            {name}
+            class={class_li.join(' ')}
+            {style}
+            use:set_input_type
+            {placeholder}
+            {size}
+            {pattern}
+            {readonly}
+            {disabled}
+            {required}
+            inputmode={input_mode}
+            data-id_random={id_random}
+            data-obj_type={obj_type}
+            data-obj_prop_name={obj_prop_name}
+            use:util.set_focus={focus}
+            oninput={handle_oninput_dispatch}
+            bind:value
+        />
+
+        {#if content_layout != 'label_start' && label}
+            <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+        {/if}
+
+        <span>{description}</span>
+    {:else if type === 'date_time'}
+        {#if content_layout == 'label_start' && label}
+            <span class={label_class_li.join(' ')} style={label_style}>{label}</span>
+            <!-- <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label> -->
+        {/if}
+
+        <div class="element_input multipart {multipart_class_li.join(' ')}" style={multipart_style}>
+            {#if label_begin}
+                <label for={`${id}_date`} class={label_class_li.join(' ')} style={label_style}
+                    >{label_date}</label
+                >
+            {/if}
+
+            <input
+                id={id + '_date'}
+                name={name + '_date'}
+                {style}
+                class={class_li.join(' ')}
+                type="date"
+                value={value_date}
+                {placeholder}
+                {readonly}
+                {disabled}
+                {required}
+                data-id_random={id_random}
+                data-obj_type={obj_type}
+                data-obj_prop_name={obj_prop_name}
+                oninput={handle_oninput_dispatch}
+            />
+
+            {#if !label_begin}
+                <label for={`${id}_date`} class={label_class_li.join(' ')} style={label_style}
+                    >{label_date}</label
+                >
+            {/if}
+        </div>
+
+        <div class="element_input multipart {multipart_class_li.join(' ')}" style={multipart_style}>
+            {#if label_begin}
+                <label for={`${id}_time`} class={label_class_li.join(' ')} style={label_style}
+                    >{label_time}</label
+                >
+            {/if}
+
+            <input
+                id={id + '_time'}
+                name={name + '_time'}
+                {style}
+                class={class_li.join(' ')}
+                type="time"
+                value={value_time}
+                {placeholder}
+                {readonly}
+                {disabled}
+                {required}
+                data-id_random={id_random}
+                data-obj_type={obj_type}
+                data-obj_prop_name={obj_prop_name}
+                oninput={handle_oninput_dispatch}
+            />
+
+            {#if !label_begin}
+                <label for={`${id}_time`} class={label_class_li.join(' ')} style={label_style}
+                    >{label_time}</label
+                >
+            {/if}
+        </div>
+
+        {#if content_layout != 'label_start' && label}
+            <span class={label_class_li.join(' ')} style={label_style}>{label}</span>
+            <!-- <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label> -->
+        {/if}
+
+        <span>{description}</span>
+    {:else if type === 'checkbox'}
+        {#if checkbox_none}
+            {#if !value}
+                {(checked = 'checked')}
+            {/if}
+            <label
+                >{checkbox_none_text}
+                <input
+                    {name}
+                    type="checkbox"
+                    value=""
+                    {readonly}
+                    {disabled}
+                    {required}
+                    {checked}
+                    oninput={handle_oninput_dispatch}
+                />
+            </label>
+        {/if}
+        {#if checkbox_li.length}
+            {#if content_layout == 'label_start' && label}
+                <span class="input_container_label label_begin">{label}</span>
+            {/if}
+
+            {#each Object.entries(checkbox_li) as [li_key, li_value]}
+                {#if li_key.toString() === value.toString()}
+                    <label
+                        >{li_value}
+                        <input
+                            {name}
+                            type="checkbox"
+                            value={li_key}
+                            checked
+                            oninput={handle_oninput_dispatch}
+                        />
+                    </label>
+                {:else}
+                    <label
+                        >{li_value}
+                        <input
+                            {name}
+                            type="checkbox"
+                            value={li_key}
+                            oninput={handle_oninput_dispatch}
+                        />
+                    </label>
+                {/if}
+            {/each}
+
+            {#if content_layout != 'label_start' && label}
+                <span class="input_container_label label_end">{label}</span>
+            {/if}
+        {:else}
+            {#if label_begin}
+                <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+            {/if}
+
+            <input
+                {id}
+                {name}
+                class={class_li.join(' ')}
+                {style}
+                type="checkbox"
+                {value}
+                {placeholder}
+                {readonly}
+                {disabled}
+                {required}
+                data-id_random={id_random}
+                data-obj_type={obj_type}
+                data-obj_prop_name={obj_prop_name}
+                {checked}
+                oninput={handle_oninput_dispatch}
+            />
+        {/if}
+
+        <span>{description}</span>
+    {:else if type === 'radio'}
+        {#if radio_none}
+            {#if !value}
+                {(checked = 'checked')}
+            {/if}
+            <label class={radio_option_class_li.join(' ')}
+                >{radio_none_text}
+                <input
+                    {name}
+                    type="radio"
+                    value=""
+                    {readonly}
+                    {disabled}
+                    {required}
+                    {checked}
+                    oninput={handle_oninput_dispatch}
+                />
+            </label>
+        {/if}
+        {#if radio_li}
+            {#if content_layout == 'label_start' && label}
+                <span class="input_container_label label_begin">{label}:</span>
+            {/if}
+
+            <span class="input_container_radio_options">
+                {#each Object.entries(radio_li) as [li_key, li_value]}
+                    {#if value === null}
+                        <!-- If null then no option should be selected. -->
+                        <label
+                            >{li_value}
+                            <input
+                                {name}
+                                type="radio"
+                                bind:group={value}
+                                value={li_key}
+                                oninput={handle_oninput_dispatch}
+                            />
+                        </label>
+                    {:else if li_key.toString() === value.toString() || (li_key == 'true' && value == true) || (li_key == 'false' && value == false)}
+                        <label
+                            >{li_value}
+                            <input
+                                {name}
+                                type="radio"
+                                bind:group={value}
+                                value={li_key}
+                                checked
+                                oninput={handle_oninput_dispatch}
+                            /> Z
+                        </label>
+                    {:else}
+                        <label
+                            >{li_value}
+                            <input
+                                {name}
+                                type="radio"
+                                bind:group={value}
+                                value={li_key}
+                                oninput={handle_oninput_dispatch}
+                            />
+                        </label>
+                    {/if}
+
+                    <!-- <label>{li_value}
+                <input {name} type="radio" bind:group={value} value="{li_key}" on:input={handle_oninput_dispatch}>
+            </label> -->
+                {/each}
+            </span>
+
+            {#if !label_begin}
+                <span class="input_container_label label_end">{label}:</span>
+            {/if}
+        {:else}
+            {#if label_begin}
+                <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+            {/if}
+
+            <input
+                {id}
+                {name}
+                class={class_li.join(' ')}
+                {style}
+                type="radio"
+                {value}
+                {placeholder}
+                {readonly}
+                {disabled}
+                {required}
+                data-id_random={id_random}
+                data-obj_type={obj_type}
+                data-obj_prop_name={obj_prop_name}
+                {checked}
+                oninput={handle_oninput_dispatch}
+            />
+
+            {#if !label_begin}
+                <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+            {/if}
+        {/if}
+
+        <span>{description}</span>
+    {:else if type === 'textarea'}
+        {#if label_begin}
+            <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+        {/if}
+
+        {#if value_new_line}<br />{/if}
+        <textarea
+            {id}
+            {name}
+            class={class_li.join(' ')}
+            {style}
+            bind:value
+            {placeholder}
+            {readonly}
+            {disabled}
+            {required}
+            {rows}
+            {cols}
+            data-id_random={id_random}
+            data-obj_type={obj_type}
+            data-obj_prop_name={obj_prop_name}
+            oninput={handle_oninput_dispatch}
+        ></textarea>
+        <!-- rows="" cols="" maxlength="" -->
+
+        {#if !label_begin}
+            <label for={id} class={label_class_li.join(' ')} style={label_style}>{label}</label>
+        {/if}
+
+        <span>{description}</span>
+    {:else if type === 'hidden'}
+        <input
+            {id}
+            {name}
+            class={class_li.join(' ')}
+            type="hidden"
+            bind:value
+            {placeholder}
+            {readonly}
+            {disabled}
+            {required}
+            data-id_random={id_random}
+            data-obj_type={obj_type}
+            data-obj_prop_name={obj_prop_name}
+        />
+    {:else if type === 'select'}
+        {#if label_begin}
+            <label for={id} class={label_class_li.join(' ')} style={label_style}>
+                {label}
+                <!-- {#if value} <span class="label_select_value">{value}</span>{/if} -->
+            </label>
+        {/if}
+
+        <select
+            {id}
+            {name}
+            class={class_li.join(' ')}
+            {style}
+            {readonly}
+            {disabled}
+            {required}
+            data-id_random={id_random}
+            data-obj_type={obj_type}
+            data-obj_prop_name={obj_prop_name}
+            oninput={handle_oninput_dispatch}
+        >
+            {#if select_option_none}
+                <option value="">{select_option_none_text}</option>
+            {/if}
+            {#if select_option_li_lu_name}
+                <!-- <Select_element_lu lu_list_name={select_option_li_lu_name} params={select_option_li_lu_params} value_field_name={select_option_lu_value_field_name} text_field_name={select_option_lu_text_field_name} slct_value={value} /> -->
+            {:else}
+                {#each Object.entries(select_option_li) as [li_key, li_value]}
+                    {#if value === null}
+                        <!-- If null then no option should be selected. -->
+                        <option value={li_key}>
+                            {li_value}
+                        </option>
+                    {:else if li_key.toString() === value.toString()}
+                        <option value={li_key} selected>
+                            {li_value}
+                        </option>
+                    {:else}
+                        <option value={li_key}>
+                            {li_value}
+                        </option>
+                    {/if}
+                {/each}
+            {/if}
+        </select>
+
+        {#if !label_begin}
+            <label for={id} class={label_class_li.join(' ')} style={label_style}>
+                {label}
+                {#if value}
+                    <span class="label_select_value">{value}</span>{/if}
+            </label>
+        {/if}
+
+        <span>{description}</span>
+    {/if}
+
+    {@render more_html?.()}
+</div>
+
+<style>
+    .container_inline {
+        display: inline;
+    }
+</style>