@paperbits/forms/select/ko/selectInputEditor.html

Paperbits components for form builder.

<details open>
    <summary>
        Main
    </summary>

    <div class="form-group">
        <label class="form-label">
            Label
            <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Input label'"></button>
        </label>
        <input type="text" class="form-control" placeholder="e.g. Password" data-bind="textInput: label" />
    </div>

    <div class="form-group">
        <label class="form-label">
            Field name
            <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Field name'"></button>
        </label>
        <input type="text" class="form-control" placeholder="e.g. firstName" data-bind="textInput: name" />
    </div>

    <div class="form-group">
        <label class="form-label">
            Placeholder
            <button class="btn btn-info" role="tooltip" data-bind="tooltip: 'Placeholder'"></button>
        </label>
        <input type="text" class="form-control" placeholder="e.g. P@ssw0rd" data-bind="textInput: placeholder" />
    </div>

    <div class="form-group">
        <label class="form-label">
            <input name="required" type="checkbox" data-bind="checked: required" />Make required
        </label>
    </div>

    <div class="form-group">
        <label class="form-label">
            <input name="required" type="checkbox" data-bind="checked: readonly" />Make readonly
        </label>
    </div>
</details>

<details open>
    <summary>
        Options/Values
    </summary>
    <label class="form-label">Add item:</label>
    <input class="form-control" type="text" placeholder="name"
        data-bind='value: $component.itemNameToAdd, valueUpdate: "afterkeydown"' />
    <input class="form-control" type="text" placeholder="value"
        data-bind='value:$component.itemValueToAdd, valueUpdate: "afterkeydown"' />
    <button class="btn btn-default"
        data-bind="click: $component.addItem, enable: $component.itemNameToAdd().length > 0 && $component.itemValueToAdd().length > 0">
        <i aria-hidden="true" class="paperbits-icon paperbits-circle-add"></i> Add
    </button>

    <label class="form-label">Options:</label>
    <select class="form-control" multiple="multiple" height="5" data-bind="options: options, optionsText: function(item) { return item.label+ ' - ' + item.value },
                            optionsValue: 'value', selectedOptions: $component.selectedItems">
    </select>

    <div data-bind="visible: $component.selectedItems().length > 0 ">
        <button class="btn btn-default" data-bind="click: $component.upItem">Up</button>
        <button class="btn btn-default" data-bind="click: $component.downItem">Down</button>
        <button class="btn btn-default" data-bind="click: $component.deleteItem">Delete</button>
        <button class="btn btn-default" data-bind="click: $component.setSelectedItemDefault">Set selected</button>
    </div>
</details>

<details open>
    <summary>
        Styling
    </summary>
    <div class="form-group">
        <label for="appearanceStyle" class="form-label">
            Appearance
            <button class="btn btn-info" role="tooltip"
                data-bind="tooltip: 'Predefined appearance from style guide.'"></button>
        </label>
        <select id="appearanceStyle" class="form-control"
            data-bind="options: appearanceStyles, value: appearanceStyle, optionsText: 'displayName', optionsValue: 'key'"></select>
    </div>
</details>