Single Select Dropdown: Clearable

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="acl-dropdown-demo-example">
    <h3>Default Positioning</h3>
    <div class="acl-dropdown acl-select-dropdown acl-dropdown-clear-on-select-demo" id="single-select-dropdown-example-id" data-dropdown-type="single-select" data-dropdown-label="Choose an item" data-active-selection="002csgr">

        <div class="acl-select-dropdown__clear acl-select-dropdown__clear--show">
            <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 class="acl-dropdown-demo-example">
    <div class="acl-dropdown acl-select-dropdown acl-dropdown-clearable-demo" id="single-select-dropdown-example-id" data-dropdown-type="single-select" data-dropdown-label="Choose an item">

        <div class="acl-select-dropdown__clear acl-select-dropdown__clear--show">
            <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>

<h3 style="margin-top: 40px">Inline Positioning</h3>
<p style="font-size:12px">The class modifier of <code style="border: 1px solid #e0e0e0; border-radius: 4px; padding: 2.5px; line-height: 22px">acl-dropdown--inline</code>
    on the
    parent will render the clear button
    inline.</p>

<div class="acl-dropdown-demo-example">

    <div class="acl-dropdown acl-dropdown--inline acl-select-dropdown acl-dropdown-clearable-demo acl-dropdown-clearable-inline-demo" id="single-select-dropdown-example-id" data-dropdown-type="single-select" data-dropdown-label="Choose an item">

        <div class="acl-select-dropdown__clear acl-select-dropdown__clear--show">
            <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>

<script>
    const results = [{
            id: '002csgr',
            value: 'Account Promotions'
        },
        {
            id: '01sscx',
            value: 'Segment Promotions'
        },
        {
            id: 'fsx00',
            value: 'Inherited Account Promotions'
        }
    ];
    const dropdownClearOnSelectEl = document.querySelector(".acl-dropdown-clear-on-select-demo");
    const dropdownClearOnSelectClear = new acl.ACLDropdownSingleSelect(dropdownClearOnSelectEl, results, {
        showClearOnSelect: true,
        initiallyPopulateResults: true,
    });
    dropdownClearOnSelectEl.addEventListener('dropdownitemclicked',
        function(e) {
            console.log('dropdownitemclicked', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);
    dropdownClearOnSelectEl.addEventListener('cleardropdown',
        function(e) {
            console.log('cleardropdown', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);
    const dropdownClearableEl = document.querySelector(".acl-dropdown-clearable-demo");
    const dropdownClearable = new acl.ACLDropdownSingleSelect(dropdownClearableEl, results);
    dropdownClearableEl.addEventListener('dropdownitemclicked',
        function(e) {
            console.log('dropdownitemclicked', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);
    dropdownClearableEl.addEventListener('cleardropdown',
        function(e) {
            console.log('cleardropdown', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);
    // Clear - Row positioning 
    const dropdownClearableInlineEl = document.querySelector(".acl-dropdown-clearable-inline-demo");
    const dropdownClearableInline = new acl.ACLDropdownSingleSelect(dropdownClearableInlineEl, results);
    dropdownClearableInlineEl.addEventListener('dropdownitemclicked',
        function(e) {
            console.log('dropdownitemclicked', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);
    dropdownClearableInlineEl.addEventListener('cleardropdown',
        function(e) {
            console.log('cleardropdown', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);
</script>

<style>
    .acl-dropdown-demo-example {
        width: 255px;
        display: block;
    }

    .acl-dropdown-demo-example:nth-of-type(2),
    .acl-dropdown-demo-example:nth-of-type(3) {
        margin-top: 40px;
    }
</style>


        <div class="acl-dropdown-demo-example">
    <h3>Default Positioning</h3>
    <div class="acl-dropdown acl-select-dropdown acl-dropdown-clear-on-select-demo"
        id="single-select-dropdown-example-id" data-dropdown-type="single-select" data-dropdown-label="Choose an item"
        data-active-selection="002csgr">

        <div class="acl-select-dropdown__clear acl-select-dropdown__clear--show">
            <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 class="acl-dropdown-demo-example">
    <div class="acl-dropdown acl-select-dropdown acl-dropdown-clearable-demo" id="single-select-dropdown-example-id"
        data-dropdown-type="single-select" data-dropdown-label="Choose an item">

        <div class="acl-select-dropdown__clear acl-select-dropdown__clear--show">
            <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>

<h3 style="margin-top: 40px">Inline Positioning</h3>
<p style="font-size:12px">The class modifier of <code
        style="border: 1px solid #e0e0e0; border-radius: 4px; padding: 2.5px; line-height: 22px">acl-dropdown--inline</code>
    on the
    parent will render the clear button
    inline.</p>

<div class="acl-dropdown-demo-example">

    <div class="acl-dropdown acl-dropdown--inline acl-select-dropdown acl-dropdown-clearable-demo acl-dropdown-clearable-inline-demo"
        id="single-select-dropdown-example-id" data-dropdown-type="single-select" data-dropdown-label="Choose an item">

        <div class="acl-select-dropdown__clear acl-select-dropdown__clear--show">
            <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>


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

    const dropdownClearOnSelectEl = document.querySelector(".acl-dropdown-clear-on-select-demo");
    const dropdownClearOnSelectClear = new acl.ACLDropdownSingleSelect(dropdownClearOnSelectEl, results, { showClearOnSelect: true, initiallyPopulateResults: true, });

    dropdownClearOnSelectEl.addEventListener('dropdownitemclicked',
        function (e) {
            console.log('dropdownitemclicked', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);

    dropdownClearOnSelectEl.addEventListener('cleardropdown',
        function (e) {
            console.log('cleardropdown', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);


    const dropdownClearableEl = document.querySelector(".acl-dropdown-clearable-demo");
    const dropdownClearable = new acl.ACLDropdownSingleSelect(dropdownClearableEl, results);

    dropdownClearableEl.addEventListener('dropdownitemclicked',
        function (e) {
            console.log('dropdownitemclicked', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);

    dropdownClearableEl.addEventListener('cleardropdown',
        function (e) {
            console.log('cleardropdown', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);

    // Clear - Row positioning 
    const dropdownClearableInlineEl = document.querySelector(".acl-dropdown-clearable-inline-demo");
    const dropdownClearableInline = new acl.ACLDropdownSingleSelect(dropdownClearableInlineEl, results);

    dropdownClearableInlineEl.addEventListener('dropdownitemclicked',
        function (e) {
            console.log('dropdownitemclicked', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);

    dropdownClearableInlineEl.addEventListener('cleardropdown',
        function (e) {
            console.log('cleardropdown', `id : ${e.detail.id}`, `resultName : ${e.detail.resultName}`);
        }, false);


</script>



<style>
    .acl-dropdown-demo-example {
        width: 255px;
        display: block;
    }

    .acl-dropdown-demo-example:nth-of-type(2),
    .acl-dropdown-demo-example:nth-of-type(3) {
        margin-top: 40px;
    }
</style>


        
            
            /* 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--clearable
Preview:
- With layout
- Component only
Filesystem Path: src/components/dropdown/single-select-dropdown/single-select-dropdown--clearable.hbs

No notes defined.