Contents

/* eslint-disable custom-elements/no-constructor */
export default class SegmentedControlElement extends HTMLElement {
    constructor() {
        super();
        this.addEventListener('click', (event) => {
            const controls = Array.from(this.querySelectorAll('[role="toolbar"] button')).filter(tab => tab instanceof HTMLElement && tab.closest(this.tagName) === this);
            if (!(event.target instanceof Element))
                return;
            if (event.target.closest(this.tagName) !== this)
                return;
            const selectedControl = event.target.closest('button');
            if (!(selectedControl instanceof HTMLElement) || !selectedControl.closest('[role="toolbar"]'))
                return;
            for (const control of controls) {
                control.classList.remove('SegmentedControl-button--selected');
                control.setAttribute('aria-current', 'false');
            }
            selectedControl.classList.add('SegmentedControl-button--selected');
            selectedControl.setAttribute('aria-current', 'true');
            selectedControl.focus();
        });
    }
}
if (!window.customElements.get('segmented-control')) {
    window.SegmentedControlElement = SegmentedControlElement;
    window.customElements.define('segmented-control', SegmentedControlElement);
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
primer_view_components-0.0.88	app/components/primer/alpha/segmented-control-element.js