carbon-components-svelte/src/components/ListBox/ListBoxMenuIcon.svelte
2019-12-30 07:45:18 -08:00

22 lines
764 B
Svelte

<script>
let className = undefined;
export { className as class };
export let open = false;
export const translationIds = { close: 'close', open: 'open' };
export let translateWithId = id => defaultTranslations[id];
export let style = undefined;
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
import { cx } from '../../lib';
const defaultTranslations = {
[translationIds.close]: 'Close menu',
[translationIds.open]: 'Open menu'
};
$: description = open ? translateWithId('close') : translateWithId('open');
</script>
<div class={cx('--list-box__menu-icon', open && '--list-box__menu-icon--open', className)} {style}>
<ChevronDown16 name="chevron--down" aria-label={description} title={description} />
</div>