@kelvininc/ui-components
Version:
Kelvin UI Components
83 lines (77 loc) • 4.24 kB
JavaScript
'use strict';
var index = require('./index-rNNWWpit.js');
var floatingUi_dom = require('./floating-ui.dom-CxA-aH57.js');
var cssClass_helper = require('./css-class.helper-h-CvPc5n.js');
var mouseEvent_helper = require('./mouse-event.helper-D8ZVsFab.js');
var config = require('./config-dyyw7PBD.js');
var floatingUi_helper = require('./floating-ui.helper-BjHCIcoS.js');
var isEmpty = require('./isEmpty-CqcsgK-A.js');
require('./wizard.types-C9Yhv1tt.js');
require('./isNil-B-fGcnNC.js');
require('./_baseMerge-Bq8HwF_X.js');
require('./identity-Dz5mxHaJ.js');
require('./isObject-COPdF2vE.js');
require('./_setToArray-B2anilK2.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) {
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: 'd21c9a4f083cd9b24b327f6ddd79e54a509ddfaa' }, index.h("div", { key: 'ae22ad1af1bb99534dc0008862259564a091cb5c', ref: el => (this.openElement = el), onClick: this.onButtonClick, class: "toggle-tip-open-element-container" }, index.h("slot", { key: 'aed47673a0867fc484fb955c8abaa35712081725', name: "open-element-slot" })), index.h("kv-portal", { key: '832174f0a296cafadc90a8505d513357dcbaf5df', 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: 'f2a6895e0b3ec8a3413f0302cfaba537ec0c8a26', class: Object.assign({ 'toggle-tip-container': true }, cssClass_helper.getClassMap(this.customClass)), text: this.text }, index.h("div", { key: '8f66451e6f0df808d941b3726f9e91cea009801b' }, index.h("slot", { key: '07da6324217c837885abb25d5d9bb7672b156dbf', name: "content-slot" }))))));
}
get el() { return index.getElement(this); }
};
KvToggleTip.style = toggleTipCss;
exports.kv_toggle_tip = KvToggleTip;