@sme.up/ketchup 6.7.0 → 6.9.0-SNAPSHOT

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

@@ -26,160 +26,59 @@ export class KupTree {
     /*                   S t a t e s                   */
     /*-------------------------------------------------*/
     this.state = new KupTreeState();
-    this.treeColumnVisible = true;
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    /**
+     * Instance of the KupManager class.
+     */
+    this.kupManager = kupManagerInstance();
     /**
-     * name of the column with the opened total menu
+     * Reference to the column menu card.
      */
+    this.columnMenuCard = null;
+    this.clickTimeout = [];
+    this.sizedColumns = undefined;
+    this.filtersColumnMenuInstance = new FiltersColumnMenu();
+    this.filtersTreeItemsInstance = new FiltersTreeItems();
+    this.totalMenuCoords = null;
+    this.contentRefs = [];
+    this.oldWidth = null;
+    this.hold = false;
+    this.interactableTouch = [];
+    this.clickCb = null;
+    this.treeColumnVisible = true;
     this.openedTotalMenu = null;
     this.columnMenuAnchor = null;
     this.stateSwitcher = false;
-    /**
-     * An array of integers containing the path to a selected child.\
-     * Groups up the properties SelFirst, SelItem, SelName.
-     */
     this.selectedNode = [];
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * When enabled, the first level of depth will give an accordion look to nodes.
-     * @default false
-     */
     this.asAccordion = false;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
+    this.columns = undefined;
     this.customStyle = '';
-    /**
-     * The json data used to populate the tree view: the basic, always visible tree nodes.
-     */
     this.data = [];
-    /**
-     * The density of the rows, defaults at 'medium' and can also be set to 'dense' or 'wide'.
-     */
     this.density = FCellPadding.MEDIUM;
-    /**
-     * Function that gets invoked when a new set of nodes must be loaded as children of a node.
-     *
-     * When useDynamicExpansion is set, the tree component will have two different behaviors depending on the value of this prop.
-     * 1 - If this prop is set to null, no callback to download data is available:
-     *    the component will emit an event requiring the parent to load the children of the given node.
-     * 2 - If this prop is set to have a callback, then the component will automatically make requests to load children of
-     *    a given node. After the load has been completed, a different event will be fired to alert the parent of the change.
-     *
-     * @see useDynamicExpansion
-     */
     this.dynamicExpansionCallback = undefined;
-    /**
-     * When set to true, editable cells will be rendered using input components.
-     * @default false
-     */
     this.editableData = false;
-    /**
-     * Enables the extracolumns add buttons.
-     */
     this.enableExtraColumns = true;
-    /**
-     * Flag: the nodes of the whole tree must be already expanded upon loading. Disabled nodes do NOT get expanded.
-     */
     this.expanded = false;
-    /**
-     * Behavior of nodes' expansion: it can be chosen between expanding a node by clicking on the dropdown icon, or by clicking on the whole node.
-     * @default KupTreeExpansionMode.DROPDOWN
-     */
     this.expansionMode = KupTreeExpansionMode.DROPDOWN;
-    /**
-     * List of filters set by the user.
-     */
     this.filters = {};
-    /**
-     * When set to true it activates the global filter.
-     */
     this.globalFilter = false;
-    /**
-     * The value of the global filter.
-     */
     this.globalFilterValue = '';
-    /**
-     * The mode of the global filter (default SIMPLE)
-     */
     this.globalFilterMode = KupGlobalFilterMode.SIMPLE;
-    /**
-     * Experimental feature: when active, the tree will try to prevent horizontal overflowing elements by setting a width on the content of the table cells.
-     * It works only on cells of the main column.
-     * @default false;
-     */
     this.preventXScroll = false;
-    /**
-     * Sets the possibility to remove the selected column.
-     */
     this.removableColumns = true;
-    /**
-     * When enabled displays Material's ripple effect on nodes (only when no columns are displayed).
-     * @default true
-     */
     this.ripple = true;
-    /**
-     * Activates the scroll on hover function.
-     */
     this.scrollOnHover = false;
-    /**
-     * Shows the tree data as a table.
-     */
     this.showColumns = false;
-    /**
-     * When set to true enables the column filters.
-     */
     this.showFilters = true;
-    /**
-     * When set to true shows the footer.
-     */
     this.showFooter = false;
-    /**
-     * Flag: shows the header of the tree when the tree is displayed as a table.
-     * @see showColumns
-     */
     this.showHeader = false;
-    /**
-     * Shows the icons of the nodes.
-     */
     this.showIcons = true;
     this.stateId = '';
-    /**
-     * When the component must use the dynamic expansion feature to open its nodes, it means that not all the nodes of the
-     * tree have been passed inside the data property.
-     *
-     * Therefore, when expanding a node, the tree must emit an event (or run a given callback)
-     * and wait for the child nodes to be downloaded from the server.
-     *
-     * For more information:
-     * @see dynamicExpansionCallback
-     */
+    this.store = undefined;
     this.useDynamicExpansion = false;
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManagerInstance();
-    /**
-     * Reference to the column menu card.
-     */
-    this.columnMenuCard = null;
-    this.selectedColumn = '';
-    this.clickTimeout = [];
-    this.sizedColumns = undefined;
-    this.filtersColumnMenuInstance = new FiltersColumnMenu();
-    this.filtersTreeItemsInstance = new FiltersTreeItems();
-    this.totalMenuCoords = null;
-    this.contentRefs = [];
-    this.oldWidth = null;
-    this.hold = false;
-    this.interactableTouch = [];
-    this.clickCb = null;
+    this.totals = undefined;
   }
   initWithPersistedState() {
     if (this.store && this.stateId) {
@@ -256,7 +155,7 @@ export class KupTree {
         id: this.rootElement.id,
         treeNodePath: this.selectedNode,
         treeNode: this.getTreeNode(this.selectedNode),
-        columnName: this.selectedColumn,
+        columnName: null,
       });
     }
   }
@@ -674,6 +573,12 @@ export class KupTree {
       KupTreeExpansionMode.DROPDOWN ||
       (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
         !treeNodeData.expandable)) {
+      const td = e
+        ? this.getEventPath(e.target).find((el) => {
+          if (el.tagName === 'TD')
+            return el;
+        })
+        : null;
       // If this TreeNode is not disabled, then it can be selected and an event is emitted
       if (treeNodeData && !treeNodeData.disabled) {
         this.selectedNode = treeNodePath
@@ -684,10 +589,9 @@ export class KupTree {
           id: this.rootElement.id,
           treeNodePath: this.selectedNode,
           treeNode: treeNodeData,
-          columnName: this.selectedColumn,
+          columnName: td ? td.dataset.column : null,
         });
       }
-      this.selectedColumn = '';
     }
     // If KupTreeExpansionMode.NODE then click is a collapse/expand click
     if (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE) {
@@ -1038,8 +942,14 @@ export class KupTree {
     }
     // When can be expanded OR selected
     if (!treeNodeData.disabled) {
-      treeNodeOptions['onClick'] = () => {
-        this.clickTimeout.push(setTimeout((e) => this.hdlTreeNodeClick(e, treeNodeData, treeNodePath), 300));
+      treeNodeOptions['onClick'] = (e) => {
+        // Note: event must be cloned
+        // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
+        const clone = {};
+        for (const key in e) {
+          clone[key] = e[key];
+        }
+        this.clickTimeout.push(setTimeout(() => this.hdlTreeNodeClick(clone, treeNodeData, treeNodePath), 300));
       };
     }
     // When a tree node is displayed as a table

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

@@ -25,7 +25,7 @@ export const FCell = (props, children) => {
         ? column.shape
         : null;
   const hasObj = !dom.ketchup.objects.isEmptyKupObj(cell.obj);
-  const isEditable = cell.isEditable && props.editable ? true : false;
+  const isEditable = (cell.isEditable || column.isEditable) && props.editable ? true : false;
   const valueToDisplay = props.previousValue !== cell.value ? cell.value : '';
   const cellType = dom.ketchup.data.cell.getType(cell, shape);
   const subcomponentProps = Object.assign({}, cell.data);

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

@@ -9,10 +9,13 @@ const dom = document.documentElement;
  * @returns {Column[]} Columns matching the criteria.
  */
 export function findColumns(dataset, filters) {
+  const result = [];
+  if (!dataset) {
+    return result;
+  }
   const columns = dataset.columns
     ? dataset.columns
     : dataset;
-  const result = [];
   for (let index = 0; index < columns.length; index++) {
     const column = columns[index];
     for (const key in filters) {

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

@@ -91,10 +91,14 @@ export var KupLanguageFontsize;
  */
 export var KupLanguageGeneric;
 (function (KupLanguageGeneric) {
+  KupLanguageGeneric["ABORT"] = "genericAbort";
   KupLanguageGeneric["ADD_NEW"] = "genericAddNew";
   KupLanguageGeneric["APPLY"] = "genericApply";
   KupLanguageGeneric["BACK"] = "genericBack";
   KupLanguageGeneric["COLLAPSE"] = "genericCollapse";
+  KupLanguageGeneric["CONFIRM"] = "genericConfirm";
+  KupLanguageGeneric["CONFIRM_DELETE"] = "genericConfirmDelete";
+  KupLanguageGeneric["CONFIRM_DELETE_X_ROWS"] = "genericConfirmDeleteXRows";
   KupLanguageGeneric["DAY"] = "genericDay";
   KupLanguageGeneric["DRAG_AND_DROP"] = "genericDragAndDrop";
   KupLanguageGeneric["DROP_YOUR_DATA"] = "genericDropYourData";
@@ -115,6 +119,7 @@ export var KupLanguageGeneric;
   KupLanguageGeneric["MONTH"] = "genericMonth";
   KupLanguageGeneric["MOVE"] = "genericMove";
   KupLanguageGeneric["NEXT"] = "genericNext";
+  KupLanguageGeneric["NO"] = "genericNo";
   KupLanguageGeneric["OPEN_NAVIGATION_MENU"] = "genericOpenNavigationMenu";
   KupLanguageGeneric["OPEN_IN_NEW_TAB"] = "genericOpenInNewTab";
   KupLanguageGeneric["OPEN_IN_NEW_WINDOW"] = "genericOpenInNewWindow";
@@ -133,6 +138,7 @@ export var KupLanguageGeneric;
   KupLanguageGeneric["TRANSPOSE_DATA"] = "genericTransposeData";
   KupLanguageGeneric["VIEW_AS"] = "genericViewAs";
   KupLanguageGeneric["WEEK"] = "genericWeek";
+  KupLanguageGeneric["YES"] = "genericYes";
 })(KupLanguageGeneric || (KupLanguageGeneric = {}));
 /**
  * Grid decodes (data table customization settings).

package/dist/collection/utils/kup-column-menu/kup-column-menu.js

@@ -205,7 +205,7 @@ export class KupColumnMenu {
    */
   prepChip(comp, column) {
     let props = [];
-    const chipProps = {};
+    const chipProps = { data: [] };
     if (column.children) {
       const chipData = [];
       for (let index = 0; index < column.children.length; index++) {

package/dist/components/index.d.ts

@@ -0,0 +1,68 @@
+/* ketchup custom elements */
+export { KupAccordion as KupAccordion } from '../types/components/kup-accordion/kup-accordion';
+export { KupAutocomplete as KupAutocomplete } from '../types/components/kup-autocomplete/kup-autocomplete';
+export { KupBadge as KupBadge } from '../types/components/kup-badge/kup-badge';
+export { KupBox as KupBox } from '../types/components/kup-box/kup-box';
+export { KupButton as KupButton } from '../types/components/kup-button/kup-button';
+export { KupButtonList as KupButtonList } from '../types/components/kup-button-list/kup-button-list';
+export { KupCalendar as KupCalendar } from '../types/components/kup-calendar/kup-calendar';
+export { KupCard as KupCard } from '../types/components/kup-card/kup-card';
+export { KupCell as KupCell } from '../types/components/kup-cell/kup-cell';
+export { KupChart as KupChart } from '../types/components/kup-chart/kup-chart';
+export { KupCheckbox as KupCheckbox } from '../types/components/kup-checkbox/kup-checkbox';
+export { KupChip as KupChip } from '../types/components/kup-chip/kup-chip';
+export { KupColorPicker as KupColorPicker } from '../types/components/kup-color-picker/kup-color-picker';
+export { KupCombobox as KupCombobox } from '../types/components/kup-combobox/kup-combobox';
+export { KupDash as KupDash } from '../types/components/kup-dash/kup-dash';
+export { KupDashList as KupDashList } from '../types/components/kup-dash-list/kup-dash-list';
+export { KupDashboard as KupDashboard } from '../types/components/kup-dashboard/kup-dashboard';
+export { KupDataTable as KupDataTable } from '../types/components/kup-data-table/kup-data-table';
+export { KupDatePicker as KupDatePicker } from '../types/components/kup-date-picker/kup-date-picker';
+export { KupDrawer as KupDrawer } from '../types/components/kup-drawer/kup-drawer';
+export { KupDropdownButton as KupDropdownButton } from '../types/components/kup-dropdown-button/kup-dropdown-button';
+export { KupEchart as KupEchart } from '../types/components/kup-echart/kup-echart';
+export { KupFamilyTree as KupFamilyTree } from '../types/components/kup-family-tree/kup-family-tree';
+export { KupForm as KupForm } from '../types/components/kup-form/kup-form';
+export { KupGauge as KupGauge } from '../types/components/kup-gauge/kup-gauge';
+export { KupGrid as KupGrid } from '../types/components/kup-grid/kup-grid';
+export { KupIframe as KupIframe } from '../types/components/kup-iframe/kup-iframe';
+export { KupImage as KupImage } from '../types/components/kup-image/kup-image';
+export { KupImageList as KupImageList } from '../types/components/kup-image-list/kup-image-list';
+export { KupLazy as KupLazy } from '../types/components/kup-lazy/kup-lazy';
+export { KupList as KupList } from '../types/components/kup-list/kup-list';
+export { KupMagicBox as KupMagicBox } from '../types/components/kup-magic-box/kup-magic-box';
+export { KupNavBar as KupNavBar } from '../types/components/kup-nav-bar/kup-nav-bar';
+export { KupNumericPicker as KupNumericPicker } from '../types/components/kup-numeric-picker/kup-numeric-picker';
+export { KupPhotoFrame as KupPhotoFrame } from '../types/components/kup-photo-frame/kup-photo-frame';
+export { KupProbe as KupProbe } from '../types/components/kup-probe/kup-probe';
+export { KupProgressBar as KupProgressBar } from '../types/components/kup-progress-bar/kup-progress-bar';
+export { KupQlik as KupQlik } from '../types/components/kup-qlik/kup-qlik';
+export { KupRadio as KupRadio } from '../types/components/kup-radio/kup-radio';
+export { KupRating as KupRating } from '../types/components/kup-rating/kup-rating';
+export { KupSnackbar as KupSnackbar } from '../types/components/kup-snackbar/kup-snackbar';
+export { KupSpinner as KupSpinner } from '../types/components/kup-spinner/kup-spinner';
+export { KupSwitch as KupSwitch } from '../types/components/kup-switch/kup-switch';
+export { KupTabBar as KupTabBar } from '../types/components/kup-tab-bar/kup-tab-bar';
+export { KupTextField as KupTextField } from '../types/components/kup-text-field/kup-text-field';
+export { KupTimePicker as KupTimePicker } from '../types/components/kup-time-picker/kup-time-picker';
+export { KupTree as KupTree } from '../types/components/kup-tree/kup-tree';
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types/components';

package/dist/components/index.js

@@ -0,0 +1,48 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { KupAccordion, defineCustomElement as defineCustomElementKupAccordion } from './kup-accordion.js';
+export { KupAutocomplete, defineCustomElement as defineCustomElementKupAutocomplete } from './kup-autocomplete.js';
+export { KupBadge, defineCustomElement as defineCustomElementKupBadge } from './kup-badge.js';
+export { KupBox, defineCustomElement as defineCustomElementKupBox } from './kup-box.js';
+export { KupButton, defineCustomElement as defineCustomElementKupButton } from './kup-button.js';
+export { KupButtonList, defineCustomElement as defineCustomElementKupButtonList } from './kup-button-list.js';
+export { KupCalendar, defineCustomElement as defineCustomElementKupCalendar } from './kup-calendar.js';
+export { KupCard, defineCustomElement as defineCustomElementKupCard } from './kup-card.js';
+export { KupCell, defineCustomElement as defineCustomElementKupCell } from './kup-cell.js';
+export { KupChart, defineCustomElement as defineCustomElementKupChart } from './kup-chart.js';
+export { KupCheckbox, defineCustomElement as defineCustomElementKupCheckbox } from './kup-checkbox.js';
+export { KupChip, defineCustomElement as defineCustomElementKupChip } from './kup-chip.js';
+export { KupColorPicker, defineCustomElement as defineCustomElementKupColorPicker } from './kup-color-picker.js';
+export { KupCombobox, defineCustomElement as defineCustomElementKupCombobox } from './kup-combobox.js';
+export { KupDash, defineCustomElement as defineCustomElementKupDash } from './kup-dash.js';
+export { KupDashList, defineCustomElement as defineCustomElementKupDashList } from './kup-dash-list.js';
+export { KupDashboard, defineCustomElement as defineCustomElementKupDashboard } from './kup-dashboard.js';
+export { KupDataTable, defineCustomElement as defineCustomElementKupDataTable } from './kup-data-table.js';
+export { KupDatePicker, defineCustomElement as defineCustomElementKupDatePicker } from './kup-date-picker.js';
+export { KupDrawer, defineCustomElement as defineCustomElementKupDrawer } from './kup-drawer.js';
+export { KupDropdownButton, defineCustomElement as defineCustomElementKupDropdownButton } from './kup-dropdown-button.js';
+export { KupEchart, defineCustomElement as defineCustomElementKupEchart } from './kup-echart.js';
+export { KupFamilyTree, defineCustomElement as defineCustomElementKupFamilyTree } from './kup-family-tree.js';
+export { KupForm, defineCustomElement as defineCustomElementKupForm } from './kup-form.js';
+export { KupGauge, defineCustomElement as defineCustomElementKupGauge } from './kup-gauge.js';
+export { KupGrid, defineCustomElement as defineCustomElementKupGrid } from './kup-grid.js';
+export { KupIframe, defineCustomElement as defineCustomElementKupIframe } from './kup-iframe.js';
+export { KupImage, defineCustomElement as defineCustomElementKupImage } from './kup-image.js';
+export { KupImageList, defineCustomElement as defineCustomElementKupImageList } from './kup-image-list.js';
+export { KupLazy, defineCustomElement as defineCustomElementKupLazy } from './kup-lazy.js';
+export { KupList, defineCustomElement as defineCustomElementKupList } from './kup-list.js';
+export { KupMagicBox, defineCustomElement as defineCustomElementKupMagicBox } from './kup-magic-box.js';
+export { KupNavBar, defineCustomElement as defineCustomElementKupNavBar } from './kup-nav-bar.js';
+export { KupNumericPicker, defineCustomElement as defineCustomElementKupNumericPicker } from './kup-numeric-picker.js';
+export { KupPhotoFrame, defineCustomElement as defineCustomElementKupPhotoFrame } from './kup-photo-frame.js';
+export { KupProbe, defineCustomElement as defineCustomElementKupProbe } from './kup-probe.js';
+export { KupProgressBar, defineCustomElement as defineCustomElementKupProgressBar } from './kup-progress-bar.js';
+export { KupQlik, defineCustomElement as defineCustomElementKupQlik } from './kup-qlik.js';
+export { KupRadio, defineCustomElement as defineCustomElementKupRadio } from './kup-radio.js';
+export { KupRating, defineCustomElement as defineCustomElementKupRating } from './kup-rating.js';
+export { KupSnackbar, defineCustomElement as defineCustomElementKupSnackbar } from './kup-snackbar.js';
+export { KupSpinner, defineCustomElement as defineCustomElementKupSpinner } from './kup-spinner.js';
+export { KupSwitch, defineCustomElement as defineCustomElementKupSwitch } from './kup-switch.js';
+export { KupTabBar, defineCustomElement as defineCustomElementKupTabBar } from './kup-tab-bar.js';
+export { KupTextField, defineCustomElement as defineCustomElementKupTextField } from './kup-text-field.js';
+export { KupTimePicker, defineCustomElement as defineCustomElementKupTimePicker } from './kup-time-picker.js';
+export { KupTree, defineCustomElement as defineCustomElementKupTree } from './kup-tree.js';

package/dist/components/kup-accordion.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface KupAccordion extends Components.KupAccordion, HTMLElement {}
+export const KupAccordion: {
+  prototype: KupAccordion;
+  new (): KupAccordion;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;