@hashicorp/design-system-components
Version:
Helios Design System Components
62 lines (59 loc) • 1.95 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import HdsTooltipModifier from '../../../modifiers/hds-tooltip.js';
import { HdsTooltipPlacementValues } from './types.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const PLACEMENTS = Object.values(HdsTooltipPlacementValues);
class HdsTooltip extends Component {
get text() {
const {
text
} = this.args;
assert('@text for "Hds::TooltipButton" must have a valid value', text !== undefined);
return text;
}
get options() {
const {
placement = HdsTooltipPlacementValues.Top,
extraTippyOptions
} = this.args;
assert('@placement for "Hds::TooltipButton" must have a valid value', placement == undefined || PLACEMENTS.includes(placement));
return {
...(extraTippyOptions ? extraTippyOptions : {}),
placement: placement,
// takes array of 2 numbers (skidding, distance): array(0, 10)
offset: this.args.offset ? this.args.offset : [0, 10]
};
}
get isInline() {
const {
isInline = true
} = this.args;
return isInline;
}
get classNames() {
const classes = ['hds-tooltip-button'];
// add a class based on the @isInline argument
if (this.isInline) {
classes.push('hds-tooltip-button--is-inline');
} else {
classes.push('hds-tooltip-button--is-block');
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<button type=\"button\" class={{this.classNames}} {{hdsTooltip this.text options=this.options}} ...attributes>{{~yield~}}</button>", {
strictMode: true,
scope: () => ({
hdsTooltip: HdsTooltipModifier
})
}), this);
}
}
export { PLACEMENTS, HdsTooltip as default };
//# sourceMappingURL=index.js.map