@kelvininc/ui-components
Version:
Kelvin UI Components
120 lines (112 loc) • 10.1 kB
JavaScript
import { r as registerInstance, h, H as Host, g as getElement } from './index-D-JVwta2.js';
import { d as EBadgeState } from './absolute-time-picker-dropdown.types-CojoW2Y2.js';
import { o as offset, b as shift, a as autoPlacement } from './floating-ui.dom-CJTtq_QG.js';
import { b as getCollapsedElement } from './utils-Cx1GRYZc.js';
import { g as getClassMap } from './css-class.helper-DKOxy79t.js';
import { m as mergeComputePositionConfigs } from './floating-ui.helper-CRxs1Qgn.js';
import { b as TOOLTIP_Z_INDEX } from './config-CJMopqu5.js';
import { i as isEmpty } from './isEmpty-BAGi1PqI.js';
import './isNil-DjSNdVAB.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';
import './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.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';
const badgeLightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--badge-min-width:16px;--badge-max-width:fit-content;--badge-height:16px;--badge-width:unset}.badge{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;justify-content:center;min-width:var(--badge-min-width);max-width:var(--badge-max-width);height:var(--badge-height);width:var(--badge-width);padding:0 var(--kv-spacing, 4px);line-height:var(--badge-height);border-radius:8px}.badge--state-none{color:var(--badge-text-color-none);background-color:var(--badge-background-color-none)}.badge--state-info{color:var(--badge-text-color-info);background-color:var(--badge-background-color-info)}.badge--state-warning{color:var(--badge-text-color-warning);background-color:var(--badge-background-color-warning)}.badge--state-error{color:var(--badge-text-color-error);background-color:var(--badge-background-color-error)}.badge--state-success{color:var(--badge-text-color-success);background-color:var(--badge-background-color-success)}@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--badge-min-width:16px;--badge-max-width:fit-content;--badge-height:16px;--badge-width:unset}.badge{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;justify-content:center;min-width:var(--badge-min-width);max-width:var(--badge-max-width);height:var(--badge-height);width:var(--badge-width);padding:0 var(--kv-spacing, 4px);line-height:var(--badge-height);border-radius:8px}.badge--state-none{color:var(--badge-text-color-none);background-color:var(--badge-background-color-none)}.badge--state-info{color:var(--badge-text-color-info);background-color:var(--badge-background-color-info)}.badge--state-warning{color:var(--badge-text-color-warning);background-color:var(--badge-background-color-warning)}.badge--state-error{color:var(--badge-text-color-error);background-color:var(--badge-background-color-error)}.badge--state-success{color:var(--badge-text-color-success);background-color:var(--badge-background-color-success)}:host{--badge-background-color-none:var(--kv-neutral-6, #3f3f3f);--badge-text-color-none:var(--kv-neutral-2, #e5e5e5);--badge-background-color-info:var(--kv-secondary-5, #8358fe);--badge-text-color-info:var(--kv-neutral-2, #e5e5e5);--badge-background-color-warning:var(--kv-warning, #ffc043);--badge-text-color-warning:var(--kv-neutral-0, #fff);--badge-background-color-error:var(--kv-error, #e11900);--badge-text-color-error:var(--kv-neutral-0, #fff);--badge-background-color-success:var(--kv-success, #05a357);--badge-text-color-success:var(--kv-neutral-0, #fff)}";
const badgeNightCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--badge-min-width:16px;--badge-max-width:fit-content;--badge-height:16px;--badge-width:unset}.badge{font-family:var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");font-size:10px;font-weight:400;font-stretch:normal;font-style:normal;line-height:15px;letter-spacing:normal;text-transform:none;display:flex;align-items:center;justify-content:center;min-width:var(--badge-min-width);max-width:var(--badge-max-width);height:var(--badge-height);width:var(--badge-width);padding:0 var(--kv-spacing, 4px);line-height:var(--badge-height);border-radius:8px}.badge--state-none{color:var(--badge-text-color-none);background-color:var(--badge-background-color-none)}.badge--state-info{color:var(--badge-text-color-info);background-color:var(--badge-background-color-info)}.badge--state-warning{color:var(--badge-text-color-warning);background-color:var(--badge-background-color-warning)}.badge--state-error{color:var(--badge-text-color-error);background-color:var(--badge-background-color-error)}.badge--state-success{color:var(--badge-text-color-success);background-color:var(--badge-background-color-success)}:host{--badge-background-color-none:var(--kv-neutral-6, #3f3f3f);--badge-text-color-none:var(--kv-neutral-2, #e5e5e5);--badge-background-color-info:var(--kv-secondary-5, #8358fe);--badge-text-color-info:var(--kv-neutral-2, #e5e5e5);--badge-background-color-warning:var(--kv-warning, #ffc043);--badge-text-color-warning:var(--kv-neutral-0, #fff);--badge-background-color-error:var(--kv-error, #e11900);--badge-text-color-error:var(--kv-neutral-0, #fff);--badge-background-color-success:var(--kv-success, #05a357);--badge-text-color-success:var(--kv-neutral-0, #fff)}";
const KvBadge = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** (optional) Defines the badge state.*/
this.state = EBadgeState.None;
}
render() {
return (h(Host, { key: 'de71abce325ae677cf19e0d4155386eacbbc4a59' }, h("span", { key: '3da24a667078bb7358a5fcf0c55c564c955e1dc2', class: `badge badge--state-${this.state}`, part: "badge" }, h("slot", { key: '2fecfb13d5d4a2b88d41dc4b9c97f4b4b45f0baf' }))));
}
};
KvBadge.style = {
light: badgeLightCss,
night: badgeNightCss
};
const DEFAULT_POSITION_CONFIG = {
strategy: 'fixed',
middleware: [offset(5), shift({ padding: 5 })]
};
const DEFAULT_DELAY_CONFIG = 1000;
const DEFAULT_AUTO_PLACEMENT_CONFIG = {
padding: 5
};
const isElementCollapsed = (element) => {
const collapsedElement = getCollapsedElement(Array.from(element.childNodes));
if (collapsedElement !== undefined) {
const range = new Range();
range.selectNodeContents(collapsedElement);
const { width: rectWidth } = range.getBoundingClientRect();
const { clientWidth: collapsedWidth } = collapsedElement;
// once rectWidth comes as a real value and collapsedWidth as a rounded value, this calculation was incorrect.
if (collapsedWidth >= Math.round(rectWidth))
return false;
}
return true;
};
const KvTooltip = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** @inheritdoc */
this.text = '';
/** @inheritdoc */
this.options = DEFAULT_POSITION_CONFIG;
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.contentElement = null;
/** @inheritdoc */
this.truncate = false;
/** @inheritdoc */
this.delay = DEFAULT_DELAY_CONFIG;
/** @inheritdoc */
this.withArrow = false;
/** @inheritdoc */
this.customClass = '';
this.showTooltip = false;
this.getContentElement = () => {
var _a;
return (_a = this.contentElement) !== null && _a !== void 0 ? _a : this.tooltipContent;
};
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.hideTooltipHandler = () => {
this.showTooltip = false;
};
this.showTooltipHandler = () => {
if (this.disabled || (this.truncate && !isElementCollapsed(this.el)))
return;
this.showTooltip = true;
};
}
disconnectedCallback() {
this.showTooltip = false;
}
render() {
return (h(Host, { key: '46c2baab0215c134191247cd20f89cf46d6f53ba' }, h("div", { key: '4320d2ac877236f4df38de8f450bb1a475e52cc2', id: "content", part: "content", ref: el => (this.tooltipContent = el), onMouseOver: this.showTooltipHandler, onMouseOut: this.hideTooltipHandler, onBlur: this.hideTooltipHandler, onClick: this.hideTooltipHandler }, h("slot", { key: 'a1e9525c645045b029b37ee8278cd06270328fb5' })), this.showTooltip && !isEmpty(this.text) && (h("kv-portal", { key: 'a900bbe7b1cbeb131fb34b02e0ac00a2514173c9', zIndex: TOOLTIP_Z_INDEX, show: true, delay: this.delay, withArrow: this.withArrow, animated: true, reference: this.getContentElement(), options: this.getOptions() }, h("kv-tooltip-text", { key: '479c0653ce129108e8e1a6c95d1fa43cb02d7cb2', class: Object.assign({}, getClassMap(this.customClass)), text: this.text, style: this.customStyle })))));
}
get el() { return getElement(this); }
};
export { KvBadge as kv_badge, KvTooltip as kv_tooltip };