@limetech/lime-elements
Version:
178 lines (177 loc) • 6.12 kB
JavaScript
import { h, } from '@stencil/core';
import { makeEnterClickable, removeEnterClickable, } from '../../util/make-enter-clickable';
import { createRandomString } from '../../util/random-string';
import { getIconColor, getIconName } from '../icon/get-icon-props';
/**
* A Breadcrumb consists of a list of distinct "places" that a user has gone through,
* before ending up where they are right now, in a website or an application.
*
* These "places" can be for example _pages_ of a website, which are hierarchically
* laid out before the current page that the user is looking at.
* They could also be _steps_ which the user has gone through, which perhaps have no
* hierarchical relation with each other, but has eventually led the user "here".
*
* :::note
* - Where the user currently is, is always the last step of the breadcrumb.
* - A breadcrumbs never shows where users can go after this place.
* It only illustrates where user has been before ending up here.
* If the path that a user can take is not changing and if next steps are clear,
* you can use the [Progress flow component](#/component/limel-progress-flow) instead.
* :::
*
* Breadcrumbs are often placed horizontally before the main content of the current screen.
*
* @exampleComponent limel-example-breadcrumbs-links
* @exampleComponent limel-example-breadcrumbs-buttons
* @exampleComponent limel-example-breadcrumbs-icons
* @exampleComponent limel-example-breadcrumbs-divider
* @exampleComponent limel-example-breadcrumbs-icon-color
* @exampleComponent limel-example-breadcrumbs-styling
*/
export class Breadcrumbs {
constructor() {
this.renderSteps = () => {
const allStepsWithoutLast = this.items.slice(0, -1);
if (this.areItemsLinks(this.items)) {
return allStepsWithoutLast.map(this.renderAsLink);
}
return allStepsWithoutLast.map(this.renderAsButton);
};
this.renderAsButton = (item) => {
const tooltipId = createRandomString();
return [
h("button", { role: "listitem", id: tooltipId, class: "step", onClick: this.handleClick(item) }, this.renderIcon(item), this.renderLabel(item)),
this.renderTooltip(item, tooltipId),
];
};
this.renderAsLink = (item) => {
const tooltipId = createRandomString();
return [
h("a", { role: "listitem", id: tooltipId, class: "step", href: item.link.href, title: item.link.title }, this.renderIcon(item), this.renderLabel(item)),
this.renderTooltip(item, tooltipId),
];
};
this.renderLastStep = () => {
const lastItem = this.items.slice(-1);
return (h("li", { class: "last step", tabindex: "-1", "aria-current": this.areItemsLinks(this.items) ? 'page' : 'step' }, this.renderIcon(lastItem[0]), h("span", { class: "text" }, lastItem[0].text)));
};
this.renderIcon = (item) => {
const name = getIconName(item.icon);
const color = getIconColor(item.icon);
if (!name) {
return;
}
return (h("limel-icon", { style: {
color: `${color}`,
}, name: name }));
};
this.renderLabel = (item) => {
if (item.type === 'icon-only') {
return;
}
return h("span", { class: "text" }, item.text);
};
this.renderTooltip = (item, tooltipId) => {
if (item.type === 'icon-only') {
return h("limel-tooltip", { elementId: tooltipId, label: item.text });
}
};
this.areItemsLinks = (items) => {
return items.some((item) => 'link' in item);
};
this.handleClick = (item) => (event) => {
event.stopPropagation();
this.select.emit(item);
};
this.items = undefined;
this.divider = '›';
}
render() {
return (h("ol", { role: "navigation", "aria-label": "Breadcrumb", style: { '--limel-breadcrumbs-divider': `'${this.divider}'` } }, this.renderSteps(), this.renderLastStep()));
}
componentWillLoad() {
makeEnterClickable(this.host);
}
disconnectedCallback() {
removeEnterClickable(this.host);
}
static get is() { return "limel-breadcrumbs"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["breadcrumbs.scss"]
};
}
static get styleUrls() {
return {
"$": ["breadcrumbs.css"]
};
}
static get properties() {
return {
"items": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "BreadcrumbsItem[]",
"resolved": "BreadcrumbsItem[]",
"references": {
"BreadcrumbsItem": {
"location": "import",
"path": "./breadcrumbs.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "List of items in the breadcrumbs,\neach representing a step or a page."
}
},
"divider": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The visual divider that separates items.\nIt must be a single character such as `-` or `,`."
},
"attribute": "divider",
"reflect": false,
"defaultValue": "'\u203A'"
}
};
}
static get events() {
return [{
"method": "select",
"name": "select",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fired when clicking on buttons (not links!)\ninside the breadcrumbs."
},
"complexType": {
"original": "BreadcrumbsItem",
"resolved": "BreadcrumbsItem",
"references": {
"BreadcrumbsItem": {
"location": "import",
"path": "./breadcrumbs.types"
}
}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=breadcrumbs.js.map