@kelvininc/ui-components
Version:
Kelvin UI Components
39 lines (33 loc) • 3.34 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-D-JVwta2.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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))));
}
};
KvBreadcrumbItem.style = breadcrumbItemCss;
const breadcrumbListCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--breadcrumb-separator-color:var(--kv-neutral-4, #bebebe);--breadcrumb-separator-content:\"/\"}.breadcrumb-list{display:flex;align-items:center}.breadcrumb-list ::slotted(kv-breadcrumb-item:not(:last-child)){display:flex;align-items:center}.breadcrumb-list ::slotted(kv-breadcrumb-item:not(:last-child))::after{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;display:inline-block;content:var(--breadcrumb-separator-content);margin:0 var(--kv-spacing-2x, 8px);color:var(--breadcrumb-separator-color)}";
const KvBreadcrumbList = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.breadcrumbItemClick = createEvent(this, "breadcrumbItemClick", 7);
}
render() {
return (h(Host, { key: '0a62a60909a4fd96485c99b3a337d3f1f2773298' }, h("div", { key: '18578534b7050cf2045876833a205a187079ffae', class: "breadcrumb-list", part: "breadcrumb-list" }, h("slot", { key: '1ea166d7f6283aecf096ebafac0d6c18ec9953a0' }))));
}
};
KvBreadcrumbList.style = breadcrumbListCss;
export { KvBreadcrumbItem as kv_breadcrumb_item, KvBreadcrumbList as kv_breadcrumb_list };