@redvars/peacock 3.5.1 → 3.6.1

package/dist/src/canvas/canvas.d.ts

@@ -0,0 +1,92 @@
+import { LitElement } from 'lit';
+export type CanvasDirection = 'up' | 'down' | 'left' | 'right';
+export type CanvasStrokeVariant = 'solid' | 'dashed' | 'animated-dashed';
+export interface CanvasPoint {
+    x: number;
+    y: number;
+}
+export interface CanvasPathSegment {
+    direction: CanvasDirection;
+    length: number;
+}
+interface BaseCanvasShape {
+    color?: string;
+}
+interface BaseCanvasStrokeShape extends BaseCanvasShape {
+    variant?: CanvasStrokeVariant;
+    showArrow?: boolean;
+    clickable?: boolean;
+}
+export interface CanvasCircleShape extends BaseCanvasShape {
+    type: 'circle';
+    x?: number;
+    y?: number;
+    radius?: number;
+}
+export interface CanvasRectShape extends BaseCanvasShape {
+    type: 'rect';
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+export interface CanvasLineShape extends BaseCanvasStrokeShape {
+    type: 'line';
+    start?: CanvasPoint;
+    end?: CanvasPoint;
+}
+export interface CanvasConnectorShape extends BaseCanvasStrokeShape {
+    type: 'connector';
+    start?: CanvasPoint;
+    path?: CanvasPathSegment[];
+}
+export type CanvasShape = CanvasCircleShape | CanvasRectShape | CanvasLineShape | CanvasConnectorShape;
+/**
+ * @label Canvas
+ * @tag wc-canvas
+ * @rawTag canvas
+ * @summary A Material 3 inspired SVG canvas for drawing shapes, lines, and connectors on a dotted grid.
+ *
+ * @cssprop --canvas-background - Background color for the canvas wrapper. Defaults to surface-container-low.
+ * @cssprop --canvas-dot-color - Color of the background grid dots. Defaults to outline-variant.
+ * @cssprop --canvas-line-color - Default stroke color for lines and connectors. Defaults to on-surface.
+ * @cssprop --canvas-hover-color - Stroke color on hover for clickable shapes. Defaults to primary.
+ * @cssprop --canvas-arrow-color - Stroke color for arrow markers. Defaults to on-surface.
+ *
+ * @example
+ * ```html
+ * <wc-canvas id="my-canvas"></wc-canvas>
+ * <script>
+ *   document.querySelector('#my-canvas').shapes = [
+ *     { type: 'circle', x: 0, y: 0, radius: 0.25, color: 'red' },
+ *   ];
+ * </script>
+ * ```
+ */
+export declare class Canvas extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Array of shape objects to render on the canvas.
+     */
+    shapes: CanvasShape[];
+    /**
+     * Padding around the computed viewbox (in grid units).
+     */
+    padding: number;
+    /**
+     * Zoom multiplier for the canvas dimensions.
+     */
+    zoom: number;
+    /**
+     * Optional viewbox override string (e.g. "0 0 100 100").
+     */
+    viewbox?: string;
+    private unitSize;
+    private gap;
+    private static getNextPoint;
+    private static updateComputationArea;
+    private static getStrokeVariantClasses;
+    private computeShapes;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/src/canvas/index.d.ts

@@ -0,0 +1,2 @@
+export { Canvas } from './canvas.js';
+export type { CanvasShape } from './canvas.js';

package/dist/src/condition-builder/cb-compound-expression.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * @label CB Compound Expression
+ * @tag wc-cb-compound-expression
+ * @rawTag cb-compound-expression
+ * @summary A compound expression group in a condition builder that displays a field label, an optional condition operator divider, and slots for child expressions.
+ * @tags condition-builder
+ * @parentRawTag compound-builder
+ *
+ * @example
+ * ```html
+ * <wc-cb-compound-expression field-label="Age" condition-operator="or">
+ *   <wc-cb-expression>
+ *     <wc-input placeholder="Enter value"></wc-input>
+ *   </wc-cb-expression>
+ * </wc-cb-compound-expression>
+ * ```
+ */
+export declare class CbCompoundExpression extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The logical operator joining conditions in this group ('and' or 'or'). */
+    conditionOperator?: 'and' | 'or';
+    /** The field name for the compound expression. */
+    fieldName: string;
+    /** The display label for the field. */
+    fieldLabel: string;
+    updated(): void;
+    private __adjustSlotEndPadding;
+    private __renderOperatorDivider;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/condition-builder/cb-divider.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * @label CB Divider
+ * @tag wc-cb-divider
+ * @rawTag cb-divider
+ * @summary A divider line used within a condition builder to visually connect expressions with operator tags.
+ * @tags condition-builder
+ * @parentRawTag compound-builder
+ *
+ * @example
+ * ```html
+ * <wc-cb-divider>
+ *   <wc-tag color="green">and</wc-tag>
+ * </wc-cb-divider>
+ * ```
+ */
+export declare class CbDivider extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether to render the divider vertically instead of horizontally. */
+    vertical: boolean;
+    /** Whether to render a connecting line at the start. */
+    connectStart: boolean;
+    /** Whether to render a connecting line at the end. */
+    connectEnd: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/condition-builder/cb-expression.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * @label CB Expression
+ * @tag wc-cb-expression
+ * @rawTag cb-expression
+ * @summary An expression row within a condition builder, containing an operator select and a slot for value inputs.
+ * @tags condition-builder
+ * @parentRawTag compound-builder
+ *
+ * @example
+ * ```html
+ * <wc-cb-expression>
+ *   <wc-input placeholder="Enter value"></wc-input>
+ * </wc-cb-expression>
+ * ```
+ */
+export declare class CbExpression extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * The list of operator options to display in the operator select.
+     * Each item should have at least `label` and `value` properties.
+     */
+    operators: {
+        label: string;
+        value: string;
+        icon?: string;
+    }[];
+    /** The currently selected operator value. */
+    operatorValue: string;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/condition-builder/cb-predicate.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * @label CB Predicate
+ * @tag wc-cb-predicate
+ * @rawTag cb-predicate
+ * @summary A predicate container in a condition builder that can display conditions in horizontal or vertical layout with an optional logical operator divider.
+ * @tags condition-builder
+ * @parentRawTag compound-expression
+ *
+ * @example
+ * ```html
+ * <wc-cb-predicate condition-operator="and" vertical>
+ *   <wc-cb-compound-expression field-label="Age">
+ *     <wc-cb-expression></wc-cb-expression>
+ *   </wc-cb-compound-expression>
+ * </wc-cb-predicate>
+ * ```
+ */
+export declare class CbPredicate extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The logical operator shown between predicates ('and' or 'or'). */
+    conditionOperator?: 'and' | 'or';
+    /** Whether to render the predicate in vertical layout. */
+    vertical: boolean;
+    updated(): void;
+    private __adjustSlotEndPadding;
+    private __renderHorizontalOperator;
+    private __renderVerticalOperator;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/condition-builder/condition-builder.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * @label Condition Builder
+ * @tag wc-condition-builder
+ * @rawTag condition-builder
+ * @summary A condition builder component that allows users to construct complex filter conditions using a visual rule-based interface with predicates, compound expressions, and logical operators.
+ * @tags condition-builder
+ *
+ * @example
+ * ```html
+ * <wc-condition-builder>
+ *   <wc-cb-predicate condition-operator="or">
+ *     <wc-cb-predicate vertical condition-operator="and">
+ *       <wc-cb-compound-expression field-label="Age" condition-operator="or">
+ *         <wc-cb-expression>
+ *           <wc-input inline placeholder="Enter value"></wc-input>
+ *         </wc-cb-expression>
+ *       </wc-cb-compound-expression>
+ *     </wc-cb-predicate>
+ *   </wc-cb-predicate>
+ * </wc-condition-builder>
+ * ```
+ */
+export declare class ConditionBuilder extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/condition-builder/index.d.ts

@@ -0,0 +1,5 @@
+export { ConditionBuilder } from './condition-builder.js';
+export { CbPredicate } from './cb-predicate.js';
+export { CbCompoundExpression } from './cb-compound-expression.js';
+export { CbExpression } from './cb-expression.js';
+export { CbDivider } from './cb-divider.js';

package/dist/src/dropdown-button/dropdown-button.d.ts

@@ -0,0 +1,68 @@
+import { LitElement } from 'lit';
+/**
+ * @label Dropdown Button
+ * @tag wc-dropdown-button
+ * @rawTag dropdown-button
+ *
+ * @summary A button that opens a dropdown menu when clicked.
+ * @overview
+ * <p>The dropdown button combines a single button with a dropdown menu. Clicking the button toggles a menu of actions or options. It follows M3 Material Design, keeping a compact control while exposing related actions on demand.</p>
+ *
+ * @cssprop --dropdown-button-container-shape: Defines the border radius of the dropdown button container shape.
+ *
+ * @fires {CustomEvent} toggle-menu - Dispatched when the dropdown menu is opened or closed.
+ *
+ * @example
+ * ```html
+ * <wc-dropdown-button>
+ *   Actions
+ *   <wc-menu-item slot="menu">Edit</wc-menu-item>
+ *   <wc-menu-item slot="menu">Delete</wc-menu-item>
+ * </wc-dropdown-button>
+ * ```
+ * @tags controls
+ */
+export declare class DropdownButton extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Button size.
+     * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+     */
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * The visual style of the dropdown button.
+     *
+     * Possible variant values:
+     * `"filled"` is a filled button.
+     * `"outlined"` is an outlined button.
+     * `"text"` is a transparent button.
+     * `"tonal"` is a light color button.
+     * `"elevated"` is an elevated button.
+     */
+    variant: 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text';
+    /**
+     * Defines the primary color of the dropdown button.
+     */
+    color: 'primary' | 'secondary' | 'tertiary' | 'success' | 'danger' | 'warning' | 'surface' | 'on-surface';
+    /**
+     * Whether the dropdown button is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Menu placement relative to the button.
+     * Possible values are `"bottom-start"`, `"bottom-end"`, `"top-start"`, `"top-end"`. Defaults to `"bottom-start"`.
+     */
+    placement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    private _menuOpen;
+    private readonly _triggerButton;
+    private readonly _menu;
+    private _menuId;
+    focus(): void;
+    private _onButtonClick;
+    private _onMenuOpened;
+    private _onMenuClosed;
+    private _onKeyDown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/dropdown-button/index.d.ts

@@ -0,0 +1 @@
+export { DropdownButton } from './dropdown-button.js';

package/dist/src/flow-designer/commands.d.ts

@@ -0,0 +1,66 @@
+import type { Workflow, WorkflowNode, WorkflowCommand } from './types.js';
+/**
+ * Add Node Command
+ */
+export declare class AddNodeCommand implements WorkflowCommand {
+    private nodeToAdd;
+    private parentNodeId;
+    private connectionType;
+    private branchKey?;
+    description: string;
+    constructor(nodeToAdd: WorkflowNode, parentNodeId: string, connectionType?: 'child' | 'branch' | 'task', branchKey?: string | undefined);
+    execute(workflow: Workflow): Workflow;
+    undo(workflow: Workflow): Workflow;
+}
+/**
+ * Delete Node Command
+ */
+export declare class DeleteNodeCommand implements WorkflowCommand {
+    private nodeId;
+    description: string;
+    private deletedNode;
+    private parentReference;
+    constructor(nodeId: string, workflow?: Workflow);
+    private captureNodeContext;
+    private findParentReference;
+    execute(workflow: Workflow): Workflow;
+    undo(workflow: Workflow): Workflow;
+}
+/**
+ * Edit Node Command
+ */
+export declare class EditNodeCommand implements WorkflowCommand {
+    private nodeId;
+    private updates;
+    description: string;
+    private previousState;
+    constructor(nodeId: string, updates: Partial<WorkflowNode>, workflow?: Workflow);
+    execute(workflow: Workflow): Workflow;
+    undo(workflow: Workflow): Workflow;
+}
+/**
+ * Move Node Command - reorder in array or change parent
+ */
+export declare class MoveNodeCommand implements WorkflowCommand {
+    private nodeId;
+    private newParentId;
+    private newIndex;
+    private newConnectionType;
+    private newBranchKey?;
+    description: string;
+    private previousState;
+    constructor(nodeId: string, newParentId: string, newIndex: number, newConnectionType?: 'child' | 'branch' | 'task', newBranchKey?: string | undefined, workflow?: Workflow);
+    private captureCurrentPosition;
+    execute(workflow: Workflow): Workflow;
+    undo(workflow: Workflow): Workflow;
+}
+/**
+ * Batch Command - combine multiple commands into one undo/redo step
+ */
+export declare class BatchCommand implements WorkflowCommand {
+    private commands;
+    description: string;
+    constructor(commands: WorkflowCommand[], description?: string);
+    execute(workflow: Workflow): Workflow;
+    undo(workflow: Workflow): Workflow;
+}

package/dist/src/flow-designer/flow-designer-node.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import type { WorkflowNode } from './types.js';
+/**
+ * Individual node component for flow designer
+ * Renders a single workflow node with customizable slot templates
+ *
+ * @tag wc-flow-designer-node
+ * @rawTag flow-designer-node
+ * @wip true
+ */
+export declare class FlowDesignerNode extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * The workflow node to render
+     */
+    node: WorkflowNode;
+    /**
+     * Whether this node is currently selected
+     */
+    isSelected: boolean;
+    /**
+     * Whether this node is in edit mode
+     */
+    isEditing: boolean;
+    /**
+     * Whether this node is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether to show the delete button
+     */
+    showDelete: boolean;
+    private _handleClick;
+    private _handleDoubleClick;
+    private _handleDelete;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderDefaultHeader;
+    private _renderDefaultBody;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'wc-flow-designer-node': FlowDesignerNode;
+    }
+}

package/dist/src/flow-designer/flow-designer.d.ts

@@ -0,0 +1,133 @@
+import { LitElement } from 'lit';
+import '../toolbar/toolbar.js';
+import '../button/icon-button/icon-button.js';
+import '../icon/icon.js';
+import './flow-designer-node.js';
+import type { Workflow, WorkflowNode } from './types.js';
+/**
+ * @label Flow Designer
+ * @tag wc-flow-designer
+ * @rawTag flow-designer
+ * @summary Low-code business process flow designer with swimlane layout, undo/redo, and interactive editing.
+ *
+ * @cssprop --flow-designer-height - Height of the flow designer container. Defaults to 400px.
+ * @cssprop --flow-designer-border-color - Border color of the flow designer. Defaults to outline-variant.
+ * @cssprop --flow-designer-background - Background color of the designer. Defaults to surface.
+ * @cssprop --flow-designer-border-radius - Corner radius. Defaults to medium shape.
+ * @cssprop --flow-designer-action-bar-bg - Background color of the action bar. Defaults to surface-container.
+ *
+ * @example
+ * ```html
+ * <wc-flow-designer id="editor"></wc-flow-designer>
+ * <script>
+ *   const workflow = {
+ *     workflow_id: "demo",
+ *     nodes: {
+ *       id: "node_1",
+ *       type: "trigger",
+ *       label: "Start"
+ *     }
+ *   };
+ *   document.querySelector('#editor').workflow = workflow;
+ * </script>
+ * ```
+ */
+export declare class FlowDesigner extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * The workflow definition to display and edit
+     */
+    workflow: Workflow;
+    /**
+     * Whether the flow designer is in read-only mode
+     */
+    readonly: boolean;
+    /**
+     * Whether the flow designer is disabled
+     */
+    disabled: boolean;
+    /**
+     * Show validation errors/warnings
+     */
+    showValidation: boolean;
+    private _editor;
+    private _positionedNodes;
+    private _history;
+    private _historyIndex;
+    private scrollElm?;
+    private _isDragScrolling;
+    private _dragStartX;
+    private _dragStartY;
+    private _scrollStartX;
+    private _scrollStartY;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(): void;
+    /**
+     * Recalculate layout when workflow changes
+     */
+    private _recalculateLayout;
+    /**
+     * Add a new node
+     */
+    addNode(newNode: WorkflowNode, parentNodeId: string, connectionType?: 'child' | 'branch' | 'task', branchKey?: string): void;
+    /**
+     * Delete a node by ID
+     */
+    deleteNode(nodeId: string): void;
+    /**
+     * Edit a node
+     */
+    editNode(nodeId: string, updates: Partial<WorkflowNode>): void;
+    /**
+     * Move a node to a different parent/position
+     */
+    moveNode(nodeId: string, newParentId: string, newIndex: number, connectionType?: 'child' | 'branch' | 'task', branchKey?: string): void;
+    /**
+     * Execute a command and add to history
+     */
+    private _executeCommand;
+    /**
+     * Undo last operation
+     */
+    undo(): void;
+    /**
+     * Redo last undone operation
+     */
+    redo(): void;
+    /**
+     * Check if undo is available
+     */
+    canUndo(): boolean;
+    /**
+     * Check if redo is available
+     */
+    canRedo(): boolean;
+    /**
+     * Export current workflow as JSON
+     */
+    exportWorkflow(): string;
+    /**
+     * Validate workflow
+     */
+    validate(): void;
+    private _emitWorkflowChange;
+    private _handleKeyDown;
+    private _handleMouseUp;
+    private _handleCanvasMouseDown;
+    private _handleCanvasMouseMove;
+    private _handleNodeClick;
+    private _handleNodeDelete;
+    private _handleNodeEdit;
+    private _handleZoomIn;
+    private _handleZoomOut;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private _renderConnectors;
+    private _renderSwimlanes;
+    private _renderNodes;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'wc-flow-designer': FlowDesigner;
+    }
+}

package/dist/src/flow-designer/index.d.ts

@@ -0,0 +1,7 @@
+export { FlowDesigner } from './flow-designer.js';
+export { FlowDesignerNode } from './flow-designer-node.js';
+export type { Workflow, WorkflowNode, WorkflowCommand, PositionedNode, ValidationError, HistoryEntry, EditorState, NodeType, WorkflowChangeEvent, SwimlaneConfig, NodeTemplate, } from './types.js';
+export { SwimlaneLayout } from './layout.js';
+export { WorkflowValidator } from './validation.js';
+export { cloneWorkflow, cloneNode, findNodeById, removeNodeById, insertNodeIntoWorkflow, getAllNodes, getNodePath, isDescendant, replaceNode, } from './workflow-utils.js';
+export { AddNodeCommand, DeleteNodeCommand, EditNodeCommand, MoveNodeCommand, BatchCommand, } from './commands.js';

package/dist/src/flow-designer/layout.d.ts

@@ -0,0 +1,30 @@
+import type { WorkflowNode, PositionedNode, SwimlaneConfig } from './types.js';
+export declare class SwimlaneLayout {
+    /**
+     * Calculate layout positions for all nodes in a workflow
+     */
+    static calculateLayout(rootNode: WorkflowNode): PositionedNode[];
+    /**
+     * Traverse workflow tree and assign lane/depth to each node
+     */
+    private static _traverseAndAssignLanes;
+    /**
+     * Calculate SVG connector points between nodes
+     */
+    private static _calculateConnectors;
+    /**
+     * Get swimlane configurations for rendering
+     */
+    static getSwimlanes(positionedNodes: PositionedNode[]): SwimlaneConfig[];
+    /**
+     * Generate human-readable swimlane name
+     */
+    private static _getSwimlaneName;
+    /**
+     * Calculate canvas bounds for sizing
+     */
+    static getCanvasBounds(positionedNodes: PositionedNode[]): {
+        width: number;
+        height: number;
+    };
+}