import { jsx as _jsx, jsxs as _jsxs } from "@stencil/core/jsx-runtime";
import { Host, } from "@stencil/core";
import { inheritAttributes, hasSlot } from "../utils";
export class Button {
    host;
    shadowElement;
    inheritedAttributes = {};
    hasLabel = false;
    errors = [];
    // MARK: Props
    type = "button";
    variant = "secondary";
    tone = "default";
    disclosure;
    rounded;
    popovertarget;
    popovertargetaction = "toggle";
    loading = false;
    disabled = false;
    name;
    target;
    icon;
    href;
    accessibilityLabel;
    // MARK: Events
    ddsClick;
    ddsFocus;
    ddsBlur;
    // MARK: Lifecycle
    componentWillRender() {
        this.inheritedAttributes = inheritAttributes(this.host, this.shadowElement);
    }
    componentWillLoad() {
        this.handleSlotChange();
    }
    /**
     * Re-link whenever the popovertarget ID prop changes.
     */
    linkPopoverTarget() {
        const innerButton = this.shadowElement;
        if (!innerButton) {
            return;
        }
        if (this.popovertarget) {
            // Walk up from the host element to find the popover in the light DOM.
            // getRootNode() returns the shadow root (or document) the host belongs to,
            // so we search from there to correctly cross scoped component boundaries.
            const root = this.host.getRootNode();
            const target = root.querySelector(`#${this.popovertarget}`);
            if (target) {
                innerButton.popoverTargetElement = target;
                innerButton.popoverTargetAction = this.popovertargetaction;
            }
        }
        else {
            innerButton.popoverTargetElement = null;
        }
    }
    handleSlotChange() {
        this.hasLabel = hasSlot(this.host);
    }
    // MARK: Render
    render() {
        const { variant, type, hasLabel, icon, rounded, disclosure, disabled, inheritedAttributes, loading, } = this;
        const Tag = variant !== "link" ? "button" : "a";
        return (_jsx(Host, { variant: variant, rounded: rounded, loading: loading, part: "root", children: _jsxs(Tag, { class: `dds-button`, type: variant !== "link" ? type : "", onBlur: () => this.ddsBlur.emit(), onFocus: () => this.ddsFocus.emit(), disabled: disabled, ...inheritedAttributes, ref: (el) => (this.shadowElement = el), part: "button", children: [_jsxs("span", { class: `
              dds-button__content
              ${hasLabel ? "dds-button__content--label" : ""}
              ${icon ? "dds-button__content--icon" : ""}
              ${disclosure ? "dds-button__content--disclosure" : ""}
            `, children: [icon && _jsx("dds-icon", { name: icon, size: "m", part: "icon" }, '9fd79066c6e3e00f3282574496db23fc8cb3a64f'), _jsx("span", { class: "dds-button__label", part: "label", children: _jsx("slot", { onSlotchange: () => this.handleSlotChange() }, '028dc72194d7d86cf821ed84c29d01796c477e14') }, 'cf23c2f3c4adb4e6051886600e04eb22feab70e0'), disclosure && _jsx("dds-icon", { name: `chevron-${disclosure}`, size: "m" }, 'a6d1cb8c41d3b956ca38e73d5e3270c8fe0b947a')] }, '29b43d7fd0e911945b3fe077c8de2c159e47c2a8'), loading && (_jsx("span", { class: "dds-button__spinner", children: _jsx("dds-spinner", { size: "m" }, '2aff6d9fdff640ae8203a5f4fcd7e07f0dc9d965') }, 'dbd11533a1e7cdb1dfd991b64c668f0facd90a2d'))] }, '7aafff60c6f68a04d3dcc8a15513217ee555bfb0') }, '9488c3cd075493fe2194683eb0130ce7e0274ca8'));
    }
    static get is() { return "dds-button"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["../reset.css", "button.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../reset.css", "button.css"]
        };
    }
    static get properties() {
        return {
            "type": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "\"button\" | \"submit\" | \"reset\"",
                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "\"button\""
            },
            "variant": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "| \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"dashed\"\n    | \"link\"",
                    "resolved": "\"dashed\" | \"link\" | \"primary\" | \"secondary\" | \"tertiary\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "\"secondary\""
            },
            "tone": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "\"default\" | \"critical\"",
                    "resolved": "\"critical\" | \"default\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tone",
                "defaultValue": "\"default\""
            },
            "disclosure": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "| \"up\"\n    | \"down\"\n    | \"left\"\n    | \"right\"\n    | \"up-down\"\n    | undefined",
                    "resolved": "\"down\" | \"left\" | \"right\" | \"up\" | \"up-down\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disclosure"
            },
            "rounded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "false",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "rounded"
            },
            "popovertarget": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "popovertarget"
            },
            "popovertargetaction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"toggle\" | \"show\" | \"hide\"",
                    "resolved": "\"hide\" | \"show\" | \"toggle\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "popovertargetaction",
                "defaultValue": "\"toggle\""
            },
            "loading": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "loading",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "accessibilityLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "accessibility-label"
            }
        };
    }
    static get states() {
        return {
            "hasLabel": {},
            "errors": {}
        };
    }
    static get events() {
        return [{
                "method": "ddsClick",
                "name": "ddsClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "ddsFocus",
                "name": "ddsFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "ddsBlur",
                "name": "ddsBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "popovertarget",
                "methodName": "linkPopoverTarget"
            }, {
                "propName": "popovertargetaction",
                "methodName": "linkPopoverTarget"
            }];
    }
}
