Simple Searchbox: Filters

<div style="display:flex;">
    <div onclick="searchboxDemo1.showLoadingSpinner()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        DEMO
        Show Loading Indicator
    </div>

    <div onclick="searchboxDemo1.hideLoadingSpinner()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        DEMO
        Hide Loading Indicator
    </div>

    <div onclick="filterDrawer.openDrawer()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        DEMO
        Open Filter Drawer
    </div>

    <div onclick="filterDrawer.closeDrawer()" style="background-color: rgb(241, 241, 241); cursor:pointer; font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        DEMO
        Close Filter Drawer
    </div>

</div>

<div class="acl-filter-drawer__container acl-filter-drawer__container--border acl-filter-drawer__container--rounded-corners" style="width: 550px;">
    <div class="acl-simple-searchbox acl-simple-searchbox--no-border acl-demo-1" style="width: 100%">
        <div class="acl-simple-searchbox__search-icon">
            <i class="aforza-icons">acl_search</i>
        </div>
        <input class="acl-simple-searchbox__input" id="acl-demo-simple-search" type="text" name="routeBuilderSearch" placeholder="Search">
        <div class="acl-simple-searchbox__clear">
            <i class="aforza-icons acl-demo__icon-catalog-icon-preview">acl_close_small</i>
        </div>
        <div class="acl-simple-searchbox__loading-spinner">
            <svg class="acl-loader__circular" width="20px" height="20px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle class="acl-loader__circular-path" fill="none" stroke-width="6" cx="33" cy="33" r="30">
                </circle>
            </svg>
        </div>
    </div>

    <div class="acl-filter-drawer">
        <div class="acl-filter-drawer__button">
            <div class="acl-filter-drawer__button-label">Filter <span class="acl-filter-drawer__selected-count"></span></div>
        </div>

        <div class="acl-filter-drawer__drawer" data-expanded="false">
            <div class="acl-filter-drawer__drawer-header">
                <div class="acl-filter-drawer__drawer-header-text">
                    Search the filters for your search results
                </div>

                <div class="acl-filter-drawer__drawer-close-button">
                    <i class="aforza-icons">acl_close_small</i>
                </div>
            </div>

            <div class="acl-filter-drawer__chips">
                <div class="acl-selectable-chips">
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    const filterDrawerEl = document.querySelector('.acl-filter-drawer');
    const filters = [{
            id: 'filter01',
            name: "Big",
            selected: 'true'
        },
        {
            id: 'filter02',
            name: "Medium",
            selected: 'false'
        },
        {
            id: 'filter03',
            name: "Small",
            selected: 'false'
        },
        {
            id: 'filter04',
            name: "Xsmall",
            selected: 'false'
        },
        {
            id: 'filter05',
            name: "Supermarket",
            selected: 'false'
        },
        {
            id: 'filter06',
            name: "Petrol Station",
            selected: 'true'
        },
    ];
    const filterDrawer = new acl.ACLFilterDrawer(filterDrawerEl, filters);
    const selectableChipsEl = document.querySelector('.acl-selectable-chips');
    selectableChipsEl.addEventListener('selectedchips',
        function(e) {
            console.log('Selected Chips Array Change:');
            console.log(e.detail);
        }, false);
    selectableChipsEl.addEventListener('selectedchipcount',
        function(e) {
            console.log('Selected Chip Count:' + e.detail);
        }, false);
</script>

<script>
    const searchboxDemoEl = document.querySelector(".acl-demo-1");
    const searchboxDemo1 = new acl.ACLSearchbox(searchboxDemoEl, 300);
    searchboxDemoEl.addEventListener('searchquery', function(e) {
        console.log('searchquery');
        console.log(e.detail);
    });
</script>