@kelvininc/ui-components
Version:
Kelvin UI Components
93 lines (88 loc) • 4.57 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D-JVwta2.js';
import { a as autoPlacement } from './floating-ui.dom-CJTtq_QG.js';
import { g as getClassMap } from './css-class.helper-DKOxy79t.js';
import { d as didClickOnElement } from './mouse-event.helper-GA0HsMY0.js';
import { T as TOGGLE_TIP_Z_INDEX } from './config-CJMopqu5.js';
import { m as mergeComputePositionConfigs } from './floating-ui.helper-CRxs1Qgn.js';
import { i as isEmpty } from './isEmpty-BAGi1PqI.js';
import './isNil-DjSNdVAB.js';
import './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.js';
import './absolute-time-picker-dropdown.types-CojoW2Y2.js';
import './icon.types-SVedE_O8.js';
import './summary-card.types-BcMhjKoS.js';
import './toaster.types-vhHhaF4Q.js';
import './tree-item.types-CBuzk8fR.js';
import './tag-alarm.types-DHk26cGe.js';
import './wizard.types-7ioMFMb5.js';
import './_baseMerge-CgbDsiSj.js';
import './identity-CK4jS9_E.js';
import './_MapCache-nTWrGhJJ.js';
import './_Map-B6Xd0L4K.js';
import './isObject-Dkd2PDJ-.js';
import './_Set-B7Zkvu4X.js';
import './_setToArray-Dlhbjm-M.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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 getElement(this); }
};
KvToggleTip.style = toggleTipCss;
export { KvToggleTip as kv_toggle_tip };