@hashicorp/design-system-components
Version:
Helios Design System Components
49 lines (46 loc) • 2.2 kB
JavaScript
import Component from '@glimmer/component';
import { htmlSafe } from '@ember/template';
import { assert } from '@ember/debug';
import HdsInteractive from '../interactive/index.js';
import HdsIcon from '../icon/index.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
class HdsBreadcrumbItem extends Component {
get maxWidth() {
const {
maxWidth
} = this.args;
if (maxWidth) {
assert(` for "Hds::Breadcrumb::Item" must be a size as number in 'px' or in 'em' (eg. '200px' or '24em'); received: ${maxWidth}`, maxWidth.match(/^\d+(px|em)$/));
return maxWidth;
} else {
return undefined;
}
}
get itemStyle() {
if (this.maxWidth) {
return htmlSafe(`max-width: ${this.maxWidth}`);
} else {
return undefined;
}
}
get classNames() {
const classes = ['hds-breadcrumb__item'];
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<li class=\"hds-breadcrumb__item\" style={{this.itemStyle}} ...attributes>\n {{#if @current}}\n <div class=\"hds-breadcrumb__current\">\n {{#if @icon}}\n <div class=\"hds-breadcrumb__icon\">\n <HdsIcon @name={{@icon}} @size=\"16\" @stretched={{true}} />\n </div>\n {{/if}}\n <span class=\"hds-breadcrumb__text\">{{@text}}</span>\n </div>\n {{else}}\n <HdsInteractive class=\"hds-breadcrumb__link\" @current-when={{@current-when}} @models={{@models}} @model={{@model}} @query={{@query}} @replace={{@replace}} @route={{@route}} @href={{@href}} @isRouteExternal={{@isRouteExternal}}>\n {{#if @icon}}\n <div class=\"hds-breadcrumb__icon\">\n <HdsIcon @name={{@icon}} @size=\"16\" @stretched={{true}} />\n </div>\n {{/if}}\n <span class=\"hds-breadcrumb__text\">{{@text}}</span>\n </HdsInteractive>\n {{/if}}\n</li>", {
strictMode: true,
scope: () => ({
HdsIcon,
HdsInteractive
})
}), this);
}
}
export { HdsBreadcrumbItem as default };
//# sourceMappingURL=item.js.map