Icons

<div class="acl-demo__info-container">
    <div class="acl-demo__info-message">To make use of the ACL Icons in your project you must download and install the
        Icon fonts.
        <br />
        <span style="font-size:12px;">(If this does not automatically download, right click on the button and choose
            "Save link as")</span>
    </div>
    <div class="acl-demo__info-items">
        <div class="acl-demo__info-item">
            <a href="/assets/fonts/Aforza-icon-font.eot" target="_blank" class="acl-button acl-button--raised" download>
                <div class="acl-button__ripple"></div>
                <span class="acl-button__label">.eot</span>
            </a>
        </div>
        <div class="acl-demo__info-item">
            <a href="/assets/fonts/Aforza-icon-font.svg" target="_blank" class="acl-button acl-button--raised" download>
                <div class="acl-button__ripple"></div>
                <span class="acl-button__label">.svg</span>
            </a>
        </div>

        <div class="acl-demo__info-item">
            <a href="/assets/fonts/Aforza-icon-font.ttf" target="_blank" class="acl-button acl-button--raised" download>
                <div class="acl-button__ripple"></div>
                <span class="acl-button__label">.ttf</span>
            </a>
        </div>

        <div class="acl-demo__info-item">
            <a href="/assets/fonts/Aforza-icon-font.woff" target="_blank" class="acl-button acl-button--raised" download>
                <div class="acl-button__ripple"></div>
                <span class="acl-button__label">.woff</span>
            </a>
        </div>
    </div>
</div>

<div class="acl-demo__toolbar">
    <div class="acl-demo__search" data-search-query="">
        <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>
    <div style="display: flex;">
        <div class="acl-demo__sort" style="margin: 0 15px;">
            <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-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-button-group">
            <input type="radio" class="acl-button-group__item" name="radioButtonTest" value="1" id="button1" onclick="setView('list')" checked />
            <label for="button1"><i class="aforza-icons acl-button-group__item-icon--small">acl_list_view</i></label>
            <input type="radio" class="acl-button-group__item" name="radioButtonTest" value="2" id="button2" onclick="setView('grid')" />
            <label for="button2"><i class="aforza-icons acl-button-group__item-icon--small">acl_grid_view</i></label>
        </div>
    </div>
</div>

<div data-loading="false">
    <svg class="acl-loader__circular" width="35px" height="35px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="acl-loader__circular-path" fill="none" stroke-width="9" cx="33" cy="33" r="26">
        </circle>
    </svg>
</div>

<div class="acl-demo__icon-catalog" data-view="list"></div>
</div>

<style>
    .acl-demo__toolbar {
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
    }

    .acl-demo__sort {
        min-width: 125px;
    }

    [data-hidden] {
        display: none;
    }

    [data-view="list"] .acl-demo__icon-catalog-item-inner-container {
        display: flex;
        align-items: center;
    }

    [data-view="grid"] .acl-demo__icon-catalog-item-inner-container {
        display: flex;
        flex-direction: column;
    }

    [data-view="list"] {
        margin-top: 10px;
    }

    [data-view="list"] .acl-demo__icon-catalog-item {
        height: 50px;
        text-align: start;
        margin: 10px;
        padding: 10px;
        justify-content: start;
        cursor: pointer;
    }

    [data-view="list"] .icon-item-title {
        word-break: break-all;
        color: grey;
        font-size: 10px;
    }

    .icon-item-title {
        color: grey;
        font-size: 10px;
    }

    [data-view="grid"] .acl-demo__icon-catalog-icon-preview {
        font-size: 32px;
        padding: 10px;
        height: 100%;
        border-radius: 7px;
    }

    [data-view="list"] .acl-demo__icon-catalog-icon-preview {
        font-size: 30px;
        margin-right: 10px;
        background: #f6f6f6;
        padding: 10px;
        height: 100%;
        border-radius: 7px;
    }

    .acl-elevation--z1 {
        box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 0%), 0px 1px 1px 0px rgb(0 0 0 / 0%), 0px 1px 3px 0px rgb(0 0 0 / 16%);
    }

    .acl-copy-to-clipboard__alert--show .acl-copy-to-clipboard__alert-message {
        align-items: center;
    }

    [data-loading="false"] {
        display: none;
    }

    [data-loading="true"] {
        display: flex;
        justify-content: center;
    }
</style>

<script>
    const results = [{
            id: 'date',
            value: 'Date Added',
            selected: true
        },
        {
            id: 'az',
            value: 'A - Z'
        },
        {
            id: 'za',
            value: 'Z - A'
        }
    ];
    const selector = Object.freeze({
        DROPDOWN: '.acl-dropdown-demo-1',
        SEARCHBOX_CONTAINER: '.acl-demo-1',
        SEARCHBOX: ".acl-demo__search",
        ICON_CATALOG: '.acl-demo__icon-catalog',
        ICON_CATALOG_ITEM: '.acl-demo__icon-catalog-item'
    });
    const eventName = Object.freeze({
        SEARCH_QUERY: 'searchquery',
        DROPDOWN_ITEM_CLICKED: 'dropdownitemclicked'
    });
    const attribute = Object.freeze({
        HIDDEN: 'data-hidden',
        VIEW: 'data-view',
        SET: 'data-set',
        CODE: 'data-code',
        ORDER: 'data-order'
    });
    // Sort
    const dropdownEl1 = document.querySelector(selector.DROPDOWN);
    const dropdown1 = new acl.ACLDropdownSingleSelect(dropdownEl1, results);
    let catalogItems;
    // Searchbox
    const searchboxDemoEl = document.querySelector(selector.SEARCHBOX_CONTAINER);
    const searchboxDemo1 = new acl.ACLSearchbox(searchboxDemoEl, 300);
    searchboxDemoEl.addEventListener(eventName.SEARCH_QUERY, function(e) {
        filterIcons(e.detail)
    });
    async function fetchIconsJSON() {
        const response = await fetch("/assets/icons/selection.json");
        const json = await response.json();
        return json.icons;
    }
    let iconsRendered;
    const renderIcons = (sort) => {
        let hidden = false;
        iconsRendered = false;
        const catalogItems = document.querySelector(selector.ICON_CATALOG);
        if (catalogItems) catalogItems.innerHTML = "";
        fetchIconsJSON().then(icons => {
            switch (sort) {
                case 'az':
                    icons.sort((a, b) => a.properties.ligatures.localeCompare(b.properties.ligatures));
                    break;
                case 'za':
                    icons.sort((a, b) => a.properties.ligatures.localeCompare(b.properties.ligatures));
                    icons.reverse();
                    break;
            }
            if (document.querySelector(selector.SEARCHBOX).dataset.searchQuery) hidden = true;
            icons.forEach(function(icon, index) {
                createIconPreview(icon, hidden);
            });
            iconsRendered = true;
        });
    }
    renderIcons();
    const filterIcons = (searchQuery) => {
        const catalogItemArray = document.querySelectorAll(selector.ICON_CATALOG_ITEM);
        if (searchQuery) {
            document.querySelector(selector.SEARCHBOX).dataset.searchQuery = searchQuery;
        } else if (searchQuery === "") {
            searchQuery = "";
        } else {
            searchQuery = document.querySelector(selector.SEARCHBOX).dataset.searchQuery;
        }
        catalogItemArray.forEach(catalogItem => {
            if (catalogItem.title.toLowerCase().includes(searchQuery)) {
                catalogItem.removeAttribute(attribute.HIDDEN);
            } else {
                catalogItem.setAttribute(attribute.HIDDEN, "true");
            };
        });
    }
    const sortIcons = (e) => {
        renderIcons(e);
        console.log(e);
        setTimeout(function() {
            filterIcons();
        }, 100);
    }
    const createIconPreview = (icon, hidden) => {
        catalogItems = document.querySelector(selector.ICON_CATALOG);
        const iconPreviewEl = document.createElement("div");
        iconPreviewEl.classList.add('acl-demo__icon-catalog-item', 'acl-demo__icon-catalog-item--large', 'acl-elevation--z1');
        iconPreviewEl.title = icon.properties.ligatures;
        iconPreviewEl.setAttribute(attribute.SET, icon.setId);
        iconPreviewEl.setAttribute(attribute.CODE, icon.properties.code);
        iconPreviewEl.setAttribute(attribute.ORDER, icon.properties.order);
        if (hidden) iconPreviewEl.setAttribute(attribute.HIDDEN, true);
        const template = `
        <div class="acl-copy-to-clipboard" data-copy-text="${icon.properties.ligatures}" data-alert-timeout="50000">

        <div class="acl-demo__icon-catalog-item-inner-container">
            <div><i class="aforza-icons acl-demo__icon-catalog-icon-preview animated fadeIn">${icon.properties.ligatures}</i>
            </div>
            <span class="icon-item-title">${icon.properties.ligatures}</span>
        </div>
        </div>
 
        <div class="acl-copy-to-clipboard__alert animated fadeInDown">
                <div class="acl-copy-to-clipboard__alert-message">
                    <span class="acl-copy-to-clipboard__alert-icon">👍🏽</span>
                    ${icon.properties.ligatures} copied to clipboard
                </div>    

                <div class="acl-copy-to-clipboard__alert-error-message">
                    <span class="acl-copy-to-clipboard__alert-icon acl-copy-to-clipboard__alert-icon--error">
                        <i class="aforza-icons">acl_close_big</i>
                    </span>
                    Failed to copy to clipboard
                </div>
        </div>`
        iconPreviewEl.innerHTML = template;
        new acl.ACLCopyToClipboard(iconPreviewEl);
        catalogItems.appendChild(iconPreviewEl)
    }
    dropdownEl1.addEventListener(eventName.DROPDOWN_ITEM_CLICKED,
        function(e) {
            sortIcons(e.detail.id);
        }, false);
    const setView = (view) => {
        catalogItems = document.querySelector(selector.ICON_CATALOG);
        catalogItems.setAttribute(attribute.VIEW, view);
    }
</script>