'use client';
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var lit = require('lit');
var decorators_js = require('lit/decorators.js');
var classMap_js = require('lit/directives/class-map.js');
var sgdsElement = require('../../base/sgds-element.cjs.js');
var animate = require('../../utils/animate.cjs.js');
var animationRegistry = require('../../utils/animation-registry.cjs.js');
var event = require('../../utils/event.cjs.js');
var watch = require('../../utils/watch.cjs.js');
var accordionItem = require('./accordion-item.cjs.js');

/**
 *
 * @event sgds-show - Emitted on show.
 * @event sgds-after-show - Emitted on show after animation has completed.
 * @event sgds-hide - Emitted on hide.
 * @event sgds-after-hide - Emitted on hide after animation has completed.
 *
 * @slot header - The accordion-item button header slot.
 * @slot content - The accordion-item content slot.
 * @slot caret - The caret icon of accordion-item.
 *
 */
class SgdsAccordionItem extends sgdsElement["default"] {
    constructor() {
        super(...arguments);
        /** Controls whether accordion-item is open or close */
        this.open = false;
        /** Disables the accordion item */
        this.disabled = false;
    }
    handleSummaryClick() {
        if (this.open) {
            this.hide();
        }
        else {
            this.show();
        }
        this.header.focus();
    }
    handleSummaryKeyDown(event) {
        if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            if (this.open) {
                this.hide();
            }
            else {
                this.show();
            }
        }
        if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
            event.preventDefault();
            this.hide();
        }
        if (event.key === "ArrowDown" || event.key === "ArrowRight") {
            event.preventDefault();
            this.show();
        }
    }
    async handleOpenChange() {
        if (this.open) {
            // Show
            const sgdsShow = this.emit("sgds-show", { cancelable: true });
            if (sgdsShow.defaultPrevented) {
                this.open = false;
                return;
            }
            await animate.stopAnimations(this.body);
            this.body.classList.remove("hidden");
            const { keyframes, options } = animationRegistry.getAnimation(this, "accordion.show");
            await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
            this.emit("sgds-after-show");
        }
        else {
            // Hide
            const slHide = this.emit("sgds-hide", { cancelable: true });
            if (slHide.defaultPrevented) {
                this.open = true;
                return;
            }
            await animate.stopAnimations(this.body);
            const { keyframes, options } = animationRegistry.getAnimation(this, "accordion.hide");
            const animationDuration = options.duration;
            // Workaround to fix GSIB delay after animateTo.
            //Setting a timeout of duration slightly less than animation's duraton to prevent case where animation runs faster than .hidden class is added
            setTimeout(() => {
                this.body.classList.add("hidden");
            }, animationDuration - 20);
            await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
            this.emit("sgds-after-hide");
        }
    }
    /** Shows the accordion. */
    async show() {
        if (this.open) {
            return;
        }
        this.open = true;
        return event.waitForEvent(this, "sgds-after-show");
    }
    /** Hide the accordion */
    async hide() {
        if (!this.open) {
            return;
        }
        this.open = false;
        return event.waitForEvent(this, "sgds-after-hide");
    }
    render() {
        const isHydrated = this.hasUpdated;
        return lit.html `
      <div class="accordion-item">
        <button
          class=${classMap_js.classMap({
            "accordion-btn": true,
            disabled: this.disabled,
            collapsed: !this.open
        })}
          ?disabled=${this.disabled}
          role="button"
          aria-expanded=${this.open ? "true" : "false"}
          aria-disabled=${this.disabled ? "true" : "false"}
          aria-controls="content"
          tabindex=${this.disabled ? "-1" : "0"}
          @click=${this.handleSummaryClick}
          @keydown=${this.handleSummaryKeyDown}
        >
          <slot name="header"></slot>
          <slot name="caret">
            <sgds-icon name="chevron-down" size=${this.getAttribute("density") === "compact" ? "md" : "lg"}></sgds-icon>
          </slot>
        </button>
        <div
          class=${classMap_js.classMap({
            "accordion-body": true,
            hidden: !this.open && !isHydrated
        })}
        >
          <slot id="content" name="content" class="content" role="region" aria-labelledby="header"></slot>
        </div>
      </div>
    `;
    }
}
SgdsAccordionItem.styles = [...sgdsElement["default"].styles, accordionItem["default"]];
tslib.__decorate([
    decorators_js.query(".accordion-item")
], SgdsAccordionItem.prototype, "accordion", void 0);
tslib.__decorate([
    decorators_js.query(".accordion-btn")
], SgdsAccordionItem.prototype, "header", void 0);
tslib.__decorate([
    decorators_js.query(".accordion-body")
], SgdsAccordionItem.prototype, "body", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsAccordionItem.prototype, "open", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsAccordionItem.prototype, "disabled", void 0);
tslib.__decorate([
    watch.watch("open", { waitUntilFirstUpdate: true })
], SgdsAccordionItem.prototype, "handleOpenChange", null);
animationRegistry.setDefaultAnimation("accordion.show", {
    keyframes: [
        { height: "0", opacity: "0" },
        { height: "auto", opacity: "1" }
    ],
    options: { duration: 350, easing: "ease-in-out" }
});
animationRegistry.setDefaultAnimation("accordion.hide", {
    keyframes: [
        { height: "auto", opacity: "1" },
        { height: "0", opacity: "0" }
    ],
    options: { duration: 350, easing: "ease-in-out" }
});

exports.SgdsAccordionItem = SgdsAccordionItem;
exports["default"] = SgdsAccordionItem;
//# sourceMappingURL=sgds-accordion-item.cjs.js.map
