@sme.up/ketchup 5.0.0 → 5.1.1

package/dist/ketchup/p-f250d42b.entry.js

@@ -0,0 +1 @@
+import{r as t,c as s,f as i,h as o,H as a,g as n}from"./p-8be1337b.js";import{k as r}from"./p-ee33cbe9.js";import{g as e,s as c}from"./p-10c8d755.js";import{c as l}from"./p-97e8ea42.js";import{F as p}from"./p-5d190cf5.js";import"./p-6c77a36c.js";import"./p-47b57d97.js";var h;!function(t){t.actionButton="Set of FButton props to set the action button.",t.closeButton="When true, the hide button will be displayed.",t.customStyle="Custom style of the component.",t.text="Sets the textual content of the snackbar.",t.timeout="Defaults at null, when set the snackbar will automatically disappear after the specified amount of milliseconds."}(h||(h={}));const u=class{constructor(i){t(this,i),this.kupActionClick=s(this,"kup-snackbar-actionclick",6),this.visible=!1,this.actionButton=null,this.closeButton=!0,this.customStyle="",this.text="",this.timeout=null,this.kupManager=r()}onKupActionClick(){this.hide(),this.kupActionClick.emit({comp:this,id:this.rootElement.id})}async getProps(t){return e(this,h,t)}async hide(){this.visible=!1}async refresh(){i(this)}async setProps(t){c(this,h,t)}async show(){this.visible=!0}componentWillLoad(){this.kupManager.debug.logLoad(this,!1),this.kupManager.theme.register(this)}componentDidLoad(){this.kupManager.debug.logLoad(this,!0)}componentWillRender(){this.kupManager.debug.logRender(this,!1)}componentDidRender(){this.timeout&&this.visible&&setTimeout((()=>{this.hide()}),this.timeout),this.kupManager.debug.logRender(this,!0)}render(){return o(a,{"kup-visible":this.visible},o("style",null,this.kupManager.theme.setKupStyle(this.rootElement)),o("div",{id:l},o("div",{class:"snackbar"},o("div",{class:"snackbar__text"},this.text),this.actionButton||this.closeButton?o("div",{class:"snackbar__buttons"},this.actionButton?o("div",{class:"snackbar__action"},o(p,Object.assign({},this.actionButton,{onClick:()=>this.onKupActionClick()}))):null,this.closeButton?o("div",{class:"snackbar__close"},o(p,{icon:"close",onClick:()=>this.hide()})):null):null)))}disconnectedCallback(){this.kupManager.theme.unregister(this)}get rootElement(){return n(this)}};u.style=":host{animation:snackbar-show 125ms;bottom:0;box-sizing:border-box;display:block;left:0;outline:none;pointer-events:none;position:fixed;transition:opacity 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;width:100%;z-index:calc(var(--kup-navbar-zindex) + 1)}:host(:not([kup-visible])){display:none}#kup-component{display:flex;justify-content:center;height:100%;padding:8px;width:100%}.snackbar{align-items:center;background:var(--kup-navbar-background-color);border-radius:5px;box-shadow:var(--kup-box-shadow);color:var(--kup-navbar-color);display:flex;justify-content:flex-start;max-width:672px;min-height:48px;min-width:344px}.snackbar__text{padding:14px 16px;pointer-events:all;white-space:nowrap}.snackbar__buttons{--kup-button-primary-color:var(--kup-navbar-color);--kup-button-primary-color-rgb:var(--kup-navbar-color-rgb);--kup-button-primary-color-h:var(--kup-navbar-color-h);--kup-button-primary-color-s:var(--kup-navbar-color-s);--kup-button-primary-color-l:var(--kup-navbar-color-l);align-items:center;display:flex;justify-content:flex-end;margin-right:8px;pointer-events:all;width:100%}.snackbar__close{--kup-button-font-size:11px;margin-left:8px;pointer-events:all}@keyframes snackbar-show{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}:host(.kup-top){bottom:unset;top:var(--kup-navbar-height, 0)}";export{u as kup_snackbar}

package/dist/ketchup/p-f9c41e20.entry.js

@@ -0,0 +1 @@
+import{r,c as o,f as t,h as e,H as a,g as i}from"./p-8be1337b.js";import{k as s}from"./p-ee33cbe9.js";import{g as p,s as n}from"./p-10c8d755.js";import{c as d}from"./p-97e8ea42.js";var c;!function(r){r.customStyle="Custom style of the component.",r.opened="Defaults at false. When set to true, the drawer appears."}(c||(c={}));const u=class{constructor(t){r(this,t),this.kupDrawerClose=o(this,"kup-drawer-close",6),this.kupDrawerOpen=o(this,"kup-drawer-open",6),this.kupDrawerReady=o(this,"kup-drawer-ready",6),this.opened=!1,this.customStyle="",this.kupManager=s()}async close(){this.opened=!1,this.kupDrawerClose.emit({comp:this,id:this.rootElement.id})}async getProps(r){return p(this,c,r)}async isOpened(){return this.opened}async open(){this.opened=!0,this.kupDrawerOpen.emit({comp:this,id:this.rootElement.id})}async refresh(){t(this)}async setProps(r){n(this,c,r)}async toggle(){this.opened?this.close():this.open()}content(){const r=[],o=Array.prototype.slice.call(this.rootElement.children,0),t=[];for(let t=0;t<o.length;t++)r.push(e("slot",null));return t.push(e("div",{class:"drawer__content"},r)),t}componentWillLoad(){this.kupManager.debug.logLoad(this,!1),this.kupManager.theme.register(this)}componentDidLoad(){this.kupDrawerReady.emit({comp:this,id:this.rootElement.id}),this.kupManager.debug.logLoad(this,!0)}componentWillRender(){this.kupManager.debug.logRender(this,!1)}componentDidRender(){this.kupManager.debug.logRender(this,!0)}render(){return e(a,{"kup-opened":this.opened},e("style",null,this.kupManager.theme.setKupStyle(this.rootElement)),e("div",{class:"backdrop",onPointerDown:r=>{r.stopPropagation(),this.close()}}),e("div",{id:d},e("div",{class:"drawer"},this.content())))}disconnectedCallback(){this.kupManager.theme.unregister(this)}get rootElement(){return i(this)}};u.style=":host{--kup_drawer_backdrop:var(--kup-drawer-backdrop, rgba(0, 0, 0, 0.32));--kup_drawer_box_shadow:var(\n    --kup-drawer-box-shadow,\n    0 8px 10px -5px rgba(0, 0, 0, 0.2),\n    0 16px 24px 2px rgba(0, 0, 0, 0.14),\n    0 6px 30px 5px rgba(0, 0, 0, 0.12)\n  );--kup_drawer_permanent_border:var(\n    --kup-drawer-permanent-border,\n    1px solid var(--kup-border-color)\n  );--kup_drawer_slide_transition:var(--kup-drawer-slide-transition, 750ms);--kup_drawer_transition:var(--kup-drawer-transition, 250ms);box-shadow:var(--kup_drawer_box_shadow);display:block;font-size:var(--kup-font-size);height:100vh;left:calc(var(--kup-drawer-width) * -1);position:fixed;top:0;transition:left var(--kup_drawer_slide_transition) cubic-bezier(0.4, 0, 0.2, 1), right var(--kup_drawer_slide_transition) cubic-bezier(0.4, 0, 0.2, 1);width:var(--kup-drawer-width);z-index:var(--kup-drawer-zindex)}#kup-component{height:100%;width:100%}.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--kup_drawer_backdrop);opacity:0;pointer-events:none;transition:opacity var(--kup_drawer_transition) ease-in;z-index:var(--kup-drawer-zindex)}.drawer{height:100%;position:fixed;width:var(--kup-drawer-width);z-index:calc(var(--kup-drawer-zindex) + 1)}.drawer__content{background-color:var(--kup-drawer-background-color);box-sizing:border-box;height:100%;overflow-y:auto;width:100%}.drawer ::slotted(*){--kup-button-primary-color:var(--kup-drawer-color);--kup-button-primary-color-rgb:var(--kup-drawer-color-rgb);--kup-button-primary-color-h:var(--kup-drawer-color-h);--kup-button-primary-color-s:var(--kup-drawer-color-s);--kup-button-primary-color-l:var(--kup-drawer-color-l);--kup-switch-label-color:var(--kup-drawer-color);--kup-switch-primary-color:var(--kup-drawer-color);--kup-switch-primary-color-rgb:var(--kup-drawer-color-rgb);--kup-textfield-color:var(--kup-drawer-color);--kup-textfield-color-rgb:var(--kup-drawer-color-rgb);--kup-textfield-primary-color:var(--kup-drawer-color);--kup-textfield-primary-color-rgb:var(--kup-drawer-color-rgb);--kup-tree-color:var(--kup-drawer-color);--kup-tree-color-rgb:var(--kup-drawer-color-rgb);--kup-tree-icon-color:var(--kup-drawer-color);color:var(--kup-drawer-color);fill:var(--kup-drawer-color)}:host([kup-opened]){left:0}:host([kup-opened]) .backdrop{opacity:1;pointer-events:all}:host(.kup-right){left:unset;right:-100%}:host([kup-opened].kup-right){right:0}:host(.kup-permanent){box-shadow:unset;transition:all 250ms}:host(.kup-permanent) .backdrop{display:none}:host(.kup-permanent) .drawer{position:relative}:host(.kup-permanent) .drawer__content{border-right:var(--kup_drawer_permanent_border)}";export{u as kup_drawer}

package/dist/ketchup/p-fea316ab.entry.js

@@ -0,0 +1 @@
+import{r as o,c as r,f as c,h as i,H as a,g as n}from"./p-8be1337b.js";import{k as t,b as e,a as d}from"./p-ee33cbe9.js";import{g as p,s}from"./p-10c8d755.js";import{F as l}from"./p-47b57d97.js";import{c as u}from"./p-97e8ea42.js";import{M as _}from"./p-8c44c3b9.js";import"./p-a0b1d769.js";var k;!function(o){o.customStyle="Custom style of the component. For more information: https://ketchup.smeup.com/ketchup-showcase/#/customization",o.data="Data of the accordion.",o.ripple="When enabled displays Material's ripple effect on item headers."}(k||(k={}));const h=class{constructor(c){o(this,c),this.kupAccordionItemSelected=r(this,"kup-accordion-itemselected",6),this.selectedItems=[],this.customStyle="",this.data=null,this.ripple=!0,this.kupManager=t(),this.slotsNames=[]}applyRipple(){const o=this.rootElement.shadowRoot;if(o&&this.ripple){const r=o.querySelectorAll(".mdc-ripple-surface:not(.mdc-ripple-upgraded)");if(r)for(let o=0;o<r.length;o++)_.attachTo(r[o])}}async collapseAll(){const o=[];for(let r=0;r<this.data.columns.length;r++){const c=this.data.columns[r].name;!this.isItemExpandible(c)&&this.isItemSelected(c)&&o.push(c)}this.selectedItems=o}async expandAll(){const o=[];for(let r=0;r<this.data.columns.length;r++){const c=this.data.columns[r].name;this.isItemExpandible(c)&&o.push(c)}this.selectedItems=o}async getProps(o){return p(this,k,o)}async refresh(){c(this)}async setProps(o){s(this,k,o)}async toggleItem(o){const r=this.isItemExpandible(o),c=[...this.selectedItems];c.includes(o)?c.splice(c.indexOf(o),1):c.push(o),this.selectedItems=c,r||this.kupAccordionItemSelected.emit({comp:this,id:this.rootElement.id,itemName:o})}isItemExpandible(o){return this.slotsNames.includes(o)}isItemSelected(o){return this.selectedItems.includes(o)}renderItems(){const o=[],r=Array.prototype.slice.call(this.rootElement.children,0);this.slotsNames=[];for(let o=0;o<r.length;o++)this.slotsNames.push(r[o].slot);for(let r=0;r<this.data.columns.length;r++){const c=this.data.columns[r],a=c.name,n=this.isItemSelected(a),t=this.isItemExpandible(a),p={"accordion-item__content":!0,"accordion-item__content--selected":!!n};o.push(i("div",{class:"accordion-item"},i("div",{title:c.title,class:{"accordion-item__header":!0,"accordion-item__header--selected":!(t||!n),"accordion-item__header--expanded":!(!t||!n),"mdc-ripple-surface":!!this.ripple},onClick:()=>this.toggleItem(a)},c.icon?i(l,{color:`var(${e.ICON})`,resource:c.icon,sizeX:"1.5em",sizeY:"1.5em",wrapperClass:"accordion-item__icon"}):null,i("span",{class:"accordion-item__text"},c.title),t?i("span",{class:`accordion-item__dropdown kup-icon ${d.DROPDOWN.replace("--","")}`}):null),i("div",{class:p},i("slot",{name:c.name}))))}return o}componentWillLoad(){this.kupManager.debug.logLoad(this,!1),this.kupManager.theme.register(this)}componentDidLoad(){this.applyRipple(),this.kupManager.debug.logLoad(this,!0)}componentWillRender(){this.kupManager.debug.logRender(this,!1)}componentDidRender(){const o=this.rootElement.shadowRoot;if(o){const r=o.querySelectorAll(".mdc-ripple-surface");if(r)for(let o=0;o<r.length;o++)_.attachTo(r[o])}this.kupManager.debug.logRender(this,!0)}render(){const o=this.data&&this.data.columns?this.renderItems():null;return i(a,null,i("style",null,this.kupManager.theme.setKupStyle(this.rootElement)),i("div",{id:u},i("div",{class:"accordion"},o)))}disconnectedCallback(){this.kupManager.theme.unregister(this)}get rootElement(){return n(this)}static get watchers(){return{ripple:["applyRipple"]}}};h.style=":host{--kup_accordion_background_color:var(\n    --kup-accordion-background-color,\n    var(--kup-background-color)\n  );--kup_accordion_border:var(\n    --kup-accordion-border,\n    1px solid var(--kup-border-color)\n  );--kup_accordion_border_radius:var(--kup-accordion-border-radius, 4px);--kup-accordion_dropdown_icon_color:var(\n    --kup-accordion-dropdown-icon-color,\n    var(--kup-icon-color)\n  );--kup_accordion_font_family:var(\n    --kup-accordion-font-family,\n    var(--kup-font-family)\n  );--kup_accordion_font_size:var(\n    --kup-accordion-font-size,\n    var(--kup-font-size)\n  );--kup_accordion_hover_background_color:var(\n    --kup-accordion-hover-background-color,\n    var(--kup-hover-background-color)\n  );--kup_accordion_hover_color:var(\n    --kup-accordion-hover-color,\n    var(--kup-hover-color)\n  );--kup_accordion_padding:var(--kup-accordion-padding, 1em 1.5em);--kup_accordion_primary_color:var(\n    --kup-accordion-primary-color,\n    var(--kup-primary-color)\n  );--kup_accordion_primary_color_rgb:var(\n    --kup-accordion-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_accordion_text_color:var(\n    --kup-accordion-text-color,\n    var(--kup-text-color)\n  );--kup_accordion_text_on_primary_color:var(\n    --kup-accordion-text-on-primary-color,\n    var(--kup-text-on-primary-color)\n  );--kup_accordion_transition:var(--kup-accordion-transition, 80ms);display:block;font-family:var(--kup_accordion_font_family);font-size:var(--kup_accordion_font_size)}.accordion{background-color:var(--kup_accordion_background_color);border-bottom:var(--kup_accordion_border);border-radius:var(--kup_accordion_border_radius);border-top:var(--kup_accordion_border);display:flex;flex-wrap:wrap;flex-direction:column;width:100%}.accordion-item{border-left:var(--kup_accordion_border);border-right:var(--kup_accordion_border);box-sizing:border-box;width:100%}.accordion-item--visible{display:block}.accordion-item:not(:first-of-type){border-top:var(--kup_accordion_border)}.accordion-item__header{align-items:center;border:none;box-sizing:border-box;color:var(--kup_accordion_text_color);cursor:pointer;display:flex;line-height:1.75em;outline:none;padding:var(--kup_accordion_padding);text-align:left;transition:background-color var(--kup_accordion_transition), color var(--kup_accordion_transition);width:100%}.accordion-item__header:hover:not(.accordion-item__header--selected){color:var(--kup_accordion_hover_color);background-color:var(--kup_accordion_hover_background_color)}.accordion-item__header--expanded{color:var(--kup_accordion_hover_color);background-color:var(--kup_accordion_hover_background_color)}.accordion-item__header--expanded .accordion-item__dropdown{transform:rotate(-180deg)}.accordion-item__header--selected{background-color:rgba(var(--kup_accordion_primary_color_rgb), 0.175)}.accordion-item__text{margin-right:0.5em;overflow:hidden;text-overflow:ellipsis;white-space:pre}.accordion-item__text--highlighted{color:var(--kup_accordion_text_on_primary_color);background-color:var(--kup_accordion_primary_color)}.accordion-item__icon{margin-left:0;margin-right:0.5em}.accordion-item__dropdown{background-color:var(--kup-accordion_dropdown_icon_color);height:1.5em;margin-left:auto;margin-right:0;min-width:1.5em;width:1.5em;transition:transform var(--kup_accordion_transition)}.accordion-item__content{animation:fade-in 0.25s ease-out;display:none}.accordion-item__content--selected{display:block}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_accordion_primary_color)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}:host(.kup-borderless){--kup-accordion-border:none}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-danger){--kup-accordion-primary-color:var(--kup-danger-color);--kup-accordion-primary-color-rgb:var(--kup-danger-color-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-info){--kup-accordion-primary-color:var(--kup-info-color);--kup-accordion-primary-color-rgb:var(--kup-info-color-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-secondary){--kup-accordion-primary-color:var(--kup-secondary-color);--kup-accordion-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-accordion-text-on-primary-color:var(--kup-text-on-secondary-color)}:host(.kup-success){--kup-accordion-primary-color:var(--kup-success-color);--kup-accordion-primary-color-rgb:var(--kup-success-color-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-warning){--kup-accordion-primary-color:var(--kup-warning-color);--kup-accordion-primary-color-rgb:var(--kup-warning-color-rgb);--kup-accordion-text-on-primary-color:white}";export{h as kup_accordion}

package/dist/types/components/kup-button-list/kup-button-list-declarations.d.ts

@@ -1,4 +1,5 @@
 import { KupDataNode } from '../../managers/kup-data/kup-data-declarations';
+import { KupObj } from '../../managers/kup-objects/kup-objects-declarations';
 import { GenericObject, KupEventPayload } from '../../types/GenericTypes';
 /**
  * Props of the kup-button-list component.
@@ -19,5 +20,5 @@ export interface KupButtonListNode extends KupDataNode {
 export interface KupButtonListClickEventPayload extends KupEventPayload {
   index: string;
   subIndex: string;
-  obj: any;
+  obj: KupObj;
 }

package/dist/types/components/kup-data-table/kup-data-table-declarations.d.ts

@@ -43,8 +43,6 @@ export declare enum KupDataTableProps {
   rowActions = "Sets the actions of the rows.",
   rowsPerPage = "Sets the number of rows per page to display.",
   scrollOnHover = "Activates the scroll on hover function.",
-  selectRow = "Selects the row at the specified rendered rows prosition (base 1).",
-  selectRowsById = "Semicolon separated rows id to select.",
   showCustomization = "If set to true, displays the button to open the customization panel.",
   showFilters = "When set to true enables the column filters.",
   showFooter = "When set to true shows the footer.",

package/dist/types/components/kup-data-table/kup-data-table.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { GroupLabelDisplayMode, GroupObject, LoadMoreMode, PaginatorPos, ShowGrid, SortObject, TotalsMap, SelectionMode, KupDatatableAutoRowSelectEventPayload, KupDatatableRowSelectedEventPayload, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableRowActionClickEventPayload, KupDatatableLoadMoreClickEventPayload, KupDatatableColumnRemoveEventPayload, KupDatatableColumnMoveEventPayload, KupDataTableDataset, KupDataTableRow } from './kup-data-table-declarations';
+import { GroupLabelDisplayMode, GroupObject, LoadMoreMode, PaginatorPos, ShowGrid, SortObject, TotalsMap, SelectionMode, KupDatatableRowSelectedEventPayload, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableRowActionClickEventPayload, KupDatatableLoadMoreClickEventPayload, KupDatatableColumnRemoveEventPayload, KupDatatableColumnMoveEventPayload, KupDataTableDataset, KupDataTableRow } from './kup-data-table-declarations';
 import { GenericObject, KupEventPayload } from '../../types/GenericTypes';
 import { KupDataTableState } from './kup-data-table-state';
 import { KupStore } from '../kup-state/kup-store';
@@ -178,14 +178,6 @@ export declare class KupDataTable {
    * Set the type of the rows selection.
    */
   selection: SelectionMode;
-  /**
-   * Selects the row at the specified rendered rows prosition (base 1).
-   */
-  selectRow: number;
-  /**
-   * Semicolon separated rows id to select.
-   */
-  selectRowsById: string;
   /**
    * If set to true, displays the button to open the customization panel.
    */
@@ -281,6 +273,7 @@ export declare class KupDataTable {
   recalculateRowsAndUndoSelections(): void;
   controlFixedRowsColumns(): void;
   recalculateData(): void;
+  private initialized;
   private rows;
   private rowsLength;
   private paginatedRows;
@@ -360,10 +353,6 @@ export declare class KupDataTable {
    * When rows selections reset
    */
   kupResetSelectedRows: EventEmitter<KupEventPayload>;
-  /**
-   * When a row is auto selected via selectRow prop
-   */
-  kupAutoRowSelect: EventEmitter<KupDatatableAutoRowSelectEventPayload>;
   /**
    * When a row is selected
    */
@@ -415,6 +404,10 @@ export declare class KupDataTable {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   getProps(descriptions?: boolean): Promise<GenericObject>;
+  /**
+   * This method will get the selected rows of the component.
+   */
+  getSelectedRows(): Promise<Array<KupDataTableRow>>;
   /**
    * Hides the given column.
    * @param {KupDataColumn} column - Column to hide.
@@ -453,10 +446,10 @@ export declare class KupDataTable {
   setProps(props: GenericObject): Promise<void>;
   /**
    * This method will set the selected rows of the component.
-   * @param {string} rowsById - String containing the ids separated by ";".
+   * @param {string|number[]} rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows).
    * @param {boolean} emitEvent - The event will always be emitted unless emitEvent is set to false.
    */
-  setSelectedRows(rowsById: string, emitEvent?: boolean): Promise<void>;
+  setSelectedRows(rowsIdentifiers: string[] | number[], emitEvent?: boolean): Promise<void>;
   private closeDropCard;
   private createDropCard;
   private calculateData;

package/dist/types/components/kup-dropdown-button/kup-dropdown-button.d.ts

@@ -8,7 +8,7 @@ export declare class KupDropdownButton {
    * References the root HTML element of the component (<kup-dropdown-button>).
    */
   rootElement: HTMLElement;
-  value: string;
+  id: string;
   /**
    * Custom style of the component.
    * @default ""

package/dist/types/components/kup-echart/kup-echart-declarations.d.ts

@@ -7,6 +7,8 @@ import { KupEventPayload } from '../../types/GenericTypes';
 export declare enum KupEchartProps {
   axis = "Sets the axis of the chart.",
   chartTitle = "Title of the graph.",
+  colors = "Overrides theme's colors.",
+  consistencyCheck = "When true, performs checks in order to properly initialize props which could be missing (i.e.: axis). For performances purposes, this prop will run only once when the component is initially created.",
   customStyle = "Custom style of the component.",
   data = "The actual data of the chart.",
   legend = "Sets the position of the legend. Supported values: bottom, left, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work.",
@@ -27,6 +29,7 @@ export interface KupEchartTitle {
 export declare enum KupEchartLegendPlacement {
   BOTTOM = "bottom",
   LEFT = "left",
+  HIDDEN = "hidden",
   RIGHT = "right",
   TOP = "top"
 }

package/dist/types/components/kup-echart/kup-echart.d.ts

@@ -15,6 +15,17 @@ export declare class KupEchart {
    * @default ""
    */
   axis: string;
+  /**
+   * Overrides theme's colors.
+   * @default []
+   */
+  colors: string[];
+  /**
+   * When true, performs checks in order to properly initialize props which could be missing (i.e.: axis).
+   * For performances purposes, this prop will run only once when the component is initially created.
+   * @default false
+   */
+  consistencyCheck: boolean;
   /**
    * Title of the graph.
    * @default null
@@ -32,7 +43,7 @@ export declare class KupEchart {
    */
   data: KupDataDataset;
   /**
-   * Sets the position of the legend. Supported values: bottom, left, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work.
+   * Sets the position of the legend. Supported values: bottom, left, right, top, hidden. Keep in mind that legend types are tied to chart types, some combinations might not work.
    * @default KupEchartLegendPlacement.RIGHT
    */
   legend: KupEchartLegendPlacement;

package/dist/types/components/kup-list/kup-list-declarations.d.ts

@@ -1,6 +1,6 @@
 import { KupEventPayload } from '../../types/GenericTypes';
 import { ValueDisplayedValue as vdv } from '../../utils/filters/filters-declarations';
-import { KupObj } from '../../managers/kup-objects/kup-objects-declarations';
+import { KupDataNode } from '../../managers/kup-data/kup-data-declarations';
 /**
  * Props of the kup-list component.
  * Used to export every prop in an object.
@@ -22,11 +22,7 @@ export declare enum KupListProps {
 /**
  * Data structure of a single list item.
  */
-export interface KupListData {
-  obj?: KupObj;
-  text: string;
-  value: string;
-  icon?: string;
+export interface KupListNode extends KupDataNode {
   secondaryText?: string;
   selected?: boolean;
   separator?: boolean;
@@ -48,5 +44,5 @@ export declare enum ItemsDisplayMode {
   DESCRIPTION_AND_CODE = "both"
 }
 export interface KupListEventPayload extends KupEventPayload {
-  selected: KupListData;
+  selected: KupListNode;
 }

package/dist/types/components/kup-list/kup-list-helper.d.ts

@@ -1,6 +1,6 @@
-import { ItemsDisplayMode, KupListData, ValueDisplayedValue } from './kup-list-declarations';
-export declare function getValueOfItemByDisplayMode(item: KupListData, mode: ItemsDisplayMode, separator: string): string;
-export declare function consistencyCheck(valueIn: string, listData: Object, listEl: any, selectMode: ItemsDisplayMode, displayMode: ItemsDisplayMode, e?: CustomEvent): ValueDisplayedValue;
-export declare function getFirstItemSelected(listData: Object): KupListData;
-export declare function getItemByValue(listData: Object, value: string, setSelected: boolean): KupListData;
-export declare function getItemByDisplayMode(listData: Object, value: string, displayMode: ItemsDisplayMode, setSelected: boolean): KupListData;
+import { ItemsDisplayMode, KupListNode, ValueDisplayedValue } from './kup-list-declarations';
+export declare function getIdOfItemByDisplayMode(item: KupListNode, mode: ItemsDisplayMode, separator: string): string;
+export declare function consistencyCheck(idIn: string, listData: Object, listEl: any, selectMode: ItemsDisplayMode, displayMode: ItemsDisplayMode, e?: CustomEvent): ValueDisplayedValue;
+export declare function getFirstItemSelected(listData: Object): KupListNode;
+export declare function getItemById(listData: Object, id: string, setSelected: boolean): KupListNode;
+export declare function getItemByDisplayMode(listData: Object, id: string, displayMode: ItemsDisplayMode, setSelected: boolean): KupListNode;

package/dist/types/components/kup-list/kup-list.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { KupListData, KupListEventPayload, KupListRole } from './kup-list-declarations';
+import { KupListNode, KupListEventPayload, KupListRole } from './kup-list-declarations';
 import { ItemsDisplayMode } from './kup-list-declarations';
 import { GenericObject, KupEventPayload } from '../../types/GenericTypes';
 export declare class KupList {
@@ -28,7 +28,7 @@ export declare class KupList {
    * The data of the list.
    * @default []
    */
-  data: KupListData[];
+  data: KupListNode[];
   /**
    * Selects how the items must display their label and how they can be filtered for.
    * @default ItemsDisplayMode.DESCRIPTION

package/dist/types/components/kup-photo-frame/kup-photo-frame-declarations.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Props of the kup-photo-frame component.
+ * Used to export every prop in an object.
+ */
+export declare enum KupPhotoFrameProps {
+  customStyle = "Custom style of the component.",
+  placeholderAttrs = "Html attributes of the picture before the component enters the viewport.",
+  resourceAttrs = "Html attributes of the picture after the component enters the viewport."
+}

package/dist/types/components/kup-photo-frame/kup-photo-frame.d.ts

@@ -0,0 +1,61 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { GenericObject, KupEventPayload } from '../../types/GenericTypes';
+export declare class KupPhotoFrame {
+  #private;
+  /**
+   * References the root HTML element of the component (<kup-photo-frame>).
+   */
+  rootElement: HTMLElement;
+  isInViewport: boolean;
+  /**
+   * Custom style of the component.
+   * @default ""
+   * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+   */
+  customStyle: string;
+  /**
+   * Html attributes of the picture before the component enters the viewport.
+   * @default {}
+   */
+  placeholderAttrs: GenericObject;
+  /**
+   * Html attributes of the picture after the component enters the viewport.
+   * @default {}
+   */
+  resourceAttrs: GenericObject;
+  /**
+   * Percentage of the component dimensions entering the viewport (0.1 => 1).
+   * @default 0.25
+   */
+  threshold: number;
+  /**
+   * Triggered when the placeholder is loaded.
+   */
+  kupPhotoFramePlaceholderLoad: EventEmitter<KupEventPayload>;
+  /**
+   * Triggered when the resource is loaded.
+   */
+  kupPhotoFrameResourceLoad: EventEmitter<KupEventPayload>;
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  getProps(descriptions?: boolean): Promise<GenericObject>;
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  refresh(): Promise<void>;
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  setProps(props: GenericObject): Promise<void>;
+  setObserver(): void;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  componentDidRender(): void;
+  render(): any;
+  disconnectedCallback(): void;
+}

package/dist/types/components/kup-tree/kup-tree-declarations.d.ts

@@ -62,7 +62,7 @@ export interface KupTreeEventHandlerDetails {
   row: KupDataRow;
   td: HTMLElement;
   th: HTMLElement;
-  tr: HTMLTableRowElement;
+  tr: HTMLElement;
 }
 export declare enum KupTreeExpansionMode {
   DROPDOWN = "dropdown",

package/dist/types/components/kup-tree/kup-tree.d.ts

@@ -183,7 +183,6 @@ export declare class KupTree {
    */
   private columnMenuCard;
   private treeWrapperRef;
-  private selectedColumn;
   private clickTimeout;
   private globalFilterTimeout;
   private footer;
@@ -315,6 +314,7 @@ export declare class KupTree {
   private contextMenuHandler;
   hdlTreeNodeClick(e: MouseEvent, treeNodeData: KupTreeNode, treeNodePath: string, auto: boolean): void;
   hdlTreeNodeExpanderClick(treeNodeData: KupTreeNode, treeNodePath: string, ctrlKey: boolean): void;
+  private getEventPath;
   private hasTotals;
   private handleChildren;
   /**

package/dist/types/components.d.ts

@@ -7,7 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./components/kup-accordion/kup-accordion-declarations";
 import { GenericObject, KupEventPayload } from "./types/GenericTypes";
-import { ItemsDisplayMode, KupListData, KupListEventPayload, KupListRole } from "./components/kup-list/kup-list-declarations";
+import { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations";
 import { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations";
 import { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload } from "./components/kup-box/kup-box-declarations";
 import { KupStore } from "./components/kup-state/kup-store";
@@ -24,7 +24,7 @@ import { KupChipEventPayload, KupChipNode } from "./components/kup-chip/kup-chip
 import { FChipType } from "./f-components/f-chip/f-chip-declarations";
 import { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-color-picker-declarations";
 import { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations";
-import { GroupLabelDisplayMode, GroupObject, KupDatatableAutoRowSelectEventPayload, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableLoadMoreClickEventPayload, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
+import { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
 import { GenericFilter, KupGlobalFilterMode } from "./utils/filters/filters-declarations";
 import { KupDatePickerEventPayload } from "./components/kup-date-picker/kup-date-picker-declarations";
 import { KupDropdownButtonEventPayload } from "./components/kup-dropdown-button/kup-dropdown-button-declarations";
@@ -1102,6 +1102,10 @@ export namespace Components {
           * @returns List of props as object, each key will be a prop.
          */
         "getProps": (descriptions?: boolean) => Promise<GenericObject>;
+        /**
+          * This method will get the selected rows of the component.
+         */
+        "getSelectedRows": () => Promise<Array<KupDataTableRow>>;
         /**
           * When set to true it activates the global filter.
          */
@@ -1204,14 +1208,6 @@ export namespace Components {
           * Activates the scroll on hover function.
          */
         "scrollOnHover": boolean;
-        /**
-          * Selects the row at the specified rendered rows prosition (base 1).
-         */
-        "selectRow": number;
-        /**
-          * Semicolon separated rows id to select.
-         */
-        "selectRowsById": string;
         /**
           * Set the type of the rows selection.
          */
@@ -1229,10 +1225,10 @@ export namespace Components {
         "setProps": (props: GenericObject) => Promise<void>;
         /**
           * This method will set the selected rows of the component.
-          * @param rowsById - String containing the ids separated by ";".
+          * @param rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows).
           * @param emitEvent - The event will always be emitted unless emitEvent is set to false.
          */
-        "setSelectedRows": (rowsById: string, emitEvent?: boolean) => Promise<void>;
+        "setSelectedRows": (rowsIdentifiers: string[] | number[], emitEvent?: boolean) => Promise<void>;
         /**
           * If set to true, displays the button to open the customization panel.
          */
@@ -1493,6 +1489,16 @@ export namespace Components {
           * @default null
          */
         "chartTitle": KupEchartTitle;
+        /**
+          * Overrides theme's colors.
+          * @default []
+         */
+        "colors": string[];
+        /**
+          * When true, performs checks in order to properly initialize props which could be missing (i.e.: axis). For performances purposes, this prop will run only once when the component is initially created.
+          * @default false
+         */
+        "consistencyCheck": boolean;
         /**
           * Custom style of the component.
           * @default ""
@@ -1511,7 +1517,7 @@ export namespace Components {
          */
         "getProps": (descriptions?: boolean) => Promise<GenericObject>;
         /**
-          * Sets the position of the legend. Supported values: bottom, left, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work.
+          * Sets the position of the legend. Supported values: bottom, left, right, top, hidden. Keep in mind that legend types are tied to chart types, some combinations might not work.
           * @default KupEchartLegendPlacement.RIGHT
          */
         "legend": KupEchartLegendPlacement;
@@ -1906,7 +1912,7 @@ export namespace Components {
           * The data of the list.
           * @default []
          */
-        "data": KupListData[];
+        "data": KupListNode[];
         /**
           * Selects how the items must display their label and how they can be filtered for.
           * @default ItemsDisplayMode.DESCRIPTION
@@ -2046,6 +2052,44 @@ export namespace Components {
          */
         "styling": KupNavBarStyling;
     }
+    interface KupPhotoFrame {
+        /**
+          * Custom style of the component.
+          * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+         */
+        "customStyle": string;
+        /**
+          * Used to retrieve component's props values.
+          * @param descriptions - When provided and true, the result will be the list of props with their description.
+          * @returns List of props as object, each key will be a prop.
+         */
+        "getProps": (descriptions?: boolean) => Promise<GenericObject>;
+        /**
+          * Html attributes of the picture before the component enters the viewport.
+          * @default {}
+         */
+        "placeholderAttrs": GenericObject;
+        /**
+          * This method is used to trigger a new render of the component.
+         */
+        "refresh": () => Promise<void>;
+        /**
+          * Html attributes of the picture after the component enters the viewport.
+          * @default {}
+         */
+        "resourceAttrs": GenericObject;
+        /**
+          * Sets the props to the component.
+          * @param props - Object containing props that will be set to the component.
+         */
+        "setProps": (props: GenericObject) => Promise<void>;
+        /**
+          * Percentage of the component dimensions entering the viewport (0.1 => 1).
+          * @default 0.25
+         */
+        "threshold": number;
+    }
     interface KupProbe {
         /**
           * Custom style of the component.
@@ -3063,6 +3107,12 @@ declare global {
         prototype: HTMLKupNavBarElement;
         new (): HTMLKupNavBarElement;
     };
+    interface HTMLKupPhotoFrameElement extends Components.KupPhotoFrame, HTMLStencilElement {
+    }
+    var HTMLKupPhotoFrameElement: {
+        prototype: HTMLKupPhotoFrameElement;
+        new (): HTMLKupPhotoFrameElement;
+    };
     interface HTMLKupProbeElement extends Components.KupProbe, HTMLStencilElement {
     }
     var HTMLKupProbeElement: {
@@ -3172,6 +3222,7 @@ declare global {
         "kup-list": HTMLKupListElement;
         "kup-magic-box": HTMLKupMagicBoxElement;
         "kup-nav-bar": HTMLKupNavBarElement;
+        "kup-photo-frame": HTMLKupPhotoFrameElement;
         "kup-probe": HTMLKupProbeElement;
         "kup-progress-bar": HTMLKupProgressBarElement;
         "kup-qlik": HTMLKupQlikElement;
@@ -4116,10 +4167,6 @@ declare namespace LocalJSX {
           * @see loadMoreLimit
          */
         "loadMoreStep"?: number;
-        /**
-          * When a row is auto selected via selectRow prop
-         */
-        "onKup-datatable-autorowselect"?: (event: CustomEvent<KupDatatableAutoRowSelectEventPayload>) => void;
         /**
           * Generic click event on data table.
          */
@@ -4193,14 +4240,6 @@ declare namespace LocalJSX {
           * Activates the scroll on hover function.
          */
         "scrollOnHover"?: boolean;
-        /**
-          * Selects the row at the specified rendered rows prosition (base 1).
-         */
-        "selectRow"?: number;
-        /**
-          * Semicolon separated rows id to select.
-         */
-        "selectRowsById"?: string;
         /**
           * Set the type of the rows selection.
          */
@@ -4427,6 +4466,16 @@ declare namespace LocalJSX {
           * @default null
          */
         "chartTitle"?: KupEchartTitle;
+        /**
+          * Overrides theme's colors.
+          * @default []
+         */
+        "colors"?: string[];
+        /**
+          * When true, performs checks in order to properly initialize props which could be missing (i.e.: axis). For performances purposes, this prop will run only once when the component is initially created.
+          * @default false
+         */
+        "consistencyCheck"?: boolean;
         /**
           * Custom style of the component.
           * @default ""
@@ -4439,7 +4488,7 @@ declare namespace LocalJSX {
          */
         "data"?: KupDataDataset;
         /**
-          * Sets the position of the legend. Supported values: bottom, left, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work.
+          * Sets the position of the legend. Supported values: bottom, left, right, top, hidden. Keep in mind that legend types are tied to chart types, some combinations might not work.
           * @default KupEchartLegendPlacement.RIGHT
          */
         "legend"?: KupEchartLegendPlacement;
@@ -4741,7 +4790,7 @@ declare namespace LocalJSX {
           * The data of the list.
           * @default []
          */
-        "data"?: KupListData[];
+        "data"?: KupListNode[];
         /**
           * Selects how the items must display their label and how they can be filtered for.
           * @default ItemsDisplayMode.DESCRIPTION
@@ -4830,6 +4879,37 @@ declare namespace LocalJSX {
          */
         "styling"?: KupNavBarStyling;
     }
+    interface KupPhotoFrame {
+        /**
+          * Custom style of the component.
+          * @default ""
+          * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+         */
+        "customStyle"?: string;
+        /**
+          * Triggered when the placeholder is loaded.
+         */
+        "onKup-photoframe-placeholderload"?: (event: CustomEvent<KupEventPayload>) => void;
+        /**
+          * Triggered when the resource is loaded.
+         */
+        "onKup-photoframe-resourceload"?: (event: CustomEvent<KupEventPayload>) => void;
+        /**
+          * Html attributes of the picture before the component enters the viewport.
+          * @default {}
+         */
+        "placeholderAttrs"?: GenericObject;
+        /**
+          * Html attributes of the picture after the component enters the viewport.
+          * @default {}
+         */
+        "resourceAttrs"?: GenericObject;
+        /**
+          * Percentage of the component dimensions entering the viewport (0.1 => 1).
+          * @default 0.25
+         */
+        "threshold"?: number;
+    }
     interface KupProbe {
         /**
           * Custom style of the component.
@@ -5601,6 +5681,7 @@ declare namespace LocalJSX {
         "kup-list": KupList;
         "kup-magic-box": KupMagicBox;
         "kup-nav-bar": KupNavBar;
+        "kup-photo-frame": KupPhotoFrame;
         "kup-probe": KupProbe;
         "kup-progress-bar": KupProgressBar;
         "kup-qlik": KupQlik;
@@ -5650,6 +5731,7 @@ declare module "@stencil/core" {
             "kup-list": LocalJSX.KupList & JSXBase.HTMLAttributes<HTMLKupListElement>;
             "kup-magic-box": LocalJSX.KupMagicBox & JSXBase.HTMLAttributes<HTMLKupMagicBoxElement>;
             "kup-nav-bar": LocalJSX.KupNavBar & JSXBase.HTMLAttributes<HTMLKupNavBarElement>;
+            "kup-photo-frame": LocalJSX.KupPhotoFrame & JSXBase.HTMLAttributes<HTMLKupPhotoFrameElement>;
             "kup-probe": LocalJSX.KupProbe & JSXBase.HTMLAttributes<HTMLKupProbeElement>;
             "kup-progress-bar": LocalJSX.KupProgressBar & JSXBase.HTMLAttributes<HTMLKupProgressBarElement>;
             "kup-qlik": LocalJSX.KupQlik & JSXBase.HTMLAttributes<HTMLKupQlikElement>;

package/dist/types/managers/kup-data/kup-data-column-helper.d.ts

@@ -20,7 +20,15 @@ export declare function hideColumns(dataset: KupDataDataset | KupDataColumn[], c
  * @param {KupDataNewColumnOptions} options - Options used by the submethods to create the column.
  * @returns {string | Column} Returns the new column created or a string containing the error message (if something went wrong).
  */
-export declare function newColumn(dataset: KupDataDataset, type: KupDataNewColumnTypes, options?: KupDataNewColumnOptions): string | KupDataColumn;
+export declare function newColumn(dataset: KupDataDataset, type: KupDataNewColumnTypes, options: KupDataNewColumnOptions): string | KupDataColumn;
+/**
+ * Creates a duplicate of the specified column.
+ * @param {KupDataDataset} dataset - Input dataset.
+ * @param {string[]} column2duplicate - Name of the column to duplicate (the first occurrence of the array will be used).
+ * @param {KupDataColumn} newColumn - Column created.
+ * @returns {KupDataColumn} Resulting column.
+ */
+export declare function newColumnFromDuplication(dataset: KupDataDataset, column2duplicate: string[], newColumn: KupDataColumn): KupDataColumn;
 /**
  * Takes the columns to merge and creates a new column with their cells. The merged columns will then be removed.
  * @param {KupDataDataset} dataset - Input dataset.