{capture assign="_component_checkbox"}
    <component v-bind:is="tag" class="wa-checkbox">
        <input type="checkbox" tabindex="-1" v-bind:disabled="prop_disabled" v-bind:checked="modelValue" v-bind:id="field_id" v-on:change="onChange" v-on:click="onClickInput">
        <span>
            <span class="icon"><i class="fas fa-check"></i></span>
        </span>
    </component>
{/capture}
{$_components["component-checkbox"] = $_component_checkbox|strip}

{* DROPDOWN *}
{capture assign="_component_dropdown"}
    <div class="dropdown">
        <template v-if="prop_disabled">
            <button class="dropdown-toggle button small" type="button" v-bind:class="prop_button_class" disabled>
                <template v-if="active_option">
                    <span class="s-icon icon shift-inherit" v-if="active_option.icon" v-html="active_option.icon"></span>
                    <span class="s-icon" v-else-if="active_option.icon_html" v-html="active_option.icon_html"></span>
                </template>
                <span class="s-name">{ { active_option ? active_option.name : {_w("Not specified")|json_encode} } }</span>
            </button>
        </template>
        <template v-else>
            <button class="dropdown-toggle button small" type="button" v-bind:class="prop_button_class">
                <template v-if="active_option">
                    <span class="s-icon icon shift-inherit" v-if="active_option.icon" v-html="active_option.icon"></span>
                    <span class="s-icon" v-else-if="active_option.icon_html" v-html="active_option.icon_html"></span>
                </template>
                <span class="s-name">{ { active_option ? active_option.name : {_w("Not specified")|json_encode} } }</span>
            </button>
            <div class="dropdown-body">
                <template v-for="option in formatted_options">
                    <div class="dropdown-item" v-on:click="change(option)" v-bind:class="{ 'selected': (option === active_option), 'disabled': (option.disabled) }">
                        <span class="s-icon icon shift-inherit" v-if="option.icon" v-html="option.icon"></span>
                        <span class="s-icon" v-else-if="option.icon_html" v-html="option.icon_html"></span>
                        <span class="s-name">{ { option.name ? option.name : {_w("Not specified")|json_encode} } }</span>
                    </div>
                </template>
            </div>
        </template>
    </div>
{/capture}
{$_components["component-dropdown"] = $_component_dropdown|strip}

{* RADIO *}
{capture assign="_component_radio"}
    <component class="wa-radio" v-bind:is="tag">
        <input type="radio" v-bind:checked="checked" v-bind:value="value" v-bind:name="prop_name" v-on:change="onChange" v-bind:disabled="prop_disabled">
        <span></span>
    </component>
{/capture}
{$_components["component-radio"] = $_component_radio|strip}

{* DATE PICKER *}
{capture assign="_component_date_picker"}
    <div class="vue-component-date-picker">
        <input class="js-date-picker" type="text"
               v-bind:class="field_class"
               v-bind:disabled="prop_readonly">
        <span class="s-icon"><i class="fas fa-calendar-alt"></i></span>
        <input name="" type="hidden" value="">
    </div>
{/capture}
{$_components["component-date-picker"] = $_component_date_picker|strip}

{* COLOR PICKER *}
{capture assign="_component_color_picker"}
{strip}
{literal}
    <div class="vue-component-color-picker" v-bind:class="{ 'is-extended': extended }">
        <div class="flexbox space-8 middle nowrap">
            <input class="size-color js-color-field" placeholder="#000000" type="text"
                   v-bind:value="modelValue"
                   v-bind:class="field_class"
                   v-bind:readonly="prop_readonly"
                   v-bind:disabled="prop_disabled"
                   v-on:focus="onFocus"
                   v-on:input="onInput"
                   v-on:change="onChange">
            <div class="s-icon">
                <span class="icon shift-2 rounded s-color-toggle js-color-toggle"
                      v-bind:style="{ 'background-color' : modelValue }"
                      v-on:click="toggle"></span>
            </div>
        </div>
        <div class="s-color-picker js-color-picker" v-show="extended"></div>
    </div>
{/literal}
{/strip}
{/capture}
{$_components["component-color-picker"] = $_component_color_picker|strip}