@kelvininc/ui-components
Version:
Kelvin UI Components
45 lines (41 loc) • 2.59 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
const breadcrumbItemCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--breadcrumb-item-default-color:var(--kv-neutral-4, #bebebe);--breadcrumb-item-hover-color:var(--kv-neutral-3, #ddd);--breadcrumb-item-active-color:var(--kv-neutral-2, #e5e5e5)}.breadcrumb-item{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;cursor:pointer;user-select:none;color:var(--breadcrumb-item-default-color);text-decoration:none}.breadcrumb-item:hover{text-decoration:underline;color:var(--breadcrumb-item-hover-color)}.breadcrumb-item--active{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;pointer-events:none;color:var(--breadcrumb-item-active-color)}";
const KvBreadcrumbItem = /*@__PURE__*/ proxyCustomElement(class KvBreadcrumbItem extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.breadcrumbItemClick = createEvent(this, "breadcrumbItemClick", 7);
this.onItemClick = () => {
this.breadcrumbItemClick.emit({
label: this.label,
active: this.active
});
};
}
render() {
return (h(Host, { key: '5b95aa71c7ed51466f923386c359140ca9b6733d' }, h("div", { key: '7dc8f9b4d87b6b1dfd98e22c3d4e86ad855b2db6', class: {
'breadcrumb-item': true,
'breadcrumb-item--active': this.active
}, onClick: this.onItemClick }, h("slot", { key: 'e496f0d3e2aadab78323095a5977835ea2d5a872' }, this.label))));
}
static get style() { return breadcrumbItemCss; }
}, [1, "kv-breadcrumb-item", {
"label": [513],
"active": [516]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-breadcrumb-item"];
components.forEach(tagName => { switch (tagName) {
case "kv-breadcrumb-item":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvBreadcrumbItem);
}
break;
} });
}
defineCustomElement();
export { KvBreadcrumbItem as K, defineCustomElement as d };