@aqua-ds/web-components
Version:
AquaDS Web Components
111 lines (104 loc) • 8.27 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { P as Popover } from './popover.js';
const TOOLTIP_CONFIG = {
placement: 'top',
trigger: 'mouseenter',
animation: 'shift-away',
theme: 'material',
hideOnClickOutside: true,
appendTo: document.body,
};
const aqTooltipCss = ".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;font-family:\"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;background-color:#333;color:#fff;border-radius:4px;padding:8px 12px;outline:0;z-index:20;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;-webkit-transform-origin:center top;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;-webkit-transform-origin:center bottom;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;-webkit-transform-origin:center left;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;-webkit-transform-origin:center right;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{-webkit-transition-timing-function:cubic-bezier(0.54, 1.5, 0.38, 1.11);transition-timing-function:cubic-bezier(0.54, 1.5, 0.38, 1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{pointer-events:all;font-size:12px;line-height:1.45;overflow-wrap:break-word;white-space:normal;text-align:center;position:relative;z-index:1}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}[id^=tippy-]{pointer-events:all !important}";
const aqTooltipThemeCss = ".tippy-box[data-theme~=material]{background-color:#505355}.tippy-box[data-theme~=material][data-placement^=top]>.tippy-arrow:before{border-top-color:#505355}.tippy-box[data-theme~=material][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#505355}.tippy-box[data-theme~=material][data-placement^=left]>.tippy-arrow:before{border-left-color:#505355}.tippy-box[data-theme~=material][data-placement^=right]>.tippy-arrow:before{border-right-color:#505355}.tippy-box[data-theme~=material]>.tippy-backdrop{background-color:#505355}.tippy-box[data-theme~=material]>.tippy-svg-arrow{fill:#505355}";
const aqTooltipAnimationCss = ".tippy-box[data-animation=shift-away][data-state=hidden]{opacity:0}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top]{-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom]{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left]{-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right]{-webkit-transform:translateX(-10px);transform:translateX(-10px)}";
const AqTooltip = /*@__PURE__*/ proxyCustomElement(class AqTooltip extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.config = TOOLTIP_CONFIG;
this.isDisabled = false;
this.localConfig = TOOLTIP_CONFIG;
}
onConfigChange(newVal) {
this.localConfig = newVal;
}
onTriggerChange() {
this.getSlot();
this.createTooltip();
}
setDefaultConfig() {
this.localConfig = {
...TOOLTIP_CONFIG,
...this.config,
};
}
setInstance() {
if (!this.isDisabled) {
this.instance = new Popover([this.parent]);
this.instance.buildInstance({
content: this.element,
...this.localConfig,
...this.config,
});
}
}
createTooltip() {
this.setDefaultConfig();
this.setInstance();
}
setParent(el) {
this.parent = el.parentElement;
}
setElement(el) {
this.slot = el;
this.setParent(el);
}
getSlot() {
const slot = this.element;
if (!!slot) {
this.setElement(slot);
}
}
componentWillLoad() {
this.getSlot();
this.setDefaultConfig();
this.onConfigChange(this.config);
}
componentDidLoad() {
this.createTooltip();
}
render() {
return (h(Host, { key: '1de235e11ef180e41fbc09cec70159f97ee3d44f', hidden: this.isDisabled }, h("slot", { key: 'c22e90ac7e6e5d14cc6c73a8ea47470a93d29f8a' })));
}
get element() { return this; }
static get watchers() { return {
"config": ["onConfigChange"],
"trigger": ["onTriggerChange"]
}; }
static get style() { return aqTooltipCss + (aqTooltipThemeCss + aqTooltipAnimationCss); }
}, [260, "aq-tooltip", {
"config": [16],
"trigger": [16],
"isDisabled": [4, "is-disabled"],
"slot": [32],
"parent": [32]
}, undefined, {
"config": ["onConfigChange"],
"trigger": ["onTriggerChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-tooltip"];
components.forEach(tagName => { switch (tagName) {
case "aq-tooltip":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqTooltip);
}
break;
} });
}
export { AqTooltip as A, defineCustomElement as d };