@sme.up/ketchup 6.1.0-SNAPSHOT → 6.3.0

package/dist/types/components/{kup-form-editor/kup-form-editor.d.ts → kup-dashboard/kup-dashboard.d.ts}

@@ -1,7 +1,8 @@
+import type { DropEvent } from '@interactjs/types/index';
 import { EventEmitter } from '../../stencil-public-runtime';
 import { GenericObject } from '../../types/GenericTypes';
-import { KupForm, KupFormEditorElement, KupFormEditorEventPayload, KupSection } from './kup-form-editor-declarations';
-export declare class KupFormEditor {
+import { KupForm, KupDashboardElement, KupDashboardEventPayload, KupSection, KupDataDashboard } from './kup-dashboard-declarations';
+export declare class KupDashboard {
   /**
    * References the root HTML element of the component (<kup-text-field>).
    */
@@ -18,17 +19,18 @@ export declare class KupFormEditor {
   customStyle: string;
   /**
    * The data of the component.
+   * @default null
+   */
+  data: KupDataDashboard;
+  /**
+   * Enable drag & drop of the section.
    * @default false
    */
-  data: KupForm;
+  enableDesign: boolean;
   /**
    * Instance of the KupManager class.
    */
   private kupManager;
-  /**
-   * Draggable type of Form (Components or Sections).
-   */
-  private dragType;
   /**
    * Internal data of the component.
    */
@@ -37,7 +39,7 @@ export declare class KupFormEditor {
    * Internal data backup of the component for refresh when changed content by drag&drop.
    */
   private internalDataBackup;
-  kupSave: EventEmitter<KupFormEditorEventPayload>;
+  kupSave: EventEmitter<KupDashboardEventPayload>;
   onKupSave(): void;
   dataChanged(): void;
   /**
@@ -55,12 +57,18 @@ export declare class KupFormEditor {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   setProps(props: GenericObject): Promise<void>;
+  buildGuid(): string;
   buildHeader(): any;
   buildForm(form: KupForm, parent: KupForm | KupSection): any;
   buildSectionHeader(section: KupSection, parent: KupForm | KupSection): any;
   buildSection(section: KupSection, parent: KupForm | KupSection): any;
+  calcSectionPosition(pointerY: number, pointerX: number, vertical: boolean, sectionCount: number, elements: HTMLCollection): number;
   didRenderInteractables(): void;
-  dropped(parent: KupFormEditorElement, child: KupFormEditorElement): void;
+  dragEnter(clientY: number, clientX: number, parent: KupDashboardElement): void;
+  dropped(event: DropEvent, parent: KupDashboardElement, child: KupDashboardElement): void;
+  getGridStyle(entity: KupForm | KupSection): {};
+  setSectionPlaceHolder(element: HTMLElement, index: number): void;
+  removeSectionPlaceHolder(): void;
   resetData(form?: KupForm): void;
   unregisterInteractables(): void;
   componentWillLoad(): void;

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

@@ -6,8 +6,8 @@ export declare class KupDataTableState implements KupState {
   expandGroups: boolean;
   groupLabelDisplay: GroupLabelDisplayMode;
   density: string;
-  enableSortableColumns: boolean;
   enableExtraColumns: boolean;
+  enableSortableColumns: boolean;
   forceOneLine: boolean;
   globalFilter: boolean;
   globalFilterValue: string;

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

@@ -0,0 +1,37 @@
+import { KupDataCell, KupDataColumn, KupDataNode } from '../../managers/kup-data/kup-data-declarations';
+import { KupEventPayload } from '../../types/GenericTypes';
+import { KupBoxLayout } from '../kup-box/kup-box-declarations';
+/**
+ * Props of the kup-family-tree component.
+ * Used to export every prop in an object.
+ */
+export declare enum KupFamilyTreeProps {
+  autofitOnExpand = "The component will autofit everytime a node is expanded.",
+  autofitOnLoad = "The component's initial render will fit the container by invoking the runAutofit method.",
+  collapsible = "Nodes can be expanded/collapsed.",
+  customStyle = "Custom style of the component.",
+  data = "Actual data of the component",
+  layout = "Layout of the boxes.",
+  stackedLeaves = "Child nodes that have no children are arranged vertically."
+}
+export interface KupFamilyTreeData {
+  columns: KupDataColumn[];
+  rows: KupFamilyTreeNode[];
+}
+export declare type KupFamilyTreeLayout = KupBoxLayout | number;
+export interface KupFamilyTreeNode extends KupDataNode {
+  children?: KupFamilyTreeNode[];
+  isStaff?: boolean;
+  layout?: KupFamilyTreeLayout;
+}
+export interface KupFamilyTreeEventHandlerDetails {
+  cell: KupDataCell;
+  column: KupDataColumn;
+  expandButton: HTMLElement;
+  originalEvent: PointerEvent;
+  row: KupFamilyTreeNode;
+  td: HTMLElement;
+}
+export interface KupFamilyTreeEventPayload extends KupEventPayload {
+  details: KupFamilyTreeEventHandlerDetails;
+}

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

@@ -0,0 +1,82 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { GenericObject } from '../../types/GenericTypes';
+import { KupFamilyTreeData, KupFamilyTreeEventPayload, KupFamilyTreeLayout, KupFamilyTreeNode } from './kup-family-tree-declarations';
+export declare class KupFamilyTree {
+  #private;
+  /**
+   * References the root HTML element of the component (<kup-family-tree>).
+   */
+  rootElement: HTMLElement;
+  /**
+   * The component will autofit everytime a node is expanded.
+   * @default true
+   */
+  autofitOnExpand: boolean;
+  /**
+   * The component's initial render will fit the container by invoking the runAutofit method.
+   * @default true
+   */
+  autofitOnLoad: boolean;
+  /**
+   * Nodes can be expanded/collapsed.
+   * @default true
+   */
+  collapsible: boolean;
+  /**
+   * Custom style of the component.
+   * @default ""
+   * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+   */
+  customStyle: string;
+  /**
+   * Actual data of the component.
+   * @default null
+   */
+  data: KupFamilyTreeData;
+  /**
+   * Layout of the boxes.
+   * @default null
+   */
+  layout: KupFamilyTreeLayout;
+  /**
+   * Child nodes that have no children are arranged vertically.
+   * @default false
+   */
+  stackedLeaves: boolean;
+  kupClick: EventEmitter<KupFamilyTreeEventPayload>;
+  kupContextMenu: EventEmitter<KupFamilyTreeEventPayload>;
+  kupDblClick: EventEmitter<KupFamilyTreeEventPayload>;
+  /**
+   * Collapses all nodes.
+   */
+  collapseAll(nodes?: KupFamilyTreeNode[]): Promise<void>;
+  /**
+   * Expands all nodes.
+   */
+  expandAll(nodes?: KupFamilyTreeNode[]): Promise<void>;
+  /**
+   * 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>;
+  /**
+   * This method causes the component to autofit its container's width.
+   */
+  runAutofit(): 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>;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  componentDidRender(): void;
+  render(): any;
+  disconnectedCallback(): void;
+}

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

@@ -0,0 +1,60 @@
+import { FCellShapes } from '../../f-components/f-cell/f-cell-declarations';
+import { KupDataColumn, KupDataRow } from '../../managers/kup-data/kup-data-declarations';
+/**
+ * Props of the kup-form component.
+ * Used to export every prop in an object.
+ */
+export declare enum KupFormProps {
+  customStyle = "Custom style of the component.",
+  data = "Actual data of the form.",
+  layout = "How the form will arrange its content."
+}
+export interface KupFormData {
+  columns?: KupDataColumn[];
+  rows?: KupFormRow[];
+}
+export interface KupFormRow extends KupDataRow {
+  layout?: KupFormLayout;
+}
+export interface KupFormLayout {
+  horizontal?: boolean;
+  sections?: KupFormSection[];
+}
+export interface KupFormSection {
+  columns?: number;
+  content?: KupFormField[];
+  dim?: string;
+  horizontal?: boolean;
+  id?: string;
+  label?: KupFormLabel;
+  sections?: KupFormSection[];
+  style?: {
+    [index: string]: string;
+  };
+  title?: string;
+}
+export interface KupFormField {
+  column?: string;
+  data?: any;
+  label?: string;
+  shape?: FCellShapes;
+  value?: string;
+}
+export interface KupFormLabel {
+  alignment?: KupFormLabelAlignment;
+  placement?: KupFormLabelPlacement;
+  width?: string;
+}
+export declare enum KupFormLabelAlignment {
+  CENTER = "center",
+  LEFT = "left",
+  RIGHT = "right"
+}
+export declare enum KupFormLabelPlacement {
+  BOTTOM = "bottom",
+  LEFT = "left",
+  HIDDEN = "hidden",
+  PLACEHOLDER = "placeholder",
+  RIGHT = "right",
+  TOP = "top"
+}

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

@@ -0,0 +1,63 @@
+import { KupFormLayout, KupFormData } from './kup-form-declarations';
+import { GenericObject } from '../../types/GenericTypes';
+export declare class KupForm {
+  /**
+   * References the root HTML element of the component (<kup-form>).
+   */
+  rootElement: HTMLElement;
+  /**
+   * Custom style of the component.
+   * @default ""
+   * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+   */
+  customStyle: string;
+  /**
+   * Actual data of the form.
+   * @default null
+   */
+  data: KupFormData;
+  /**
+   * How the form will arrange its content.
+   * @default null
+   */
+  layout: KupFormLayout;
+  private kupManager;
+  private formLayout;
+  private visibleColumns;
+  onDataChanged(): void;
+  onLayoutChanged(): void;
+  /**
+   * 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 focus on an editable table cell.
+   * @param {string} column - Name of the column.
+   * @param {string} rowId - Id of the row.
+   */
+  setFocus(column: string, rowId: string): 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>;
+  private getColumns;
+  private initVisibleColumns;
+  private getRows;
+  private checkLayout;
+  private renderRow;
+  private renderSection;
+  private renderFormField;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  componentDidRender(): void;
+  render(): any;
+  disconnectedCallback(): void;
+}

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

@@ -0,0 +1,6 @@
+import { KupState } from '../kup-state/kup-state';
+export declare class KupImageListState implements KupState {
+  selectedTreeNodePath: string;
+  load: boolean;
+  toDebugString(): string;
+}

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

@@ -2,14 +2,20 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { GenericObject } from '../../types/GenericTypes';
 import { KupImageListEventPayload } from './kup-image-list-declarations';
 import { KupDataNode } from '../../managers/kup-data/kup-data-declarations';
+import { KupStore } from '../kup-state/kup-store';
+import { KupImageListState } from './kup-image-list-state';
+import { TreeNodePath } from '../kup-tree/kup-tree-declarations';
 export declare class KupImageList {
   #private;
   /**
    * References the root HTML element of the component (<kup-image-list>).
    */
   rootElement: HTMLElement;
+  state: KupImageListState;
   currentNode: KupDataNode;
   navigationBarToggled: boolean;
+  initWithPersistedState(): void;
+  persistState(): void;
   /**
    * Custom style of the component.
    * @default ""
@@ -26,12 +32,23 @@ export declare class KupImageList {
    * @default true
    */
   ripple: boolean;
+  /**
+   * An array of integers containing the path to a selected child.\
+   */
+  selectedNode: TreeNodePath;
+  stateId: string;
+  store: KupStore;
+  /**
+   * Instance of the KupManager class.
+   */
+  private kupManager;
   kupClick: EventEmitter<KupImageListEventPayload>;
   onKupClick(node: KupDataNode): void;
   kupContextMenu: EventEmitter<KupImageListEventPayload>;
   onKupContextMenu(e: MouseEvent, node: KupDataNode): void;
   kupDblClick: EventEmitter<KupImageListEventPayload>;
   onKupDblClick(node: KupDataNode): void;
+  selectNode(newData: TreeNodePath): void;
   /**
    * 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.

package/dist/types/components/kup-text-field/kup-text-field-declarations.d.ts

@@ -5,6 +5,7 @@ import { KupEventPayload } from '../../types/GenericTypes';
  */
 export declare enum KupTextFieldProps {
   customStyle = "Custom style of the component.",
+  decimals = "Number of decimals (should be used when inputType is number).",
   disabled = "When set to true, the component is disabled.",
   emitSubmitEventOnEnter = "When the text field is part of the autocomplete component and the list is opened, enter key selects the item and doesn't submit.",
   fullWidth = "When set to true, the component will be rendered at full width.",
@@ -17,7 +18,10 @@ export declare enum KupTextFieldProps {
   isClearable = "Enables a clear trailing icon.",
   label = "When set, its content will be shown as a label.",
   leadingLabel = "When set to true, the label will be on the left of the component.",
+  max = "The HTML max attribute specifies the maximum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week.",
   maxLength = "When set, the helper will display a character counter.",
+  min = "The HTML min attribute specifies the minimum value for the input element. Works with the following input types: number, range, date, datetime-local, month, time and week.",
+  name = "The HTML name attribute used for form autocomplete.",
   outlined = "When set to true, the component will be rendered as an outlined field.",
   readOnly = "Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.",
   step = "The HTML step of the input element. It has effect only with number input type.",

package/dist/types/components/kup-text-field/kup-text-field.d.ts

@@ -17,6 +17,11 @@ export declare class KupTextField {
    * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
    */
   customStyle: string;
+  /**
+   * Number of decimals (should be used when inputType is number).
+   * @default null
+   */
+  decimals: number;
   /**
    * When set to true, the component is disabled.
    * @default false
@@ -94,6 +99,11 @@ export declare class KupTextField {
    * @default null
    */
   min: number;
+  /**
+   * The HTML name attribute used for form autocomplete.
+   * @default null
+   */
+  name: string;
   /**
    * When set to true, the component will be rendered as an outlined field.
    * @default false

package/dist/types/components/kup-time-picker/kup-time-picker.d.ts

@@ -47,12 +47,6 @@ export declare class KupTimePicker {
    * Instance of the KupManager class.
    */
   private kupManager;
-  private hoursEl;
-  private minutesEl;
-  private secondsEl;
-  private hoursCircleEl;
-  private minutesCircleEl;
-  private secondsCircleEl;
   private hoursActive;
   private minutesActive;
   private secondsActive;

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

@@ -1,4 +1,5 @@
 import { KupDataCell, KupDataColumn, KupDataNode, KupDataRow } from '../../managers/kup-data/kup-data-declarations';
+import type { PointerEvent } from '@interactjs/types/index';
 import { GenericMap, KupEventPayload } from '../../types/GenericTypes';
 import { KupCardEventPayload } from '../kup-card/kup-card-declarations';
 /**
@@ -55,6 +56,7 @@ export interface KupTreeEventHandlerDetails {
   cell: KupDataCell;
   column: KupDataColumn;
   filterRemove: HTMLSpanElement;
+  originalEvent: PointerEvent;
   row: KupDataRow;
   td: HTMLElement;
   th: HTMLElement;

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

@@ -167,7 +167,6 @@ export declare class KupTree {
    */
   private columnMenuCard;
   private treeWrapperRef;
-  private selectedColumn;
   private clickTimeout;
   private globalFilterTimeout;
   private footer;