import { h, Host } from "@stencil/core";
export class SkipLink {
    constructor() {
        /**
         * If `true`, the skip link will fill the width of the page.
         */
        this.fullWidth = false;
        /**
         * If `true`, the skip link will appear inline with surrounding page content when focused.
         */
        this.inline = false;
        /**
         * The label displayed when the skip link is focused.
         */
        this.label = "Skip to main content";
        /**
         * If `true`, the skip link will display as black in the light theme, and white in the dark theme.
         */
        this.monochrome = false;
        /**
         * Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * If `true`, the background will be hidden.
         */
        this.transparentBackground = false;
    }
    /**
     * Sets focus on the element.
     */
    async setFocus() {
        if (this.linkEl)
            this.linkEl.setFocus();
    }
    render() {
        const { fullWidth, inline, label, monochrome, target, theme, transparentBackground, } = this;
        return (h(Host, { key: '90a25f2594d0169a8ee6f1d03b30a30fccb17168', class: {
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, h("ic-link", { key: '79c0f5121c3ac8bae5992756f3c628f381ebe576', class: {
                "display-top": !inline,
                "full-width": !!fullWidth,
                "show-background": !transparentBackground,
                inline: !!inline,
            }, href: `#${target}`, monochrome: monochrome, theme: theme, ref: (el) => (this.linkEl = el) }, label)));
    }
    static get is() { return "ic-skip-link"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-skip-link.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-skip-link.css"]
        };
    }
    static get properties() {
        return {
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the skip link will fill the width of the page."
                },
                "getter": false,
                "setter": false,
                "attribute": "full-width",
                "reflect": false,
                "defaultValue": "false"
            },
            "inline": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the skip link will appear inline with surrounding page content when focused."
                },
                "getter": false,
                "setter": false,
                "attribute": "inline",
                "reflect": false,
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label displayed when the skip link is focused."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false,
                "defaultValue": "\"Skip to main content\""
            },
            "monochrome": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the skip link will display as black in the light theme, and white in the dark theme."
                },
                "getter": false,
                "setter": false,
                "attribute": "monochrome",
                "reflect": false,
                "defaultValue": "false"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The target ID for the element which should receive focus when triggering the skip link."
                },
                "getter": false,
                "setter": false,
                "attribute": "target",
                "reflect": false
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "transparentBackground": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the background will be hidden."
                },
                "getter": false,
                "setter": false,
                "attribute": "transparent-background",
                "reflect": false,
                "defaultValue": "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 element.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=ic-skip-link.js.map
