@sme.up/ketchup 4.2.0-SNAPSHOT → 4.3.0-SNAPSHOT

package/dist/collection/components/kup-time-picker/kup-time-picker.js

@@ -1,13 +1,13 @@
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch, } from '@stencil/core';
 import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
 import { isValidFormattedStringTime, formattedStringToCustomUnformattedStringTime, unformattedStringToFormattedStringTime, formatTime, getProps, setProps, } from '../../utils/utils';
-import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
 import { KupTimePickerProps, } from './kup-time-picker-declarations';
 import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupDatesFormats } from '../../utils/kup-dates/kup-dates-declarations';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
+import { KupDynamicPositionPlacement } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
 export class KupTimePicker {
   constructor() {
     /*-------------------------------------------------*/
@@ -69,10 +69,9 @@ export class KupTimePicker {
     this.hoursActive = true;
     this.minutesActive = false;
     this.secondsActive = false;
+    this.textFieldContainerEl = undefined;
     this.textfieldEl = undefined;
-    this.pickerContainerEl = undefined;
-    this.pickerEl = undefined;
-    this.pickerOpened = false;
+    this.pickerKupEl = undefined;
     this.clickCb = null;
   }
   onKupTimePickerItemClick(e, value) {
@@ -92,6 +91,7 @@ export class KupTimePicker {
       id: this.rootElement.id,
       value: this.value,
     });
+    this.setFocus();
   }
   onKupClearIconClick() {
     this.setPickerValueSelected('');
@@ -213,7 +213,7 @@ export class KupTimePicker {
    */
   async setFocus() {
     if (this.textfieldEl != null) {
-      this.textfieldEl.setFocus();
+      this.textfieldEl.focus();
     }
   }
   /**
@@ -274,61 +274,61 @@ export class KupTimePicker {
     return this.value;
   }
   openPicker() {
-    let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = true;
-    this.setClockViewActive(true, false, false);
-    if (textfieldEl != null) {
-      textfieldEl.classList.add('toggled');
+    const elStyle = this.pickerKupEl.style;
+    elStyle.height = 'auto';
+    elStyle.minWidth = this.textFieldContainerEl.clientWidth + 'px';
+    this.pickerKupEl.menuVisible = true;
+    if (this.textfieldEl != null) {
+      this.textfieldEl.classList.add('toggled');
+    }
+    if (this.kupManager.dynamicPosition.isRegistered(this.pickerKupEl)) {
+      this.kupManager.dynamicPosition.changeAnchor(this.pickerKupEl, this.textFieldContainerEl);
     }
-    if (containerEl != null) {
-      containerEl.classList.add('visible');
-      const elStyle = containerEl.style;
-      elStyle.height = 'auto';
-      elStyle.minWidth = textfieldEl.clientWidth + 'px';
+    else {
+      this.kupManager.dynamicPosition.register(this.pickerKupEl, this.textFieldContainerEl, 0, KupDynamicPositionPlacement.AUTO, true);
     }
+    this.kupManager.dynamicPosition.start(this.pickerKupEl);
     if (!this.clickCb) {
       this.clickCb = {
         cb: () => {
           this.closePicker();
         },
-        el: this.pickerContainerEl,
+        el: this.pickerKupEl,
       };
     }
     this.kupManager.addClickCallback(this.clickCb, true);
-    this.refresh();
   }
   closePicker() {
+    this.pickerKupEl.menuVisible = false;
+    this.kupManager.removeClickCallback(this.clickCb);
     let textfieldEl = this.textfieldEl;
-    let containerEl = this.pickerContainerEl;
-    this.pickerOpened = false;
     if (textfieldEl != null) {
       textfieldEl.classList.remove('toggled');
-      textfieldEl.emitSubmitEventOnEnter = true;
-    }
-    if (containerEl != null) {
-      containerEl.classList.remove('visible');
     }
+    this.pickerKupEl.menuVisible = false;
+    this.kupManager.dynamicPosition.stop(this.pickerKupEl);
     this.kupManager.removeClickCallback(this.clickCb);
   }
   isPickerOpened() {
-    return this.pickerOpened;
+    return this.pickerKupEl.menuVisible == true;
   }
   getTextFieldId() {
     return this.textfieldEl.id;
   }
   getPickerElId() {
-    return this.pickerEl.id;
+    return this.pickerKupEl.id;
   }
   prepTextfield(initialValue) {
-    let textfieldData = Object.assign({}, this.data['kup-text-field']);
-    if (!textfieldData['icon']) {
-      textfieldData['icon'] = 'access_time';
+    const fullHeight = this.rootElement.classList.contains('kup-full-height');
+    const fullWidth = this.rootElement.classList.contains('kup-full-width');
+    const textfieldData = Object.assign({}, this.data['kup-text-field']);
+    if (!textfieldData.icon) {
+      textfieldData.icon = 'access_time';
     }
-    if (textfieldData['icon']) {
-      textfieldData['trailingIcon'] = true;
+    if (textfieldData.icon) {
+      textfieldData.trailingIcon = true;
     }
-    let comp = (h(FTextField, Object.assign({}, textfieldData, { disabled: this.disabled, id: this.rootElement.id + '_text-field', value: initialValue, onChange: (e) => this.onKupChange(e), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onInput: (e) => this.onKupInput(e), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onClearIconClick: () => this.onKupClearIconClick() }), this.prepTimePicker()));
+    let comp = (h(FTextField, Object.assign({}, textfieldData, { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, id: this.rootElement.id + '_text-field', value: initialValue, onChange: (e) => this.onKupChange(e), onClick: () => this.onKupClick(), onFocus: () => this.onKupFocus(), onInput: (e) => this.onKupInput(e), onIconClick: () => this.onKupIconClick(), onKeyDown: (e) => this.onKupTextFieldSubmit(e), onClearIconClick: () => this.onKupClearIconClick() }), this.prepTimePicker()));
     return comp;
   }
   isRelatedTargetInThisComponent(e) {
@@ -348,196 +348,25 @@ export class KupTimePicker {
     let idConc = '#time-picker-div#confirm#';
     return idConc.indexOf('#' + id + '#') >= 0;
   }
-  setTimeFromClock(e) {
-    let text = this.hoursEl.innerText + ':' + this.minutesEl.innerText;
-    if (this.manageSeconds) {
-      text += ':' + this.secondsEl.innerText;
-    }
-    this.onKupTimePickerItemClick(e, text);
-  }
-  createClock() {
-    let selectedTime;
-    if (this.value) {
-      selectedTime = this.kupManager.dates.toDate(this.value, this.manageSeconds
-        ? KupDatesFormats.ISO_TIME
-        : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS);
-    }
-    else {
-      selectedTime = new Date();
-    }
-    let hh = selectedTime.getHours().toString();
-    let mm = selectedTime.getMinutes().toString();
-    if (hh.length === 1) {
-      hh = '0' + hh;
-    }
-    if (mm.length === 1) {
-      mm = '0' + mm;
-    }
-    let ss = '';
-    if (this.manageSeconds) {
-      ss = selectedTime.getSeconds().toString();
-      if (ss.length === 1) {
-        ss = '0' + ss;
-      }
-    }
-    let seconds;
-    let time = [
-      h("span", { class: "h", ref: (el) => (this.hoursEl = el), onClick: () => {
-          this.setClockViewActive(true, false, false);
-          this.switchView(this.hoursEl, this.hoursCircleEl);
-        }, innerHTML: hh }),
-      ':',
-      h("span", { class: "m", ref: (el) => (this.minutesEl = el), onClick: () => {
-          this.setClockViewActive(false, true, false);
-          this.switchView(this.minutesEl, this.minutesCircleEl);
-        }, innerHTML: mm }),
-    ];
-    if (this.manageSeconds) {
-      seconds = (h("div", { class: "circle seconds", ref: (el) => (this.secondsCircleEl = el) },
-        this.buildClock(60, 101, 115, 115, 'sec unit', 0, 5, ss),
-        h("div", { class: "mid" })));
-      time.push(':', h("span", { class: "s", ref: (el) => (this.secondsEl = el), onClick: () => {
-          this.setClockViewActive(false, false, true);
-          this.switchView(this.secondsEl, this.secondsCircleEl);
-        }, innerHTML: ss }));
-    }
-    return (h("div", { class: "clock", id: this.rootElement.id + '_clock', ref: (el) => (this.pickerEl = el) },
-      h("div", { class: "top" }, time),
-      h("div", { class: "circle hours", ref: (el) => (this.hoursCircleEl = el) },
-        this.buildClock(12, 101, 105, 105, 'hour', 0, 1, hh),
-        this.buildClock(12, 64, 110, 110, 'hour2', 12, 1, hh),
-        h("div", { class: "mid" })),
-      h("div", { class: "circle minutes", ref: (el) => (this.minutesCircleEl = el) },
-        this.buildClock(60, 101, 115, 115, 'min unit', 0, 5, mm),
-        h("div", { class: "mid" })),
-      seconds,
-      h("div", { class: "actions" },
-        h("kup-button", { "onkup-button-click": (e) => {
-            this.setTimeFromClock(e);
-          }, id: "confirm", styling: FButtonStyling.FLAT, label: "Ok" }))));
-  }
-  switchView(el, elCircle) {
-    this.hoursEl.classList.remove('active');
-    this.hoursCircleEl.classList.remove('active');
-    this.minutesEl.classList.remove('active');
-    this.minutesCircleEl.classList.remove('active');
-    if (this.secondsEl) {
-      this.secondsEl.classList.remove('active');
-      this.secondsCircleEl.classList.remove('active');
-    }
-    el.classList.add('active');
-    elCircle.classList.add('active');
-  }
-  setClockViewActive(hoursActive, minutesActive, secondsActive) {
-    this.hoursActive = hoursActive;
-    this.minutesActive = minutesActive;
-    this.secondsActive = secondsActive;
-  }
-  buildClock(num, radius, offsetX, offsetY, className, add, separator, selectedValue) {
-    let x, y;
-    let divsArray = [];
-    for (var n = 0; n < num; n++) {
-      x = radius * Math.cos((n / num) * 2 * Math.PI);
-      y = radius * Math.sin((n / num) * 2 * Math.PI);
-      let text;
-      let dataValue = {};
-      let style = {};
-      if (separator == 1) {
-        if (n + 3 > 12) {
-          text = n + 3 - 12 + add + '';
-        }
-        else {
-          let calc = n + 3 + add;
-          if (calc !== 24) {
-            text = n + 3 + add + '';
-          }
-          else {
-            text = '00';
-          }
-        }
-        dataValue['data-value'] = text;
-      }
-      else {
-        if (n % separator == 0) {
-          if (n + 15 >= 60) {
-            dataValue['data-value'] = n + 15 - 60 + '';
-            text = n + 15 - 60 + add + '';
-          }
-          else {
-            dataValue['data-value'] = n + 15 + '';
-            text = n + 15 + add + '';
-          }
-        }
-        else {
-          if (n + 15 >= 60) {
-            dataValue['data-value'] = n + 15 - 60 + '';
-            text = '⋅';
-          }
-          else {
-            dataValue['data-value'] = n + 15 + '';
-            text = '\u00B7';
-          }
-        }
-      }
-      style['left'] = x + offsetX + 'px';
-      style['top'] = y + offsetY + 'px';
-      if (dataValue['data-value'].length === 1) {
-        dataValue['data-value'] = '0' + dataValue['data-value'];
-      }
-      let elClass = className;
-      if (dataValue['data-value'] === selectedValue) {
-        elClass += ' selected';
-      }
-      let div = (h("div", Object.assign({ class: elClass, style: style }, dataValue, { onClick: (e) => this.setClockTime(e) }), text));
-      divsArray.push(div);
-    }
-    return divsArray;
-  }
-  setClockTime(e) {
-    let time = e.target.getAttribute('data-value');
-    if (this.hoursActive) {
-      this.hoursEl.innerText = time;
-      this.hoursCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      this.setClockViewActive(false, true, false);
-      this.switchView(this.minutesEl, this.minutesCircleEl);
-    }
-    else if (this.minutesActive) {
-      this.minutesEl.innerText = time;
-      this.minutesCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      if (this.manageSeconds) {
-        this.setClockViewActive(false, false, true);
-        this.switchView(this.secondsEl, this.secondsCircleEl);
-      }
-      else {
-        this.setTimeFromClock(e);
-      }
-    }
-    else {
-      this.secondsEl.innerText = time;
-      this.secondsCircleEl
-        .querySelector('.selected')
-        .classList.remove('selected');
-      this.setTimeFromClock(e);
-    }
-    e.target.classList.add('selected');
-  }
   prepTimePicker() {
-    let widget = undefined;
     if (this.clockVariant) {
-      widget = this.createClock();
+      const data = {
+        options: {
+          initialValue: this.value,
+          manageSeconds: this.manageSeconds,
+          hoursActive: this.hoursActive,
+          minutesActive: this.minutesActive,
+          secondsActive: this.secondsActive,
+        },
+      };
+      return (h("kup-card", { ref: (el) => (this.pickerKupEl = el), data: data, "layout-family": "builtin", "layout-number": "2", "size-x": "300px", "size-y": "450px", "is-menu": true, "onkup-card-click": (ev) => {
+          if (ev.detail.value != null && ev.detail.value != '')
+            this.onKupTimePickerItemClick(ev, ev.detail.value);
+        } }));
     }
     else {
-      widget = (h("kup-list", { data: this.createTimeListData(this.value), "is-menu": true, "menu-visible": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.value), id: this.rootElement.id + '_list', ref: (el) => (this.pickerEl = el) }));
+      return (h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(this.value), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.value), id: this.rootElement.id + '_list' }));
     }
-    return (h("div", { id: "time-picker-div", ref: (el) => (this.pickerContainerEl = el), onBlur: (e) => {
-        if (!this.isRelatedTargetInThisComponent(e)) {
-          this.onKupBlur();
-        }
-      } }, widget));
   }
   createTimeListData(value) {
     let listData = [];
@@ -607,42 +436,23 @@ export class KupTimePicker {
     if (root) {
       const f = root.querySelector('.f-text-field');
       if (f) {
+        this.textFieldContainerEl = f;
         this.textfieldEl = f.querySelector('input');
         FTextFieldMDC(f);
       }
     }
-    if (this.clockVariant) {
-      if (this.hoursActive) {
-        this.switchView(this.hoursEl, this.hoursCircleEl);
-      }
-      else if (this.minutesActive) {
-        this.switchView(this.minutesEl, this.minutesCircleEl);
-      }
-      else if (this.secondsActive) {
-        this.switchView(this.secondsEl, this.secondsCircleEl);
-      }
-    }
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    let hostClass = {};
-    if (this.data &&
-      this.data['kup-text-field'] &&
-      this.data['kup-text-field']['className'] &&
-      this.data['kup-text-field']['className'].indexOf('kup-full-height') > -1) {
-      hostClass['kup-full-height'] = true;
-    }
-    if (this.data &&
-      this.data['kup-text-field'] &&
-      this.data['kup-text-field']['fullWidth']) {
-      hostClass['kup-full-width'] = true;
-    }
-    return (h(Host, { class: hostClass },
+    return (h(Host, null,
       h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
+    if (this.pickerKupEl) {
+      this.pickerKupEl.remove();
+    }
   }
   static get is() { return "kup-time-picker"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/f-components/f-cell/f-cell.js

@@ -217,6 +217,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
     case FCellTypes.TIME:
       return (h("kup-time-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: "kup-full-width", "onkup-timepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
     case FCellTypes.NUMBER:
+      classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
     case FCellTypes.STRING:
       return (h(FTextField, Object.assign({}, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, fullWidth: true, inputType: cellType === FCellTypes.NUMBER ? 'number' : null, value: cellType === FCellTypes.NUMBER
           ? stringToNumber(cell.value).toString()
@@ -421,33 +422,36 @@ function cellEvent(e, props, cellType, cellEventName) {
   let value = isInputEvent
     ? e.target.value
     : e.detail.value;
-  switch (cellType) {
-    case FCellTypes.AUTOCOMPLETE:
-    case FCellTypes.COMBOBOX:
-    case FCellTypes.DATE:
-    case FCellTypes.TIME:
-      if (cell.data) {
-        cell.data['initialValue'] = value;
-      }
-      break;
-    case FCellTypes.CHECKBOX:
-      value = value === 'on' ? '0' : '1';
-      if (cell.data) {
-        cell.data.checked =
-          value === '0' ? false : true;
-      }
-      break;
-  }
-  if (cell.obj) {
-    cell.obj.k = value;
+  if (cellEventName === FCellEvents.UPDATE) {
+    switch (cellType) {
+      case FCellTypes.AUTOCOMPLETE:
+      case FCellTypes.COMBOBOX:
+      case FCellTypes.DATE:
+      case FCellTypes.TIME:
+        if (cell.data) {
+          cell.data['initialValue'] = value;
+        }
+        break;
+      case FCellTypes.CHECKBOX:
+        value = value === 'on' ? '0' : '1';
+        if (cell.data) {
+          cell.data.checked =
+            value === '0' ? false : true;
+        }
+        break;
+    }
+    if (cell.obj) {
+      cell.obj.k = value;
+    }
+    cell.value = value;
+    cell.displayedValue = null;
+    cell.displayedValue = getCellValueForDisplay(column, cell);
   }
-  cell.value = value;
-  cell.displayedValue = null;
-  cell.displayedValue = getCellValueForDisplay(column, cell);
   if (comp && comp.rootElement) {
     const updateEvent = new CustomEvent(cellEventName, {
       bubbles: true,
       cancelable: true,
+      composed: true,
       detail: {
         comp: comp,
         id: comp.rootElement.id,

package/dist/collection/utils/kup-search/kup-search.js

@@ -1,6 +1,5 @@
 import { KupCardFamily, } from '../../components/kup-card/kup-card-declarations';
 import { searchStartEvent, } from './kup-search-declarations';
-const dom = document.documentElement;
 /**
  * Handles operations and formatting of dates.
  * @module KupSearch

package/dist/esm/{cell-utils-9a2914fc.js → cell-utils-8f512ea9.js}

@@ -1,5 +1,5 @@
-import { q as unformattedStringToFormattedStringNumber, t as unformattedStringToFormattedStringTime, v as unformattedStringToFormattedStringTimestamp, n as numeral, d as stringToNumber } from './utils-cfcbe33f.js';
-import { c as KupDatesFormats } from './kup-manager-bba32828.js';
+import { o as unformattedStringToFormattedStringNumber, q as unformattedStringToFormattedStringTime, r as unformattedStringToFormattedStringTimestamp, n as numeral, d as stringToNumber } from './utils-6c73709d.js';
+import { c as KupDatesFormats } from './kup-manager-7fc234da.js';
 
 const dom = document.documentElement;
 // -------------

package/dist/esm/{f-button-55a9ed88.js → f-button-30dbcaa9.js}

@@ -1,6 +1,6 @@
 import { h } from './index-e0e67c23.js';
 import { F as FButtonStyling } from './f-button-declarations-fd4965d1.js';
-import { F as FImage } from './f-image-70ca9dfe.js';
+import { F as FImage } from './f-image-3bc8b24f.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/esm/{f-cell-ac520cb2.js → f-cell-95c186c6.js}

@@ -1,9 +1,9 @@
 import { h, a as getAssetPath } from './index-e0e67c23.js';
-import { b as getCellValueForDisplay } from './cell-utils-9a2914fc.js';
-import { a as KupThemeIconValues, b as KupThemeColorValues } from './kup-manager-bba32828.js';
-import { d as stringToNumber } from './utils-cfcbe33f.js';
-import { F as FImage } from './f-image-70ca9dfe.js';
-import { F as FChip } from './f-chip-babf1740.js';
+import { b as getCellValueForDisplay } from './cell-utils-8f512ea9.js';
+import { a as KupThemeIconValues, b as KupThemeColorValues } from './kup-manager-7fc234da.js';
+import { d as stringToNumber } from './utils-6c73709d.js';
+import { F as FImage } from './f-image-3bc8b24f.js';
+import { F as FChip } from './f-chip-c0e9c0ff.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
@@ -471,6 +471,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
     case FCellTypes.TIME:
       return (h("kup-time-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: "kup-full-width", "onkup-timepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
     case FCellTypes.NUMBER:
+      classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
     case FCellTypes.STRING:
       return (h(FTextField, Object.assign({}, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, fullWidth: true, inputType: cellType === FCellTypes.NUMBER ? 'number' : null, value: cellType === FCellTypes.NUMBER
           ? stringToNumber(cell.value).toString()
@@ -675,33 +676,36 @@ function cellEvent(e, props, cellType, cellEventName) {
   let value = isInputEvent
     ? e.target.value
     : e.detail.value;
-  switch (cellType) {
-    case FCellTypes.AUTOCOMPLETE:
-    case FCellTypes.COMBOBOX:
-    case FCellTypes.DATE:
-    case FCellTypes.TIME:
-      if (cell.data) {
-        cell.data['initialValue'] = value;
-      }
-      break;
-    case FCellTypes.CHECKBOX:
-      value = value === 'on' ? '0' : '1';
-      if (cell.data) {
-        cell.data.checked =
-          value === '0' ? false : true;
-      }
-      break;
-  }
-  if (cell.obj) {
-    cell.obj.k = value;
+  if (cellEventName === FCellEvents.UPDATE) {
+    switch (cellType) {
+      case FCellTypes.AUTOCOMPLETE:
+      case FCellTypes.COMBOBOX:
+      case FCellTypes.DATE:
+      case FCellTypes.TIME:
+        if (cell.data) {
+          cell.data['initialValue'] = value;
+        }
+        break;
+      case FCellTypes.CHECKBOX:
+        value = value === 'on' ? '0' : '1';
+        if (cell.data) {
+          cell.data.checked =
+            value === '0' ? false : true;
+        }
+        break;
+    }
+    if (cell.obj) {
+      cell.obj.k = value;
+    }
+    cell.value = value;
+    cell.displayedValue = null;
+    cell.displayedValue = getCellValueForDisplay(column, cell);
   }
-  cell.value = value;
-  cell.displayedValue = null;
-  cell.displayedValue = getCellValueForDisplay(column, cell);
   if (comp && comp.rootElement) {
     const updateEvent = new CustomEvent(cellEventName, {
       bubbles: true,
       cancelable: true,
+      composed: true,
       detail: {
         comp: comp,
         id: comp.rootElement.id,

package/dist/esm/{f-chip-babf1740.js → f-chip-c0e9c0ff.js}

@@ -1,6 +1,6 @@
 import { h } from './index-e0e67c23.js';
-import { F as FImage } from './f-image-70ca9dfe.js';
-import { a as KupThemeIconValues, f as KupDebugCategory, b as KupThemeColorValues } from './kup-manager-bba32828.js';
+import { F as FImage } from './f-image-3bc8b24f.js';
+import { a as KupThemeIconValues, f as KupDebugCategory, b as KupThemeColorValues } from './kup-manager-7fc234da.js';
 
 /**
  * Types of the f-chip component.

package/dist/esm/{f-image-70ca9dfe.js → f-image-3bc8b24f.js}

@@ -1,5 +1,5 @@
 import { h, a as getAssetPath } from './index-e0e67c23.js';
-import { b as KupThemeColorValues } from './kup-manager-bba32828.js';
+import { b as KupThemeColorValues } from './kup-manager-7fc234da.js';
 
 /**
  * The type of a CSS step in CSS-drawing mode.