import { h, Host } from "@stencil/core";
import { downSmall } from "@pine-ds/icons/icons";
/**
 * @part accordion-body - Accordion body styles.
 * @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: '7789d456b8a8415a7860754f374c5dad138216b8', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: 'e81776ae675f74cd5584c668d717ba0ca91c314c' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), h("summary", { key: 'ae8e7ed87ec55bcb51dfe44ed648f9cd0f416aa9' }, h("slot", { key: '0840b76aa1e6d84f0b0bec40e37a26f243a4bbe3', name: "label" }, "Details"), h("pds-icon", { key: 'b41cb7c07dfb4a73f97d5a2bd5ec86316d5148f8', icon: downSmall })), h("div", { key: 'ed5c79c4930d94105343f0512ab9059ff30b7365', part: "accordion-body", class: "pds-accordion__body" }, h("slot", { key: '9f1c522f1343b19b482a24c2ad063c8ec0e2457b' })))));
    }
    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
