Hyperlink Dropdown

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

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

     <div onclick="dropdown.showPreviousResultsLoadingIndicator(true)"
        style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px">
        DEMO
        Show Previous Results Loading Indicator
    </div>

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

<div class="acl-dropdown acl-dropdown__hyperlink acl-dropdown-demo-1" data-dropdown-label="Choose an item" data-active-selection="Example 3" style="width: 230px">

    <div class="acl-dropdown__cta">

        <div class="acl-dropdown__cta-label">Dropdown label:</div>
        <div class="acl-dropdown__cta-link"></div>
        <i class="aforza-icons">acl_drop_arrow</i>

    </div>

    <div class="acl-dropdown__results">

        <div class="acl-select-dropdown__results--load-previous">
                    <div class="acl-loading-dots__container">
                        <div class="acl-loading-dots">
                            <div class="bounce1"></div>
                            <div class="bounce2"></div>
                            <div class="bounce3"></div>
                        </div>
                    </div>
                </div>
     
        <div class="acl-dropdown__items acl-select-dropdown__items" style="max-height: 250px;">
            {{!-- Results can be manually rendered here --}}
        </div>

                   <div class="acl-select-dropdown__results--load-next">
                    <div class="acl-loading-dots__container">
                        <div class="acl-loading-dots">
                            <div class="bounce1"></div>
                            <div class="bounce2"></div>
                            <div class="bounce3"></div>
                        </div>
                    </div>
                </div>
    </div>
</div>

<script>
    let dropdownResults = [];

    for (let i = 1; i <= 10; i++) {
        dropdownResults.push({
            id: `Item-${i}`,
            value: `Example ${i}`
        })
    }

    const dropdownEl = document.querySelector(".acl-dropdown-demo-1");
    const dropdown = new acl.ACLDropdownSingleSelect(dropdownEl, dropdownResults, {
        lazyLoading: true,
        initiallyPopulateResults: true,
        scrollEventPercentageOffset: 20,
		scrollEventDebounceValue: 1000,
    });

    dropdownEl.addEventListener('dropdownitemclicked', event => {
        console.log('dropdown1 item selected', event.detail);
    });

    dropdownEl.addEventListener('scrolledtotop',
        function (e) {
            console.log('Custom Event: scrolledtotop');
        }, false);

    dropdownEl.addEventListener('scrolledtobottom',
        function (e) {
            console.log('Custom Event: scrolledtobottom');
        }, false);
    
</script>