@kelvininc/ui-components
Version:
Kelvin UI Components
212 lines (204 loc) • 9.17 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var floatingUi_dom = require('./floating-ui.dom-CxA-aH57.js');
var config = require('./config-TIjltaxO.js');
var floatingUi_helper = require('./floating-ui.helper-De9v5L3J.js');
var isNil = 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 PORTAL_Z_INDEX = {
hidden: -1,
show: config.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) {
index.registerInstance(this, hostRef);
this.elementAppend = index.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 = [floatingUi_dom.offset(offSet), floatingUi_dom.shift(DEFAULT_SHIFT_CONFIG)];
if (this.withArrow)
middleware.push(floatingUi_dom.arrow({ element: arrowElement, padding: 5 }));
middleware.push(floatingUi_dom.hide({ padding: 15 }));
return middleware;
};
this.getOptions = () => {
const middleware = this.getMiddlewareConfig();
return floatingUi_helper.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() {
floatingUi_dom.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 = floatingUi_dom.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.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 (index.h(index.Host, { key: 'e126a9c675e066b31335ad772d16a1d9abae7e7e' }, index.h("div", { key: '234f8c0ffdf00a3040498e23cc5592a49d1eb469', class: { 'portal-container': true, 'portal-container--animated': this.animated, 'portal-container--visible': this.visible } }, index.h("slot", { key: '3b104007883cc750869559351d1888bffb1f5858' }), this.withArrow && index.h("div", { key: 'eb44a8ec8f84de9b94f6f41127c72ce8f0cb8d2f', id: "portal-arrow", class: "portal-arrow" }))));
}
get element() { return index.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) {
index.registerInstance(this, hostRef);
/** @inheritdoc */
this.text = '';
}
render() {
return (index.h(index.Host, { key: '277b5f5f6afe392e5657e19268b365359eae3cb5' }, index.h("div", { key: 'fd7dbf5800f2bc0c2b4143c30364213789de74ba', class: "tooltip-container", part: "tooltip-container" }, this.text && index.h("div", { key: 'f2997530ada322d521850d251eae279c6f3ea1ea', class: "tooltip-text" }, this.text), index.h("div", { key: 'efcbeb035cf56668388b59ac214effdcb2fa8df7', class: "tooltip-slot", part: "tooltip-slot-content" }, index.h("slot", { key: '0fc3e2f0f894f4a9c6b795ee17a18bf090bbbe89' })))));
}
};
KvTooltipText.style = tooltipTextCss;
exports.kv_portal = KvPortal;
exports.kv_tooltip_text = KvTooltipText;