aurelia-bootstrap-select/dist/system/abp-select.html

An Aurelia Custom Element for the 3rd party addon [Bootstrap-Select]

<template>
    <select element.ref="pickerRef" if.bind="collection" class="selectpicker" selected-value.bind="selectedValue" selected-item.bind="selectedItem"
            collection.bind="collection"
            class.bind="class"
            disabled.bind="util.parseBoolOrTrueOnEmpty(disabled)"
            element.bind="element"
            multiple.bind="util.parseBoolOrTrueOnEmpty(multiple) & optional"
            blur.trigger="blur()"
            required.bind="required"
            placeholder.bind="placeholder">

        <optgroup if.bind="util.parseBool(hasOptgroup)" repeat.for="group of getGroupedCollection()"
                  label.bind="getMappingPropertyValueFromGroup(group, 'groupLabel')"
                  data-max-options.bind="getMappingPropertyValueFromGroup(group, 'maxOptions') & optional"
                  disabled.bind="getMappingPropertyValueFromGroup(group, 'groupDisabled') & optional">
            <option repeat.for="opt of group"
                value.bind="util.isObject(opt) ? opt[objectKey] : opt"
                data-content.bind="getMappingPropertyValue(opt, 'content') & optional"
                data-icon.bind="getMappingPropertyValue(opt, 'icon') & optional"
                data-divider.bind="getMappingPropertyValue(opt, 'divider') & optional"
                data-subtext.bind="getMappingPropertyValue(opt, 'subtext') & optional"
                data-tokens.bind="getMappingPropertyValue(opt, 'tokens') & optional"
                disabled.bind="getMappingPropertyValue(opt, 'disabled') & optional"
                class.bind="getMappingPropertyValue(opt, 'class') & optional"
                style.bind="getMappingPropertyValue(opt, 'style') & optional"
                title.bind="getMappingPropertyValue(opt, 'title') & optional">
                ${util.isObject(opt) ? getMappingPropertyValue(opt, 'option') : opt}
            </option>
        </optgroup>
        <option if.bind="!util.parseBool(hasOptgroup)" repeat.for="opt of collection"
            value.bind="util.isObject(opt) ? opt[objectKey] : opt"
            data-content.bind="getMappingPropertyValue(opt, 'content') & optional"
            content.bind="getMappingPropertyValue(opt, 'content') & optional"
            data-icon.bind="getMappingPropertyValue(opt, 'icon') & optional"
            data-divider.bind="getMappingPropertyValue(opt, 'divider') & optional"
            data-subtext.bind="getMappingPropertyValue(opt, 'subtext') & optional"
            data-tokens.bind="getMappingPropertyValue(opt, 'tokens') & optional"
            disabled.bind="getMappingPropertyValue(opt, 'disabled') & optional"
            class.bind="getMappingPropertyValue(opt, 'class') & optional"
            style.bind="getMappingPropertyValue(opt, 'style') & optional"
            title.bind="getMappingPropertyValue(opt, 'title') & optional">
            ${util.isObject(opt) ? getMappingPropertyValue(opt, 'option') : opt}
        </option>
    </select>
</template>