@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
156 lines (155 loc) • 5.34 kB
JavaScript
/*!
* 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: '554c463e59c07b3dc395e141dd88096ad4ff4a26', class: "kol-skip-nav", "aria-label": this.state._label }, h("ul", { key: 'bd5072df636b0bf5a15e56e22a7a9965370aa514', 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() { }
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": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"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