var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var media_tooltip_exports = {};
__export(media_tooltip_exports, {
Attributes: () => Attributes,
default: () => media_tooltip_default
});
module.exports = __toCommonJS(media_tooltip_exports);
var import_element_utils = require("./utils/element-utils.js");
var import_server_safe_globals = require("./utils/server-safe-globals.js");
const Attributes = {
PLACEMENT: "placement",
BOUNDS: "bounds"
};
const template = import_server_safe_globals.document.createElement("template");
template.innerHTML = /*html*/
`
`;
class MediaTooltip extends import_server_safe_globals.globalThis.HTMLElement {
constructor() {
super();
// Adjusts tooltip position relative to the closest specified container
// such that it doesn't spill out of the left or right sides. Only applies
// to 'top' and 'bottom' placed tooltips.
this.updateXOffset = () => {
var _a;
if (!(0, import_element_utils.isElementVisible)(this, { checkOpacity: false, checkVisibilityCSS: false }))
return;
const placement = this.placement;
if (placement === "left" || placement === "right") {
this.style.removeProperty("--media-tooltip-offset-x");
return;
}
const tooltipStyle = getComputedStyle(this);
const containingEl = (_a = (0, import_element_utils.closestComposedNode)(this, "#" + this.bounds)) != null ? _a : (0, import_element_utils.getMediaController)(this);
if (!containingEl)
return;
const { x: containerX, width: containerWidth } = containingEl.getBoundingClientRect();
const { x: tooltipX, width: tooltipWidth } = this.getBoundingClientRect();
const tooltipRight = tooltipX + tooltipWidth;
const containerRight = containerX + containerWidth;
const offsetXVal = tooltipStyle.getPropertyValue(
"--media-tooltip-offset-x"
);
const currOffsetX = offsetXVal ? parseFloat(offsetXVal.replace("px", "")) : 0;
const marginVal = tooltipStyle.getPropertyValue(
"--media-tooltip-container-margin"
);
const currMargin = marginVal ? parseFloat(marginVal.replace("px", "")) : 0;
const leftDiff = tooltipX - containerX + currOffsetX - currMargin;
const rightDiff = tooltipRight - containerRight + currOffsetX + currMargin;
if (leftDiff < 0) {
this.style.setProperty("--media-tooltip-offset-x", `${leftDiff}px`);
return;
}
if (rightDiff > 0) {
this.style.setProperty("--media-tooltip-offset-x", `${rightDiff}px`);
return;
}
this.style.removeProperty("--media-tooltip-offset-x");
};
if (!this.shadowRoot) {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
this.arrowEl = this.shadowRoot.querySelector("#arrow");
if (Object.prototype.hasOwnProperty.call(this, "placement")) {
const placement = this.placement;
delete this.placement;
this.placement = placement;
}
}
static get observedAttributes() {
return [Attributes.PLACEMENT, Attributes.BOUNDS];
}
/**
* Get or set tooltip placement
*/
get placement() {
return (0, import_element_utils.getStringAttr)(this, Attributes.PLACEMENT);
}
set placement(value) {
(0, import_element_utils.setStringAttr)(this, Attributes.PLACEMENT, value);
}
/**
* Get or set tooltip container ID selector that will constrain the tooltips
* horizontal position.
*/
get bounds() {
return (0, import_element_utils.getStringAttr)(this, Attributes.BOUNDS);
}
set bounds(value) {
(0, import_element_utils.setStringAttr)(this, Attributes.BOUNDS, value);
}
}
if (!import_server_safe_globals.globalThis.customElements.get("media-tooltip")) {
import_server_safe_globals.globalThis.customElements.define("media-tooltip", MediaTooltip);
}
var media_tooltip_default = MediaTooltip;