@kelvininc/ui-components
Version:
Kelvin UI Components
95 lines (89 loc) • 4.68 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var floatingUi_dom = require('./floating-ui.dom-CxA-aH57.js');
var cssClass_helper = require('./css-class.helper-B7G6WFT7.js');
var mouseEvent_helper = require('./mouse-event.helper-D3vPaJ0b.js');
var config = require('./config-TIjltaxO.js');
var floatingUi_helper = require('./floating-ui.helper-De9v5L3J.js');
var isEmpty = require('./isEmpty-C_HQvGy-.js');
require('./isNil-B-fGcnNC.js');
require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.js');
require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
require('./icon.types-B8lvUrX_.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.js');
require('./_baseMerge-wzi7o0GG.js');
require('./identity-Dz5mxHaJ.js');
require('./_MapCache-DqKaXYoi.js');
require('./_Map-DiT24PAz.js');
require('./isObject-COPdF2vE.js');
require('./_Set-BIUoGFN6.js');
require('./_setToArray-NLXd6WvX.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) {
index.registerInstance(this, hostRef);
this.openStateChange = index.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.isEmpty(this.allowedPositions) ? this.position : undefined;
const middleware = [];
if (!isEmpty.isEmpty(this.allowedPositions) && isEmpty.isEmpty(placement)) {
middleware.push(floatingUi_dom.autoPlacement(Object.assign(Object.assign({}, DEFAULT_AUTO_PLACEMENT_CONFIG), { allowedPlacements: this.allowedPositions })));
}
return floatingUi_helper.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 (mouseEvent_helper.didClickOnElement(this.portal, event) || mouseEvent_helper.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 (index.h(index.Host, { key: 'b1f906d3722e716415d2d3c28947b741f0999e01' }, index.h("div", { key: '33f70fe3397750231db9c2e8150a88d3dae1ef56', ref: el => (this.openElement = el), onClick: this.onButtonClick, class: "toggle-tip-open-element-container" }, index.h("slot", { key: '19dc8d6cc5fb8a7d2fcb6aa27017d0d31adaa76c', name: "open-element-slot" })), index.h("kv-portal", { key: 'de8fc57324a0a7aae3226cadc576e8ba26007330', zIndex: config.TOGGLE_TIP_Z_INDEX, ref: el => (this.portal = el), withArrow: this.withArrow, animated: true, show: this.isOpen, reference: this.openElement, options: this.getOptions() }, index.h("kv-tooltip-text", { key: '07935d0ff814c5abb81867e29eb20a7078fc3fa4', class: Object.assign({ 'toggle-tip-container': true }, cssClass_helper.getClassMap(this.customClass)), text: this.text }, index.h("div", { key: 'b25195d4018c74a6e4b65e12a85e80d96beffbe7' }, index.h("slot", { key: 'f8b33d9087b0d9e956d302b8023fd9af695f1af8', name: "content-slot" }))))));
}
get el() { return index.getElement(this); }
};
KvToggleTip.style = toggleTipCss;
exports.kv_toggle_tip = KvToggleTip;