@paperbits/core/workshops/block/ko/blockSelector.html

Paperbits core components.

<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 item..."
            aria-label="Search items" aria-controls="searchResult" />
        <p id="searchResult" class="text-hide" role="region" aria-live="polite"
            data-bind="text: `Items found: ${$component.blocks().length}`">
        </p>
    </div>
</div>

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

<!-- ko ifnot: working() -->

<!-- ko if: blocks().length === 0 -->
<p class="flex-item flex-item-grow text-center">It seems that you don't have anything in your library yet.</p>
<!-- /ko -->

<!-- ko if: blocks().length > 0 -->
<div role="listbox" data-bind="foreach: blocks, scrollable: true, listbox: {}">
    <div role="option" class="list-item" data-bind="css: { selected: hasFocus }, activate: $component.selectBlock">
        <!-- ko if: $component.blockSource === 'saved' -->
        <button class="btn-standalone remove-block" data-bind="activate: $component.deleteBlock">
            <i aria-hidden="true" class="paperbits-icon paperbits-trash-simple"></i>
        </button>
        <!-- /ko -->
        <div class="block-item" data-bind="previewContainer: { name: 'widget-container', params: { widgetData: $data } }">
        </div>
    </div>
</div>
<!-- /ko -->

<!-- /ko -->