@sme.up/ketchup 6.0.0 → 6.2.0

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

@@ -3,6 +3,7 @@ import { GenericObject } from '../../types/GenericTypes';
 import { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from './kup-autocomplete-declarations';
 import { ItemsDisplayMode, KupListEventPayload } from '../kup-list/kup-list-declarations';
 export declare class KupAutocomplete {
+  #private;
   /**
    * References the root HTML element of the component (<kup-autocomplete>).
    */
@@ -65,17 +66,6 @@ export declare class KupAutocomplete {
    * @default true
    */
   showDropDownIcon: boolean;
-  private doConsistencyCheck;
-  private elStyle;
-  private listEl;
-  /**
-   * Instance of the KupManager class.
-   */
-  private kupManager;
-  private textfieldWrapper;
-  private textfieldEl;
-  private clickCb;
-  private inputTimeout;
   kupBlur: EventEmitter<KupAutocompleteEventPayload>;
   kupChange: EventEmitter<KupAutocompleteEventPayload>;
   kupClick: EventEmitter<KupAutocompleteEventPayload>;
@@ -120,11 +110,6 @@ export declare class KupAutocomplete {
    * @param {string} value - Value of the component.
    */
   setValue(value: string): Promise<void>;
-  private openList;
-  private closeList;
-  private isListOpened;
-  private consistencyCheck;
-  private prepList;
   componentWillLoad(): void;
   componentDidLoad(): void;
   componentWillRender(): void;

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

@@ -1,41 +1,31 @@
 import { KupEventPayload } from '../../types/GenericTypes';
 /**
- * Props of the kup-form-editor component.
+ * Props of the kup-dashboard component.
  * Used to export every prop in an object.
  */
-export declare enum KupFormEditorProps {
+export declare enum KupDashboardProps {
   customStyle = "Custom style of the component.",
-  data = "The data of the component."
+  data = "The data of the component.",
+  enableDesign = "When set to true, the component is in design mode and it is draggable."
 }
-export interface KupFormEditorEventPayload extends KupEventPayload {
+export interface KupDashboardEventPayload extends KupEventPayload {
   data: KupForm;
 }
-export declare enum KupFormEditorDragTypes {
-  Components = "1",
-  Sections = "2"
-}
-export declare enum KupFormEditorLabels {
-  Loaded = "Loaded",
-  Reset = "Reset",
-  Save = "Save",
-  Components = "Components",
-  Sections = "Sections",
-  Column = "Column"
+export interface KupDataDashboard extends KupForm {
 }
 /**
  * Extend html element properties for Form Editor
  */
-export interface KupFormEditorElement extends HTMLDivElement {
-  kupData: KupFormEditorData;
+export interface KupDashboardElement extends HTMLDivElement {
+  kupData: KupDashboardData;
 }
 /**
  * Additional kupData for html element.
  */
-export interface KupFormEditorData {
+export interface KupDashboardData {
   parent?: KupForm | KupSection;
   form?: KupForm;
   section?: KupSection;
-  componnent?: KupComponent;
 }
 export interface KupVariableEntity {
   name: string;
@@ -64,15 +54,7 @@ export interface KupForm extends KupComponentEntity {
   layout: string;
   sections: KupSection[];
 }
-export interface KupWidget extends KupComponentEntity {
-  config?: any;
-  data?: any;
-  dynamisms?: KupDynamismEntity[];
-  options?: any;
-}
-export declare type KupComponent = KupForm | KupWidget;
 export interface KupSection extends KupEntity {
-  components?: KupComponent[];
   dim?: string;
   layout?: string;
   sections?: KupSection[];

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

@@ -1,7 +1,7 @@
 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 +18,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 +38,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 +56,14 @@ 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;
   didRenderInteractables(): void;
-  dropped(parent: KupFormEditorElement, child: KupFormEditorElement): void;
+  dropped(parent: KupDashboardElement, child: KupDashboardElement): void;
+  getGridStyle(entity: KupForm | KupSection): {};
   resetData(form?: KupForm): void;
   unregisterInteractables(): void;
   componentWillLoad(): void;

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

@@ -0,0 +1,33 @@
+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 {
+  autofit = "The component's initial render will fit the container.",
+  collapsible = "Nodes can be expanded/collapsed.",
+  customStyle = "Custom style of the component.",
+  data = "Actual data of the component",
+  layout = "Layout of the boxes."
+}
+export interface KupFamilyTreeData {
+  columns: KupDataColumn[];
+  rows: KupFamilyTreeNode[];
+}
+export interface KupFamilyTreeNode extends KupDataNode {
+  children?: KupFamilyTreeNode[];
+  isStaff?: boolean;
+  layout?: KupBoxLayout;
+}
+export interface KupFamilyTreeEventHandlerDetails {
+  cell: KupDataCell;
+  column: KupDataColumn;
+  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,61 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { GenericObject } from '../../types/GenericTypes';
+import { KupBoxLayout } from '../kup-box/kup-box-declarations';
+import { KupFamilyTreeData, KupFamilyTreeEventPayload } 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's initial render will fit the container.
+   * @default true
+   */
+  autofit: 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: KupBoxLayout;
+  kupClick: EventEmitter<KupFamilyTreeEventPayload>;
+  kupContextMenu: EventEmitter<KupFamilyTreeEventPayload>;
+  kupDblClick: EventEmitter<KupFamilyTreeEventPayload>;
+  /**
+   * 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>;
+  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

@@ -17,7 +17,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

@@ -94,6 +94,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;