@progress-chef/platform-shared-components 0.0.153 → 0.0.155

package/lib/atoms/tree-view/tree-view.component.d.ts

@@ -0,0 +1,279 @@
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { Observable } from 'rxjs';
+import { TreeItemLookup, TreeItemAddRemoveArgs, TreeItemDropEvent, TreeItemDragStartEvent, TreeItemDragEvent, CheckableSettings, CheckMode } from '@progress/kendo-angular-treeview';
+import { TreeViewNode } from './tree-view.interfaces';
+import * as i0 from "@angular/core";
+/**
+ * Custom TreeView component that wraps Kendo's TreeView with design system styling.
+ *
+ * This component provides a hierarchical tree structure for displaying and navigating data.
+ * It supports selection, expansion, icons, and custom templates.
+ */
+export declare class TreeViewComponent {
+    /**
+     * ViewChild reference to the Kendo TreeView component instance
+     */
+    treeViewElement: any;
+    /**
+     * The data source for the tree view
+     */
+    data: TreeViewNode[];
+    selectable: boolean;
+    filterable: boolean;
+    checkboxes: boolean;
+    checkable: boolean;
+    dragAndDrop: boolean;
+    expandable: boolean;
+    loading: boolean;
+    animate: boolean;
+    size: 'small' | 'medium' | 'large' | 'none';
+    textField: string;
+    childrenField: string;
+    hasChildrenField: string;
+    expandedField: string;
+    selectedField: string;
+    disabledField: string;
+    checkedField: string;
+    iconClassField: string;
+    iconField: string;
+    imageUrlField: string;
+    spriteCssClassField: string;
+    disabledKeys: string[];
+    expandBy: string | ((item: TreeViewNode) => string);
+    expandedKeys: string[];
+    selectedKeys: string[];
+    checkedKeys: string[];
+    expandDisabledNodes: boolean;
+    disableNodes: boolean;
+    enableCheck: boolean;
+    checkChildren: boolean;
+    checkDisabledChildren: boolean;
+    checkParents: boolean;
+    checkOnClick: boolean;
+    uncheckCollapsedChildren: boolean;
+    checkMode: CheckMode;
+    fetchChildren: ((item: any) => any[]) | undefined;
+    isChecked: ((item: any) => boolean) | undefined;
+    isDisabled: ((item: any) => boolean) | undefined;
+    isExpanded: ((item: any) => boolean) | undefined;
+    isSelected: ((item: any) => boolean) | undefined;
+    isVisible: ((item: any) => boolean) | undefined;
+    nodeTemplate: TemplateRef<any> | undefined;
+    loadMoreButtonTemplate: TemplateRef<any> | undefined;
+    loadMoreService: ((item: any) => any[]) | undefined;
+    pageSize: number;
+    loadOnDemand: boolean;
+    filter: string;
+    filterSettings: any;
+    navigable: boolean;
+    trackBy: ((index: number, item: TreeViewNode) => any) | undefined;
+    selectionChange: EventEmitter<any>;
+    expand: EventEmitter<any>;
+    collapse: EventEmitter<any>;
+    checkedChange: EventEmitter<any>;
+    nodeClick: EventEmitter<any>;
+    nodeDblClick: EventEmitter<any>;
+    nodeDragStart: EventEmitter<TreeItemDragStartEvent>;
+    nodeDrag: EventEmitter<TreeItemDragEvent>;
+    nodeDrop: EventEmitter<TreeItemDropEvent>;
+    nodeDragEnd: EventEmitter<TreeItemDragEvent>;
+    addItem: EventEmitter<TreeItemAddRemoveArgs>;
+    removeItem: EventEmitter<TreeItemAddRemoveArgs>;
+    expandedKeysChange: EventEmitter<string[]>;
+    selectedKeysChange: EventEmitter<string[]>;
+    checkedKeysChange: EventEmitter<string[]>;
+    filterChange: EventEmitter<string>;
+    loadMore: EventEmitter<any>;
+    childrenLoaded: EventEmitter<any>;
+    /**
+     * Currently selected items
+     */
+    selectedItems: TreeViewNode[];
+    /**
+     * Currently checked items
+     */
+    checkedItems: TreeViewNode[];
+    /**
+     * Generates CSS classes for the tree-view container element based on current component state.
+     * Applies conditional styling classes to reflect loading states and enable appropriate visual feedback.
+     *
+     * @returns A space-separated string of CSS class names to apply to the tree-view container
+     */
+    getTreeViewClasses(): string;
+    /**
+     * Provides comprehensive checkable settings configuration for the Kendo TreeView component.
+     * Aggregates all checkbox-related input properties into a single configuration object
+     * that controls checkbox behavior including parent-child relationships and interaction modes.
+     *
+     * @returns CheckableSettings object with all checkbox configuration options
+     */
+    get checkableSettings(): CheckableSettings;
+    /**
+     * Extracts and returns child items from a tree node using the configured children field.
+     * Provides a standardized way for the Kendo TreeView to access hierarchical child data
+     * regardless of the actual field name used in the data structure.
+     *
+     * @param dataItem - The tree node data item to extract children from
+     * @returns Observable array of child items or empty array if no children exist
+     */
+    children: (dataItem: any) => Observable<any[]>;
+    /**
+     * Determines whether a tree node has child items for proper expand/collapse icon display.
+     * Checks for the existence of children property and logs the result for debugging purposes.
+     * Used by the TreeView to decide whether to show expansion indicators for each node.
+     *
+     * @param dataItem - The tree node data item to check for children
+     * @returns Boolean indicating whether the node has children that can be expanded
+     */
+    hasChildren: (dataItem: any) => boolean;
+    /**
+     * Handles tree node selection changes when users select or deselect nodes.
+     * Updates the internal selected items state and propagates the selection event
+     * to parent components for external handling and synchronization.
+     *
+     * @param event - The selection change event containing the newly selected items array
+     */
+    onSelectionChange(event: any): void;
+    /**
+     * Handles checkbox state changes when users check or uncheck tree nodes.
+     * Updates the internal checked items state and emits the change event to notify
+     * parent components of the new checkbox selections for form validation or data processing.
+     *
+     * @param event - The checked change event containing the newly checked items array
+     */
+    onCheckedChange(event: any): void;
+    /**
+     * Handles tree node expansion events when users click expand icons or use keyboard navigation.
+     * Updates the node's expanded state in the data model and emits the expand event
+     * for parent components to handle lazy loading of child data or state persistence.
+     *
+     * @param event - The expand event containing the expanded node data and context information
+     */
+    onExpand(event: any): void;
+    /**
+     * Handles tree node collapse events when users click collapse icons or use keyboard navigation.
+     * Updates the node's expanded state in the data model and emits the collapse event
+     * for parent components to handle state cleanup or memory optimization.
+     *
+     * @param event - The collapse event containing the collapsed node data and context information
+     */
+    onCollapse(event: any): void;
+    /**
+     * Handles single-click events on tree nodes for custom interaction handling.
+     * Propagates click events to parent components for navigation, selection logic,
+     * or custom actions based on the clicked node's data and context.
+     *
+     * @param event - The node click event containing clicked node data and mouse event details
+     */
+    onNodeClick(event: any): void;
+    /**
+     * Handles double-click events on tree nodes for enhanced interaction patterns.
+     * Typically used for opening detailed views, editing modes, or quick actions
+     * that differ from single-click behavior. Emits event for parent component handling.
+     *
+     * @param event - The node double-click event containing node data and mouse event details
+     */
+    onNodeDblClick(event: any): void;
+    /**
+     * Handles the initiation of drag operations when users start dragging tree nodes.
+     * Validates that drag-and-drop functionality is enabled before proceeding and
+     * emits the drag start event for parent components to handle drag state setup.
+     *
+     * @param event - The tree item drag start event containing source node and drag context
+     */
+    onNodeDragStart(event: TreeItemDragStartEvent): void;
+    /**
+     * Handles ongoing drag operations as users move nodes during drag-and-drop actions.
+     * Provides real-time feedback and validation during the drag process, allowing
+     * parent components to update UI indicators or validate drop targets.
+     *
+     * @param event - The tree item drag event containing current drag position and target information
+     */
+    onNodeDrag(event: TreeItemDragEvent): void;
+    /**
+     * Handles the completion of drag operations when users finish dragging nodes.
+     * Provides cleanup and final processing for drag-and-drop operations, allowing
+     * parent components to finalize data updates and reset drag-related UI states.
+     *
+     * @param event - The tree item drag end event containing final drag state and completion context
+     */
+    onNodeDragEnd(event: TreeItemDragEvent): void;
+    /**
+     * Handles item addition events when new nodes are added to the tree structure.
+     * Propagates add events to parent components for data persistence, validation,
+     * and tree structure updates to maintain data integrity.
+     *
+     * @param event - The tree item add event containing new item data and insertion context
+     */
+    onAddItem(event: TreeItemAddRemoveArgs): void;
+    /**
+     * Handles item removal events when nodes are deleted from the tree structure.
+     * Propagates remove events to parent components for confirmation dialogs, data cleanup,
+     * and cascading deletions of child nodes when necessary.
+     *
+     * @param event - The tree item remove event containing deleted item data and context
+     */
+    onRemoveItem(event: TreeItemAddRemoveArgs): void;
+    /**
+     * Handles expanded keys changes for two-way binding support with parent components.
+     * Synchronizes internal expanded state with external data binding, enabling
+     * programmatic control of tree expansion and state persistence across component updates.
+     *
+     * @param keys - Array of string keys representing currently expanded tree nodes
+     */
+    onExpandedKeysChange(keys: string[]): void;
+    /**
+     * Handles selected keys changes for two-way binding support with parent components.
+     * Synchronizes internal selection state with external data binding, enabling
+     * programmatic control of tree selection and form integration capabilities.
+     *
+     * @param keys - Array of string keys representing currently selected tree nodes
+     */
+    onSelectedKeysChange(keys: string[]): void;
+    /**
+     * Handles checked keys changes for two-way binding support with parent components.
+     * Synchronizes internal checkbox state with external data binding, enabling
+     * programmatic control of checkbox selections and form validation integration.
+     *
+     * @param keys - Array of string keys representing currently checked tree nodes
+     */
+    onCheckedKeysChange(keys: string[]): void;
+    /**
+     * Handles filter text changes when users type in search fields or apply filtering criteria.
+     * Updates the internal filter state and propagates changes to parent components
+     * for server-side filtering or custom search logic implementation.
+     *
+     * @param filter - The filter string entered by the user for tree node searching
+     */
+    onFilterChange(filter: string): void;
+    /**
+     * Handle load more event
+     */
+    onLoadMore(event: any): void;
+    /**
+     * Handle children loaded event
+     */
+    onChildrenLoaded(event: any): void;
+    /**
+     * Expand all nodes
+     */
+    expandAll(): void;
+    /**
+     * Get item from lookup
+     */
+    itemLookup(index: string): TreeItemLookup | undefined;
+    /**
+     * Log function for debugging events
+     */
+    log(eventName: string, event: any): void;
+    /**
+     * Handle drop event with custom logic
+     */
+    handleDrop(event: any): void;
+    /**
+     * Handle node drag start event
+     */
+    onDragStart(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TreeViewComponent, "lib-tree-view", never, { "data": { "alias": "data"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "checkboxes": { "alias": "checkboxes"; "required": false; }; "checkable": { "alias": "checkable"; "required": false; }; "dragAndDrop": { "alias": "dragAndDrop"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "childrenField": { "alias": "childrenField"; "required": false; }; "hasChildrenField": { "alias": "hasChildrenField"; "required": false; }; "expandedField": { "alias": "expandedField"; "required": false; }; "selectedField": { "alias": "selectedField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "checkedField": { "alias": "checkedField"; "required": false; }; "iconClassField": { "alias": "iconClassField"; "required": false; }; "iconField": { "alias": "iconField"; "required": false; }; "imageUrlField": { "alias": "imageUrlField"; "required": false; }; "spriteCssClassField": { "alias": "spriteCssClassField"; "required": false; }; "disabledKeys": { "alias": "disabledKeys"; "required": false; }; "expandBy": { "alias": "expandBy"; "required": false; }; "expandedKeys": { "alias": "expandedKeys"; "required": false; }; "selectedKeys": { "alias": "selectedKeys"; "required": false; }; "checkedKeys": { "alias": "checkedKeys"; "required": false; }; "expandDisabledNodes": { "alias": "expandDisabledNodes"; "required": false; }; "disableNodes": { "alias": "disableNodes"; "required": false; }; "enableCheck": { "alias": "enableCheck"; "required": false; }; "checkChildren": { "alias": "checkChildren"; "required": false; }; "checkDisabledChildren": { "alias": "checkDisabledChildren"; "required": false; }; "checkParents": { "alias": "checkParents"; "required": false; }; "checkOnClick": { "alias": "checkOnClick"; "required": false; }; "uncheckCollapsedChildren": { "alias": "uncheckCollapsedChildren"; "required": false; }; "checkMode": { "alias": "checkMode"; "required": false; }; "fetchChildren": { "alias": "fetchChildren"; "required": false; }; "isChecked": { "alias": "isChecked"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "isSelected": { "alias": "isSelected"; "required": false; }; "isVisible": { "alias": "isVisible"; "required": false; }; "nodeTemplate": { "alias": "nodeTemplate"; "required": false; }; "loadMoreButtonTemplate": { "alias": "loadMoreButtonTemplate"; "required": false; }; "loadMoreService": { "alias": "loadMoreService"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "loadOnDemand": { "alias": "loadOnDemand"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterSettings": { "alias": "filterSettings"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; }, { "selectionChange": "selectionChange"; "expand": "expand"; "collapse": "collapse"; "checkedChange": "checkedChange"; "nodeClick": "nodeClick"; "nodeDblClick": "nodeDblClick"; "nodeDragStart": "nodeDragStart"; "nodeDrag": "nodeDrag"; "nodeDrop": "nodeDrop"; "nodeDragEnd": "nodeDragEnd"; "addItem": "addItem"; "removeItem": "removeItem"; "expandedKeysChange": "expandedKeysChange"; "selectedKeysChange": "selectedKeysChange"; "checkedKeysChange": "checkedKeysChange"; "filterChange": "filterChange"; "loadMore": "loadMore"; "childrenLoaded": "childrenLoaded"; }, never, never, true, never>;
+}

package/lib/atoms/tree-view/tree-view.interfaces.d.ts

@@ -0,0 +1,23 @@
+/**
+ * TreeView node interface with comprehensive properties
+ */
+export interface TreeViewNode {
+    text: string;
+    value?: any;
+    id?: string | number;
+    expanded?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    visible?: boolean;
+    children?: TreeViewNode[];
+    parentId?: string | number;
+    icon?: string;
+    iconClass?: string;
+    imageUrl?: string;
+    spriteCssClass?: string;
+    cssClass?: string;
+    hasMore?: boolean;
+    loadMoreText?: string;
+    [key: string]: any;
+}

package/lib/atoms/tree-view/tree-view.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./tree-view.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-treeview";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "../button/button.module";
+import * as i6 from "../icon/icon.module";
+import * as i7 from "../loader/loader.module";
+export declare class TreeViewModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TreeViewModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TreeViewModule, never, [typeof i1.TreeViewComponent, typeof i2.CommonModule, typeof i3.TreeViewModule, typeof i4.IconsModule, typeof i5.ButtonModule, typeof i6.IconModule, typeof i7.LoaderModule], [typeof i1.TreeViewComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TreeViewModule>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress-chef/platform-shared-components",
-  "version": "0.0.153",
+  "version": "0.0.155",
   "peerDependencies": {
     "@angular/common": "^19.2.17",
     "@angular/core": "^19.2.17",
@@ -18,6 +18,7 @@
     "@progress/kendo-angular-inputs": "^20.1.1",
     "@progress/kendo-angular-intl": "^20.1.1",
     "@progress/kendo-angular-treeview": "^20.1.1",
+    "@progress/kendo-angular-treelist": "^20.1.1",
     "@progress/kendo-drawing": "^1.19.0",
     "@progress/kendo-angular-label": "^20.1.1",
     "@progress/kendo-angular-dateinputs": "^20.1.1",

package/public-api.d.ts

@@ -29,6 +29,7 @@ export * from './lib/atoms/notification/notification.module';
 export * from './lib/atoms/numeric-textbox/numeric-textbox.module';
 export * from './lib/atoms/progress-bar/progress-bar.module';
 export * from './lib/atoms/radio-button/radio-button.module';
+export * from './lib/atoms/markdown-display/markdown-display.module';
 export * from './lib/atoms/search-box/search-box.module';
 export * from './lib/atoms/slider/slider.module';
 export * from './lib/atoms/stepper/stepper.module';
@@ -38,6 +39,8 @@ export * from './lib/atoms/textbox/textbox.module';
 export * from './lib/atoms/time-picker/time-picker.module';
 export * from './lib/atoms/timescheduler/timescheduler.module';
 export * from './lib/atoms/tooltip/tooltip.module';
+export * from './lib/atoms/tree-list/tree-list.module';
+export * from './lib/atoms/tree-view/tree-view.module';
 export * from './lib/atoms/typography/typography.module';
 export * from './lib/atoms/uploader/uploader.module';
 export * from './lib/molecules/molecules.module';
@@ -77,6 +80,7 @@ export * from './lib/atoms/notification/notification.component';
 export * from './lib/atoms/numeric-textbox/numeric-textbox.component';
 export * from './lib/atoms/progress-bar/progress-bar.component';
 export * from './lib/atoms/radio-button/radio-button.component';
+export * from './lib/atoms/markdown-display/markdown-display.component';
 export * from './lib/atoms/search-box/search-box.component';
 export * from './lib/atoms/slider/slider.component';
 export * from './lib/atoms/stepper/stepper.component';
@@ -86,6 +90,8 @@ export * from './lib/atoms/textbox/textbox.component';
 export * from './lib/atoms/time-picker/time-picker.component';
 export * from './lib/atoms/timescheduler/timescheduler.component';
 export * from './lib/atoms/tooltip/tooltip.component';
+export * from './lib/atoms/tree-view/tree-view.component';
+export * from './lib/atoms/tree-list/tree-list.component';
 export * from './lib/atoms/typography/typography.component';
 export * from './lib/atoms/typography/TypographyType';
 export * from './lib/atoms/uploader/uploader.component';