@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
131 lines (130 loc) • 5.36 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { Fragment, h } from "@stencil/core";
import { a11yHintLabelingLandmarks, validateLabel } from "../../schema";
import { addNavLabel, removeNavLabel } from "../../utils/unique-nav-labels";
import { watchNavLinks } from "../nav/validation";
import { KolLinkWcTag } from "../../core/component-names";
import { IconFC } from "../../internal/functional-components/icon/component";
export class KolBreadcrumb {
constructor() {
this.renderLink = (link, index) => {
const lastIndex = this.state._links.length - 1;
return (h("li", { class: "kol-breadcrumb__list-element", key: index }, index === lastIndex ? (h("span", { class: "kol-breadcrumb__list-element-span", "aria-current": "page" }, link._hideLabel ? (h(IconFC, { class: "kol-breadcrumb__icon", label: link._label, icons: typeof link._icons === 'string' ? link._icons : 'kolicon-link' })) : (h(Fragment, null, link._label)))) : (h(KolLinkWcTag, Object.assign({ class: "kol-breadcrumb__link", _inline: false }, link))), index !== lastIndex && h(IconFC, { class: "kol-breadcrumb__separator", label: "", icons: "kolicon-chevron-right" })));
};
this.state = {
_label: '',
_links: [],
};
}
render() {
return (h("nav", { key: 'bff94e213bc73c24069c1e5aa297aa54b6e98003', class: "kol-breadcrumb", "aria-label": this.state._label }, h("ul", { key: '2100b5df04175f39ebdfab1708100623856c4470', class: "kol-breadcrumb__list" }, this.state._links.length === 0 && (h("li", { key: '3b73286454440609917059e00581d71ed20788d8' }, h(IconFC, { key: '2b20cb24ae17a71c5b0dbeb713d1e32b04660f92', class: "kol-breadcrumb_icon", label: "", icons: "kolicon-house" }), "\u2026")), this.state._links.map(this.renderLink))));
}
validateLabel(value, _oldValue, initial = false) {
if (!initial) {
removeNavLabel(this.state._label);
}
validateLabel(this, value, {
required: true,
});
a11yHintLabelingLandmarks(value);
addNavLabel(this.state._label);
}
validateLinks(value) {
watchNavLinks('KolBreadcrumb', this, value);
}
componentWillLoad() {
this.validateLabel(this._label, undefined, true);
this.validateLinks(this._links);
}
disconnectedCallback() {
removeNavLabel(this.state._label);
}
static get is() { return "kol-breadcrumb"; }
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<BreadcrumbLinkProps[]>",
"resolved": "BreadcrumbLinkProps[] | string",
"references": {
"Stringified": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::Stringified"
},
"BreadcrumbLinkProps": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::BreadcrumbLinkProps"
}
}
},
"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 watchers() {
return [{
"propName": "_label",
"methodName": "validateLabel"
}, {
"propName": "_links",
"methodName": "validateLinks"
}];
}
}
//# sourceMappingURL=shadow.js.map