@kelvininc/ui-components
Version:
Kelvin UI Components
111 lines (106 loc) • 5.11 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { d as defineCustomElement$2, b as autoPlacement } from './p-BIWUEm1f.js';
import { g as getClassMap } from './p-DKOxy79t.js';
import { d as didClickOnElement } from './p-Dhw0q1D8.js';
import { c as TOGGLE_TIP_Z_INDEX } from './p-BEvgYojK.js';
import { m as mergeComputePositionConfigs } from './p-tvmoGbWd.js';
import { d as defineCustomElement$1 } from './p-BuaFqlfN.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
const DEFAULT_TOOLTIP_CONFIG = {
strategy: 'fixed'
};
const DEFAULT_AUTO_PLACEMENT_CONFIG = {
padding: 5
};
const toggleTipCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}.toggle-tip-open-element-container{width:fit-content;height:fit-content}.toggle-tip-container::part(tooltip-container){padding:var(--kv-spacing-3x, 12px)}";
const KvToggleTip = /*@__PURE__*/ proxyCustomElement(class KvToggleTip extends H {
constructor() {
super();
this.__registerHost();
this.openStateChange = createEvent(this, "openStateChange", 7);
/** @inheritdoc */
this.options = DEFAULT_TOOLTIP_CONFIG;
/** @inheritdoc */
this.isOpen = false;
/** @inheritdoc */
this.isFixed = false;
/** @inheritdoc */
this.withArrow = false;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.customClass = '';
this.getOptions = () => {
const placement = isEmpty(this.allowedPositions) ? this.position : undefined;
const middleware = [];
if (!isEmpty(this.allowedPositions) && isEmpty(placement)) {
middleware.push(autoPlacement(Object.assign(Object.assign({}, DEFAULT_AUTO_PLACEMENT_CONFIG), { allowedPlacements: this.allowedPositions })));
}
return mergeComputePositionConfigs({ placement, middleware }, this.options);
};
this.onButtonClick = () => {
if (this.disabled) {
return;
}
this.isOpen = !this.isOpen;
this.openStateChange.emit(this.isOpen);
};
}
checkForClickOutside(event) {
if (!this.isFixed) {
// Check if clicked inside the toggle tip
if (didClickOnElement(this.portal, event) || didClickOnElement(this.openElement, event)) {
return;
}
if (this.isOpen) {
this.isOpen = false;
this.openStateChange.emit(false);
}
}
}
disconnectedCallback() {
// Requires deleting portal from outside KvPortal because KvPortal is moved to global context
// and would only be destroyed when the global context is destroyed.
this.portal.remove();
}
render() {
return (h(Host, { key: 'b1f906d3722e716415d2d3c28947b741f0999e01' }, h("div", { key: '33f70fe3397750231db9c2e8150a88d3dae1ef56', ref: el => (this.openElement = el), onClick: this.onButtonClick, class: "toggle-tip-open-element-container" }, h("slot", { key: '19dc8d6cc5fb8a7d2fcb6aa27017d0d31adaa76c', name: "open-element-slot" })), h("kv-portal", { key: 'de8fc57324a0a7aae3226cadc576e8ba26007330', zIndex: TOGGLE_TIP_Z_INDEX, ref: el => (this.portal = el), withArrow: this.withArrow, animated: true, show: this.isOpen, reference: this.openElement, options: this.getOptions() }, h("kv-tooltip-text", { key: '07935d0ff814c5abb81867e29eb20a7078fc3fa4', class: Object.assign({ 'toggle-tip-container': true }, getClassMap(this.customClass)), text: this.text }, h("div", { key: 'b25195d4018c74a6e4b65e12a85e80d96beffbe7' }, h("slot", { key: 'f8b33d9087b0d9e956d302b8023fd9af695f1af8', name: "content-slot" }))))));
}
get el() { return this; }
static get style() { return toggleTipCss; }
}, [4, "kv-toggle-tip", {
"text": [513],
"position": [513],
"allowedPositions": [16, "allowed-positions"],
"options": [16],
"isOpen": [1540, "is-open"],
"isFixed": [516, "is-fixed"],
"withArrow": [516, "with-arrow"],
"disabled": [516],
"customClass": [513, "custom-class"]
}, [[8, "click", "checkForClickOutside"]]]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-toggle-tip", "kv-portal", "kv-tooltip-text"];
components.forEach(tagName => { switch (tagName) {
case "kv-toggle-tip":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvToggleTip);
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvToggleTip as K, defineCustomElement as d };