Dropdown

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="dropdown js-dropdown dropdown--trigger-icon-animated" data-offset-x="0" data-offset-y="0">

    <button type="button" class="button button--tiny dropdown__trigger button--icon-right">
        <span class="button__inner">
            <svg class="icon  button__icon" focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
            </svg>
            <span class="button__text">Lae info alla</span>
        </span>
    </button>
    <div class="dropdown__content">
        <div class="dropdown__content-inner">
            <p>Lae info alla</p>
            <ul class="dropdown__options">
                <li class="dropdown__option-item">
                    <a class="dropdown__option-link" href="#">
                        <svg class="icon  dropdown__option-icon" focusable="false">
                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#csv"></use>
                        </svg>
                        <span class="dropdown__text">CSV</span>
                    </a>
                </li>
                <li class="dropdown__option-item">
                    <a class="dropdown__option-link" href="#">
                        <svg class="icon  dropdown__option-icon" focusable="false">
                            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#excel"></use>
                        </svg>
                        <span class="dropdown__text">Excel</span>
                    </a>
                </li>
            </ul>

        </div>
    </div>
</div>


        {% set BEM -%}
    dropdown js-dropdown
    {%- if data.triggerIconAnimated %} dropdown--trigger-icon-animated{% endif %}
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
{% endset %}

{% set content %}
    {% if data.options %}
        {% if data.content %}
            {{ data.content }}
        {% endif %}
        <ul class="dropdown__options">
            {% for option in data.options %}
                <li class="dropdown__option-item">
                    <a class="dropdown__option-link" href="{{ option.url }}">
                        {% if option.icon %}
                            {% include '@icon' with { name: option.icon, modifier: '', class: 'dropdown__option-icon' } %}
                        {% endif %}
                        <span class="dropdown__text">{{ option.text }}</span>
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% elseif data.choices %}
        {% if data.content %}
            {{ data.content }}
        {% endif %}
        {% include '@choice-group' with { data: data.choices, modifier: '', class: 'dropdown__choices' } %}
    {% else %}
        {{ data.content }}
    {% endif %}
{% endset %}

<div class="{{ BEM }}" data-offset-x="{{ offsetX|default(0) }}" data-offset-y="{{ offsetY|default(0) }}">
    {% include '@button' with { modifier: data.buttonModifier, class: 'dropdown__trigger', data: data.trigger } %}
    <div class="dropdown__content"{% if data.id %} id="{{ data.id }}"{% endif %}>
        <div class="dropdown__content-inner">
            {{ content }}
        </div>
    </div>
</div>


        {
  "language": "en-US",
  "data": {
    "buttonModifier": "button--tiny",
    "trigger": {
      "text": "Lae info alla",
      "icon": "chevron-bottom",
      "iconPosition": "right"
    },
    "triggerIconAnimated": true,
    "content": "<p>Lae info alla</p>",
    "options": [
      {
        "url": "#",
        "icon": "csv",
        "text": "CSV"
      },
      {
        "url": "#",
        "icon": "excel",
        "text": "Excel"
      }
    ]
  }
}

File:

Content:


                                .dropdown__content {
    z-index: 20;
    pointer-events: none;

    .dropdown.is-visible & {
        pointer-events: auto;
    }
}

.dropdown__content-inner {
    opacity: 0;
    visibility: hidden;
    padding: 16px;
    background: $L-background-light;
    border-radius: $border-radius-base;
    box-shadow: $elevation-02;
    transition: opacity $transition-duration-s $transition-easing,
        visibility $transition-duration-s $transition-easing,
        transform $transition-duration-s $transition-easing;

    .dropdown__content[data-popper-placement='bottom'] & {
        transform: translateY(10px);
    }

    .dropdown__content[data-popper-placement='top'] & {
        transform: translateY(10px);
    }

    .dropdown.is-visible & {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

.button__icon {
    .dropdown__trigger & {
        transition: transform $transition-duration-s $transition-easing;

        .dropdown--trigger-icon-animated.is-visible & {
            transform: rotate(180deg);
        }
    }
}

.dropdown__options {
    margin: .5em -8px 0;
}

.dropdown__option-link {
    display: flex;
    align-items: center;
    padding: 10px 8px;
    width: 100%;
    min-width: 200px;
    color: $L-text;
    text-decoration: none;
}

.dropdown__option-icon {
    flex: 0 0 24px;
    font-size: 24px;
    margin-right: 8px;
}

.dropdown__choices {
    margin-top: 16px;
}

URL: /components/raw/dropdown/dropdown.scss
Filesystem Path: src/patterns/components/dropdown/dropdown.scss
Size: 1.4 KB

Content:


                                import {
    arrow,
    createPopper,
    Instance,
    Modifier,
} from '@popperjs/core';

import Component from '../component/component';

import './dropdown.scss';

export default class Dropdown extends Component {
    static initSelector: string = '.js-dropdown';

    trigger: HTMLElement;
    content: HTMLElement;
    popperInstance: Instance;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    modifiers: Partial<Modifier<any, any>>[];

    offsetX: number = this.element.data('offset-x');
    offsetY: number = this.element.data('offset-y');

    constructor(target: HTMLElement) {
        super(target);

        this.trigger = this.element.find('.dropdown__trigger')[0];
        this.content = this.element.find('.dropdown__content')[0];
        this.modifiers = [
            arrow,
            {
                name: 'flip',
                options: {
                    padding: [12],
                },
            },
            {
                name: 'offset',
                options: {
                    offset: [this.offsetX, this.offsetY],
                },
            },
            {
                name: 'preventOverflow',
                options: {
                    boundary: document.querySelector('.h-container'),
                    mainAxis: true,
                    padding: [12],
                },
            },
        ];

        this.init();
    }

    init(): void {
        this.element.on('click', this.toggle);

        this.popperInstance = createPopper(this.trigger, this.content, {
            modifiers: this.modifiers,
        });
    }

    toggle: (event: Event) => void = (event: Event) => {
        const currentTarget: EventTarget = event.currentTarget;
        const target: EventTarget = event.target;

        if ($(currentTarget).hasClass('is-visible')) {
            if ($(target).closest('.dropdown__content').length === 0 || $(target).hasClass('dropdown__content')) {
                this.hide(currentTarget);
            }
        } else {
            this.closeAllDropdowns();
            this.show();
        }
    };

    closeAllDropdowns: () => void = (): void => {
        $('.dropdown').removeClass('is-visible');
    };

    show(): void {
        this.element.addClass('is-visible');

        this.popperInstance.setOptions({
            modifiers: [...this.modifiers, {
                enabled: true,
                name: 'eventListeners',
            }],
        });

        this.popperInstance.update();
    }

    hide: (currentTarget: EventTarget) => void = (currentTarget: EventTarget) => {
        if ($(currentTarget).hasClass('dropdown')) {
            $(currentTarget).removeClass('is-visible');
        } else {
            this.element.removeClass('is-visible');
        }

        this.popperInstance.setOptions({
            modifiers: [...this.modifiers, {
                enabled: false,
                name: 'eventListeners',
            }],
        });
    };
}

$(() => {
    $(document).on('click', (event: Event) => {
        if ($(event.target).closest('.dropdown').length === 0) {
            $('.dropdown').removeClass('is-visible');
        }
    });
});

URL: /components/raw/dropdown/dropdown.ts
Filesystem Path: src/patterns/components/dropdown/dropdown.ts
Size: 3.2 KB

Handle: @dropdown--default
Filesystem Path: src/patterns/components/dropdown/dropdown.twig
References (3): @icon, @choice-group, @button
Referenced by (3): @object-card, @object-card--archived, @table-filter


        
        
        <div class="dropdown js-dropdown" data-offset-x="0" data-offset-y="0">

    <button type="button" class="button button--text button--text-color dropdown__trigger button--icon">
        <span class="button__inner">
            <svg class="icon  button__icon" focusable="false">
                <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dots"></use>
            </svg>
            <span class="button__text">Valikud</span>
        </span>
    </button>
    <div class="dropdown__content">
        <div class="dropdown__content-inner">
            Kuva tabeli veerge

            <fieldset class="choice-group
     dropdown__choices">
                <legend class="choice-group__label h-visually-hidden">Kuva tabeli veerge</legend>

                <div class="choice-group__inner">

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check1" name="check" value="" class="check__input" checked>
                        <label for="check1" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Lepingu nr</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check2" name="check" value="" class="check__input" checked>
                        <label for="check2" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Objekti kood</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check3" name="check" value="" class="check__input" checked>
                        <label for="check3" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Tellija kood</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check4" name="check" value="" class="check__input" checked>
                        <label for="check4" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Lepingu nr</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check5" name="check" value="" class="check__input" checked>
                        <label for="check5" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Objekti kood</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check6" name="check" value="" class="check__input" checked>
                        <label for="check6" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Tellija</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check7" name="check" value="" class="check__input" checked>
                        <label for="check7" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Esindus</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check8" name="check" value="" class="check__input" checked>
                        <label for="check8" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Tüüp</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check9" name="check" value="" class="check__input" checked>
                        <label for="check9" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Toote kood</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check10" name="check" value="" class="check__input" checked>
                        <label for="check10" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Toote kirjeldus</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check11" name="check" value="" class="check__input" checked>
                        <label for="check11" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Arve kp</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item">
                        <input type="checkbox" id="check12" name="check" value="" class="check__input" checked>
                        <label for="check12" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Saadetud/Tagastatud/Renditud</span>
                        </label>
                    </div>

                    <div class="check
     choice-group__item is-disabled">
                        <input type="checkbox" id="check13" name="check" value="" class="check__input" checked disabled>
                        <label for="check13" class="check__label">
                            <span class="check__indicator">
                                <svg class="icon  check__icon" focusable="false">
                                    <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
                                </svg>
                            </span>
                            <span class="check__text ">Staatus</span>
                        </label>
                    </div>
                </div>
            </fieldset>

        </div>
    </div>
</div>


        {% set BEM -%}
    dropdown js-dropdown
    {%- if data.triggerIconAnimated %} dropdown--trigger-icon-animated{% endif %}
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
{% endset %}

{% set content %}
    {% if data.options %}
        {% if data.content %}
            {{ data.content }}
        {% endif %}
        <ul class="dropdown__options">
            {% for option in data.options %}
                <li class="dropdown__option-item">
                    <a class="dropdown__option-link" href="{{ option.url }}">
                        {% if option.icon %}
                            {% include '@icon' with { name: option.icon, modifier: '', class: 'dropdown__option-icon' } %}
                        {% endif %}
                        <span class="dropdown__text">{{ option.text }}</span>
                    </a>
                </li>
            {% endfor %}
        </ul>
    {% elseif data.choices %}
        {% if data.content %}
            {{ data.content }}
        {% endif %}
        {% include '@choice-group' with { data: data.choices, modifier: '', class: 'dropdown__choices' } %}
    {% else %}
        {{ data.content }}
    {% endif %}
{% endset %}

<div class="{{ BEM }}" data-offset-x="{{ offsetX|default(0) }}" data-offset-y="{{ offsetY|default(0) }}">
    {% include '@button' with { modifier: data.buttonModifier, class: 'dropdown__trigger', data: data.trigger } %}
    <div class="dropdown__content"{% if data.id %} id="{{ data.id }}"{% endif %}>
        <div class="dropdown__content-inner">
            {{ content }}
        </div>
    </div>
</div>


        {
  "language": "en-US",
  "data": {
    "buttonModifier": "button--text button--text-color",
    "trigger": {
      "text": "Valikud",
      "icon": "dots",
      "iconPosition": null
    },
    "triggerIconAnimated": false,
    "content": "Kuva tabeli veerge",
    "options": null,
    "choices": {
      "label": "Kuva tabeli veerge",
      "type": "check",
      "choices": [
        {
          "id": "check1",
          "label": "Lepingu nr",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check2",
          "label": "Objekti kood",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check3",
          "label": "Tellija kood",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check4",
          "label": "Lepingu nr",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check5",
          "label": "Objekti kood",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check6",
          "label": "Tellija",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check7",
          "label": "Esindus",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check8",
          "label": "Tüüp",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check9",
          "label": "Toote kood",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check10",
          "label": "Toote kirjeldus",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check11",
          "label": "Arve kp",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check12",
          "label": "Saadetud/Tagastatud/Renditud",
          "isChecked": true,
          "name": "check"
        },
        {
          "id": "check13",
          "label": "Staatus",
          "name": "check",
          "isChecked": true,
          "isDisabled": true
        }
      ],
      "isLabelHidden": true
    }
  }
}

File:

Content:


                                .dropdown__content {
    z-index: 20;
    pointer-events: none;

    .dropdown.is-visible & {
        pointer-events: auto;
    }
}

.dropdown__content-inner {
    opacity: 0;
    visibility: hidden;
    padding: 16px;
    background: $L-background-light;
    border-radius: $border-radius-base;
    box-shadow: $elevation-02;
    transition: opacity $transition-duration-s $transition-easing,
        visibility $transition-duration-s $transition-easing,
        transform $transition-duration-s $transition-easing;

    .dropdown__content[data-popper-placement='bottom'] & {
        transform: translateY(10px);
    }

    .dropdown__content[data-popper-placement='top'] & {
        transform: translateY(10px);
    }

    .dropdown.is-visible & {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

.button__icon {
    .dropdown__trigger & {
        transition: transform $transition-duration-s $transition-easing;

        .dropdown--trigger-icon-animated.is-visible & {
            transform: rotate(180deg);
        }
    }
}

.dropdown__options {
    margin: .5em -8px 0;
}

.dropdown__option-link {
    display: flex;
    align-items: center;
    padding: 10px 8px;
    width: 100%;
    min-width: 200px;
    color: $L-text;
    text-decoration: none;
}

.dropdown__option-icon {
    flex: 0 0 24px;
    font-size: 24px;
    margin-right: 8px;
}

.dropdown__choices {
    margin-top: 16px;
}

URL: /components/raw/dropdown/dropdown.scss
Filesystem Path: src/patterns/components/dropdown/dropdown.scss
Size: 1.4 KB

Content:


                                import {
    arrow,
    createPopper,
    Instance,
    Modifier,
} from '@popperjs/core';

import Component from '../component/component';

import './dropdown.scss';

export default class Dropdown extends Component {
    static initSelector: string = '.js-dropdown';

    trigger: HTMLElement;
    content: HTMLElement;
    popperInstance: Instance;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    modifiers: Partial<Modifier<any, any>>[];

    offsetX: number = this.element.data('offset-x');
    offsetY: number = this.element.data('offset-y');

    constructor(target: HTMLElement) {
        super(target);

        this.trigger = this.element.find('.dropdown__trigger')[0];
        this.content = this.element.find('.dropdown__content')[0];
        this.modifiers = [
            arrow,
            {
                name: 'flip',
                options: {
                    padding: [12],
                },
            },
            {
                name: 'offset',
                options: {
                    offset: [this.offsetX, this.offsetY],
                },
            },
            {
                name: 'preventOverflow',
                options: {
                    boundary: document.querySelector('.h-container'),
                    mainAxis: true,
                    padding: [12],
                },
            },
        ];

        this.init();
    }

    init(): void {
        this.element.on('click', this.toggle);

        this.popperInstance = createPopper(this.trigger, this.content, {
            modifiers: this.modifiers,
        });
    }

    toggle: (event: Event) => void = (event: Event) => {
        const currentTarget: EventTarget = event.currentTarget;
        const target: EventTarget = event.target;

        if ($(currentTarget).hasClass('is-visible')) {
            if ($(target).closest('.dropdown__content').length === 0 || $(target).hasClass('dropdown__content')) {
                this.hide(currentTarget);
            }
        } else {
            this.closeAllDropdowns();
            this.show();
        }
    };

    closeAllDropdowns: () => void = (): void => {
        $('.dropdown').removeClass('is-visible');
    };

    show(): void {
        this.element.addClass('is-visible');

        this.popperInstance.setOptions({
            modifiers: [...this.modifiers, {
                enabled: true,
                name: 'eventListeners',
            }],
        });

        this.popperInstance.update();
    }

    hide: (currentTarget: EventTarget) => void = (currentTarget: EventTarget) => {
        if ($(currentTarget).hasClass('dropdown')) {
            $(currentTarget).removeClass('is-visible');
        } else {
            this.element.removeClass('is-visible');
        }

        this.popperInstance.setOptions({
            modifiers: [...this.modifiers, {
                enabled: false,
                name: 'eventListeners',
            }],
        });
    };
}

$(() => {
    $(document).on('click', (event: Event) => {
        if ($(event.target).closest('.dropdown').length === 0) {
            $('.dropdown').removeClass('is-visible');
        }
    });
});

URL: /components/raw/dropdown/dropdown.ts
Filesystem Path: src/patterns/components/dropdown/dropdown.ts
Size: 3.2 KB

Handle: @dropdown--choices
Filesystem Path: src/patterns/components/dropdown/dropdown.twig
References (3): @icon, @choice-group, @button

Dropdown

Choices

Filter

Forms

Notifications

Search

Return

CMS

Copy environment

Dropdown

Choices