Single Select Dropdown: Default

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="acl-dropdown-demo-example" style="width: 225px">
    <div>
        <h5>Single select dropdown</h5>
        <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-1" id="single-select-dropdown-example-id" data-dropdown-type="single-select" data-dropdown-label="Choose an item">

            <div class="acl-select-dropdown__clear">
                <div class="acl-select-dropdown__clear-link">
                    Clear
                </div>
            </div>

            <div class="acl-dropdown__cta acl-select-dropdown__field">
                <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></div>
                <i class="aforza-icons acl-select-dropdown__cheveron">acl_down_arrow</i>
            </div>

            <div class="acl-dropdown__results acl-select-dropdown__results" data-dropdown-select="true">
                <div class="acl-dropdown__items acl-select-dropdown__items" style="max-height: 250px;">
                </div>
            </div>
        </div>
    </div>

    <div style="margin-top: 50px;">
        <h5>Empty items list</h5>
        <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-2" id="single-select-dropdown-example-id-2" data-dropdown-type="single-select" data-dropdown-label="Select..." data-no-items-placeholder="No items">

            <div class=" acl-select-dropdown__clear">
                <div class="acl-select-dropdown__clear-link">
                    Clear
                </div>
            </div>

            <div class="acl-dropdown__cta acl-select-dropdown__field">
                <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></div>
                <i class="aforza-icons acl-select-dropdown__cheveron">acl_down_arrow</i>
            </div>

            <div class="acl-dropdown__results acl-select-dropdown__results" data-dropdown-select="true">
                <div class="acl-dropdown__items acl-select-dropdown__items" style="max-height: 250px;">
                </div>
            </div>
        </div>
    </div>

    <div style="margin-top: 50px;">
        <h5>Readonly Single select dropdown</h5>
        <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-3" id="single-select-dropdown-example-id-3" data-dropdown-type="single-select" data-dropdown-label="Choose an item">

            <div class="acl-select-dropdown__clear">
                <div class="acl-select-dropdown__clear-link">
                    Clear
                </div>
            </div>

            <div class="acl-dropdown__cta acl-select-dropdown__field">
                <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></div>
                <i class="aforza-icons acl-select-dropdown__cheveron">acl_down_arrow</i>
            </div>

            <div class="acl-dropdown__results acl-select-dropdown__results" data-dropdown-select="true">
                <div class="acl-dropdown__items acl-select-dropdown__items" style="max-height: 250px;">
                </div>
            </div>
        </div>
    </div>

    <div style="margin-top: 50px;">
        <h5>Disabled Single select dropdown</h5>
        <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-4" id="single-select-dropdown-example-id-4" data-dropdown-type="single-select" data-dropdown-label="Choose an item">

            <div class="acl-select-dropdown__clear">
                <div class="acl-select-dropdown__clear-link">
                    Clear
                </div>
            </div>

            <div class="acl-dropdown__cta acl-select-dropdown__field">
                <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></div>
                <i class="aforza-icons acl-select-dropdown__cheveron">acl_down_arrow</i>
            </div>

            <div class="acl-dropdown__results acl-select-dropdown__results" data-dropdown-select="true">
                <div class="acl-dropdown__items acl-select-dropdown__items" style="max-height: 250px;">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const results = [{
            id: '002csgr',
            value: 'Account Promotions',
            selected: true
        },
        {
            id: '01sscx',
            value: 'Segment Promotions'
        },
        {
            id: 'fsx00',
            value: 'Inherited Account Promotions'
        }
    ];
    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);
    dropdownEl1.addEventListener('cleardropdown',
        function(e) {
            console.log('cleardropdown', e.detail);
        }, false);
    const dropdown2Results = [];
    const dropdownEl2 = document.querySelector(".acl-dropdown-demo-2");
    const dropdown2 = new acl.ACLDropdownSingleSelect(dropdownEl2, dropdown2Results);
    const dropdownEl3 = document.querySelector(".acl-dropdown-demo-3");
    const dropdown3 = new acl.ACLDropdownSingleSelect(dropdownEl3, results, {
        readonly: true
    });
    const dropdownEl4 = document.querySelector(".acl-dropdown-demo-4");
    const dropdown4 = new acl.ACLDropdownSingleSelect(dropdownEl4, results, {
        disabled: true,
        readonly: false,
        initiallyPopulateResults: true
    });
</script>


        <div class="acl-dropdown-demo-example" style="width: 225px">
    <div>
        <h5>Single select dropdown</h5>
        <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-1" id="single-select-dropdown-example-id"
            data-dropdown-type="single-select" data-dropdown-label="Choose an item">

            <div class="acl-select-dropdown__clear">
                <div class="acl-select-dropdown__clear-link">
                    Clear
                </div>
            </div>

            <div class="acl-dropdown__cta acl-select-dropdown__field">
                <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></div>
                <i class="aforza-icons acl-select-dropdown__cheveron">acl_down_arrow</i>
            </div>

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

    <div style="margin-top: 50px;">
        <h5>Empty items list</h5>
        <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-2" id="single-select-dropdown-example-id-2"
            data-dropdown-type="single-select" data-dropdown-label="Select..." data-no-items-placeholder="No items">

            <div class=" acl-select-dropdown__clear">
                <div class="acl-select-dropdown__clear-link">
                    Clear
                </div>
            </div>

            <div class="acl-dropdown__cta acl-select-dropdown__field">
                <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></div>
                <i class="aforza-icons acl-select-dropdown__cheveron">acl_down_arrow</i>
            </div>

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

        <div style="margin-top: 50px;">
        <h5>Readonly Single select dropdown</h5>
        <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-3" id="single-select-dropdown-example-id-3"
            data-dropdown-type="single-select" data-dropdown-label="Choose an item">

            <div class="acl-select-dropdown__clear">
                <div class="acl-select-dropdown__clear-link">
                    Clear
                </div>
            </div>

            <div class="acl-dropdown__cta acl-select-dropdown__field">
                <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></div>
                <i class="aforza-icons acl-select-dropdown__cheveron">acl_down_arrow</i>
            </div>

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

    <div style="margin-top: 50px;">
        <h5>Disabled Single select dropdown</h5>
        <div class="acl-dropdown acl-select-dropdown acl-dropdown-demo-4" id="single-select-dropdown-example-id-4"
            data-dropdown-type="single-select" data-dropdown-label="Choose an item">

            <div class="acl-select-dropdown__clear">
                <div class="acl-select-dropdown__clear-link">
                    Clear
                </div>
            </div>

            <div class="acl-dropdown__cta acl-select-dropdown__field">
                <div class="acl-dropdown__cta-link acl-select-dropdown__cta-link"></div>
                <i class="aforza-icons acl-select-dropdown__cheveron">acl_down_arrow</i>
            </div>

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



<script>
    const results = [{
        id: '002csgr',
        value: 'Account Promotions',
        selected: true
    },
    {
        id: '01sscx',
        value: 'Segment Promotions'
    },
    {
        id: 'fsx00',
        value: 'Inherited Account Promotions'
    }];

    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);

    dropdownEl1.addEventListener('cleardropdown',
        function (e) {
            console.log('cleardropdown', e.detail);
        }, false);

    const dropdown2Results = [];
    const dropdownEl2 = document.querySelector(".acl-dropdown-demo-2");
    const dropdown2 = new acl.ACLDropdownSingleSelect(dropdownEl2, dropdown2Results);

    const dropdownEl3 = document.querySelector(".acl-dropdown-demo-3");
    const dropdown3 = new acl.ACLDropdownSingleSelect(dropdownEl3, results, {readonly: true});

    const dropdownEl4 = document.querySelector(".acl-dropdown-demo-4");
    const dropdown4 = new acl.ACLDropdownSingleSelect(dropdownEl4, results, {disabled: true, readonly: false, initiallyPopulateResults: true});

</script>


        
            
            /* No context defined. */

File:

Content:


                                import { ACLDropdown } from '../index.js';
import { dispatchCustomEvent } from '../../../utilities';

class ACLDropdownSingleSelect extends ACLDropdown {
	constructor(
		dropdownEl,
		results,
		options = {
			showClearOnSelect: false,
			scrollEventPercentageOffset: 80,
			scrollEventDebounceValue: 2000,
			initiallyPopulateResults: true,
			readonly: false,
			dropUp: false,
			dropUpOffset: 12,
			lazyLoading: true,
			disabled: false,
		}
	) {
		super(dropdownEl, results, options);

		this.selectors = {
			...this.selectors,
			selectResultItem: 'acl-select-dropdown__item',
			selectAssociatedColour: 'acl-select-dropdown__cta-link--associated-colour',
			noResultsPlaceholder: 'acl-dropdown__no-results-placeholder',
			placeholder: 'acl-select-dropdown__placeholder',
			configurableContent: 'acl-select-dropdown__configurable-content',
		};

		this.eventName = Object.freeze({
			...this.eventName,
			DROPDOWN_ITEM_CLICKED: 'dropdownitemclicked',
		});

		this.resultItems = this.dropdownEl.querySelector(`.${this.selectors.resultItems}`);
		this.configurableContent = this.dropdownEl.querySelector(`.${this.selectors.configurableContent}`);

		if (this.dropdownType !== this.types.buttonSingleSelect) this.setPlaceholder();

		if (this.resultItems && this.options.initiallyPopulateResults) this.populateResults();

		if (this.configurableContent)
			this.configurableContent.addEventListener(this.eventName.CLICK, () => {
				this.shouldCloseDropdown = false;
			});
	}

	createResultItem(result) {
		let resultItemEl = document.createElement('div');
		let resultIconMarkup = '';

		if (result.associatedColour) resultItemEl.style.borderLeft = `3px solid ${result.associatedColour}`;

		if (result.associatedIcon)
			resultIconMarkup = `<i class="aforza-icons acl-select-dropdown__associated-icon" style="color:${result.associatedIconColour}">${result.associatedIcon}</i>`;

		resultItemEl.innerHTML = `${resultIconMarkup}${result.value}`;
		resultItemEl.classList.add(this.selectors.resultItem);
		this.isDropdownSelect ? resultItemEl.classList.add(this.selectors.selectResultItem) : '';
		resultItemEl.dataset.resultId = result.id;
		resultItemEl.dataset.resultValue = result.value;
		resultItemEl.title = result.value;

		if (result.selected || result.id === this.dropdownEl.dataset.activeSelection) {
			super.setItemAsSelected(resultItemEl);
			this.ctaEl.dataset.active = true;
		}

		resultItemEl.addEventListener(this.eventName.CLICK, this.resultItemClick.bind(this));
		this.resultItems.appendChild(resultItemEl);
	}

	populateResults() {
		if (this.results && this.results.length > 0) {
			this.results.forEach(result => this.createResultItem(result));
		} else {
			super.createEmptyResultsList();
		}
	}

	resultItemClick(event) {
		const result = event.currentTarget;

		if (result) {
			if (this.dropdownType !== this.types.buttonSingleSelect) super.setItemAsSelected(result);
			this.ctaEl.dataset.active = true;

			dispatchCustomEvent(this.dropdownEl, this.eventName.DROPDOWN_ITEM_CLICKED, {
				id: result.dataset.resultId,
				resultName: result.dataset.resultValue,
			});
		}
	}
}

export { ACLDropdownSingleSelect };

URL: /components/raw/single-select-dropdown/index.js
Filesystem Path: src/components/dropdown/single-select-dropdown/index.js
Size: 3.2 KB

Handle: @single-select-dropdown--default
Preview:
- With layout
- Component only
Filesystem Path: src/components/dropdown/single-select-dropdown/single-select-dropdown.hbs

No notes defined.