/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { Host, } from "@stencil/core";
import { h } from "../../utils/renderer";
/** Simple icon-only buttons designed to be used for actions and in toolbars.
 *
 * @version 1.0.0
 * @status stable
 *
 * @part base - the main control (either `<a />` or `<button />`)
 * @part icon - a `<nano-icon />` component
 */
export class IconButton {
    button;
    host;
    /** The name of the icon to draw. */
    iconName;
    /** An external URL of an SVG file. */
    iconSrc;
    /** The default behavior of the button. */
    type = 'button';
    /** The name of the button, submitted as a pair with the button’s value as part of the form data. */
    name;
    /** Defines the value associated with the button’s name when it’s submitted with the form data. */
    value;
    /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should
     * always include a label that describes what the icon button does. */
    label;
    /** display the label as a `<nano-tooltip />` */
    showTooltip = false;
    /** Set to true to disable the button. */
    disabled = false;
    /** Contains a URL or a URL fragment that the hyperlink points to.
     * If this property is set, an anchor tag will be rendered. */
    href;
    /** Specifies the relationship of the target object to the link object.
     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) */
    rel;
    /** Specifies where to display the linked URL. Only applies when an `href` is provided.
     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */
    target;
    /** The HTML form element or form element id.
     * Used to submit a form when the button is not a child of the form. */
    form;
    /** Sets focus on the internal button */
    async setFocus() {
        this.button.focus();
    }
    /**
     * Finds the form element based on the provided `form` selector
     * or element reference provided.
     * @returns the found form element (if found)
     */
    findForm() {
        const { form, host } = this;
        if (!form)
            return host.closest('form');
        if (form instanceof HTMLFormElement) {
            return form;
        }
        if (typeof form === 'string') {
            const el = document.getElementById(form);
            if (el instanceof HTMLFormElement) {
                return el;
            }
        }
        return null;
    }
    handleClick = (ev) => {
        if (this.type === 'button')
            return;
        const formEl = this.findForm();
        if (formEl) {
            ev.preventDefault();
            const fakeButton = document.createElement('button');
            fakeButton.type = this.type;
            fakeButton.style.display = 'none';
            formEl.appendChild(fakeButton);
            fakeButton.click();
            fakeButton.remove();
        }
    };
    content() {
        const TagType = this.href === undefined ? 'button' : 'a';
        return (h(TagType, { onClick: this.handleClick, part: "base", ref: (el) => (this.button = el), class: {
                'icon-button': true,
                'icon-button--disabled': this.disabled,
            }, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, rel: this.rel || undefined, type: !this.href && this.type ? this.type : undefined }, h("span", { class: "icon-button__label" }, this.label), h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" })));
    }
    render() {
        if (this.showTooltip) {
            return (h(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, h("nano-tooltip", { content: this.label }, this.content())));
        }
        return (h(Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, this.content()));
    }
    static get is() { return "nano-icon-button"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["icon-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["icon-button.css"]
        };
    }
    static get properties() {
        return {
            "iconName": {
                "type": "string",
                "attribute": "icon-name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The name of the icon to draw."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "iconSrc": {
                "type": "string",
                "attribute": "icon-src",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "An external URL of an SVG file."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "type": {
                "type": "string",
                "attribute": "type",
                "mutable": false,
                "complexType": {
                    "original": "'submit' | 'reset' | 'button'",
                    "resolved": "\"button\" | \"reset\" | \"submit\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The default behavior of the button."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "'button'"
            },
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The name of the button, submitted as a pair with the button\u2019s value as part of the form data."
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "value": {
                "type": "string",
                "attribute": "value",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the value associated with the button\u2019s name when it\u2019s submitted with the form data."
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "label": {
                "type": "string",
                "attribute": "label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\nalways include a label that describes what the icon button does."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "showTooltip": {
                "type": "boolean",
                "attribute": "show-tooltip",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "display the label as a `<nano-tooltip />`"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to true to disable the button."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "href": {
                "type": "string",
                "attribute": "href",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "rel": {
                "type": "string",
                "attribute": "rel",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "target": {
                "type": "string",
                "attribute": "target",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies where to display the linked URL. Only applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "form": {
                "type": "string",
                "attribute": "form",
                "mutable": false,
                "complexType": {
                    "original": "HTMLFormElement | string",
                    "resolved": "HTMLFormElement | string",
                    "references": {
                        "HTMLFormElement": {
                            "location": "global",
                            "id": "global::HTMLFormElement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The HTML form element or form element id.\nUsed to submit a form when the button is not a child of the form."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the internal button",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
}
