Button Dropdown: Default

<h3>Button dropdown</h3>
<div class="acl-dropdown-demo-example__container">
    <div class="acl-dropdown-demo-example">
        <div>
            <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo-1" id="single-select-dropdown-example-id"
                data-dropdown-type="button-single-select">

                <div class="acl-dropdown__cta acl-button-dropdown__field">
                    <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
                    <button class="acl-button acl-button--raised">
                        <span class="acl-button__label">Click here</span>
                    </button>
                </div>

                <div class="acl-dropdown__results acl-button-dropdown__results" data-dropdown-select="true">
                    <div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
                        {{!-- Results can be manually rendered here --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="acl-dropdown-demo-example__container">
    <div class="acl-dropdown-demo-example" style="height: 120px;">

        <div>
            <h5>Right</h5>
            <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo-2" id="single-select-dropdown-example-id"
                data-dropdown-type="button-single-select">


                <div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right">
                    <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>

                    <div class="acl-button__icon-button acl-button__icon-button--basic acl-button__icon-button--icon-colour-black">
                        <i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
                    </div>
                </div>

                <div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
                    <div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
                        {{!-- Results can be manually rendered here --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="acl-dropdown-demo-example" style="height: 120px;">
        <div>
            <h5>Left</h5>
            <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo-3" id="single-select-dropdown-example-id"
                data-dropdown-type="button-single-select">

                <div class="acl-dropdown__cta acl-button-dropdown__field">
                    <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
                    <div class="acl-button__icon-button acl-button__icon-button--basic acl-button__icon-button--icon-colour-black">
                        <i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
                    </div>
                </div>

                <div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
                    <div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
                        {{!-- Results can be manually rendered here --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="acl-dropdown-demo-example" style="height: 120px;">
        <div>
            <h5>Up Left</h5>
            <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo-4" id="single-select-dropdown-example-id"
                data-dropdown-type="button-single-select" data-drop-up="true">


                <div class="acl-dropdown__cta acl-button-dropdown__field">
                    <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
                    <div class="acl-button__icon-button acl-button__icon-button--basic acl-button__icon-button--icon-colour-black">
                        <i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
                    </div>
                </div>

                <div class="acl-dropdown__results acl-button-dropdown__results" data-dropdown-select="true">
                    <div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
                        {{!-- Results can be manually rendered here --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="acl-dropdown-demo-example" style="height: 120px;">
        <div>
            <h5>Up Right</h5>
            <div class="acl-dropdown acl-button-dropdown acl-dropdown-demo-5" id="single-select-dropdown-example-id"
                data-dropdown-type="button-single-select" data-drop-up="true">


                <div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right">
                    <div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
                    <div class="acl-button__icon-button acl-button__icon-button--basic acl-button__icon-button--icon-colour-black">
                        <i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
                    </div>
                </div>

                <div class="acl-dropdown__results acl-button-dropdown__results" data-dropdown-select="true">
                    <div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
                        {{!-- Results can be manually rendered here --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const results = [{
        id: 'prev',
        value: 'Preview',
    },
    {
        id: 'copy',
        value: 'Copy Link'
    },
    {
        id: 'download',
        value: 'Download'
    },
    {
        id: 'rename',
        value: 'Rename'
    },
    {
        id: 'delete',
        value: 'Delete'
    }];

    // Default Button //
    const dropdownEl1 = document.querySelector(".acl-dropdown-demo-1");
    const dropdown1 = new acl.ACLDropdownSingleSelect(dropdownEl1, results);

    dropdownEl1.addEventListener('dropdownitemclicked',
        function (e) {
            console.log('dropdownitemclicked', e.detail);
        }, false);
    // Default Button - END //

    // Right // 
    const dropdownEl2 = document.querySelector(".acl-dropdown-demo-2");
    const dropdown2 = new acl.ACLDropdownSingleSelect(dropdownEl2, results);

    dropdownEl2.addEventListener('dropdownitemclicked',
        function (e) {
            console.log('dropdownitemclicked', e.detail);
        }, false);
    // Right - END //

    // Left // 
    const dropdownEl3 = document.querySelector(".acl-dropdown-demo-3");
    const dropdown3 = new acl.ACLDropdownSingleSelect(dropdownEl3, results);

    dropdownEl3.addEventListener('dropdownitemclicked',
        function (e) {
            console.log('dropdownitemclicked', e.detail);
        }, false);
    // Left - END // 

    // Up left // 
    const dropdownEl4 = document.querySelector(".acl-dropdown-demo-4");
    const dropdown4 = new acl.ACLDropdownSingleSelect(dropdownEl4, results, { dropUp: true, initiallyPopulateResults: true, dropUpOffset: 12 });

    dropdownEl4.addEventListener('dropdownitemclicked',
        function (e) {
            console.log('dropdownitemclicked', e.detail);
        }, false);
    // Up left - END // 

    // Up right // 
    const dropdownEl5 = document.querySelector(".acl-dropdown-demo-5");
    const dropdown5 = new acl.ACLDropdownSingleSelect(dropdownEl5, results, { dropUp: true, initiallyPopulateResults: true, dropUpOffset: 12 });

    dropdownEl5.addEventListener('dropdownitemclicked',
        function (e) {
            console.log('dropdownitemclicked', e.detail);
        }, false);
    // Up right - END // 

</script>

<!-- Styling used for Demo purposes only. -->
<style>
    .acl-dropdown-demo-example {
        display: flex;
        justify-content: center;
        margin: 25px 25px 25px 0;
    }

    .acl-dropdown-demo-example__container {
        display: flex;
 
    }
</style>