import { Host, h } from "@stencil/core";
import { hasShadowDom } from "../../utils/utils";
import { caretDown } from "@pine-ds/icons/icons";
/**
 * @part button - The main button element that represents the button component.
 * @part caret - The caret icon element that appears when the button variant is 'disclosure'.
 * @part icon - The icon element that appears before the text in the button, if provided.
*/
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.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: '453a94093ba7bb8aa0fdea470cd9008e96601dcf', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'ec841dfb0b026d1c3376f686f6d9187cdecb1762', 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: '926395c361f5b94f9c4d12980c4a93a52bf79c41', name: this.icon, part: "icon" }), h("slot", { key: '4a74b8b6cd711fee67622c92b515cf329964da64' }), this.variant === 'disclosure' && h("pds-icon", { key: 'e2d356d80d03c3d8a8fc1259528e13a1c88e1307', icon: caretDown, part: "caret" }))));
    }
    static get is() { return "pds-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["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": "Toggles disabled state of button"
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Displays icon before text when 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 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": [],
                    "text": "Sets button variant styles as outlined in Figma documentation"
                },
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'primary'"
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=pds-button.js.map
