/*!
 * Custom elements for Nanopore-Digital Web applications
 */
'use strict';

var index = require('./index-DGttnXif.js');
var renderer = require('./renderer-jVpDRMfV.js');
var dom = require('./dom-Dxk5vXYq.js');

const accordionCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{display:contents}";

const NanoAccordion = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.nanoToggle = index.createEvent(this, "nanoToggle", 7);
    }
    indexOpened;
    elementOpened;
    get el() { return index.getElement(this); }
    /** Force one details element to always be open */
    alwaysOpen = false;
    /** Fires when accordion elements toggle */
    nanoToggle;
    onToggleHandler(event) {
        if (event.target?.tagName !== 'NANO-DETAILS')
            return;
        event.stopPropagation();
        const items = dom.getDirectChildren(this.el, renderer.transformTag('nano-details'));
        items.forEach((item, i) => {
            if (item !== event.target)
                item.open = false;
            else if (item === event.target) {
                this.indexOpened = i;
            }
        });
        this.nanoToggle.emit({ element: event.target, index: this.indexOpened });
    }
    onClosedHandler(event) {
        event.stopPropagation();
        if (this.alwaysOpen) {
            let foundOpen;
            const items = dom.getDirectChildren(this.el, renderer.transformTag('nano-details'));
            items.forEach((item) => {
                if (item !== event.target && item.open) {
                    foundOpen = true;
                }
            });
            if (!foundOpen) {
                event.preventDefault();
                return;
            }
        }
        if (this.elementOpened === event.target) {
            this.elementOpened = null;
            this.indexOpened = null;
            this.nanoToggle.emit();
        }
    }
    render() {
        return renderer.h("slot", { key: 'a16b340b9312672847ee022b2beb6767fc0dfb86' });
    }
};
NanoAccordion.style = accordionCss;

exports.nano_accordion = NanoAccordion;
