import { h } from "@stencil/core";
const ICONS = {
    expand: 'expand',
    minimize: 'minus_math',
    maximize: 'minus_math',
    newTab: 'up_right_arrow',
    back: 'left_arrow',
    close: 'multiply',
    shrink: 'compress',
    float: 'rectangle',
};
/**
 * To keep navigation patterns consistent across the whole web client, we use
 * this component for certain navigation patterns, such as navigating to
 * fullscreen or opening an object as a floating card on the side.
 *
 * These navigation patterns should always look and feel the same way for
 * end-users, so that they can recognize the buttons quickly and have a fair
 * expectation of what happens if they are clicked.
 *
 * By setting the correct type, we can easily get the proper visualization of
 * the navigation buttons. The `type` of the button only defines the look and
 * feel and the interactive behavior of the navigation button. These buttons do
 * not have any built-in functionality. Thus it is up to you to apply proper
 * actions or links to them.
 *
 * @exampleComponent limebb-example-navigation-button-new-tab
 * @exampleComponent limebb-example-navigation-button-float
 * @exampleComponent limebb-example-navigation-button-expand
 * @exampleComponent limebb-example-navigation-button-minimize
 * @exampleComponent limebb-example-navigation-button-maximize
 * @exampleComponent limebb-example-navigation-button-shrink
 * @exampleComponent limebb-example-navigation-button-close
 * @exampleComponent limebb-example-navigation-button-back
 */
export class NavigationButton {
    constructor() {
        this.renderAsLink = () => {
            return (h("a", { class: this.getContainerClassList(), id: "tooltipId", "aria-label": this.tooltipLabel && this.tooltipHelperLabel, href: this.href, target: this.type === 'newTab' ? '_blank' : undefined }, this.renderType(), this.renderTooltip()));
        };
        this.renderAsButton = () => {
            return (h("button", { class: this.getContainerClassList(), id: "tooltipId", "aria-label": this.tooltipLabel && this.tooltipHelperLabel }, this.renderType(), this.renderTooltip()));
        };
        this.getContainerClassList = () => {
            return {
                'navigation-button': true,
                [this.type]: true,
            };
        };
    }
    render() {
        if (this.href) {
            return this.renderAsLink();
        }
        return this.renderAsButton();
    }
    renderType() {
        return this.renderIcon(ICONS[this.type]);
    }
    renderTooltip() {
        if (!this.tooltipLabel) {
            return;
        }
        return (h("limel-tooltip", { label: this.tooltipLabel, helperLabel: this.tooltipHelperLabel, elementId: "tooltipId" }));
    }
    renderIcon(name) {
        return h("limel-icon", { name: name });
    }
    static get is() { return "limebb-navigation-button"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["navigation-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["navigation-button.css"]
        };
    }
    static get properties() {
        return {
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The URL that the link redirects to. Due to accessibility concerns,\nand to make the component focusable using keyboard navigation,\nspecifying an `href` will render the component as an `<a>` tag in the DOM.\nWithout the `href`, this component will be rendered as a `<button>`."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "href"
            },
            "tooltipLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If defined, a tooltip will be shown when the link is hovered.\nContent of the tooltip will also be readable for screen readers."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "tooltip-label"
            },
            "tooltipHelperLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Can be optionally provided to add supplementary information\nalong with the tooltip label. This also will be accessible for\nscreen readers."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "tooltip-helper-label"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "NavigationButtonType",
                    "resolved": "\"back\" | \"close\" | \"expand\" | \"float\" | \"maximize\" | \"minimize\" | \"newTab\" | \"shrink\"",
                    "references": {
                        "NavigationButtonType": {
                            "location": "import",
                            "path": "./navigation-button.types",
                            "id": "src/components/navigation-button/navigation-button.types.ts::NavigationButtonType",
                            "referenceLocation": "NavigationButtonType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Please see the examples for usage tips and guidelines."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "type"
            }
        };
    }
}
