@kelvininc/ui-components
Version:
Kelvin UI Components
42 lines (35 loc) • 3.38 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.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) {
index.registerInstance(this, hostRef);
this.breadcrumbItemClick = index.createEvent(this, "breadcrumbItemClick", 7);
this.onItemClick = () => {
this.breadcrumbItemClick.emit({
label: this.label,
active: this.active
});
};
}
render() {
return (index.h(index.Host, { key: '5b95aa71c7ed51466f923386c359140ca9b6733d' }, index.h("div", { key: '7dc8f9b4d87b6b1dfd98e22c3d4e86ad855b2db6', class: {
'breadcrumb-item': true,
'breadcrumb-item--active': this.active
}, onClick: this.onItemClick }, index.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) {
index.registerInstance(this, hostRef);
this.breadcrumbItemClick = index.createEvent(this, "breadcrumbItemClick", 7);
}
render() {
return (index.h(index.Host, { key: '0a62a60909a4fd96485c99b3a337d3f1f2773298' }, index.h("div", { key: '18578534b7050cf2045876833a205a187079ffae', class: "breadcrumb-list", part: "breadcrumb-list" }, index.h("slot", { key: '1ea166d7f6283aecf096ebafac0d6c18ec9953a0' }))));
}
};
KvBreadcrumbList.style = breadcrumbListCss;
exports.kv_breadcrumb_item = KvBreadcrumbItem;
exports.kv_breadcrumb_list = KvBreadcrumbList;