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.
 * @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: '9a8c2f915879f63d8a7255cf0f58b55f4b590eed', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: 'f5428c5e340c55750fb94d85dfd7cdbb853c32de' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), h("summary", { key: '9255f9c850016e964d468ed35578c01159b7f234', part: "accordion-button" }, h("slot", { key: '2b1dba36c97ed9c46b1efe7aac44cae4203e7a50', name: "label" }, "Details"), h("pds-icon", { key: '9185cfd595c09a15c57fe1e1d89a2895c461aa46', icon: downSmall })), h("div", { key: '41d030c5ffc2cee2099f141e80695c1f4e6ddcb0', part: "accordion-body", class: "pds-accordion__body" }, h("slot", { key: 'b10afd83e6bec657dfa88cdf4a73f32f12d46935' })))));
    }
    static get is() { return "pds-accordion"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["../../global/styles/base.scss", "pds-accordion.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../../global/styles/base.css", "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
