Simple Searchbox: Default

<div style="display:flex;">
    <div onclick="searchboxDemo1.showLoadingSpinner(), searchboxDemo2.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(), searchboxDemo2.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>
<h3 class="acl-typography--subtitle1">Default Styling</h3>

<div class="acl-simple-searchbox acl-demo-1" style="width: 420px">
    <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 style="margin: 25px 0"> </div>
<h3 class="acl-typography--subtitle1">Raised Styling</h3>

<div class="acl-simple-searchbox acl-simple-searchbox--raised acl-demo-2" style="width: 420px">
    <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>

<script>
    const searchboxDemoEl = document.querySelector(".acl-demo-1");
    const searchboxDemoEl2 = document.querySelector(".acl-demo-2");
    const searchboxDemo1 = new acl.ACLSearchbox(searchboxDemoEl, 300);
    const searchboxDemo2 = new acl.ACLSearchbox(searchboxDemoEl2, 300);

    searchboxDemoEl.addEventListener('searchquery', function (e) {
        console.log('searchquery');
        console.log(e.detail);
    });

    searchboxDemoEl2.addEventListener('searchquery', function (e) {
        console.log('searchquery');
        console.log(e.detail);
    });
</script>