@paperbits/core/workshops/widgets/ko/widgetSelector.html

Paperbits core components.

<div class="editor">
    <h1>
        Add widget
    </h1>
    <hr />

    <div class="flex-item form">
        <div class="form-group">
            <input class="form-control" type="search" role="searchbox"
                data-bind="textInput: searchPattern, valueUpdate: 'keyup', focus: true" placeholder="Search widgets..."
                aria-label="Search widgets" aria-controls="searchResult" />
            <p id="searchResult" class="text-hide" role="region" aria-live="polite"
                data-bind="text: `Widgets found: ${widgetCount()}`">
            </p>
        </div>
    </div>

    <!-- ko if: working() -->
    <spinner></spinner>
    <!-- /ko -->

    <!-- ko ifnot: working() -->
    <!-- ko if: searchPattern() !== "" && widgetCount() === 0 -->
    <div class="flex flex-column list">
        <p class="text-center">Could not find anything. Try to change search criteria.</p>
    </div>
    <!-- /ko -->

    <div role="listbox" class="flex flex-column list" data-bind="scrollable: true, listbox: {}">
        <!-- ko foreach: { data: categories, as: 'category'  } -->
        <!-- ko if: category.name -->
        <h2 class="text-center" data-bind="text: category.name"></h2>
        <!-- /ko -->
        <div data-bind="foreach: category.items">
            <a href="#" role="option" class="list-item list-item-large" data-bind="click: $component.selectWidget">
                <!-- ko if: iconUrl -->
                <div>
                    <img class="list-item-widget-icon" data-bind="attr: { src: iconUrl }">
                </div>
                <!-- /ko -->
                <!-- ko ifnot: iconUrl -->
                <i aria-hidden="true" data-bind="css: css"></i>
                <!-- /ko -->
                <div data-bind="text: displayName"></div>
            </a>
        </div>
        <!-- /ko -->
    </div>
    <!-- /ko -->
</div>