@kelvininc/ui-components
Version:
Kelvin UI Components
209 lines (202 loc) • 9.09 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-D-JVwta2.js';
import { o as offset, b as shift, c as arrow, h as hide, d as computePosition, e as autoUpdate } from './floating-ui.dom-CJTtq_QG.js';
import { c as DEFAULT_PORTAL_Z_INDEX } from './config-CJMopqu5.js';
import { m as mergeComputePositionConfigs } from './floating-ui.helper-CRxs1Qgn.js';
import { i as isNil } from './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 PORTAL_Z_INDEX = {
hidden: -1,
show: DEFAULT_PORTAL_Z_INDEX
};
const OFFSET_WITH_ARROW = 10;
const STATIC_SIDE_OFFSET = '-5px';
const getArrowElementPositionConfig = (x, y, placement) => {
const staticSide = {
top: 'bottom',
right: 'left',
bottom: 'top',
left: 'right'
}[placement.split('-')[0]];
return {
left: x != null ? `${x}px` : '',
top: y != null ? `${y}px` : '',
right: '',
bottom: '',
[staticSide]: STATIC_SIDE_OFFSET,
transform: 'rotate(45deg)'
};
};
const DEFAULT_OFFSET = 5;
const DEFAULT_SHIFT_CONFIG = {
padding: 5
};
const portalCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--portal-arrow-color:var(--kv-neutral-6, #3f3f3f)}.portal-container{visibility:hidden;opacity:0}.portal-container--visible{visibility:visible;opacity:1}.portal-container--visible.portal-container--animated{transition:opacity 0.3s linear}.portal-container .portal-arrow{position:absolute;background:var(--portal-arrow-color);width:10px;height:10px}";
const KvPortal = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.elementAppend = createEvent(this, "elementAppend", 7);
/** @inheritdoc */
this.portalId = 'kv-portal';
/** @inheritdoc */
this.show = false;
/** @inheritdoc */
this.autoUpdate = true;
/** @inheritdoc */
this.animated = false;
/** @inheritdoc */
this.withArrow = false;
/** @inheritdoc */
this.delay = 0;
/** @inheritdoc */
this.zIndex = PORTAL_Z_INDEX.show;
this.visible = false;
this.moved = false;
this.getPortalArrowElement = () => {
return this.element.shadowRoot.querySelector('#portal-arrow');
};
this.getMiddlewareConfig = () => {
const arrowElement = this.getPortalArrowElement();
const offSet = this.withArrow ? OFFSET_WITH_ARROW : DEFAULT_OFFSET;
const middleware = [offset(offSet), shift(DEFAULT_SHIFT_CONFIG)];
if (this.withArrow)
middleware.push(arrow({ element: arrowElement, padding: 5 }));
middleware.push(hide({ padding: 15 }));
return middleware;
};
this.getOptions = () => {
const middleware = this.getMiddlewareConfig();
return mergeComputePositionConfigs({ middleware }, this.options);
};
}
showWatch(newValue) {
if (newValue) {
this.showPortalContent();
}
else {
this.hidePortalContent();
}
}
referenceWatch() {
if (this.show) {
this.showPortalContent();
}
}
createPortal() {
this.portal = document.createElement('div');
this.portal.setAttribute('id', this.portalId);
this.portal.style.zIndex = `${PORTAL_Z_INDEX.hidden}`;
this.portal.style.position = 'absolute';
document.body.prepend(this.portal);
}
moveElementToPortal() {
this.portal.appendChild(this.element);
this.elementAppend.emit(this.element);
}
updatePosition() {
computePosition(this.reference, this.portal, this.getOptions()).then(({ x, y, placement, middlewareData }) => {
if (this.autoUpdate) {
const { referenceHidden } = middlewareData.hide;
if (this.show) {
this.visible = !referenceHidden;
this.portal.style.zIndex = referenceHidden ? `${PORTAL_Z_INDEX.hidden}` : `${this.zIndex}`;
}
}
Object.assign(this.portal.style, {
left: `${x}px`,
top: `${y}px`
});
if (this.withArrow) {
const { x: arrowX, y: arrowY } = middlewareData.arrow;
Object.assign(this.getPortalArrowElement().style, Object.assign({}, getArrowElementPositionConfig(arrowX, arrowY, placement)));
}
});
}
calculatePosition() {
if (!this.reference || !this.portal) {
return;
}
if (this.autoUpdate) {
this.closeAutoUpdate = autoUpdate(this.reference, this.portal, () => this.updatePosition());
}
else {
this.updatePosition();
}
}
showPortalContent() {
if (!this.portal)
return;
this.portal.style.zIndex = `${this.zIndex}`;
if (this.delay) {
this.timeoutId = window.setTimeout(() => {
this.visible = true;
this.calculatePosition();
}, this.delay);
}
else {
this.visible = true;
this.calculatePosition();
}
}
hidePortalContent() {
this.visible = false;
this.portal.style.zIndex = `${PORTAL_Z_INDEX.hidden}`;
if (this.timeoutId) {
window.clearTimeout(this.timeoutId);
this.timeoutId = undefined;
}
if (!isNil(this.closeAutoUpdate)) {
this.closeAutoUpdate();
}
}
componentWillLoad() {
this.createPortal();
}
componentDidLoad() {
this.moveElementToPortal();
if (this.show) {
this.showPortalContent();
}
}
disconnectedCallback() {
var _a;
this.moved ? (_a = this.portal) === null || _a === void 0 ? void 0 : _a.remove() : (this.moved = true);
}
render() {
return (h(Host, { key: 'e126a9c675e066b31335ad772d16a1d9abae7e7e' }, h("div", { key: '234f8c0ffdf00a3040498e23cc5592a49d1eb469', class: { 'portal-container': true, 'portal-container--animated': this.animated, 'portal-container--visible': this.visible } }, h("slot", { key: '3b104007883cc750869559351d1888bffb1f5858' }), this.withArrow && h("div", { key: 'eb44a8ec8f84de9b94f6f41127c72ce8f0cb8d2f', id: "portal-arrow", class: "portal-arrow" }))));
}
get element() { return getElement(this); }
static get watchers() { return {
"show": ["showWatch"],
"reference": ["referenceWatch"]
}; }
};
KvPortal.style = portalCss;
const tooltipTextCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--container-white-space:normal;--container-width:fit-content;--container-max-width:280px}.tooltip-container{height:fit-content;width:var(--container-width);max-width:var(--container-max-width);display:inline-block;word-wrap:break-word;background-color:var(--kv-neutral-6, #3f3f3f);box-shadow:0 8px 16px -4px rgba(var(--kv-neutral-6-rgb, 63, 63, 63), 0.25), 0 0 1px 0 rgba(var(--kv-neutral-3-rgb, 221, 221, 221), 0.31);user-select:none;border-radius:2px;padding:var(--kv-spacing, 4px) var(--kv-spacing-2x, 8px);white-space:var(--container-white-space)}.tooltip-container .tooltip-text{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;line-height:21px;letter-spacing:normal;text-transform:none;color:var(--kv-neutral-2, #e5e5e5)}";
const KvTooltipText = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** @inheritdoc */
this.text = '';
}
render() {
return (h(Host, { key: '277b5f5f6afe392e5657e19268b365359eae3cb5' }, h("div", { key: 'fd7dbf5800f2bc0c2b4143c30364213789de74ba', class: "tooltip-container", part: "tooltip-container" }, this.text && h("div", { key: 'f2997530ada322d521850d251eae279c6f3ea1ea', class: "tooltip-text" }, this.text), h("div", { key: 'efcbeb035cf56668388b59ac214effdcb2fa8df7', class: "tooltip-slot", part: "tooltip-slot-content" }, h("slot", { key: '0fc3e2f0f894f4a9c6b795ee17a18bf090bbbe89' })))));
}
};
KvTooltipText.style = tooltipTextCss;
export { KvPortal as kv_portal, KvTooltipText as kv_tooltip_text };