@hashicorp/design-system-components
Version:
Helios Design System Components
66 lines (63 loc) • 3.26 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { eq } from 'ember-truth-helpers';
import { HdsRichTooltipToggleIconPositionValues, HdsRichTooltipToggleSizeValues } from './types.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
*/
const ICON_POSITIONS = Object.values(HdsRichTooltipToggleIconPositionValues);
const DEFAULT_ICON_POSITION = HdsRichTooltipToggleIconPositionValues.Trailing;
const SIZES = Object.values(HdsRichTooltipToggleSizeValues);
class HdsRichTooltipToggle extends Component {
get isInline() {
const {
isInline = false
} = this.args;
return isInline;
}
get iconPosition() {
const {
iconPosition = DEFAULT_ICON_POSITION
} = this.args;
assert(`@iconPosition for "Hds::RichTooltip::Toggle" must be one of the following: ${ICON_POSITIONS.join(', ')}; received: ${iconPosition}`, ICON_POSITIONS.includes(iconPosition));
return iconPosition;
}
get size() {
let size;
// we assign a "size" only if `@text` is provided
if (this.args.text) {
size = this.args.size;
assert(`@size for "Hds::RichTooltip::Toggle" must be one of the following: ${SIZES.join(', ')}; received: ${size}`, size === undefined || SIZES.includes(size));
}
return size;
}
get classNames() {
const classes = ['hds-rich-tooltip__toggle'];
// add a class based on the @isInline argument
if (this.isInline) {
classes.push('hds-rich-tooltip__toggle--is-inline');
} else {
classes.push('hds-rich-tooltip__toggle--is-block');
}
// add a class based on the @size argument (if provided)
if (this.size) {
classes.push(`hds-rich-tooltip__toggle--size-${this.size}`);
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("{{!-- IMPORTANT: we need to add \"squishies\" here (~) because otherwise the whitespace added by Ember becomes visible in the underlined text (being an inline element) - See https://handlebarsjs.com/guide/expressions.html#whitespace-control --}}\n<button class={{this.classNames}} ...attributes type=\"button\" aria-describedby={{@popoverId}} aria-expanded={{if @isOpen \"true\" \"false\"}} {{@setupPrimitiveToggle}}>\n {{~#if (has-block)~}}\n {{yield}}\n {{~else~}}\n {{~#if @icon~}}\n {{~#if (eq this.iconPosition \"leading\")~}}\n <HdsIcon class=\"hds-rich-tooltip__toggle-icon\" @name={{@icon}} @isInline={{this.isInline}} />\n {{~/if~}}\n {{~/if~}}\n {{~#if @text~}}\n <span class=\"hds-rich-tooltip__toggle-text\">{{~@text~}}</span>\n {{~/if~}}\n {{~#if @icon~}}\n {{~#if (eq this.iconPosition \"trailing\")~}}\n <HdsIcon class=\"hds-rich-tooltip__toggle-icon\" @name={{@icon}} @isInline={{this.isInline}} />\n {{~/if~}}\n {{~/if~}}\n {{~/if~}}\n</button>", {
strictMode: true,
scope: () => ({
eq,
HdsIcon
})
}), this);
}
}
export { DEFAULT_ICON_POSITION, ICON_POSITIONS, SIZES, HdsRichTooltipToggle as default };
//# sourceMappingURL=toggle.js.map