@kelvininc/ui-components
Version:
Kelvin UI Components
81 lines (76 loc) • 4.16 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BOTigrTZ.js';
import { a as autoPlacement } from './floating-ui.dom-CJTtq_QG.js';
import { a as getClassMap } from './css-class.helper-DCOsOAOy.js';
import { d as didClickOnElement } from './mouse-event.helper-CImXQnlm.js';
import { T as TOGGLE_TIP_Z_INDEX } from './config-DfTrc9q6.js';
import { m as mergeComputePositionConfigs } from './floating-ui.helper-BoQ1sJsH.js';
import { i as isEmpty } from './isEmpty-DYR6-7ab.js';
import './wizard.types-COrzvkrr.js';
import './isNil-DjSNdVAB.js';
import './_baseMerge-ECDD_Loo.js';
import './identity-CK4jS9_E.js';
import './isObject-Dkd2PDJ-.js';
import './_setToArray-WfAeX5vN.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}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}.toggle-tip-open-element-container{width:fit-content;height:fit-content}.toggle-tip-container::part(tooltip-container){padding:var(--spacing-xl)}";
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: 'd21c9a4f083cd9b24b327f6ddd79e54a509ddfaa' }, h("div", { key: 'ae22ad1af1bb99534dc0008862259564a091cb5c', ref: el => (this.openElement = el), onClick: this.onButtonClick, class: "toggle-tip-open-element-container" }, h("slot", { key: 'aed47673a0867fc484fb955c8abaa35712081725', name: "open-element-slot" })), h("kv-portal", { key: '832174f0a296cafadc90a8505d513357dcbaf5df', 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: 'f2a6895e0b3ec8a3413f0302cfaba537ec0c8a26', class: Object.assign({ 'toggle-tip-container': true }, getClassMap(this.customClass)), text: this.text }, h("div", { key: '8f66451e6f0df808d941b3726f9e91cea009801b' }, h("slot", { key: '07da6324217c837885abb25d5d9bb7672b156dbf', name: "content-slot" }))))));
}
get el() { return getElement(this); }
};
KvToggleTip.style = toggleTipCss;
export { KvToggleTip as kv_toggle_tip };