@sme.up/ketchup 7.4.2 → 7.5.0-SNAPSHOT

package/dist/collection/components/kup-family-tree/kup-family-tree.css

@@ -50,7 +50,7 @@
   display: flex;
   flex-direction: column;
   height: 0;
-  transform: translateX(calc( ( var(--kup_familytree_item_width) + (var(--kup_familytree_item_h_padding) * 2) ) / 2 )) translateY(calc( 0px - ( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * (var(--kup_familytree_item_v_padding) * 2) ) ));
+  transform: translateX(calc((var(--kup_familytree_item_width) + var(--kup_familytree_item_h_padding) * 2) / 2)) translateY(calc(0px - (var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * var(--kup_familytree_item_v_padding) * 2)));
 }
 .family-tree__node__staff__item {
   padding: var(--kup_familytree_item_v_padding);
@@ -74,7 +74,7 @@
   height: calc(var(--kup_familytree_item_height) / 2);
 }
 .family-tree__line--staff {
-  height: calc( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * (var(--kup_familytree_item_v_padding) * 2) );
+  height: calc(var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * var(--kup_familytree_item_v_padding) * 2);
 }
 .family-tree__line--right {
   border-right: 2px solid var(--kup_familytree_lines_color);

package/dist/collection/components/kup-image/kup-image.js

@@ -34,6 +34,13 @@ export class KupImage {
       el: e.target,
     });
   }
+  onKupLoad(e) {
+    this.kupLoad.emit({
+      comp: this,
+      id: this.rootElement.id,
+      el: e.target,
+    });
+  }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
   /*-------------------------------------------------*/
@@ -113,6 +120,7 @@ export class KupImage {
       sizeX: this.sizeX,
       sizeY: this.sizeY,
       onClick: (e) => this.onKupClick(e),
+      onLoad: (e) => this.onKupLoad(e),
     };
     let elStyle = {
       height: props.sizeY,
@@ -376,6 +384,26 @@ export class KupImage {
             }
           }
         }
+      }, {
+        "method": "kupLoad",
+        "name": "kup-image-load",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupImageClickEventPayload",
+          "resolved": "KupImageClickEventPayload",
+          "references": {
+            "KupImageClickEventPayload": {
+              "location": "import",
+              "path": "./kup-image-declarations"
+            }
+          }
+        }
       }];
   }
   static get methods() {

package/dist/collection/components/kup-list/kup-list.css

@@ -72,7 +72,7 @@
   -ms-flex-pack: start;
   justify-content: flex-start;
   padding-left: var(--kup_list_item_padding_left);
-  padding-right: calc( var(--kup_list_item_padding_left) + var(--kup_list_item_expand_padding, 0px) );
+  padding-right: calc(var(--kup_list_item_padding_left) + var(--kup_list_item_expand_padding, 0px));
   overflow: hidden;
   outline: none;
   transition: background-color var(--kup_list_transition), color var(--kup_list_transition);

package/dist/collection/components/kup-planner/kup-planner-declarations.js

@@ -34,8 +34,10 @@ export var KupPlannerProps;
 })(KupPlannerProps || (KupPlannerProps = {}));
 export var KupPlannerTaskAction;
 (function (KupPlannerTaskAction) {
-  KupPlannerTaskAction["onOpening"] = "onOpening";
-  KupPlannerTaskAction["onClosing"] = "onClosing";
+  KupPlannerTaskAction["onTaskOpening"] = "onTaskOpening";
+  KupPlannerTaskAction["onTaskClosing"] = "onTaskClosing";
+  KupPlannerTaskAction["onClick"] = "onClick";
+  KupPlannerTaskAction["onResize"] = "onResize";
 })(KupPlannerTaskAction || (KupPlannerTaskAction = {}));
 export var KupPlannerGanttRowType;
 (function (KupPlannerGanttRowType) {

package/dist/collection/components/kup-planner/kup-planner.css

@@ -484,4 +484,9 @@
 }
 :host {
   display: block;
+}
+
+.filter {
+  margin: 12px 10px 12px 0;
+  padding: 0 10px;
 }

package/dist/collection/components/kup-planner/kup-planner.js

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_rootPlanner, _KupPlanner_lastOnChangeReceived, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_emitOnChangeEventsReceived;
+var _KupPlanner_instances, _KupPlanner_kupManager, _KupPlanner_rootPlanner, _KupPlanner_lastOnChangeReceived, _KupPlanner_renderReactPlannerElement, _KupPlanner_toTasks, _KupPlanner_toDetails, _KupPlanner_getTask, _KupPlanner_removePhases, _KupPlanner_handleOnClickOnTask, _KupPlanner_handleOnClickOnPhase, _KupPlanner_handleOnClickOnDetail, _KupPlanner_emitOnChangeEventsReceived, _KupPlanner_onFilter;
 import { forceUpdate, h, Host, } from '@stencil/core';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { defaultStylingOptions, KupPlannerLastOnChangeReceived, KupPlannerProps, KupPlannerTaskAction, KupPlannerGanttRowType, } from './kup-planner-declarations';
@@ -25,6 +25,10 @@ import React from 'react';
 import { Planner, } from '@sme.up/gantt-component';
 import { getCellValueForDisplay } from '../../utils/cell-utils';
 import { getValuesToShow, isAtLeastOneDateValid, sanitizeAllDates, } from './kup-planner-helper';
+import { FTextField } from '../../f-components/f-text-field/f-text-field';
+import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
+import { KupThemeIconValues } from '../../managers/kup-theme/kup-theme-declarations';
+import { KupLanguageSearch } from '../../managers/kup-language/kup-language-declarations';
 export class KupPlanner {
   constructor() {
     _KupPlanner_instances.add(this);
@@ -71,11 +75,12 @@ export class KupPlanner {
       taskAction: taskAction,
     });
   }
-  onKupDateChange(event) {
+  onKupDateChange(event, taskAction) {
     this.kupDateChange.emit({
       comp: this,
       id: this.rootElement.id,
       value: event,
+      taskAction: taskAction,
     });
   }
   /*-------------------------------------------------*/
@@ -141,32 +146,34 @@ export class KupPlanner {
     this.plannerProps = Object.assign({}, this.plannerProps);
   }
   handleOnClick(nativeEvent) {
-    console.log('handleOnClick', nativeEvent);
+    console.log('kup-planner.handleOnClick', nativeEvent);
     switch (nativeEvent.rowType) {
       case KupPlannerGanttRowType.TASK:
         const taskAction = nativeEvent.phases
-          ? KupPlannerTaskAction.onClosing
-          : KupPlannerTaskAction.onOpening;
+          ? KupPlannerTaskAction.onTaskClosing
+          : KupPlannerTaskAction.onTaskOpening;
         if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnTask).call(this, nativeEvent)) {
           this.onKupClick(nativeEvent, taskAction);
         }
         break;
       case KupPlannerGanttRowType.PHASE:
         if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnPhase).call(this)) {
-          this.onKupClick(nativeEvent);
+          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
         }
         break;
       case KupPlannerGanttRowType.DETAIL:
         if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_handleOnClickOnDetail).call(this)) {
-          this.onKupClick(nativeEvent);
+          this.onKupClick(nativeEvent, KupPlannerTaskAction.onClick);
         }
         break;
     }
   }
   handleOnDateChange(nativeEvent) {
     if (__classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_emitOnChangeEventsReceived).call(this, nativeEvent)) {
-      console.log('handleOnDateChange', nativeEvent);
-      this.onKupDateChange(nativeEvent);
+      if (nativeEvent.rowType != KupPlannerGanttRowType.DETAIL) {
+        console.log('kup-planner.handleOnDateChange', nativeEvent);
+        this.onKupDateChange(nativeEvent, KupPlannerTaskAction.onResize);
+      }
     }
   }
   componentWillLoad() {
@@ -178,11 +185,18 @@ export class KupPlanner {
     if (details && details.length == 0) {
       details = undefined;
     }
+    const mainFilter = this.rootElement.shadowRoot.querySelector('#main-filter');
+    FTextFieldMDC(mainFilter);
+    const secondaryFilter = this.rootElement.shadowRoot.querySelector('#secondary-filter');
+    if (details) {
+      FTextFieldMDC(secondaryFilter);
+    }
     this.plannerProps = {
       mainGantt: {
         title: this.titleMess,
         items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, this.data),
         stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+        filter: mainFilter,
         hideLabel: true,
         ganttHeight: this.taskHeight,
         showSecondaryDates: this.showSecondaryDates,
@@ -194,6 +208,7 @@ export class KupPlanner {
           title: '',
           items: details,
           stylingOptions: Object.assign(Object.assign({}, defaultStylingOptions), { listCellWidth: this.listCellWidth }),
+          filter: secondaryFilter,
           hideLabel: true,
           ganttHeight: this.detailHeight,
           onClick: (nativeEvent) => this.handleOnClick(nativeEvent),
@@ -201,7 +216,6 @@ export class KupPlanner {
         }
         : undefined,
     };
-    console.log('kup-planner.tsx componentDidLoad plannerProps', this.plannerProps);
     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_renderReactPlannerElement).call(this);
     this.kupReady.emit({
       comp: this,
@@ -217,8 +231,17 @@ export class KupPlanner {
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").debug.logRender(this, true);
   }
   render() {
+    var _a;
     //console.log('kup-planner.tsx render');
-    return (h(Host, null, h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } })));
+    return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, style: { maxWidth: this.maxWidth } }), h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        if (e.key === 'Enter') {
+          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e);
+        }
+      }, wrapperClass: "filter" }), ((_a = this.detailData) === null || _a === void 0 ? void 0 : _a.rows) && this.detailData.rows.length > 0 ? (h(FTextField, { icon: KupThemeIconValues.SEARCH, id: "secondary-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        if (e.key === 'Enter') {
+          __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e, true);
+        }
+      }, wrapperClass: "filter" })) : null));
   }
   disconnectedCallback() {
     __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.unregister(this);
@@ -1008,6 +1031,7 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
   data.rows
     .filter((row) => isAtLeastOneDateValid(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]))
     .forEach((row) => {
+    var _a, _b;
     const detailId = row.cells[this.detailIdCol].value;
     const detailNameId = row.cells[this.detailNameCol].value;
     const datesSanitized = sanitizeAllDates(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]);
@@ -1028,10 +1052,10 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
       startDate: datesSanitized.dateValues[0],
       endDate: datesSanitized.dateValues[1],
       color: this.detailColorCol
-        ? row.cells[this.detailColorCol].value
+        ? (_a = row.cells[this.detailColorCol].value) !== null && _a !== void 0 ? _a : '#D9D9D8'
         : '#D9D9D8',
       selectedColor: this.detailColorCol
-        ? row.cells[this.detailColorCol].value
+        ? (_b = row.cells[this.detailColorCol].value) !== null && _b !== void 0 ? _b : '#D9D9D8'
         : '#D9D9D8',
     });
   });
@@ -1067,4 +1091,32 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_rootPlanner = new WeakMap(),
     emitEvent = true;
   }
   return emitEvent;
+}, _KupPlanner_onFilter = function _KupPlanner_onFilter(e, isDetail) {
+  const tempData = {
+    columns: this.data.columns,
+    rows: [],
+  };
+  const value = e.target.value;
+  const data = isDetail ? this.detailData : this.data;
+  for (let index = 0; index < data.rows.length; index++) {
+    const row = data.rows[index];
+    const valuesToShow = isDetail
+      ? getValuesToShow(row, this.detailIdCol, this.detailNameCol, data.columns, this.detailColumns)
+      : getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns);
+    for (let index = 0; index < valuesToShow.length; index++) {
+      const valueToShow = valuesToShow[index];
+      if (valueToShow.toLowerCase().indexOf(value.toLowerCase()) > -1) {
+        tempData.rows.push(row);
+        break;
+      }
+    }
+  }
+  const newGantt = isDetail
+    ? {
+      secondaryGantt: Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toDetails).call(this, tempData) }),
+    }
+    : {
+      mainGantt: Object.assign(Object.assign({}, this.plannerProps.mainGantt), { items: __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_toTasks).call(this, tempData) }),
+    };
+  this.plannerProps = Object.assign(Object.assign({}, this.plannerProps), newGantt);
 };

package/dist/collection/components/kup-qlik/kup-qlik.css

@@ -10,7 +10,6 @@
   .kup-qlik-container {
     width: 576px;
   }
-
   .kup-qlik-row > .qvobject {
     flex: 0 0 auto;
     min-width: 100px;
@@ -21,7 +20,6 @@
   .kup-qlik-container {
     width: 768px;
   }
-
   .kup-qlik-row > .qvobject {
     flex: 0 0 auto;
     min-width: 100px;
@@ -32,7 +30,6 @@
   .kup-qlik-container {
     width: 992px;
   }
-
   .kup-qlik-row > .qvobject {
     flex: 0 0 auto;
     min-width: 100px;
@@ -43,7 +40,6 @@
   .kup-qlik-container {
     width: 1200px;
   }
-
   .kup-qlik-row > .qvobject {
     flex: 0 0 auto;
     min-width: 100px;
@@ -61,16 +57,16 @@
   height: var(--lyo_obj-height);
 }
 .kup-qlik-row .size-S {
-  height: calc(var(--lyo_obj-height)/2);
+  height: calc(var(--lyo_obj-height) / 2);
 }
 .kup-qlik-row .size-XS {
-  height: calc(var(--lyo_obj-height)/3);
+  height: calc(var(--lyo_obj-height) / 3);
 }
 .kup-qlik-row .size-L {
-  height: calc(var(--lyo_obj-height)*2);
+  height: calc(var(--lyo_obj-height) * 2);
 }
 .kup-qlik-row .size-XL {
-  height: calc(var(--lyo_obj-height)*3);
+  height: calc(var(--lyo_obj-height) * 3);
 }
 .kup-qlik-row .bordered {
   border: 1px solid var(--kup-border-color, #969696);

package/dist/collection/components/kup-spinner/kup-spinner.css

@@ -779,8 +779,7 @@
 @keyframes sk-spinner-bar-v1 {
   from {
     left: -25%;
-    background: var(--kup-spinner-color);
-    /* fallback */
+    background: var(--kup-spinner-color); /* fallback */
     background: linear-gradient(to left, var(--kup-spinner-color) 0, rgba(255, 255, 255, 0) 100%);
   }
   50% {
@@ -788,8 +787,7 @@
   }
   to {
     left: -25%;
-    background: var(--kup-spinner-color);
-    /* fallback */
+    background: var(--kup-spinner-color); /* fallback */
     background: linear-gradient(to right, var(--kup-spinner-color) 0, rgba(255, 255, 255, 0) 100%);
   }
 }

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

@@ -15,7 +15,7 @@ export const FImage = (props) => {
         '--kup_image_height': props.sizeY ? props.sizeY : 'auto',
         '--kup_image_width': props.sizeX ? props.sizeX : '100%',
       };
-      el = createImage(props.resource);
+      el = createImage(props);
     }
     else {
       style = {
@@ -64,8 +64,8 @@ function createIcon(props) {
   }
   return h("div", { class: classObj, style: style });
 }
-function createImage(resource) {
-  return h("img", { src: resource });
+function createImage(props) {
+  return h("img", { onLoad: props.onLoad, src: props.resource });
 }
 function createBar(data) {
   const steps = [];

package/dist/collection/managers/kup-data/kup-data-column-helper.js

@@ -104,6 +104,7 @@ function newColumnFromConcatenate(dataset, columns, separator) {
       const message = 'The product of these columns in the same order already exists!(' +
         columns.toString() +
         ')';
+      col.visible = true;
       dom.ketchup.debug.logMessage('kup-data', message, KupDebugCategory.WARNING);
       return message;
     }

package/dist/collection/managers/kup-theme/kup-theme-declarations.js

@@ -112,6 +112,7 @@ export const fTextFieldUsers = [
   KupTagNames.DATE_PICKER,
   KupTagNames.FORM,
   KupTagNames.NUMERIC_PICKER,
+  KupTagNames.PLANNER,
   KupTagNames.TEXT_FIELD,
   KupTagNames.TIME_PICKER,
   KupTagNames.TREE,

package/dist/collection/types/GenericTypes.js

@@ -37,6 +37,7 @@ export var KupTagNames;
   KupTagNames["MAGIC_BOX"] = "KUP-MAGIC-BOX";
   KupTagNames["NAV_BAR"] = "KUP-NAV-BAR";
   KupTagNames["NUMERIC_PICKER"] = "KUP-NUMERIC-PICKER";
+  KupTagNames["PLANNER"] = "KUP-PLANNER";
   KupTagNames["PROBE"] = "KUP-PROBE";
   KupTagNames["PROGRESS_BAR"] = "KUP-PROGRESS-BAR";
   KupTagNames["QLIK"] = "KUP-QLIK";

package/dist/components/kup-autocomplete2.js

@@ -5573,6 +5573,7 @@ var KupTagNames;
   KupTagNames["MAGIC_BOX"] = "KUP-MAGIC-BOX";
   KupTagNames["NAV_BAR"] = "KUP-NAV-BAR";
   KupTagNames["NUMERIC_PICKER"] = "KUP-NUMERIC-PICKER";
+  KupTagNames["PLANNER"] = "KUP-PLANNER";
   KupTagNames["PROBE"] = "KUP-PROBE";
   KupTagNames["PROGRESS_BAR"] = "KUP-PROGRESS-BAR";
   KupTagNames["QLIK"] = "KUP-QLIK";
@@ -5701,6 +5702,7 @@ const fTextFieldUsers = [
   KupTagNames.DATE_PICKER,
   KupTagNames.FORM,
   KupTagNames.NUMERIC_PICKER,
+  KupTagNames.PLANNER,
   KupTagNames.TEXT_FIELD,
   KupTagNames.TIME_PICKER,
   KupTagNames.TREE,
@@ -8115,6 +8117,7 @@ function newColumnFromConcatenate(dataset, columns, separator) {
       const message = 'The product of these columns in the same order already exists!(' +
         columns.toString() +
         ')';
+      col.visible = true;
       dom$l.ketchup.debug.logMessage('kup-data', message, KupDebugCategory.WARNING);
       return message;
     }
@@ -19356,7 +19359,7 @@ const FImage = (props) => {
         '--kup_image_height': props.sizeY ? props.sizeY : 'auto',
         '--kup_image_width': props.sizeX ? props.sizeX : '100%',
       };
-      el = createImage(props.resource);
+      el = createImage(props);
     }
     else {
       style = {
@@ -19407,8 +19410,8 @@ function createIcon(props) {
   }
   return h("div", { class: classObj, style: style });
 }
-function createImage(resource) {
-  return h("img", { src: resource });
+function createImage(props) {
+  return h("img", { onLoad: props.onLoad, src: props.resource });
 }
 function createBar(data) {
   const steps = [];
@@ -35218,7 +35221,7 @@ function defineCustomElement$i() {
   } });
 }
 
-const kupListCss = ":host{--kup_list_background:var(\n    --kup-list-background,\n    var(--kup-background-color)\n  );--kup_list_color:var(--kup-list-color, var(--kup-text-color));--kup_list_font_family:var(--kup-list-font-family, var(--kup-font-family));--kup_list_font_size:var(--kup-list-font-size, var(--kup-font-size));--kup_list_font_weight:var(--kup-list-font-weight, 400);--kup_list_group_item_height:var(--kup-list-group-item-height, 3em);--kup_list_item_height:var(--kup-list-item-height, 2.5em);--kup_list_item_padding_left:var(--kup-list-item-padding, 0.75em);--kup_list_item_padding_right:var(--kup-list-item-padding, 0.75em);--kup_list_max_height_as_menu:var(--kup-list-max-height-as-menu, 33vh);--kup_list_primary_color:var(\n    --kup-list-primary-color,\n    var(--kup-primary-color)\n  );--kup_list_primary_color_rgb:var(\n    --kup-list-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_list_separator_color:var(\n    --kup-list-separator-color,\n    rgba(var(--kup-text-color-rgb), 0.25)\n  );--kup_list_transition:var(--kup-list-transition, 120ms);display:block;font-family:var(--kup_list_font_family);font-size:var(--kup_list_font_size);outline:none}.list{background:var(--kup_list_background);color:var(--kup_list_color);font-weight:var(--kup_list_font_weight);letter-spacing:0.009375em;line-height:1.5em;list-style-type:none;margin:0;padding:0.5em 0;text-decoration:inherit;text-transform:inherit}.list--empty{padding:0}.list .list-item{display:-ms-flexbox;display:flex;height:var(--kup_list_item_height);position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;padding-left:var(--kup_list_item_padding_left);padding-right:calc( var(--kup_list_item_padding_left) + var(--kup_list_item_expand_padding, 0px) );overflow:hidden;outline:none;transition:background-color var(--kup_list_transition), color var(--kup_list_transition)}.list .list-item[role=checkbox],.list .list-item[role=radio]{height:var(--kup_list_group_item_height)}.list .list-item.list-item--activated,.list .list-item.list-item--activated .list-item__graphic,.list .list-item.list-item--selected,.list .list-item.list-item--selected .list-item__graphic{background-color:rgba(var(--kup_list_primary_color_rgb), 0.175);color:var(--kup_list_primary_color)}.list .list-item .list-item__text{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.list .list-item .list-item__primary-text{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-top:0;line-height:normal;margin-bottom:-1.5em;display:block}.list .list-item .list-item__primary-text:before{display:inline-block;width:0;height:1.5em;content:\"\";vertical-align:0}.list .list-item .list-item__primary-text:after{display:inline-block;width:0;height:2em;content:\"\";vertical-align:-2em}.list .list-item .list-item__secondary-text{-moz-osx-font-smoothing:grayscale;-o-text-overflow:ellipsis;-webkit-font-smoothing:antialiased;display:block;font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em;text-decoration:inherit;text-transform:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-top:0;line-height:normal;color:var(--kup_list_color);opacity:0.75}.list .list-item .kup-icon{margin:0;margin-right:0.75em}.list .list-item kup-checkbox{margin:0}.list .list-divider{background-color:var(--kup_list_separator_color);height:1px;padding:0;background-clip:content-box}.list.list--two-line .list-item{height:3.6em}.list.list--two-line .list-item__text{-ms-flex-item-align:start;align-self:flex-start}.list:not(.list--non-interactive)>:not(.list-item--disabled).list-item{cursor:pointer}.list:not(.list--non-interactive)>:not(.list-item--disabled).list-item label{cursor:pointer}.list:not(.list--non-interactive) .list-item:not(.list-item--selected):hover,.list:not(.list--non-interactive) .list-item:not(.list-item--selected).list-item--focused{background-color:var(--kup-hover-background-color);color:var(--kup-hover-color)}.list.text-hidden .list-item__text{display:none}.kup-menu{animation:fade-in 0.25s ease-out;background-color:var(--kup-background-color);box-shadow:var(--kup-box-shadow);color:var(--kup-text-color);display:none;max-height:var(--kup_list_max_height_as_menu);overflow:auto;position:relative;transform:none;transform-origin:unset;transition:height 0.2s;user-select:none;will-change:unset}.kup-menu.visible{display:block}.kup-menu .list-item__text{user-select:none}:host([nested-list]){--kup_list_item_expand_padding:1.5em;max-width:250px}:host([nested-list]) .kup-menu{max-height:unset;overflow:visible}:host([nested-list]) kup-list{display:none;left:100%;position:absolute;top:0}:host([nested-list]) .list-item{overflow:visible}:host([nested-list]) .list-item__expand-icon{position:absolute;right:0}:host([nested-list]) .list-item:hover kup-list{display:block}:host(.kup-paddingless) .list{padding:0}:host(.kup-danger){--kup-list-primary-color:var(--kup-danger-color);--kup-list-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-list-primary-color:var(--kup-info-color);--kup-list-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-list-primary-color:var(--kup-secondary-color);--kup-list-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-list-primary-color:var(--kup-success-color);--kup-list-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-list-primary-color:var(--kup-warning-color);--kup-list-primary-color-rgb:var(--kup-warning-color-rgb)}";
+const kupListCss = ":host{--kup_list_background:var(\n    --kup-list-background,\n    var(--kup-background-color)\n  );--kup_list_color:var(--kup-list-color, var(--kup-text-color));--kup_list_font_family:var(--kup-list-font-family, var(--kup-font-family));--kup_list_font_size:var(--kup-list-font-size, var(--kup-font-size));--kup_list_font_weight:var(--kup-list-font-weight, 400);--kup_list_group_item_height:var(--kup-list-group-item-height, 3em);--kup_list_item_height:var(--kup-list-item-height, 2.5em);--kup_list_item_padding_left:var(--kup-list-item-padding, 0.75em);--kup_list_item_padding_right:var(--kup-list-item-padding, 0.75em);--kup_list_max_height_as_menu:var(--kup-list-max-height-as-menu, 33vh);--kup_list_primary_color:var(\n    --kup-list-primary-color,\n    var(--kup-primary-color)\n  );--kup_list_primary_color_rgb:var(\n    --kup-list-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_list_separator_color:var(\n    --kup-list-separator-color,\n    rgba(var(--kup-text-color-rgb), 0.25)\n  );--kup_list_transition:var(--kup-list-transition, 120ms);display:block;font-family:var(--kup_list_font_family);font-size:var(--kup_list_font_size);outline:none}.list{background:var(--kup_list_background);color:var(--kup_list_color);font-weight:var(--kup_list_font_weight);letter-spacing:0.009375em;line-height:1.5em;list-style-type:none;margin:0;padding:0.5em 0;text-decoration:inherit;text-transform:inherit}.list--empty{padding:0}.list .list-item{display:-ms-flexbox;display:flex;height:var(--kup_list_item_height);position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;padding-left:var(--kup_list_item_padding_left);padding-right:calc(var(--kup_list_item_padding_left) + var(--kup_list_item_expand_padding, 0px));overflow:hidden;outline:none;transition:background-color var(--kup_list_transition), color var(--kup_list_transition)}.list .list-item[role=checkbox],.list .list-item[role=radio]{height:var(--kup_list_group_item_height)}.list .list-item.list-item--activated,.list .list-item.list-item--activated .list-item__graphic,.list .list-item.list-item--selected,.list .list-item.list-item--selected .list-item__graphic{background-color:rgba(var(--kup_list_primary_color_rgb), 0.175);color:var(--kup_list_primary_color)}.list .list-item .list-item__text{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.list .list-item .list-item__primary-text{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-top:0;line-height:normal;margin-bottom:-1.5em;display:block}.list .list-item .list-item__primary-text:before{display:inline-block;width:0;height:1.5em;content:\"\";vertical-align:0}.list .list-item .list-item__primary-text:after{display:inline-block;width:0;height:2em;content:\"\";vertical-align:-2em}.list .list-item .list-item__secondary-text{-moz-osx-font-smoothing:grayscale;-o-text-overflow:ellipsis;-webkit-font-smoothing:antialiased;display:block;font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em;text-decoration:inherit;text-transform:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-top:0;line-height:normal;color:var(--kup_list_color);opacity:0.75}.list .list-item .kup-icon{margin:0;margin-right:0.75em}.list .list-item kup-checkbox{margin:0}.list .list-divider{background-color:var(--kup_list_separator_color);height:1px;padding:0;background-clip:content-box}.list.list--two-line .list-item{height:3.6em}.list.list--two-line .list-item__text{-ms-flex-item-align:start;align-self:flex-start}.list:not(.list--non-interactive)>:not(.list-item--disabled).list-item{cursor:pointer}.list:not(.list--non-interactive)>:not(.list-item--disabled).list-item label{cursor:pointer}.list:not(.list--non-interactive) .list-item:not(.list-item--selected):hover,.list:not(.list--non-interactive) .list-item:not(.list-item--selected).list-item--focused{background-color:var(--kup-hover-background-color);color:var(--kup-hover-color)}.list.text-hidden .list-item__text{display:none}.kup-menu{animation:fade-in 0.25s ease-out;background-color:var(--kup-background-color);box-shadow:var(--kup-box-shadow);color:var(--kup-text-color);display:none;max-height:var(--kup_list_max_height_as_menu);overflow:auto;position:relative;transform:none;transform-origin:unset;transition:height 0.2s;user-select:none;will-change:unset}.kup-menu.visible{display:block}.kup-menu .list-item__text{user-select:none}:host([nested-list]){--kup_list_item_expand_padding:1.5em;max-width:250px}:host([nested-list]) .kup-menu{max-height:unset;overflow:visible}:host([nested-list]) kup-list{display:none;left:100%;position:absolute;top:0}:host([nested-list]) .list-item{overflow:visible}:host([nested-list]) .list-item__expand-icon{position:absolute;right:0}:host([nested-list]) .list-item:hover kup-list{display:block}:host(.kup-paddingless) .list{padding:0}:host(.kup-danger){--kup-list-primary-color:var(--kup-danger-color);--kup-list-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-list-primary-color:var(--kup-info-color);--kup-list-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-list-primary-color:var(--kup-secondary-color);--kup-list-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-list-primary-color:var(--kup-success-color);--kup-list-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-list-primary-color:var(--kup-warning-color);--kup-list-primary-color-rgb:var(--kup-warning-color-rgb)}";
 
 var __classPrivateFieldGet$5 = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)
@@ -35805,6 +35808,7 @@ const KupImage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.kupClick = createEvent(this, "kup-image-click", 6);
+    this.kupLoad = createEvent(this, "kup-image-load", 6);
     /**
      * True when the resource is an URL.
      */
@@ -35830,6 +35834,13 @@ const KupImage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       el: e.target,
     });
   }
+  onKupLoad(e) {
+    this.kupLoad.emit({
+      comp: this,
+      id: this.rootElement.id,
+      el: e.target,
+    });
+  }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
   /*-------------------------------------------------*/
@@ -35909,6 +35920,7 @@ const KupImage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$1 {
       sizeX: this.sizeX,
       sizeY: this.sizeY,
       onClick: (e) => this.onKupClick(e),
+      onLoad: (e) => this.onKupLoad(e),
     };
     let elStyle = {
       height: props.sizeY,
@@ -39064,10 +39076,7 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$
    */
   async newColumn(type, options) {
     const result = __classPrivateFieldGet$3(this, _KupDataTable_kupManager, "f").data.column.new(this.data, type, options);
-    const error = !!(typeof result === 'string' || result instanceof String);
-    if (!error) {
-      this.refresh();
-    }
+    this.refresh();
     return result;
   }
   /**

package/dist/components/kup-dashboard.js

@@ -211,9 +211,6 @@ const KupDashboard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         break;
       }
     }
-    //console.log(
-    //    `pointer: ${pointerX}:${pointerY} - vertical: ${vertical} - index: ${idx}`
-    //);
     return idx;
   }
   didRenderInteractables() {

package/dist/components/kup-family-tree.js

@@ -18,7 +18,7 @@ var KupFamilyTreeProps;
   KupFamilyTreeProps["stackedLeaves"] = "Child nodes that have no children are arranged vertically.";
 })(KupFamilyTreeProps || (KupFamilyTreeProps = {}));
 
-const kupFamilyTreeCss = ":host{--kup_familytree_item_background_color:var(\n    --kup-familytree-item-background-color,\n    var(--kup-background-color)\n  );--kup_familytree_item_color:var(\n    --kup-familytree-item-color,\n    var(--kup-text-color)\n  );--kup_familytree_item_height:var(--kup-familytree-item-height, 80px);--kup_familytree_item_h_padding:var(--kup-familytree-item-h-padding, 8px);--kup_familytree_item_v_padding:var(--kup-familytree-item-v-padding, 10px);--kup_familytree_item_width:var(--kup-familytree-item-width, 280px);--kup_familytree_lines_color:var(\n    --kup-familytree-lines-color,\n    var(--kup-border-color)\n  );display:block;overflow:hidden}.family-tree{cursor:grab;display:flex;transform:scale(var(--kup_familytree_scale, 1));transform-origin:0px 0px}.family-tree--dragging{cursor:grabbing}.family-tree__node{border-collapse:collapse;margin:auto}.family-tree__node--stacked{margin-bottom:4px}.family-tree__node__staff{align-items:center;display:flex;flex-direction:column;height:0;transform:translateX(calc( ( var(--kup_familytree_item_width) + (var(--kup_familytree_item_h_padding) * 2) ) / 2 )) translateY(calc( 0px - ( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * (var(--kup_familytree_item_v_padding) * 2) ) ))}.family-tree__node__staff__item{padding:var(--kup_familytree_item_v_padding);text-align:left}.family-tree__node__staff__item:before{border-top:2px solid var(--kup_familytree_lines_color);content:\"\";position:absolute;transform:translateX(calc(100% + 2px)) translateY(calc(var(--kup_familytree_item_height) / 2));width:var(--kup_familytree_item_h_padding)}.family-tree__node td{vertical-align:top;padding:0}.family-tree__line--left{border-left:2px solid var(--kup_familytree_lines_color)}.family-tree__line--placeholder{height:calc(var(--kup_familytree_item_height) / 2)}.family-tree__line--staff{height:calc( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * (var(--kup_familytree_item_v_padding) * 2) )}.family-tree__line--right{border-right:2px solid var(--kup_familytree_lines_color)}.family-tree__line--top{border-top:2px solid var(--kup_familytree_lines_color)}.family-tree__line--vertical{background-color:var(--kup_familytree_lines_color);margin-left:auto;margin-right:auto;width:2px}.family-tree__item{display:flex}.family-tree__item__wrapper{margin:auto}.family-tree__item__wrapper kup-box{margin:0 auto;overflow:hidden;padding:0 18px;width:var(--kup_familytree_item_width);z-index:1}.family-tree__item__wrapper .f-button{--kup-button-primary-color:var(--kup-text-color);--kup-button-primary-color-rgb:var(--kup-text-color-rgb);--kup-button-primary-color-h:var(--kup-text-color-h);--kup-button-primary-color-s:var(--kup-text-color-s);--kup-button-primary-color-l:var(--kup-text-color-l);margin:0 auto;width:max-content}.family-tree__item__wrapper .f-button button{height:32px;width:32px}.family-tree__item__layout{background-color:var(--kup_familytree_item_background_color);border:1px solid var(--kup_familytree_lines_color);border-radius:8px;box-sizing:border-box;display:flex;height:var(--kup_familytree_item_height);margin:0 18px;width:var(--kup_familytree_item_width)}.family-tree__item__layout--1{justify-content:center;color:var(--kup_familytree_item_color)}.family-tree__item__layout--1>.family-tree__item__layout__text__title{margin-top:auto;margin-bottom:auto}.family-tree__item__layout--2{background-color:var(--kup_familytree_item_background_color);justify-content:flex-start}.family-tree__item__layout__color{background-color:var(--kup-secondary-color);border-bottom-left-radius:8px;border-top-left-radius:8px;height:100%;width:10px}.family-tree__item__layout__image{display:flex;margin:auto 10px}.family-tree__item__layout__image img{border-radius:50px;object-fit:cover}.family-tree__item__layout__text{display:flex;flex-direction:column;justify-content:center}.family-tree__item__layout__text__title{font-size:18px;margin-bottom:5px}.family-tree__item__layout__text__subtitle{font-size:14px}.family-tree__item__layout__text__title,.family-tree__item__layout__text__subtitle{max-width:calc(var(--kup_familytree_item_width) - 30%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+const kupFamilyTreeCss = ":host{--kup_familytree_item_background_color:var(\n    --kup-familytree-item-background-color,\n    var(--kup-background-color)\n  );--kup_familytree_item_color:var(\n    --kup-familytree-item-color,\n    var(--kup-text-color)\n  );--kup_familytree_item_height:var(--kup-familytree-item-height, 80px);--kup_familytree_item_h_padding:var(--kup-familytree-item-h-padding, 8px);--kup_familytree_item_v_padding:var(--kup-familytree-item-v-padding, 10px);--kup_familytree_item_width:var(--kup-familytree-item-width, 280px);--kup_familytree_lines_color:var(\n    --kup-familytree-lines-color,\n    var(--kup-border-color)\n  );display:block;overflow:hidden}.family-tree{cursor:grab;display:flex;transform:scale(var(--kup_familytree_scale, 1));transform-origin:0px 0px}.family-tree--dragging{cursor:grabbing}.family-tree__node{border-collapse:collapse;margin:auto}.family-tree__node--stacked{margin-bottom:4px}.family-tree__node__staff{align-items:center;display:flex;flex-direction:column;height:0;transform:translateX(calc((var(--kup_familytree_item_width) + var(--kup_familytree_item_h_padding) * 2) / 2)) translateY(calc(0px - (var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * var(--kup_familytree_item_v_padding) * 2)))}.family-tree__node__staff__item{padding:var(--kup_familytree_item_v_padding);text-align:left}.family-tree__node__staff__item:before{border-top:2px solid var(--kup_familytree_lines_color);content:\"\";position:absolute;transform:translateX(calc(100% + 2px)) translateY(calc(var(--kup_familytree_item_height) / 2));width:var(--kup_familytree_item_h_padding)}.family-tree__node td{vertical-align:top;padding:0}.family-tree__line--left{border-left:2px solid var(--kup_familytree_lines_color)}.family-tree__line--placeholder{height:calc(var(--kup_familytree_item_height) / 2)}.family-tree__line--staff{height:calc(var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * var(--kup_familytree_item_v_padding) * 2)}.family-tree__line--right{border-right:2px solid var(--kup_familytree_lines_color)}.family-tree__line--top{border-top:2px solid var(--kup_familytree_lines_color)}.family-tree__line--vertical{background-color:var(--kup_familytree_lines_color);margin-left:auto;margin-right:auto;width:2px}.family-tree__item{display:flex}.family-tree__item__wrapper{margin:auto}.family-tree__item__wrapper kup-box{margin:0 auto;overflow:hidden;padding:0 18px;width:var(--kup_familytree_item_width);z-index:1}.family-tree__item__wrapper .f-button{--kup-button-primary-color:var(--kup-text-color);--kup-button-primary-color-rgb:var(--kup-text-color-rgb);--kup-button-primary-color-h:var(--kup-text-color-h);--kup-button-primary-color-s:var(--kup-text-color-s);--kup-button-primary-color-l:var(--kup-text-color-l);margin:0 auto;width:max-content}.family-tree__item__wrapper .f-button button{height:32px;width:32px}.family-tree__item__layout{background-color:var(--kup_familytree_item_background_color);border:1px solid var(--kup_familytree_lines_color);border-radius:8px;box-sizing:border-box;display:flex;height:var(--kup_familytree_item_height);margin:0 18px;width:var(--kup_familytree_item_width)}.family-tree__item__layout--1{justify-content:center;color:var(--kup_familytree_item_color)}.family-tree__item__layout--1>.family-tree__item__layout__text__title{margin-top:auto;margin-bottom:auto}.family-tree__item__layout--2{background-color:var(--kup_familytree_item_background_color);justify-content:flex-start}.family-tree__item__layout__color{background-color:var(--kup-secondary-color);border-bottom-left-radius:8px;border-top-left-radius:8px;height:100%;width:10px}.family-tree__item__layout__image{display:flex;margin:auto 10px}.family-tree__item__layout__image img{border-radius:50px;object-fit:cover}.family-tree__item__layout__text{display:flex;flex-direction:column;justify-content:center}.family-tree__item__layout__text__title{font-size:18px;margin-bottom:5px}.family-tree__item__layout__text__subtitle{font-size:14px}.family-tree__item__layout__text__title,.family-tree__item__layout__text__subtitle{max-width:calc(var(--kup_familytree_item_width) - 30%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
   if (kind === "a" && !f)