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

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

@@ -1,14 +1,17 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
 import { MDCRipple } from '@material/ripple';
+import * as builtInLayouts from './built-in/kup-card-built-in';
 import * as collapsibleLayouts from './collapsible/kup-card-collapsible';
 import * as dialogLayouts from './dialog/kup-card-dialog';
+import * as freeLayouts from './free/kup-card-free';
 import * as scalableLayouts from './scalable/kup-card-scalable';
 import * as standardLayouts from './standard/kup-card-standard';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import Picker from 'vanilla-picker';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { KupCardFamily, KupCardCSSClasses, KupCardIds, KupCardProps, } from './kup-card-declarations';
 import { FImage } from '../../f-components/f-image/f-image';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
-import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declarations';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
 import { layoutSpecificEvents } from './kup-card-helper';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
@@ -78,11 +81,15 @@ export class KupCard {
      * Prevents multiple scaling callbacks when the card is scalable.
      */
     this.scalingActive = false;
+    this.componentWrapper = null;
+    this.colorPicker = null;
+    this.firstColorPickerChange = null;
   }
-  onKupClick(id) {
+  onKupClick(id, value) {
     this.kupClick.emit({
       comp: this,
       id: id,
+      value: value,
     });
   }
   onKupClose(id) {
@@ -153,7 +160,7 @@ export class KupCard {
         const link = links[index];
         link.onclick = (e) => {
           e.stopPropagation();
-          this.onKupClick(link.id);
+          this.onKupClick(link.id, null);
         };
       }
     }
@@ -189,12 +196,18 @@ export class KupCard {
     const method = 'create' + this.layoutNumber;
     try {
       switch (family) {
+        case KupCardFamily.BUILT_IN: {
+          return builtInLayouts[method](this);
+        }
         case KupCardFamily.COLLAPSIBLE: {
           return collapsibleLayouts[method](this);
         }
         case KupCardFamily.DIALOG: {
           return dialogLayouts[method](this);
         }
+        case KupCardFamily.FREE: {
+          return freeLayouts[method](this);
+        }
         case KupCardFamily.SCALABLE: {
           return scalableLayouts[method](this);
         }
@@ -214,8 +227,8 @@ export class KupCard {
     }
   }
   /**
-   * This method will trigger whenever the card's render() hook occurs or when the size changes (through KupManager), in order to manage the more complex layout families.
-   * It will also update any dynamic color handled by the selected layout.
+   * This method is invoked by the layout manager when the layout family is dialog.
+   * It will "dialogify" the card.
    */
   dialog() {
     const root = this.rootElement.shadowRoot;
@@ -228,13 +241,54 @@ export class KupCard {
       }
     }
   }
+  /**
+   * This method is invoked by the layout manager when the layout family is built-in.
+   */
+  builtIn() {
+    const root = this.rootElement.shadowRoot;
+    if (root) {
+      const builtinLayout = root.querySelector('.' + KupCardCSSClasses.BUILT_IN_CARD);
+      switch (this.layoutNumber) {
+        case 4:
+          const colorPickerOptions = this.data && this.data.options
+            ? this.data.options
+            : null;
+          const color = colorPickerOptions
+            ? colorPickerOptions.initialValue
+            : null;
+          this.firstColorPickerChange = true;
+          if (!this.colorPicker) {
+            this.colorPicker = new Picker({
+              alpha: false,
+              color: color,
+              parent: builtinLayout,
+              popup: false,
+              onChange: colorPickerOptions &&
+                colorPickerOptions.changeCb
+                ? (color) => {
+                  if (!this.firstColorPickerChange) {
+                    colorPickerOptions.changeCb(color);
+                  }
+                  this.firstColorPickerChange = false;
+                }
+                : null,
+            });
+            if (colorPickerOptions &&
+              colorPickerOptions.creationCb) {
+              colorPickerOptions.creationCb(this.colorPicker);
+            }
+          }
+          break;
+      }
+    }
+  }
   /**
    * This method will trigger whenever the card's render() hook occurs or when the size changes (through KupManager), in order to manage the more complex layout families.
    * It will also update any dynamic color handled by the selected layout.
    */
   layoutManager() {
     const root = this.rootElement.shadowRoot;
-    if (root.querySelector('#kup-component')) {
+    if (this.componentWrapper) {
       const family = this.layoutFamily.toLowerCase();
       const dynColors = root.querySelectorAll('.dyn-color');
       for (let index = 0; index < dynColors.length; index++) {
@@ -248,6 +302,9 @@ export class KupCard {
         case KupCardFamily.DIALOG:
           this.dialog();
           break;
+        case KupCardFamily.BUILT_IN:
+          this.builtIn();
+          break;
         case KupCardFamily.SCALABLE:
           if (!this.scalingActive) {
             this.scalable();
@@ -272,6 +329,7 @@ export class KupCard {
     root.addEventListener('kup-chip-blur', this.cardEvent);
     root.addEventListener('kup-chip-click', this.cardEvent);
     root.addEventListener('kup-chip-iconclick', this.cardEvent);
+    root.addEventListener('kup-combobox-change', this.cardEvent);
     root.addEventListener('kup-combobox-itemclick', this.cardEvent);
     root.addEventListener('kup-datatable-cellupdate', this.cardEvent);
     root.addEventListener('kup-datatable-rowselected', this.cardEvent);
@@ -279,10 +337,12 @@ export class KupCard {
     root.addEventListener('kup-datepicker-input', this.cardEvent);
     root.addEventListener('kup-datepicker-itemclick', this.cardEvent);
     root.addEventListener('kup-datepicker-textfieldsubmit', this.cardEvent);
+    root.addEventListener('kup-dropdownbutton-itemclick', this.cardEvent);
     root.addEventListener('kup-list-click', this.cardEvent);
     root.addEventListener('kup-switch-change', this.cardEvent);
     root.addEventListener('kup-tabbar-click', this.cardEvent);
     root.addEventListener('kup-textfield-cleariconclick', this.cardEvent);
+    root.addEventListener('kup-textfield-change', this.cardEvent);
     root.addEventListener('kup-textfield-input', this.cardEvent);
     root.addEventListener('kup-textfield-submit', this.cardEvent);
     root.addEventListener('kup-timepicker-cleariconclick', this.cardEvent);
@@ -389,7 +449,7 @@ export class KupCard {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    if (!this.data) {
+    if (!this.data && this.rootElement.children.length < 1) {
       return;
     }
     const style = {
@@ -398,7 +458,7 @@ export class KupCard {
     };
     return (h(Host, { style: style },
       h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
-      h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null) }, this.getLayout())));
+      h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null, null), ref: (el) => (this.componentWrapper = el) }, this.getLayout())));
   }
   disconnectedCallback() {
     this.kupManager.interact.unregister([this.rootElement]);
@@ -489,7 +549,7 @@ export class KupCard {
       "mutable": false,
       "complexType": {
         "original": "KupCardFamily",
-        "resolved": "KupCardFamily.COLLAPSIBLE | KupCardFamily.DIALOG | KupCardFamily.SCALABLE | KupCardFamily.STANDARD",
+        "resolved": "KupCardFamily.BUILT_IN | KupCardFamily.COLLAPSIBLE | KupCardFamily.DIALOG | KupCardFamily.FREE | KupCardFamily.SCALABLE | KupCardFamily.STANDARD",
         "references": {
           "KupCardFamily": {
             "location": "import",
@@ -606,12 +666,12 @@ export class KupCard {
         "text": "Triggered when the card is clicked."
       },
       "complexType": {
-        "original": "KupEventPayload",
-        "resolved": "KupEventPayload",
+        "original": "KupCardClickPayload",
+        "resolved": "KupCardClickPayload",
         "references": {
-          "KupEventPayload": {
+          "KupCardClickPayload": {
             "location": "import",
-            "path": "../../types/GenericTypes"
+            "path": "./kup-card-declarations"
           }
         }
       }

package/dist/collection/components/kup-card/scalable/kup-card-scalable.js

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import { FImage } from '../../../f-components/f-image/f-image';
-import { KupThemeColorValues } from '../../../utils/kup-theme/kup-theme-declarations';
+import { KupThemeColorValues } from '../../../managers/kup-theme/kup-theme-declarations';
 const dom = document.documentElement;
 /**
  * 1st scalable card layout, column of 2 texts.

package/dist/collection/components/kup-card/standard/kup-card-standard.js

@@ -1,11 +1,11 @@
 import { h } from '@stencil/core';
 import { FImage } from '../../../f-components/f-image/f-image';
 import { compList } from '../kup-card-helper';
-import { KupLanguageColumn, KupLanguageGeneric, } from '../../../utils/kup-language/kup-language-declarations';
+import { KupLanguageColumn, KupLanguageGeneric, } from '../../../managers/kup-language/kup-language-declarations';
 import { FChipType } from '../../../f-components/f-chip/f-chip-declarations';
 import { KupCardCSSClasses, KupCardIds } from '../kup-card-declarations';
 import { KupColumnMenuIds } from '../../../utils/kup-column-menu/kup-column-menu-declarations';
-import { KupThemeColorValues } from '../../../utils/kup-theme/kup-theme-declarations';
+import { KupThemeColorValues } from '../../../managers/kup-theme/kup-theme-declarations';
 /**
  * 1st standard card layout, inspired by Material Design.
  * @param {KupCard} component - Card component.
@@ -614,6 +614,14 @@ export function create14(component) {
       switchesIds.push(switchEl['id']);
     }
   }
+  // Setting up text fields.
+  const textfieldsIds = [];
+  for (let index = 0; index < textfieldArray.length; index++) {
+    const textfield = textfieldArray[index];
+    if (textfield['id']) {
+      textfieldsIds.push(textfield['id']);
+    }
+  }
   return (h("div", { class: `standard-layout-${component.layoutNumber} ` },
     objectArray[0] ? (h("div", { class: "section-1" },
       imageArray[0] ? (h(FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "84px", sizeY: "84px" }))) : (h("div", { class: "sub-spinner" },
@@ -646,9 +654,12 @@ export function create14(component) {
           datepickerArray.length > 0
             ? compList(datepickerArray, 'datepicker')
             : null,
-          textfieldArray.length > 0
-            ? compList(textfieldArray, 'textfield')
-            : null,
+          textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_FILTER) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
+            KupColumnMenuIds.TEXTFIELD_FILTER)))) : null,
+          textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_FROM) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
+            KupColumnMenuIds.TEXTFIELD_FROM)))) : null,
+          textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_TO) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
+            KupColumnMenuIds.TEXTFIELD_TO)))) : null,
           timepickerArray.length > 0
             ? compList(timepickerArray, 'timepicker')
             : null),
@@ -661,6 +672,8 @@ export function create14(component) {
             KupColumnMenuIds.BUTTON_REMOVE)))) : null,
           buttonsIds.includes(KupColumnMenuIds.BUTTON_GROUP) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===
             KupColumnMenuIds.BUTTON_GROUP)))) : null),
+        h("div", { class: "sub-formula" }, textfieldsIds.includes(KupColumnMenuIds.TEXTFIELD_FORMULA) ? (h("kup-text-field", Object.assign({}, textfieldArray.find((x) => x.id ===
+          KupColumnMenuIds.TEXTFIELD_FORMULA)))) : null),
         h("div", { class: "sub-chip" },
           chipArray[0] ? (h("kup-chip", Object.assign({}, chipArray[0], { type: FChipType.INPUT, id: KupCardIds.COLUMNS_LIST }))) : (h("kup-chip", { type: FChipType.INPUT, id: KupCardIds.COLUMNS_LIST })),
           buttonsIds.includes(KupColumnMenuIds.BUTTON_APPLY) ? (h("kup-button", Object.assign({}, buttonArray.find((x) => x.id ===

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

@@ -1,12 +1,12 @@
 import { Component, Element, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupCellProps } from './kup-cell-declarations';
 import { FCell } from '../../f-components/f-cell/f-cell';
 import { FCellPadding, } from '../../f-components/f-cell/f-cell-declarations';
-import { KupDragEffect, } from '../../utils/kup-interact/kup-interact-declarations';
-import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declarations';
+import { KupDragEffect, } from '../../managers/kup-interact/kup-interact-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
 export class KupCell {
   constructor() {
     /*-------------------------------------------------*/
@@ -125,10 +125,10 @@ export class KupCell {
   }
   generateColumn() {
     const colname = this.data && this.data.obj && this.data.obj.t
-      ? this.data.obj.t + '|' + this.data.obj.p
+      ? this.data.obj.t + ';' + this.data.obj.p
       : 'KUPCELL';
     const coltitle = this.data && this.data.obj && this.data.obj.t
-      ? this.data.obj.t + '|' + this.data.obj.p
+      ? this.data.obj.t + ';' + this.data.obj.p
       : this.kupManager.language.translate(KupLanguageGeneric.EMPTY_OBJECT);
     return {
       name: colname,
@@ -145,6 +145,7 @@ export class KupCell {
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
+    this.kupManager.dates.register(this);
     this.kupManager.debug.logLoad(this, false);
     this.kupManager.language.register(this);
     this.kupManager.theme.register(this);
@@ -159,10 +160,6 @@ export class KupCell {
     this.didRenderInteractables();
     this.kupManager.debug.logRender(this, true);
   }
-  disconnectedCallback() {
-    this.kupManager.language.unregister(this);
-    this.kupManager.theme.unregister(this);
-  }
   render() {
     const props = {
       cell: this.data,
@@ -178,6 +175,11 @@ export class KupCell {
       h("div", { id: componentWrapperId },
         h(FCell, Object.assign({}, props)))));
   }
+  disconnectedCallback() {
+    this.kupManager.dates.unregister(this);
+    this.kupManager.language.unregister(this);
+    this.kupManager.theme.unregister(this);
+  }
   static get is() { return "kup-cell"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -215,12 +217,12 @@ export class KupCell {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Cell",
-        "resolved": "Cell",
+        "original": "KupDataCell",
+        "resolved": "KupDataCell",
         "references": {
-          "Cell": {
+          "KupDataCell": {
             "location": "import",
-            "path": "../kup-data-table/kup-data-table-declarations"
+            "path": "../../managers/kup-data/kup-data-declarations"
           }
         }
       },

package/dist/collection/components/kup-chart/kup-chart-builder.js

@@ -1,8 +1,8 @@
 import { formatToNumber } from '../../utils/cell-utils';
 import { getColumnByName } from '../../utils/cell-utils';
-import { KupObjects } from '../../utils/kup-objects/kup-objects';
-import { KupDates } from '../../utils/kup-dates/kup-dates';
-import { KupDatesNormalize } from '../../utils/kup-dates/kup-dates-declarations';
+import { KupObjects } from '../../managers/kup-objects/kup-objects';
+import { KupDates } from '../../managers/kup-dates/kup-dates';
+import { KupDatesNormalize } from '../../managers/kup-dates/kup-dates-declarations';
 export function getSerieDecode(serie, series) {
   if (serie == null || series == null) {
     return null;
@@ -36,7 +36,6 @@ export const convertColumns = (data, { series, axis }) => {
   return columns;
 };
 export const convertRows = (data, columns, showMarks) => {
-  const kupObjects = new KupObjects();
   if (!data) {
     return [];
   }

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

@@ -1,11 +1,11 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, Watch, } from '@stencil/core';
 import { ChartType, ChartAspect, KupChartProps, } from './kup-chart-declarations';
 import { convertColumns, convertRows, getSerieDecode, } from './kup-chart-builder';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, identify, setProps } from '../../utils/utils';
 import { getColumnByName } from '../../utils/cell-utils';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
-import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupChart {
   constructor() {
@@ -636,12 +636,12 @@ export class KupChart {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DataTable",
-        "resolved": "DataTable",
+        "original": "KupDataDataset",
+        "resolved": "KupDataDataset",
         "references": {
-          "DataTable": {
+          "KupDataDataset": {
             "location": "import",
-            "path": "../kup-data-table/kup-data-table-declarations"
+            "path": "../../managers/kup-data/kup-data-declarations"
           }
         }
       },

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

@@ -1,5 +1,5 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { FCheckbox } from '../../f-components/f-checkbox/f-checkbox';
 import { KupCheckboxProps, } from './kup-checkbox-declarations';
 import { getProps, setProps } from '../../utils/utils';

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

@@ -7,6 +7,7 @@
 * @prop --kup-chip-font-size: Sets font size of the chips.
 * @prop --kup-chip-font-weight: Sets font weight of the chips.
 * @prop --kup-chip-height: Sets height of the chips.
+* @prop --kup-chip-indent-multiplier: Sets the indentation multiplier for children chips.
 * @prop --kup-chip-margin: Sets margin of the chips.
 * @prop --kup-chip-padding: Sets padding of the chips.
 * @prop --kup-chip-primary-color: Sets primary color of the component.

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

@@ -1,9 +1,9 @@
-import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, Watch, } from '@stencil/core';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { FChip } from '../../f-components/f-chip/f-chip';
 import { FChipType, } from '../../f-components/f-chip/f-chip-declarations';
-import { KupChipProps } from './kup-chip-declarations';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
+import { KupChipProps, } from './kup-chip-declarations';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupChip {
@@ -22,11 +22,6 @@ export class KupChip {
      * @default []
      */
     this.data = [];
-    /**
-     * List of elements.
-     * @default []
-     */
-    this.dataNew = [];
     /**
      * The type of chip. Available types: input, filter, choice or empty for default.
      * @default FChipType.STANDARD
@@ -40,79 +35,56 @@ export class KupChip {
      */
     this.kupManager = kupManagerInstance();
   }
-  onKupBlur(i) {
-    let obj = null;
-    let value = null;
-    if (this.data[i]) {
-      obj = this.data[i].obj;
-      value = this.data[i].value;
-    }
+  onKupBlur(chip) {
     this.kupBlur.emit({
       comp: this,
       id: this.rootElement.id,
-      index: i,
-      value: value,
+      chip: chip,
     });
   }
-  onKupClick(i) {
+  onKupClick(chip) {
     const isChoice = this.type.toLowerCase() === FChipType.CHOICE;
     const isFilter = this.type.toLowerCase() === FChipType.FILTER;
-    let obj = null;
-    let value = null;
-    if (this.data[i]) {
-      obj = this.data[i].obj;
-      value = this.data[i].value;
-    }
     if (isChoice) {
-      for (let j = 0; j < this.data.length; j++) {
-        if (j !== i && this.data[j].checked) {
-          this.data[j].checked = false;
-        }
-      }
+      this.kupManager.data.node.setProperties(this.data, { checked: false }, true, [chip]);
     }
     if (isChoice || isFilter) {
-      if (this.data[i].checked) {
-        this.data[i].checked = false;
-      }
-      else {
-        this.data[i].checked = true;
-      }
-      let newData = [...this.data];
-      this.data = newData;
+      chip.checked = chip.checked ? false : true;
     }
     this.kupClick.emit({
       comp: this,
       id: this.rootElement.id,
-      index: i,
-      value: value,
+      chip: chip,
     });
+    this.refresh();
   }
-  onKupFocus(i) {
-    let value = null;
-    if (this.data[i]) {
-      value = this.data[i].value;
-    }
+  onKupFocus(chip) {
     this.kupFocus.emit({
       comp: this,
       id: this.rootElement.id,
-      index: i,
-      value: value,
+      chip: chip,
     });
   }
-  onKupIconClick(i) {
-    let value = null;
-    if (this.data[i]) {
-      value = this.data[i].value;
-    }
-    this.data.splice(i, 1);
-    let newData = [...this.data];
-    this.data = newData;
+  onKupIconClick(chip) {
     this.kupIconClick.emit({
       comp: this,
       id: this.rootElement.id,
-      index: i,
-      value: value,
+      chip: this.kupManager.data.node.remove(this.data, chip),
     });
+    this.refresh();
+  }
+  /*-------------------------------------------------*/
+  /*                  W a t c h e r s                */
+  /*-------------------------------------------------*/
+  checkDataset(newData) {
+    if (!newData) {
+      newData = [];
+    }
+    if (newData.columns) {
+      this.kupManager.debug.logMessage(this, 'Detected KupDataDataset: converting rows to nodes.', KupDebugCategory.WARNING);
+      const data = this.data;
+      this.data = this.kupManager.data.row.toNode(data);
+    }
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
@@ -144,6 +116,7 @@ export class KupChip {
   componentWillLoad() {
     this.kupManager.debug.logLoad(this, false);
     this.kupManager.theme.register(this);
+    this.checkDataset(this.data);
   }
   componentDidLoad() {
     this.kupManager.debug.logLoad(this, true);
@@ -178,12 +151,12 @@ export class KupChip {
         ? true
         : false,
       data: this.data,
-      dataNew: this.dataNew,
       info: this.rootElement.classList.contains('kup-info')
         ? true
         : false,
       onBlur: [],
       onClick: [],
+      onExpansionClick: [],
       onFocus: [],
       onIconClick: [],
       secondary: this.rootElement.classList.contains('kup-secondary')
@@ -198,13 +171,19 @@ export class KupChip {
         : false,
     };
     for (let j = 0; j < this.data.length; j++) {
-      props.onBlur.push(() => this.onKupBlur(j));
-      props.onClick.push(() => this.onKupClick(j));
-      props.onFocus.push(() => this.onKupFocus(j));
-      props.onIconClick.push(() => this.onKupIconClick(j));
+      props.onBlur.push((chip) => this.onKupBlur(chip));
+      props.onClick.push((chip) => this.onKupClick(chip));
+      props.onExpansionClick.push((chip, e) => {
+        chip.isExpanded = !chip.isExpanded ? true : false;
+        if (e.ctrlKey && chip.children && chip.children.length > 0) {
+          this.kupManager.data.node.setProperties(chip.children, { isExpanded: chip.isExpanded }, true);
+        }
+        this.refresh();
+      });
+      props.onFocus.push((chip) => this.onKupFocus(chip));
+      props.onIconClick.push((chip) => this.onKupIconClick(chip));
     }
-    if ((!this.data || this.data.length === 0) &&
-      (!this.dataNew || this.dataNew.length === 0)) {
+    if (!this.data || this.data.length === 0) {
       return;
     }
     return (h(Host, null,
@@ -252,36 +231,12 @@ export class KupChip {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "FChipData[]",
-        "resolved": "FChipData[]",
-        "references": {
-          "FChipData": {
-            "location": "import",
-            "path": "../../f-components/f-chip/f-chip-declarations"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "[]"
-          }],
-        "text": "List of elements."
-      },
-      "defaultValue": "[]"
-    },
-    "dataNew": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "TreeNode[]",
-        "resolved": "TreeNode[]",
+        "original": "KupChipNode[]",
+        "resolved": "KupChipNode[]",
         "references": {
-          "TreeNode": {
+          "KupChipNode": {
             "location": "import",
-            "path": "../kup-tree/kup-tree-declarations"
+            "path": "./kup-chip-declarations"
           }
         }
       },
@@ -484,4 +439,8 @@ export class KupChip {
     }
   }; }
   static get elementRef() { return "rootElement"; }
+  static get watchers() { return [{
+      "propName": "data",
+      "methodName": "checkDataset"
+    }]; }
 }