import { Host, h } from "@stencil/core";
import { hasShadowDom } from "../../utils/utils";
import { caretDown } from "@pine-ds/icons/icons";
/**
 * @part button - Exposes the button element for styling.
 * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.
 * @part icon - Exposes the icon component for styling.
*/
export class PdsButton {
    constructor() {
        this.handleClick = (ev) => {
            if (this.type != 'button') {
                // If button clicked IS NOT associated with a form
                if (hasShadowDom(this.el)) {
                    const form = this.el.closest('form');
                    if (form) {
                        ev.preventDefault();
                        const fakeButton = document.createElement('button');
                        fakeButton.type = this.type;
                        fakeButton.style.display = 'none';
                        form.appendChild(fakeButton);
                        fakeButton.click();
                        fakeButton.remove();
                    }
                }
            }
            this.pdsClick.emit(ev);
        };
        this.componentId = undefined;
        this.disabled = false;
        this.icon = null;
        this.name = undefined;
        this.value = undefined;
        this.type = 'button';
        this.variant = 'primary';
    }
    classNames() {
        const classNames = ['pds-button'];
        if (this.variant) {
            classNames.push('pds-button--' + this.variant);
        }
        return classNames.join('  ');
    }
    render() {
        return (h(Host, { key: 'b559cbbe7cfe3a77b792e3d020fc615123bb3218', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: '69b52d61eaabc72e24a9aaf72f7130eb4e7a7197', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { key: '4a94a45a0d44f0f54607c09b93672a597d876897', name: this.icon, part: "icon" }), h("slot", { key: '457c672d7662394a8debee6c372e3747d4de383d' }), this.variant === 'disclosure' && h("pds-icon", { key: 'b0247fa8aea5b62158bf60f3f707af110a68d562', icon: caretDown, part: "caret" }))));
    }
    static get is() { return "pds-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["../../global/styles/base.scss", "pds-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../../global/styles/base.css", "pds-button.css"]
        };
    }
    static get properties() {
        return {
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute."
                },
                "attribute": "component-id",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines the button's disabled state."
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "null"
                        }],
                    "text": "Displays an icon before the text when\nthe icon string matches an icon name."
                },
                "attribute": "icon",
                "reflect": false,
                "defaultValue": "null"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Provides the button with a submittable name."
                },
                "attribute": "name",
                "reflect": false
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Provides button with a submittable value"
                },
                "attribute": "value",
                "reflect": false
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'button' | 'reset' | 'submit'",
                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "button"
                        }],
                    "text": "Provides button with a type."
                },
                "attribute": "type",
                "reflect": false,
                "defaultValue": "'button'"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled'",
                    "resolved": "\"accent\" | \"destructive\" | \"disclosure\" | \"primary\" | \"secondary\" | \"unstyled\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "primary"
                        }],
                    "text": "Sets the style variant of the button."
                },
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'primary'"
            }
        };
    }
    static get events() {
        return [{
                "method": "pdsClick",
                "name": "pdsClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=pds-button.js.map
