@sme.up/ketchup 11.0.0-SNAPSHOT-20250806071842 → 11.0.0-SNAPSHOT-20250806091734

package/dist/components/{p-1e55c9d9.js → p-49dfbbc8.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h as h$1, d as Host, F as Fragment$1 } from './p-ef8cbd35.js';
-import { b as KupThemeIconValues, I as ItemsDisplayMode, e as KupLanguageGeneric, a as KupComponentSizing, k as kupManagerInstance, d as KupDynamicPositionPlacement, f as editableTypes, h as kupTypes, F as FCellClasses, i as FCellTypes, c as KupThemeColorValues, C as CHIAdapter, R as RADAdapter, j as CMBandACPAdapter, l as KupTagNames, m as FCellShapes, n as getCellValueForDisplay, o as fullWidthFieldsComps, p as autoCenterComps, q as FCellEvents, r as isForceUppercase, t as isForceLowercase, u as KupDebugCategory, v as adaptContentToDisplayMode, w as FCellPadding, x as fillString, y as KupCardBuiltInClockElements, z as KupCardCSSClasses, A as KupLanguageTotals, B as KupLanguageColumn, D as KupDataNewColumnTypes, E as KupCardSubEvents, G as KupCardIds, H as KupLanguageRow, J as KupLanguageSearch, L as getColumnByName, M as KupObjects, N as formatToNumber, O as Filters, P as getValueForDisplay, Q as getValueForDisplay2, S as KupData, T as compareCell, U as TotalMode, V as getRegExpFromString, W as CHKAdapter, X as SWTAdapter, Y as SortMode, Z as GroupLabelDisplayMode, _ as SelectionMode, $ as KupLanguageGrouping, a0 as KupLanguageCheckbox, a1 as FILTER_ANALYZER, a2 as KupLanguagePage, a3 as addColumnValueFromRow, a4 as KupGlobalFilterMode, g as getProps, s as setProps, a5 as TotalLabel, a6 as isNegativeNumber, a7 as KupPointerEventTypes, a8 as kupDynamicPositionAttribute, a9 as identify, aa as KupListProps, ab as KupCardFamily, ac as KupListRole, ad as KupLanguageUpload, ae as LoadMoreMode, af as PaginatorPos, ag as ShowGrid, ah as kupDraggableColumnAttr, ai as kupDragActiveAttr, aj as KupDragEffect, ak as kupDraggableCellAttr, al as KupDropEventTypes, am as DataTableAreasEnum, an as TypesToDuplicate, ao as FixedCellsClasses, ap as FixedCellsCSSVarsBase, aq as KupLanguageFontsize, ar as KupLanguageDensity, as as KupLanguageGrid, at as KupDataTableProps, au as UseAsValue, av as iconColumn, aw as keyColumn, ax as fieldColumn, ay as getSizeOfInputElement, az as KupCardProps } from './p-fbaf1165.js';
+import { b as KupThemeIconValues, I as ItemsDisplayMode, e as KupLanguageGeneric, a as KupComponentSizing, k as kupManagerInstance, d as KupDynamicPositionPlacement, f as editableTypes, h as kupTypes, F as FCellClasses, i as FCellTypes, c as KupThemeColorValues, C as CHIAdapter, R as RADAdapter, j as CMBandACPAdapter, l as KupTagNames, m as FCellShapes, n as getCellValueForDisplay, o as fullWidthFieldsComps, p as autoCenterComps, q as FCellEvents, r as isForceUppercase, t as isForceLowercase, u as KupDebugCategory, v as adaptContentToDisplayMode, w as FCellPadding, x as fillString, y as KupCardBuiltInClockElements, z as KupCardCSSClasses, A as KupLanguageTotals, B as KupLanguageColumn, D as KupDataNewColumnTypes, E as KupCardSubEvents, G as KupCardIds, H as KupLanguageRow, J as KupLanguageSearch, L as getColumnByName, M as KupObjects, N as formatToNumber, O as Filters, P as getValueForDisplay, Q as getValueForDisplay2, S as KupData, T as compareCell, U as TotalMode, V as getRegExpFromString, W as CHKAdapter, X as SWTAdapter, Y as SortMode, Z as GroupLabelDisplayMode, _ as SelectionMode, $ as KupLanguageGrouping, a0 as KupLanguageCheckbox, a1 as FILTER_ANALYZER, a2 as KupLanguagePage, a3 as addColumnValueFromRow, a4 as KupGlobalFilterMode, g as getProps, s as setProps, a5 as TotalLabel, a6 as isNegativeNumber, a7 as KupPointerEventTypes, a8 as kupDynamicPositionAttribute, a9 as identify, aa as KupListProps, ab as KupCardFamily, ac as KupListRole, ad as KupLanguageUpload, ae as LoadMoreMode, af as PaginatorPos, ag as ShowGrid, ah as kupDraggableColumnAttr, ai as kupDragActiveAttr, aj as KupDragEffect, ak as kupDraggableCellAttr, al as KupDropEventTypes, am as DataTableAreasEnum, an as TypesToDuplicate, ao as FixedCellsClasses, ap as FixedCellsCSSVarsBase, aq as KupLanguageFontsize, ar as KupLanguageDensity, as as KupLanguageGrid, at as KupDataTableProps, au as UseAsValue, av as iconColumn, aw as keyColumn, ax as fieldColumn, ay as getSizeOfInputElement, az as KupCardProps } from './p-593b5f6a.js';
 import { h, g as getAssetPath, F as Fragment } from './p-3aae989f.js';
 import { c as KupDateTimeFormatOptionsMonth, K as KupDatesFormats, a as KupDates } from './p-9d9181cf.js';
 
@@ -1262,6 +1262,7 @@ function createBar(data) {
 const componentWrapperId = 'kup-component';
 
 const dom$k = document.documentElement;
+let helperEl = null;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
@@ -1307,7 +1308,10 @@ function setContent(props) {
         !props.legacyLook // do not show label in input panel absolute ( legacy mode )
     ) {
         labelEl = (h("div", { class: "mdc-text-field__label-container" },
-            h("label", { class: "mdc-label", htmlFor: "kup-input" }, props.label),
+            h("label", { class: "mdc-label", htmlFor: "kup-input" },
+                props.label,
+                props.labelHelper && (h("span", { onPointerMove: (e) => showHelper(e, props.labelHelper), onPointerDown: (e) => showHelper(e, props.labelHelper), onPointerOut: () => hideHelper() },
+                    h(FImage, { resource: "info_outline", wrapperClass: "helper-icon" })))),
             props.maxLength && props.showCounter ? (h("div", { class: "mdc-text-field__label-character-counter" },
                 props.value.length,
                 " / ",
@@ -1563,6 +1567,59 @@ const formatValue = function (value, options, inputIsLocalized) {
     }
     return dom$k.ketchup.math.format(formatedValue, dom$k.ketchup.math.createFormatPattern(options.group, options.decimal), inputIsLocalized);
 };
+const hideHelper = () => {
+    if (helperEl) {
+        helperEl.remove();
+        helperEl = null;
+    }
+};
+const showHelper = (e, text) => {
+    if (!text || text.length === 0) {
+        return;
+    }
+    if (helperEl) {
+        helperEl.innerText = text;
+        positionHelper(helperEl, e);
+    }
+    else {
+        helperEl = document.createElement('div');
+        helperEl.className = 'kup-helper-tooltip';
+        helperEl.innerText = text;
+        document.body.appendChild(helperEl);
+        positionHelper(helperEl, e);
+    }
+};
+const positionHelper = (element, e) => {
+    const padding = 10;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const rect = element.getBoundingClientRect();
+    const elementWidth = rect.width;
+    const elementHeight = rect.height;
+    let left = e.clientX + padding;
+    let top = e.clientY + padding;
+    // Check right edge overflow
+    if (left + elementWidth > viewportWidth) {
+        left = e.clientX - elementWidth - padding;
+        // If still overflowing on the left, align to the right edge
+        if (left < 0) {
+            left = viewportWidth - elementWidth - padding;
+        }
+    }
+    // Check bottom edge overflow
+    if (top + elementHeight > viewportHeight) {
+        top = e.clientY - elementHeight - padding;
+        // If still overflowing on the top, align to the bottom edge
+        if (top < 0) {
+            top = viewportHeight - elementHeight - padding;
+        }
+    }
+    // Ensure minimum padding from edges
+    left = Math.max(padding, Math.min(left, viewportWidth - elementWidth - padding));
+    top = Math.max(padding, Math.min(top, viewportHeight - elementHeight - padding));
+    element.style.left = `${left}px`;
+    element.style.top = `${top}px`;
+};
 
 /**
  * @license
@@ -14312,6 +14369,7 @@ var KupTextFieldProps;
     KupTextFieldProps["integers"] = "Number of integers (should be used when inputType is number).";
     KupTextFieldProps["isClearable"] = "Enables a clear trailing icon.";
     KupTextFieldProps["label"] = "When set, its content will be shown as a label.";
+    KupTextFieldProps["labelHelper"] = "When set, the label will be accompanied by a helper text displayed on hover.";
     KupTextFieldProps["leadingLabel"] = "When set to true, the label will be on the left of the component.";
     KupTextFieldProps["max"] = "The HTML max attribute specifies the maximum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week.";
     KupTextFieldProps["maxLength"] = "When set, the helper will display a character counter.";
@@ -17763,6 +17821,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
         this.integers = null;
         this.isClearable = false;
         this.label = null;
+        this.labelHelper = '';
         this.lightMode = false;
         this.leadingLabel = false;
         this.max = null;
@@ -18000,6 +18059,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
             integers: this.integers,
             isClearable: this.isClearable,
             label: this.label,
+            labelHelper: this.labelHelper,
             leadingLabel: this.leadingLabel,
             lightMode: this.lightMode,
             max: this.max,
@@ -18040,7 +18100,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
             onMinusClick: (e) => this.onKupMinusClick(e),
             onPlusClick: (e) => this.onKupPlusClick(e),
         };
-        return (h$1(Host, { key: 'b8f082aeb4eb8492905f6d1764a78173b51050ae' }, h$1("style", { key: 'a9003aaa284b30efd52e10cd9ba0685583f8a93f' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '3657a6545192aad5b77fc7e45be067d69202f8c6', id: componentWrapperId }, h$1(FTextField, Object.assign({ key: '00c9cd7a6180835ffb709f202049709e2fae678d' }, props)))));
+        return (h$1(Host, { key: '18e06100494e2ea81d427de84d97e1f6674e2d17' }, h$1("style", { key: 'ab2ac80c5f3557f9b88d50c000d011bd3b88c169' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '07e5298b796e91e17e5ad48f4a15cf6eebd348db', id: componentWrapperId }, h$1(FTextField, Object.assign({ key: 'f933036f6ce0975caff1d10dad34bcccf3f681b2' }, props)))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);
@@ -18069,6 +18129,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
         "integers": [2],
         "isClearable": [4, "is-clearable"],
         "label": [1],
+        "labelHelper": [1, "label-helper"],
         "lightMode": [4, "light-mode"],
         "leadingLabel": [4, "leading-label"],
         "max": [2],
@@ -24118,7 +24179,7 @@ const KupDatePicker = /*@__PURE__*/ proxyCustomElement(class KupDatePicker exten
                 showPreviousNextMonthDays: this.showPreviousNextMonthDays,
             },
         };
-        return (h$1(Host, { key: 'a03e07c3e6d570fbb5a8e8769a02b4aa348e9380' }, h$1("style", { key: '816dfa6ef5fd2127a376e068ba8fcfbc1dfb21c8' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: 'e4bb69bdc77b97e8350bfa3b2a957209a477af9f', id: componentWrapperId }, h$1(FTextField, Object.assign({ key: '6d291279dd6b655608099114e025d5b01c1393ed' }, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, maxLength: (_a = textfieldData.maxLength) !== null && _a !== void 0 ? _a : 10, size: 10, id: this.rootElement.id + '_text-field', value: this.getDateForOutput(), onBlur: () => this.onKupBlur(), onChange: (e) => this.onKupChange(e), onClearIconClick: () => this.onKupClearIconClick(), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onInput: (e) => this.onKupInput(e) }), h$1("div", { key: '9cdc2b185d39e8433be1a71ff606ef25305ee61a', id: this.rootElement.id + '_card', class: "kup-date-picker-card" }, h$1("kup-card", { key: '3e60a51375f3014510f7278de2a05a29043965ac', ref: (el) => (this.pickerContainerEl = el), data: cardData, layoutFamily: KupCardFamily.BUILT_IN, sizeX: "300px", sizeY: "auto", isMenu: true, "onkup-card-click": (ev) => {
+        return (h$1(Host, { key: '8bcb6f197235c9cd0203a9fecaab37dc0ae5a2bf' }, h$1("style", { key: 'e6a9099066aae81d1bc39077c517d03f5b6031a5' }, this.kupManager.theme.setKupStyle(this.rootElement)), h$1("div", { key: '6c61534fc0b5c81468d15287a692632cd6e121ba', id: componentWrapperId }, h$1(FTextField, Object.assign({ key: 'f3bdeef877245f6da44dbca089d0c7a5f364c2b8' }, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, maxLength: (_a = textfieldData.maxLength) !== null && _a !== void 0 ? _a : 10, size: 10, id: this.rootElement.id + '_text-field', value: this.getDateForOutput(), onBlur: () => this.onKupBlur(), onChange: (e) => this.onKupChange(e), onClearIconClick: () => this.onKupClearIconClick(), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onInput: (e) => this.onKupInput(e) }), h$1("div", { key: '3ffa90677062a6ee2978d875eb7f78c1497147fb', id: this.rootElement.id + '_card', class: "kup-date-picker-card" }, h$1("kup-card", { key: '5d5e36d3034754d36b7c4fbd4bb992a337d32e6b', ref: (el) => (this.pickerContainerEl = el), data: cardData, layoutFamily: KupCardFamily.BUILT_IN, sizeX: "300px", sizeY: "auto", isMenu: true, "onkup-card-click": (ev) => {
                 if (ev.detail.value != null &&
                     ev.detail.value != '')
                     this.onKupDatePickerItemClick(ev.detail.value);