@kelvininc/ui-components
Version:
Kelvin UI Components
123 lines (114 loc) • 10.3 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var absoluteTimePickerDropdown_types = require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
var floatingUi_dom = require('./floating-ui.dom-CxA-aH57.js');
var utils = require('./utils-B3rsVRCe.js');
var cssClass_helper = require('./css-class.helper-B7G6WFT7.js');
var floatingUi_helper = require('./floating-ui.helper-De9v5L3J.js');
var config = require('./config-TIjltaxO.js');
var isEmpty = require('./isEmpty-C_HQvGy-.js');
require('./isNil-B-fGcnNC.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');
require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.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');
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) {
index.registerInstance(this, hostRef);
/** (optional) Defines the badge state.*/
this.state = absoluteTimePickerDropdown_types.EBadgeState.None;
}
render() {
return (index.h(index.Host, { key: 'de71abce325ae677cf19e0d4155386eacbbc4a59' }, index.h("span", { key: '3da24a667078bb7358a5fcf0c55c564c955e1dc2', class: `badge badge--state-${this.state}`, part: "badge" }, index.h("slot", { key: '2fecfb13d5d4a2b88d41dc4b9c97f4b4b45f0baf' }))));
}
};
KvBadge.style = {
light: badgeLightCss,
night: badgeNightCss
};
const DEFAULT_POSITION_CONFIG = {
strategy: 'fixed',
middleware: [floatingUi_dom.offset(5), floatingUi_dom.shift({ padding: 5 })]
};
const DEFAULT_DELAY_CONFIG = 1000;
const DEFAULT_AUTO_PLACEMENT_CONFIG = {
padding: 5
};
const isElementCollapsed = (element) => {
const collapsedElement = utils.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) {
index.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.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.hideTooltipHandler = () => {
this.showTooltip = false;
};
this.showTooltipHandler = () => {
if (this.disabled || (this.truncate && !isElementCollapsed(this.el)))
return;
this.showTooltip = true;
};
}
disconnectedCallback() {
this.showTooltip = false;
}
render() {
return (index.h(index.Host, { key: '46c2baab0215c134191247cd20f89cf46d6f53ba' }, index.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 }, index.h("slot", { key: 'a1e9525c645045b029b37ee8278cd06270328fb5' })), this.showTooltip && !isEmpty.isEmpty(this.text) && (index.h("kv-portal", { key: 'a900bbe7b1cbeb131fb34b02e0ac00a2514173c9', zIndex: config.TOOLTIP_Z_INDEX, show: true, delay: this.delay, withArrow: this.withArrow, animated: true, reference: this.getContentElement(), options: this.getOptions() }, index.h("kv-tooltip-text", { key: '479c0653ce129108e8e1a6c95d1fa43cb02d7cb2', class: Object.assign({}, cssClass_helper.getClassMap(this.customClass)), text: this.text, style: this.customStyle })))));
}
get el() { return index.getElement(this); }
};
exports.kv_badge = KvBadge;
exports.kv_tooltip = KvTooltip;