/*!
 * KoliBri - The accessible HTML-Standard
 */
import { __decorate } from "tslib";
import { h } from "@stencil/core";
import { validateLabel } from "../../schema";
import { addNavLabel, removeNavLabel } from "../../utils/unique-nav-labels";
import { watchNavLinks } from "../nav/validation";
import { KolLinkWcTag } from "../../core/component-names";
import { createCtaRef, delegateFocus } from "../../utils/element-interaction";
export class KolSkipNav {
    constructor() {
        this.ctaRef = createCtaRef();
        this.state = {
            _label: '',
            _links: [],
        };
    }
    render() {
        return (h("nav", { key: 'aa484fadf45377288d3bc7b099a34d8e381bfda0', class: "kol-skip-nav", "aria-label": this.state._label }, h("ul", { key: '3549087a2157b6ee5135c3166e3a78f055bdf6dc', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
            return (h("li", { class: "kol-skip-nav__list-item", key: index }, h(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? this.ctaRef : undefined }))));
        }))));
    }
    async focus(options) { }
    validateLabel(value, _oldValue, initial = false) {
        if (!initial) {
            removeNavLabel(this.state._label);
        }
        validateLabel(this, value, {
            required: true,
        });
        addNavLabel(this.state._label);
    }
    validateLinks(value) {
        watchNavLinks('KolSkipNav', this, value);
    }
    componentWillLoad() {
        this.validateLabel(this._label, undefined, true);
        this.validateLinks(this._links);
    }
    disconnectedCallback() {
        removeNavLabel(this.state._label);
    }
    static get is() { return "kol-skip-nav"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "default": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "default": ["style.css"]
        };
    }
    static get properties() {
        return {
            "_label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LabelPropType",
                    "resolved": "string",
                    "references": {
                        "LabelPropType": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::LabelPropType"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_label"
            },
            "_links": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Stringified<LinkProps[]>",
                    "resolved": "LinkProps[] | string",
                    "references": {
                        "Stringified": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::Stringified"
                        },
                        "LinkProps": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::LinkProps"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the list of links combined with their labels to render."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "_links"
            }
        };
    }
    static get states() {
        return {
            "state": {}
        };
    }
    static get methods() {
        return {
            "focus": {
                "complexType": {
                    "signature": "(options?: KolFocusOptions) => Promise<void>",
                    "parameters": [{
                            "name": "options",
                            "type": "KolFocusOptions | undefined",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "KolFocusOptions": {
                            "location": "import",
                            "path": "../../schema",
                            "id": "src/schema/index.ts::KolFocusOptions"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the internal element.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "_label",
                "methodName": "validateLabel"
            }, {
                "propName": "_links",
                "methodName": "validateLinks"
            }];
    }
}
__decorate([
    delegateFocus('ctaRef')
], KolSkipNav.prototype, "focus", null);
//# sourceMappingURL=shadow.js.map
