@hashicorp/design-system-components
Version:
Helios Design System Components
53 lines (50 loc) • 3.39 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { array, hash } from '@ember/helper';
import { hdsLinkToModels } from '../../../../helpers/hds-link-to-models.js';
import { hdsLinkToQuery } from '../../../../helpers/hds-link-to-query.js';
import { HdsDropdownListItemInteractiveColorValues } from './types.js';
import HdsTextBody from '../../text/body.js';
import HdsIcon from '../../icon/index.js';
import HdsInteractive from '../../interactive/index.js';
import HdsBadge from '../../badge/index.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const DEFAULT_COLOR = HdsDropdownListItemInteractiveColorValues.Action;
const COLORS = Object.values(HdsDropdownListItemInteractiveColorValues);
class HdsDropdownListItemInteractive extends Component {
get color() {
const {
color = DEFAULT_COLOR
} = this.args;
assert(` for "Hds::Dropdown::ListItem::Interactive" must be one of the following: ${COLORS.join(', ')}; received: ${color}`, COLORS.includes(color));
return color;
}
get classNames() {
const classes = ['hds-dropdown-list-item', 'hds-dropdown-list-item--variant-interactive'];
// add a class based on the @color argument
classes.push(`hds-dropdown-list-item--color-${this.color}`);
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<li class={{this.classNames}}>\n {{#if @isLoading}}\n <div class=\"hds-dropdown-list-item__interactive-loading-wrapper\" ...attributes>\n <div class=\"hds-dropdown-list-item__interactive-icon hds-dropdown-list-item__interactive-icon--leading\">\n <HdsIcon @name=\"loading\" />\n </div>\n <HdsTextBody @tag=\"div\" @size=\"100\" @weight=\"regular\" class=\"hds-dropdown-list-item__interactive-text\">\n {{yield (hash Badge=(component HdsBadge size=\"small\"))}}\n </HdsTextBody>\n </div>\n {{else}}\n <HdsInteractive @current-when={{@current-when}} @models={{hdsLinkToModels (array @model @models)}} @query={{hdsLinkToQuery (array @query)}} @replace={{@replace}} @route={{@route}} @isRouteExternal={{@isRouteExternal}} @href={{@href}} @isHrefExternal={{@isHrefExternal}} ...attributes>\n {{#if @icon}}\n <span class=\"hds-dropdown-list-item__interactive-icon hds-dropdown-list-item__interactive-icon--leading\">\n <HdsIcon @name={{@icon}} />\n </span>\n {{/if}}\n <HdsTextBody class=\"hds-dropdown-list-item__interactive-text\" @tag=\"span\" @size=\"200\" @weight=\"medium\">\n {{yield (hash Badge=(component HdsBadge size=\"small\"))}}\n </HdsTextBody>\n {{#if @trailingIcon}}\n <span class=\"hds-dropdown-list-item__interactive-icon hds-dropdown-list-item__interactive-icon--trailing\">\n <HdsIcon @name={{@trailingIcon}} />\n </span>\n {{/if}}\n </HdsInteractive>\n {{/if}}\n</li>", {
strictMode: true,
scope: () => ({
HdsIcon,
HdsTextBody,
hash,
HdsBadge,
HdsInteractive,
hdsLinkToModels,
array,
hdsLinkToQuery
})
}), this);
}
}
export { COLORS, DEFAULT_COLOR, HdsDropdownListItemInteractive as default };
//# sourceMappingURL=interactive.js.map