@hashicorp/design-system-components
Version:
Helios Design System Components
41 lines (38 loc) • 2.73 kB
JavaScript
import Component from '@glimmer/component';
import { array } from '@ember/helper';
import { hdsLinkToModels } from '../../../../helpers/hds-link-to-models.js';
import { hdsLinkToQuery } from '../../../../helpers/hds-link-to-query.js';
import HdsIcon from '../../icon/index.js';
import HdsTextBody from '../../text/body.js';
import HdsInteractive from '../../interactive/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 HdsDropdownListItemCheckmark extends Component {
get classNames() {
const classes = ['hds-dropdown-list-item', 'hds-dropdown-list-item--color-action', 'hds-dropdown-list-item--variant-checkmark'];
// add a class based on the @selected argument
if (this.args.selected) {
classes.push('hds-dropdown-list-item--variant-checkmark-selected');
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("{{!-- template-lint-disable no-invalid-role require-context-role require-presentational-children --}}\n<li class={{this.classNames}} role=\"none\">\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}} class=\"hds-dropdown-list-item__interactive\" ...attributes role=\"option\" aria-selected={{if @selected \"true\" \"false\"}}>\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 @tag=\"span\" @size=\"200\" @weight=\"medium\" class=\"hds-dropdown-list-item__interactive-text\">{{yield}}</HdsTextBody>\n {{#if @count}}\n <HdsTextBody class=\"hds-dropdown-list-item__count\" @tag=\"span\" @size=\"100\" @weight=\"medium\" @color=\"faint\">{{@count}}</HdsTextBody>\n {{/if}}\n <span class=\"hds-dropdown-list-item__checkmark\">\n {{#if @selected}}\n <HdsIcon class=\"hds-dropdown-list-item__checkmark-icon\" @name=\"check\" />\n {{/if}}\n </span>\n </HdsInteractive>\n</li>\n{{!-- template-lint-enable no-invalid-role require-context-role require-presentational-children --}}", {
strictMode: true,
scope: () => ({
HdsInteractive,
hdsLinkToModels,
array,
hdsLinkToQuery,
HdsIcon,
HdsTextBody
})
}), this);
}
}
export { HdsDropdownListItemCheckmark as default };
//# sourceMappingURL=checkmark.js.map