import { h, Host } from "@stencil/core";
import { downSmall } from "@pine-ds/icons/icons";
/**
 * @part accordion-body - Accordion body styles.
 * @part accordion-button - Accordion button/trigger styles.
 * @part accordion-icon - Accordion icon styles.
 * @slot (default) - Accordion body content.
 * @slot label - Accordion trigger button content.
 */
export class PdsAccordion {
    constructor() {
        /**
         * Can be used to manually set the open state of the accordion.
         * @defaultValue false
         */
        this.isOpen = false;
        this.handleToggle = () => {
            this.isOpen = this.detailsEl.open;
        };
        this.getOpenAttribute = () => {
            if (this.isOpen !== false) {
                return { open: true };
            }
            return '';
        };
    }
    handleOpenState(newValue) {
        this.pdsAccordionToggle.emit(newValue);
    }
    componentDidLoad() {
        this.detailsEl.addEventListener('toggle', this.handleToggle);
    }
    render() {
        return (h(Host, { key: 'dd45657cb2bfe2e26f3a2fcad6a941559f1968c5', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: '9dff1b1a3e4cdd308537c1e5f4020d6b74e4ac4e' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), h("summary", { key: '59152e8eece069bedd0109d1952dc1de95bc5d9a', part: "accordion-button" }, h("slot", { key: '73881348e657d880c60a5420a758217789f03b0c', name: "label" }, "Details"), h("pds-icon", { key: 'dfe5c28de56ef76bda50f36a406ac2072ed4bd77', icon: downSmall, part: "accordion-icon" })), h("div", { key: '08d019728935164bb315035369044dd513a2c9db', part: "accordion-body", class: "pds-accordion__body" }, h("slot", { key: 'a67ce7ec1acf795827db51465b80c1ecad96a3e3' })))));
    }
    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."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "component-id"
            },
            "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."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "open",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "pdsAccordionToggle",
                "name": "pdsAccordionToggle",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the accordion open state changes."
                },
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "isOpen",
                "methodName": "handleOpenState"
            }];
    }
}
//# sourceMappingURL=pds-accordion.js.map
