import { h, Host } from "@stencil/core";
import { downSmall } from "@pine-ds/icons/icons";
/**
 * @slot (default) - Accordion body content.
 * @slot label - Accordion trigger button content.
 */
export class PdsAccordion {
    constructor() {
        this.handleToggle = () => {
            this.isOpen = this.detailsEl.open;
        };
        this.getOpenAttribute = () => {
            if (this.isOpen !== false) {
                return { open: true };
            }
            return '';
        };
        this.componentId = undefined;
        this.isOpen = false;
    }
    handleOpenState(newValue) {
        this.isOpen = newValue;
    }
    componentDidLoad() {
        this.detailsEl.addEventListener('toggle', this.handleToggle);
    }
    render() {
        return (h(Host, { key: '228d08704d0e735ed515308df91a7880c2c450ed', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: '442e319353f611a5f3d3de767de8dc0f86d2540e' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), h("summary", { key: 'c3b11619644caee3ba90854e608072436ae0ac34' }, h("slot", { key: 'fb9b2fa1c0e6a8ddce8e9575b31da5c248f075d5', name: "label" }, "Details"), h("pds-icon", { key: '3435405fa293d47aa240a6bfa947fe0707c1154a', icon: downSmall })), h("div", { key: 'a35cb679b545fbbd408a4217764b66eabd495c6e', class: "pds-accordion__body" }, h("slot", { key: 'fa6efbc3624c1c1152eabca17201c24801eef3ee' })))));
    }
    static get is() { return "pds-accordion"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-accordion.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-accordion.css"]
        };
    }
    static get properties() {
        return {
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "null"
                        }],
                    "text": "A unique identifier used for the underlying component `id` attribute."
                },
                "attribute": "component-id",
                "reflect": false
            },
            "isOpen": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Can be used to manually set the open state of the accordion."
                },
                "attribute": "open",
                "reflect": true,
                "defaultValue": "false"
            }
        };
    }
    static get watchers() {
        return [{
                "propName": "isOpen",
                "methodName": "handleOpenState"
            }];
    }
}
//# sourceMappingURL=pds-accordion.js.map
