/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
import { h } from './renderer.js';
import { H as HasSlotController } from './slot.js';
import { d as defineCustomElement$1 } from './icon.js';

const detailsCss = ":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{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:var(--nano-spacing-md);--btn-padding:var(--padding);--btn-bg-color:transparent;--btn-bg-color--hover:var(--nano-color-primary-100);--btn-bg-color--active:var(--nano-color-primary-300);--content-padding:var(--padding);display:block;border:1px solid var(--nano-color-neutral-300);color:var(--nano-color-neutral-1400)}:host([size=small]){--padding:var(--nano-spacing-sm) 0.9375rem}:host([size=large]){--padding:var(--nano-spacing-l)}:host([size=large]) .header{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-lg);line-height:var(--nano-line-height-dense);text-wrap:balance}:host([disabled]){opacity:0.5}.header{all:unset;cursor:pointer;padding:var(--btn-padding);position:relative;display:flex;flex-wrap:wrap;align-items:center;background:var(--btn-bg-color);color:inherit;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-md);line-height:var(--nano-line-height-dense);text-wrap:balance}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:not([aria-disabled=true]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.header:not([aria-disabled=true]):hover{background:var(--btn-bg-color--hover)}.header:not([aria-disabled=true]):active{background:var(--btn-bg-color--active)}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:var(--nano-color-primary-1200)}.header .icon .default-icon{rotate:0deg;transform-origin:center;transition:var(--nano-transition-x-fast) ease rotate}:host([open]) .header .icon .default-icon{rotate:180deg}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon),.header .icon::slotted(.nano-icon){color:currentcolor;transition:var(--nano-transition-x-fast) ease rotate;transform-origin:center}.body{display:grid;grid-template-rows:0fr;transition:all var(--nano-transition-fast) ease-out;opacity:0}:host([open]) .body{grid-template-rows:1fr;opacity:1}.content-wrapper{overflow:hidden}.content{padding:var(--content-padding)}";

const NanoDetails = /*@__PURE__*/ proxyCustomElement(class NanoDetails extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.nanoOpen = createEvent(this, "nanoOpen", 7);
        this.nanoClose = createEvent(this, "nanoClose", 7);
        this.nanoAfterOpen = createEvent(this, "nanoAfterOpen", 7);
        this.nanoAfterClose = createEvent(this, "nanoAfterClose", 7);
    }
    mo;
    stateChanging = false;
    slotCtrl = new HasSlotController(this, 'icon-start', 'icon-end', 'icon-collapse', 'icon-expand');
    detailsEl;
    headerEl;
    _bodyEl;
    get bodyEl() {
        return this._bodyEl;
    }
    set bodyEl(el) {
        if (this.bodyEl && this.bodyEl === this._bodyEl)
            return;
        if (this.bodyEl) {
            this.bodyEl.removeEventListener('transitionend', this.handleTransitionEnd);
        }
        el.addEventListener('transitionend', this.handleTransitionEnd);
        this._bodyEl = el;
    }
    /** Summary / handle text. Use the `label` slot for HTML markup */
    label = '';
    /** Should item be open on load */
    open = false;
    /** Disables the details so it can't be toggled. */
    disabled = false;
    /** The size of the details. Primarily controls the trigger element and overall padding. */
    size = 'medium';
    /**
     * Emitted when the component opens.
     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
     */
    nanoOpen;
    /**
     * Emitted when the component closes.
     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
     */
    nanoClose;
    /** Emitted after the details opens and all transitions are complete. */
    nanoAfterOpen;
    /** Emitted after the details closes and all transitions are complete. */
    nanoAfterClose;
    toggleClick() {
        this.stateChanging = true;
        if (this.open)
            this.show();
        else
            this.hide();
    }
    onKeyDown = (e) => {
        if (this.stateChanging || this.disabled)
            return;
        switch (e.key) {
            case 'Enter':
            case ' ':
                e.preventDefault();
                this.open = !this.open;
                break;
            case 'ArrowUp':
            case 'ArrowLeft':
                e.preventDefault();
                this.open = false;
                break;
            case 'ArrowDown':
            case 'ArrowRight':
                e.preventDefault();
                this.open = true;
                break;
        }
    };
    onMouseDown = (e) => {
        e.preventDefault();
        this.headerEl.focus();
        if (this.stateChanging || this.disabled)
            return;
        this.open = !this.open;
    };
    handleTransitionEnd = (e) => {
        if (e.propertyName !== 'opacity' ||
            !e.composedPath().find((node) => node === this.bodyEl))
            return;
        if (this.open) {
            this.nanoAfterOpen.emit();
            requestAnimationFrame(() => (this.stateChanging = false));
        }
        else {
            this.detailsEl.open = false;
            this.nanoAfterClose.emit();
            requestAnimationFrame(() => (this.stateChanging = false));
        }
    };
    hide() {
        const nanoClose = this.nanoClose.emit(this.open);
        if (nanoClose.defaultPrevented) {
            this.open = true;
            this.detailsEl.open = true;
            return;
        }
    }
    show() {
        const nanoOpen = this.nanoOpen.emit();
        this.detailsEl.open = true;
        if (nanoOpen.defaultPrevented) {
            this.open = false;
            this.detailsEl.open = false;
            return;
        }
    }
    attachMo() {
        if (this.mo || !this.detailsEl || !Build.isBrowser)
            return;
        this.mo = new MutationObserver((changes) => {
            if (this.stateChanging)
                return;
            for (const change of changes) {
                if (change.type === 'attributes' &&
                    change.attributeName === 'open' &&
                    !this.disabled) {
                    this.open = this.detailsEl.open;
                }
            }
        });
        this.mo.observe(this.detailsEl, { attributes: true });
    }
    componentDidLoad() {
        if (this.open)
            this.detailsEl.setAttribute('open', 'true');
        this.attachMo();
    }
    connectedCallback() {
        if (this.bodyEl) {
            this.bodyEl.addEventListener('transitionend', this.handleTransitionEnd);
        }
        this.attachMo();
    }
    disconnectedCallback() {
        if (this.mo) {
            this.mo.disconnect();
            this.mo = undefined;
        }
        if (this.bodyEl) {
            this.bodyEl.removeEventListener('transitionend', this.handleTransitionEnd);
        }
    }
    render() {
        return (h(Host, { key: '1cbedc078a3390a3ad82b99ac0f37e8ea0f8d480', class: "nano-details" }, h("details", { key: '22659218ba7d1ec936523ff33c7ed2a1efb2af74', part: "base", ref: (d) => (this.detailsEl = d), class: {
                details: true,
                disabled: this.disabled,
            } }, h("summary", { key: '3a7cd64e7d8e2b5235b7c0f7d58c434cb2a52469', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: '4a8de08dca34823e162019e2d4dddef2ed2c123d', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: 'cf6ea31f1685afa4bde64a6cbdef43cb0d0a053a', name: "icon-start" }))), h("div", { key: '0b11c544cfbb5852dfeae66b482154f1780a2569', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '5470af7891318c513870c473a8ad1f501174f51b', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: '45960716eeec5d5ad08b63fd536608fcd33ab8f2', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
            !this.slotCtrl.has('icon-end') &&
            !this.slotCtrl.has('icon-expand') &&
            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: '5357b61cb197dc4a1ceccf415a34defdfeb6b290', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: 'aa7f850c8415c2cd40fd7a965fba8eb98fca62b5', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: 'e98e6a68e4c15525b4377d4229fb4a1855650732', part: "content-wrapper", class: "content-wrapper" }, h("div", { key: '6710e302f7e2a5987ccd6703ea3c6cc0bf705d23', part: "content", class: "content", id: "content" }, h("slot", { key: '891525e66383979e621787f766bcfbcea78a9630' })))))));
    }
    static get watchers() { return {
        "open": ["toggleClick"]
    }; }
    static get style() { return detailsCss; }
}, [257, "nano-details", {
        "label": [1],
        "open": [1540],
        "disabled": [516],
        "size": [513]
    }, undefined, {
        "open": ["toggleClick"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-details", "nano-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-details":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, NanoDetails);
            }
            break;
        case "nano-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { NanoDetails as N, defineCustomElement as d };
