@hashicorp/design-system-components
Version:
Helios Design System Components
59 lines (56 loc) • 2.29 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import style from 'ember-style-modifier';
import { DEFAULT_PLACEMENT, PLACEMENTS } from '../../../modifiers/hds-anchored-position.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
class HdsRichTooltipBubble extends Component {
get placement() {
const {
placement = DEFAULT_PLACEMENT
} = this.args;
assert(` for "Hds::RichTooltip::Bubble" must be one of the following: ${PLACEMENTS.join(', ')}; received: ${placement}`, PLACEMENTS.includes(placement));
return placement;
}
get enableCollisionDetection() {
return this.args.enableCollisionDetection ?? true;
}
get sizingStyles() {
const sizingStyles = {};
if (this.args.width) {
sizingStyles['width'] = this.args.width;
sizingStyles['max-width'] = 'none';
}
if (this.args.height) {
sizingStyles['height'] = this.args.height;
sizingStyles['max-height'] = 'none';
}
return sizingStyles;
}
get anchoredPositionOptions() {
// custom options specific for the `RichTooltip` component
// for details see the `hds-anchored-position` modifier
return {
placement: this.placement,
offsetOptions: this.args.offset ?? 12,
enableCollisionDetection: this.args.enableCollisionDetection ?? true,
arrowSelector: `#${this.args.arrowId}`,
arrowPadding: 12,
boundary: this.args.boundary
};
}
static {
setComponentTemplate(precompileTemplate("<div class=\"hds-rich-tooltip__bubble\" ...attributes id={{@popoverId}} tabindex=\"-1\" role=\"tooltip\" aria-hidden={{(unless @isOpen true)}} {{style this.sizingStyles}} {{@setupPrimitivePopover anchoredPositionOptions=this.anchoredPositionOptions}}>\n <div class=\"hds-rich-tooltip__bubble-arrow\" id={{@arrowId}} />\n {{#if @isOpen}}\n <div class=\"hds-rich-tooltip__bubble-inner-content\">\n {{yield}}\n </div>\n {{/if}}\n</div>", {
strictMode: true,
scope: () => ({
style
})
}), this);
}
}
export { HdsRichTooltipBubble as default };
//# sourceMappingURL=bubble.js.map