@limetech/lime-crm-building-blocks 2.0.4 → 2.2.0

package/dist/types/components.d.ts

@@ -6,14 +6,15 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AlertType } from "./components/alert-dialog/alert-dialog.types";
-import { AggregateOperator, ContextMap, ContextScope, Expression, JsonValue, LimeFileUrlType, LimeType, LimeWebComponentContext, LimeWebComponentPlatform, NotExpression, Operator, PrimitiveMetadata, PropertyType, Rule, RuleRef } from "@limetech/lime-web-components";
+import { AggregateOperator, ComponentDescriptor, ContextMap, ContextScope, Expression, JsonValue, LimeFileUrlType, LimeType, LimeWebComponentContext, LimeWebComponentPlatform, NotExpression, Operator, PrimitiveMetadata, PropertyType, Rule, RuleRef } from "@limetech/lime-web-components";
 import { BrowserItem } from "./components/browser/browser-item.types";
-import { ActionBarItem, CustomElementDefinition, DateType, EditorUiType, FileInfo, FormInfo, Icon, IconName, Image, Languages, ListItem, ListSeparator, OpenDirection } from "@limetech/lime-elements";
+import { ActionBarItem, CustomElementDefinition, DateType, EditorUiType, FileInfo, FormInfo, Icon, IconName, Image, Languages, ListItem, ListSeparator, MenuItem, OpenDirection } from "@limetech/lime-elements";
 import { ChatIconList } from "./components/chat-list/chat-icon-list/chat-icon-list.types";
 import { ChatItem } from "./components/chat-list/chat-item/chat-item.types";
 import { ChatListItem } from "./components/chat-list/chat-list.types";
 import { ComponentPickerType } from "./components/component-command-picker/types";
 import { ComposerTrigger, FileInputConfig } from "./components/composer-toolbar/composer-toolbar.types";
+import { ConditionTreeAdapter, ConditionTreeCombinator } from "./components/condition-tree/condition-tree.types";
 import { DataCell } from "./components/data-cells/data-cells.types";
 import { DocumentChipFile } from "./components/document-chips/document-chips.types";
 import { DocumentItem } from "./components/document-picker/document-item/document-item.types";
@@ -33,17 +34,19 @@ import { LanguagePickerType } from "./components/locale-picker/language-picker.t
 import { NavigationButtonType } from "./components/navigation-button/navigation-button.types";
 import { NotificationItem } from "./components/notification-list/notification-item/notification-item.types";
 import { RuleArgFilterEditorValue } from "./components/rule-editor/rule-arg-filter-editor/rule-arg-filter-editor";
+import { RuleEditorMode } from "./components/rule-editor/rule-editor.types";
 import { TriggerMap } from "./components/text-editor/text-editor.types";
 import { ValueComparisonEditorValue } from "./components/rule-editor/value-comparison-editor/value-comparison-editor";
 export { AlertType } from "./components/alert-dialog/alert-dialog.types";
-export { AggregateOperator, ContextMap, ContextScope, Expression, JsonValue, LimeFileUrlType, LimeType, LimeWebComponentContext, LimeWebComponentPlatform, NotExpression, Operator, PrimitiveMetadata, PropertyType, Rule, RuleRef } from "@limetech/lime-web-components";
+export { AggregateOperator, ComponentDescriptor, ContextMap, ContextScope, Expression, JsonValue, LimeFileUrlType, LimeType, LimeWebComponentContext, LimeWebComponentPlatform, NotExpression, Operator, PrimitiveMetadata, PropertyType, Rule, RuleRef } from "@limetech/lime-web-components";
 export { BrowserItem } from "./components/browser/browser-item.types";
-export { ActionBarItem, CustomElementDefinition, DateType, EditorUiType, FileInfo, FormInfo, Icon, IconName, Image, Languages, ListItem, ListSeparator, OpenDirection } from "@limetech/lime-elements";
+export { ActionBarItem, CustomElementDefinition, DateType, EditorUiType, FileInfo, FormInfo, Icon, IconName, Image, Languages, ListItem, ListSeparator, MenuItem, OpenDirection } from "@limetech/lime-elements";
 export { ChatIconList } from "./components/chat-list/chat-icon-list/chat-icon-list.types";
 export { ChatItem } from "./components/chat-list/chat-item/chat-item.types";
 export { ChatListItem } from "./components/chat-list/chat-list.types";
 export { ComponentPickerType } from "./components/component-command-picker/types";
 export { ComposerTrigger, FileInputConfig } from "./components/composer-toolbar/composer-toolbar.types";
+export { ConditionTreeAdapter, ConditionTreeCombinator } from "./components/condition-tree/condition-tree.types";
 export { DataCell } from "./components/data-cells/data-cells.types";
 export { DocumentChipFile } from "./components/document-chips/document-chips.types";
 export { DocumentItem } from "./components/document-picker/document-item/document-item.types";
@@ -63,6 +66,7 @@ export { LanguagePickerType } from "./components/locale-picker/language-picker.t
 export { NavigationButtonType } from "./components/navigation-button/navigation-button.types";
 export { NotificationItem } from "./components/notification-list/notification-item/notification-item.types";
 export { RuleArgFilterEditorValue } from "./components/rule-editor/rule-arg-filter-editor/rule-arg-filter-editor";
+export { RuleEditorMode } from "./components/rule-editor/rule-editor.types";
 export { TriggerMap } from "./components/text-editor/text-editor.types";
 export { ValueComparisonEditorValue } from "./components/rule-editor/value-comparison-editor/value-comparison-editor";
 export namespace Components {
@@ -503,6 +507,112 @@ export namespace Components {
          */
         "textSnippets": boolean;
     }
+    /**
+     * The shared skeleton for editing a tree of conditions: nested groups joined by
+     * "All of the following" or "Any of the following", or the negations of those
+     * two, each holding conditions shown as chips, with the buttons that add,
+     * remove and regroup them.
+     * This component is deliberately ignorant of what a condition *is*.
+     * A condition is visualized as a chip, plus the tag name of an editor to open.
+     * So the same skeleton serves a condition that tests a property ("Deal value is
+     * greater than 100 000") and one that is opaque ("User is a member of a group")
+     * without either model leaking into it.
+     * It holds no tree of its own either. The consumer passes in its own tree, and
+     * an adapter that reads one node and rebuilds one group. Every structural edit
+     * — add, delete, regroup, rejoin, negate — is applied here and handed back as a
+     * tree of the same kind, so no consumer has to write that code twice.
+     * @exampleComponent limebb-example-condition-tree-basic
+     * @exampleComponent limebb-example-condition-tree-combinators
+     * @exampleComponent limebb-example-condition-tree-editors
+     * @exampleComponent limebb-example-condition-tree-palette
+     * @beta 
+     */
+    interface LimebbConditionTree {
+        /**
+          * How to read and rebuild `value`. Build it once and hold on to it: one built inside a consumer's `render()` is a new object every time, which makes this component re-render for no reason.  A Stencil element cannot be generic, so this is typed loosely here. Declare the adapter as `ConditionTreeAdapter<YourNode>` where you write it, and the compiler checks it against your own model.
+         */
+        "adapter": ConditionTreeAdapter<any>;
+        /**
+          * The kinds of condition a user can add, offered as a menu when the add button is pressed. The chosen item is passed to `adapter.createLeaf`.  Leave it unset when every condition in the tree is of the same kind: a blank one can simply be inserted, and its editor settles the rest, so pressing the button is the whole interaction. Set it when conditions come in kinds that have nothing in common — "the deal is worth more than 100 000", "the user belongs to a group", "it is the first day of the month" — where nothing can be inserted until the user says which.  The menu has to be rendered here rather than by the consumer, because the button it hangs from lives inside this component.
+         */
+        "addOptions"?: Array<MenuItem | ListSeparator>;
+        /**
+          * Which combinators to offer in the group dropdowns, in the order given.  All four are offered by default. "Not all of the following" and "None of the following" are harder to reason about than the two they negate, so a consumer whose users would be better served without them passes `['all', 'any']`. A group that already uses a combinator left off this list still shows it, rather than misrepresenting itself as using one of the offered ones.
+          * @default [         ...CONDITION_TREE_COMBINATORS,     ]
+         */
+        "combinators": ConditionTreeCombinator[];
+        /**
+          * Component context, forwarded to each condition's editor.
+         */
+        "context": LimeWebComponentContext;
+        /**
+          * Set to `true` when the tree *is* the viewer's to change, but not at this moment: every control stays where it is, dimmed and inert. Use it for a state that will pass — a form mid-save, or a tree behind an "Apply a filter" switch that is currently off.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Platform service provider
+         */
+        "platform": LimeWebComponentPlatform;
+        /**
+          * Set to `true` when the tree is not the viewer's to change: the add, delete and negate controls are not rendered at all, leaving the conditions to be read. Use it where the tree is being shown rather than edited — a saved filter summarized on a card, or a rule the viewer has no rights over.
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * The consumer's own tree, rendered as-is — the root node, in whatever shape `adapter` reads. Leave it unset for a tree with nothing in it yet, which draws an empty group asking for its first condition.
+         */
+        "value"?: any;
+    }
+    /**
+     * The body of a condition's editor popover: the consumer's editor, and — for a
+     * condition that cannot express its own negation — a switch that negates it.
+     * It is an element of its own rather than markup inside the tree because
+     * `limel-popover` portals its content out of the tree's shadow DOM, leaving it
+     * behind. Carrying its own shadow root means its styles travel with it.
+     * @private 
+     */
+    interface LimebbConditionTreeEditor {
+        /**
+          * Bridges the tree's context across the `limel-popover` portal.
+         */
+        "context": LimeWebComponentContext;
+        /**
+          * @inheritdoc 
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The editor to mount, as given on the condition.
+         */
+        "editor"?: ComponentDescriptor;
+        /**
+          * Title of the condition, shown above the editor when there is a header to show at all.
+         */
+        "heading"?: string;
+        /**
+          * Whether the condition is negated. `undefined` means the condition expresses its own polarity and no switch is offered.
+         */
+        "negated"?: boolean;
+        /**
+          * Whether the popover holding this element is open.  The element itself stays in place while closed, because `limel-popover` moves its content into the popover surface once and for all when that surface first loads — anything not there by then is never moved. Drawing nothing until asked is what keeps the consumer's editor from being built for every condition in the tree.
+          * @default false
+         */
+        "open": boolean;
+        /**
+          * Platform service provider
+         */
+        "platform": LimeWebComponentPlatform;
+        /**
+          * @inheritdoc 
+          * @default false
+         */
+        "readonly": boolean;
+        /**
+          * The condition being edited, in the consumer's own model. Handed to the mounted editor as `value`.
+         */
+        "value"?: any;
+    }
     /**
      * All currencies have a ISO code, an international standard with three-letters
      * which is used by many systems such as ERPs.
@@ -2475,7 +2585,16 @@ export namespace Components {
      * that provides it. An explicit Prop with a `limetype` wins, so an empty
      * default (e.g. an admin form's "no selection" context) doesn't shadow a
      * DOM-provided one.
+     * Pass `modes` to offer the author a few pre-defined answers above the
+     * tree — "Never", "Always", "Conditionally" — so an
+     * unconditional state is one click instead of an empty tree they have
+     * to reason about. A mode is a way of writing a rule, not a second
+     * output: all of them end up in `value`, and `ruleForMode` builds the
+     * same rule a click does.
      * @exampleComponent limebb-example-rule-editor
+     * @exampleComponent limebb-example-rule-editor-modes
+     * @exampleComponent limebb-example-rule-editor-invalid
+     * @exampleComponent limebb-example-rule-editor-help
      * @alpha 
      * @private 
      */
@@ -2493,16 +2612,28 @@ export namespace Components {
           * @inheritdoc
          */
         "disabled": boolean;
+        /**
+          * Contextual help for the setting as a whole, rendered as a `?` beside the label that opens a popover on click. Markdown.  For what a rule *is* rather than what this one is for — the helper text is the shorter, always-legible answer, and the two are meant to be used together rather than instead of each other.
+         */
+        "help"?: string;
         /**
           * The helper text for the current property
           * @inheritdoc
          */
         "helperText": string;
+        /**
+          * Set to `true` to mark the rule as invalid, which reddens the outline and the helper text.  This is the caller's verdict on the rule as a whole — typically a form reporting that the field is required and empty. It is separate from the diagnostics the editor finds itself, which mark the individual nodes they belong to and show regardless of this prop.
+         */
+        "invalid": boolean;
         /**
           * The label of the current property
           * @inheritdoc
          */
         "label": string;
+        /**
+          * The ways of writing a rule offered above the tree, in the order given. Leave it unset to offer none, and render the tree alone.  Which modes make sense is the caller's to decide, because it differs per setting: a "when to show" toggle offers `always` and `conditional`, while a "when to make required" one also offers `never`. `conditional` is not forced into the list — a caller passing only the unconditional modes usually gets a plain toggle with no tree, which is a legitimate thing to want.  "Usually", because the offered modes do not constrain `value`. A stored condition tree is still drawn, and the control then shows no mode as selected, because none of the offered ones describes what is stored. Hiding a rule the author cannot otherwise see would be worse than an unselected control.
+         */
+        "modes"?: RuleEditorMode[];
         /**
           * Reference to the platform service container.  Use this to access all platform services like repositories, HTTP client, command bus, navigator, and more. The platform instance is shared across all components in the same application context.
          */
@@ -2910,6 +3041,14 @@ export interface LimebbComposerToolbarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimebbComposerToolbarElement;
 }
+export interface LimebbConditionTreeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimebbConditionTreeElement;
+}
+export interface LimebbConditionTreeEditorCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLimebbConditionTreeEditorElement;
+}
 export interface LimebbCurrencyPickerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimebbCurrencyPickerElement;
@@ -3374,6 +3513,69 @@ declare global {
         prototype: HTMLLimebbComposerToolbarElement;
         new (): HTMLLimebbComposerToolbarElement;
     };
+    interface HTMLLimebbConditionTreeElementEventMap {
+        "change": any;
+    }
+    /**
+     * The shared skeleton for editing a tree of conditions: nested groups joined by
+     * "All of the following" or "Any of the following", or the negations of those
+     * two, each holding conditions shown as chips, with the buttons that add,
+     * remove and regroup them.
+     * This component is deliberately ignorant of what a condition *is*.
+     * A condition is visualized as a chip, plus the tag name of an editor to open.
+     * So the same skeleton serves a condition that tests a property ("Deal value is
+     * greater than 100 000") and one that is opaque ("User is a member of a group")
+     * without either model leaking into it.
+     * It holds no tree of its own either. The consumer passes in its own tree, and
+     * an adapter that reads one node and rebuilds one group. Every structural edit
+     * — add, delete, regroup, rejoin, negate — is applied here and handed back as a
+     * tree of the same kind, so no consumer has to write that code twice.
+     * @exampleComponent limebb-example-condition-tree-basic
+     * @exampleComponent limebb-example-condition-tree-combinators
+     * @exampleComponent limebb-example-condition-tree-editors
+     * @exampleComponent limebb-example-condition-tree-palette
+     * @beta 
+     */
+    interface HTMLLimebbConditionTreeElement extends Components.LimebbConditionTree, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLimebbConditionTreeElementEventMap>(type: K, listener: (this: HTMLLimebbConditionTreeElement, ev: LimebbConditionTreeCustomEvent<HTMLLimebbConditionTreeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLLimebbConditionTreeElementEventMap>(type: K, listener: (this: HTMLLimebbConditionTreeElement, ev: LimebbConditionTreeCustomEvent<HTMLLimebbConditionTreeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLLimebbConditionTreeElement: {
+        prototype: HTMLLimebbConditionTreeElement;
+        new (): HTMLLimebbConditionTreeElement;
+    };
+    interface HTMLLimebbConditionTreeEditorElementEventMap {
+        "negateChange": boolean;
+        "conditionChange": any;
+    }
+    /**
+     * The body of a condition's editor popover: the consumer's editor, and — for a
+     * condition that cannot express its own negation — a switch that negates it.
+     * It is an element of its own rather than markup inside the tree because
+     * `limel-popover` portals its content out of the tree's shadow DOM, leaving it
+     * behind. Carrying its own shadow root means its styles travel with it.
+     * @private 
+     */
+    interface HTMLLimebbConditionTreeEditorElement extends Components.LimebbConditionTreeEditor, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLimebbConditionTreeEditorElementEventMap>(type: K, listener: (this: HTMLLimebbConditionTreeEditorElement, ev: LimebbConditionTreeEditorCustomEvent<HTMLLimebbConditionTreeEditorElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLLimebbConditionTreeEditorElementEventMap>(type: K, listener: (this: HTMLLimebbConditionTreeEditorElement, ev: LimebbConditionTreeEditorCustomEvent<HTMLLimebbConditionTreeEditorElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLLimebbConditionTreeEditorElement: {
+        prototype: HTMLLimebbConditionTreeEditorElement;
+        new (): HTMLLimebbConditionTreeEditorElement;
+    };
     interface HTMLLimebbCurrencyPickerElementEventMap {
         "change": string;
     }
@@ -4762,7 +4964,16 @@ declare global {
      * that provides it. An explicit Prop with a `limetype` wins, so an empty
      * default (e.g. an admin form's "no selection" context) doesn't shadow a
      * DOM-provided one.
+     * Pass `modes` to offer the author a few pre-defined answers above the
+     * tree — "Never", "Always", "Conditionally" — so an
+     * unconditional state is one click instead of an empty tree they have
+     * to reason about. A mode is a way of writing a rule, not a second
+     * output: all of them end up in `value`, and `ruleForMode` builds the
+     * same rule a click does.
      * @exampleComponent limebb-example-rule-editor
+     * @exampleComponent limebb-example-rule-editor-modes
+     * @exampleComponent limebb-example-rule-editor-invalid
+     * @exampleComponent limebb-example-rule-editor-help
      * @alpha 
      * @private 
      */
@@ -5004,6 +5215,8 @@ declare global {
         "limebb-component-config": HTMLLimebbComponentConfigElement;
         "limebb-component-picker": HTMLLimebbComponentPickerElement;
         "limebb-composer-toolbar": HTMLLimebbComposerToolbarElement;
+        "limebb-condition-tree": HTMLLimebbConditionTreeElement;
+        "limebb-condition-tree-editor": HTMLLimebbConditionTreeEditorElement;
         "limebb-currency-picker": HTMLLimebbCurrencyPickerElement;
         "limebb-dashboard-widget": HTMLLimebbDashboardWidgetElement;
         "limebb-data-cells": HTMLLimebbDataCellsElement;
@@ -5540,6 +5753,124 @@ declare namespace LocalJSX {
          */
         "textSnippets"?: boolean;
     }
+    /**
+     * The shared skeleton for editing a tree of conditions: nested groups joined by
+     * "All of the following" or "Any of the following", or the negations of those
+     * two, each holding conditions shown as chips, with the buttons that add,
+     * remove and regroup them.
+     * This component is deliberately ignorant of what a condition *is*.
+     * A condition is visualized as a chip, plus the tag name of an editor to open.
+     * So the same skeleton serves a condition that tests a property ("Deal value is
+     * greater than 100 000") and one that is opaque ("User is a member of a group")
+     * without either model leaking into it.
+     * It holds no tree of its own either. The consumer passes in its own tree, and
+     * an adapter that reads one node and rebuilds one group. Every structural edit
+     * — add, delete, regroup, rejoin, negate — is applied here and handed back as a
+     * tree of the same kind, so no consumer has to write that code twice.
+     * @exampleComponent limebb-example-condition-tree-basic
+     * @exampleComponent limebb-example-condition-tree-combinators
+     * @exampleComponent limebb-example-condition-tree-editors
+     * @exampleComponent limebb-example-condition-tree-palette
+     * @beta 
+     */
+    interface LimebbConditionTree {
+        /**
+          * How to read and rebuild `value`. Build it once and hold on to it: one built inside a consumer's `render()` is a new object every time, which makes this component re-render for no reason.  A Stencil element cannot be generic, so this is typed loosely here. Declare the adapter as `ConditionTreeAdapter<YourNode>` where you write it, and the compiler checks it against your own model.
+         */
+        "adapter"?: ConditionTreeAdapter<any>;
+        /**
+          * The kinds of condition a user can add, offered as a menu when the add button is pressed. The chosen item is passed to `adapter.createLeaf`.  Leave it unset when every condition in the tree is of the same kind: a blank one can simply be inserted, and its editor settles the rest, so pressing the button is the whole interaction. Set it when conditions come in kinds that have nothing in common — "the deal is worth more than 100 000", "the user belongs to a group", "it is the first day of the month" — where nothing can be inserted until the user says which.  The menu has to be rendered here rather than by the consumer, because the button it hangs from lives inside this component.
+         */
+        "addOptions"?: Array<MenuItem | ListSeparator>;
+        /**
+          * Which combinators to offer in the group dropdowns, in the order given.  All four are offered by default. "Not all of the following" and "None of the following" are harder to reason about than the two they negate, so a consumer whose users would be better served without them passes `['all', 'any']`. A group that already uses a combinator left off this list still shows it, rather than misrepresenting itself as using one of the offered ones.
+          * @default [         ...CONDITION_TREE_COMBINATORS,     ]
+         */
+        "combinators"?: ConditionTreeCombinator[];
+        /**
+          * Component context, forwarded to each condition's editor.
+         */
+        "context"?: LimeWebComponentContext;
+        /**
+          * Set to `true` when the tree *is* the viewer's to change, but not at this moment: every control stays where it is, dimmed and inert. Use it for a state that will pass — a form mid-save, or a tree behind an "Apply a filter" switch that is currently off.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted with the whole tree, of the consumer's own kind, whenever the user changes it. `null` means the last condition went and there is nothing left — an event carries no detail otherwise.
+         */
+        "onChange"?: (event: LimebbConditionTreeCustomEvent<any>) => void;
+        /**
+          * Platform service provider
+         */
+        "platform"?: LimeWebComponentPlatform;
+        /**
+          * Set to `true` when the tree is not the viewer's to change: the add, delete and negate controls are not rendered at all, leaving the conditions to be read. Use it where the tree is being shown rather than edited — a saved filter summarized on a card, or a rule the viewer has no rights over.
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * The consumer's own tree, rendered as-is — the root node, in whatever shape `adapter` reads. Leave it unset for a tree with nothing in it yet, which draws an empty group asking for its first condition.
+         */
+        "value"?: any;
+    }
+    /**
+     * The body of a condition's editor popover: the consumer's editor, and — for a
+     * condition that cannot express its own negation — a switch that negates it.
+     * It is an element of its own rather than markup inside the tree because
+     * `limel-popover` portals its content out of the tree's shadow DOM, leaving it
+     * behind. Carrying its own shadow root means its styles travel with it.
+     * @private 
+     */
+    interface LimebbConditionTreeEditor {
+        /**
+          * Bridges the tree's context across the `limel-popover` portal.
+         */
+        "context"?: LimeWebComponentContext;
+        /**
+          * @inheritdoc 
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The editor to mount, as given on the condition.
+         */
+        "editor"?: ComponentDescriptor;
+        /**
+          * Title of the condition, shown above the editor when there is a header to show at all.
+         */
+        "heading"?: string;
+        /**
+          * Whether the condition is negated. `undefined` means the condition expresses its own polarity and no switch is offered.
+         */
+        "negated"?: boolean;
+        /**
+          * Emitted with the replacement condition when the mounted editor reports one.  `limel-popover` portals this element out of the tree's shadow DOM, so an event from the editor never reaches the tree on its own. Catching it here and emitting it again is what carries it back across.
+         */
+        "onConditionChange"?: (event: LimebbConditionTreeEditorCustomEvent<any>) => void;
+        /**
+          * Emitted when the user toggles the negation switch.
+         */
+        "onNegateChange"?: (event: LimebbConditionTreeEditorCustomEvent<boolean>) => void;
+        /**
+          * Whether the popover holding this element is open.  The element itself stays in place while closed, because `limel-popover` moves its content into the popover surface once and for all when that surface first loads — anything not there by then is never moved. Drawing nothing until asked is what keeps the consumer's editor from being built for every condition in the tree.
+          * @default false
+         */
+        "open"?: boolean;
+        /**
+          * Platform service provider
+         */
+        "platform"?: LimeWebComponentPlatform;
+        /**
+          * @inheritdoc 
+          * @default false
+         */
+        "readonly"?: boolean;
+        /**
+          * The condition being edited, in the consumer's own model. Handed to the mounted editor as `value`.
+         */
+        "value"?: any;
+    }
     /**
      * All currencies have a ISO code, an international standard with three-letters
      * which is used by many systems such as ERPs.
@@ -7683,7 +8014,16 @@ declare namespace LocalJSX {
      * that provides it. An explicit Prop with a `limetype` wins, so an empty
      * default (e.g. an admin form's "no selection" context) doesn't shadow a
      * DOM-provided one.
+     * Pass `modes` to offer the author a few pre-defined answers above the
+     * tree — "Never", "Always", "Conditionally" — so an
+     * unconditional state is one click instead of an empty tree they have
+     * to reason about. A mode is a way of writing a rule, not a second
+     * output: all of them end up in `value`, and `ruleForMode` builds the
+     * same rule a click does.
      * @exampleComponent limebb-example-rule-editor
+     * @exampleComponent limebb-example-rule-editor-modes
+     * @exampleComponent limebb-example-rule-editor-invalid
+     * @exampleComponent limebb-example-rule-editor-help
      * @alpha 
      * @private 
      */
@@ -7701,16 +8041,28 @@ declare namespace LocalJSX {
           * @inheritdoc
          */
         "disabled"?: boolean;
+        /**
+          * Contextual help for the setting as a whole, rendered as a `?` beside the label that opens a popover on click. Markdown.  For what a rule *is* rather than what this one is for — the helper text is the shorter, always-legible answer, and the two are meant to be used together rather than instead of each other.
+         */
+        "help"?: string;
         /**
           * The helper text for the current property
           * @inheritdoc
          */
         "helperText"?: string;
+        /**
+          * Set to `true` to mark the rule as invalid, which reddens the outline and the helper text.  This is the caller's verdict on the rule as a whole — typically a form reporting that the field is required and empty. It is separate from the diagnostics the editor finds itself, which mark the individual nodes they belong to and show regardless of this prop.
+         */
+        "invalid"?: boolean;
         /**
           * The label of the current property
           * @inheritdoc
          */
         "label"?: string;
+        /**
+          * The ways of writing a rule offered above the tree, in the order given. Leave it unset to offer none, and render the tree alone.  Which modes make sense is the caller's to decide, because it differs per setting: a "when to show" toggle offers `always` and `conditional`, while a "when to make required" one also offers `never`. `conditional` is not forced into the list — a caller passing only the unconditional modes usually gets a plain toggle with no tree, which is a legitimate thing to want.  "Usually", because the offered modes do not constrain `value`. A stored condition tree is still drawn, and the control then shows no mode as selected, because none of the offered ones describes what is stored. Hiding a rule the author cannot otherwise see would be worse than an unselected control.
+         */
+        "modes"?: RuleEditorMode[];
         /**
           * Emitted when the rule tree is mutated. Detail is the new rule, or `undefined` when the user has cleared the editor to an empty root group — callers can persist `undefined` as "no rule" without having to inspect the rule shape themselves.
          */
@@ -8175,6 +8527,19 @@ declare namespace LocalJSX {
         "internalLinks": boolean;
         "richText": boolean;
     }
+    interface LimebbConditionTreeAttributes {
+        "value": string;
+        "readonly": boolean;
+        "disabled": boolean;
+    }
+    interface LimebbConditionTreeEditorAttributes {
+        "open": boolean;
+        "value": string;
+        "heading": string;
+        "negated": boolean;
+        "readonly": boolean;
+        "disabled": boolean;
+    }
     interface LimebbCurrencyPickerAttributes {
         "label": string;
         "helperText": string;
@@ -8440,8 +8805,10 @@ declare namespace LocalJSX {
         "required": boolean;
         "readonly": boolean;
         "disabled": boolean;
+        "invalid": boolean;
         "label": string;
         "helperText": string;
+        "help": string;
     }
     interface LimebbSummaryPopoverAttributes {
         "triggerDelay": number;
@@ -8497,6 +8864,8 @@ declare namespace LocalJSX {
         "limebb-component-config": Omit<LimebbComponentConfig, keyof LimebbComponentConfigAttributes> & { [K in keyof LimebbComponentConfig & keyof LimebbComponentConfigAttributes]?: LimebbComponentConfig[K] } & { [K in keyof LimebbComponentConfig & keyof LimebbComponentConfigAttributes as `attr:${K}`]?: LimebbComponentConfigAttributes[K] } & { [K in keyof LimebbComponentConfig & keyof LimebbComponentConfigAttributes as `prop:${K}`]?: LimebbComponentConfig[K] };
         "limebb-component-picker": Omit<LimebbComponentPicker, keyof LimebbComponentPickerAttributes> & { [K in keyof LimebbComponentPicker & keyof LimebbComponentPickerAttributes]?: LimebbComponentPicker[K] } & { [K in keyof LimebbComponentPicker & keyof LimebbComponentPickerAttributes as `attr:${K}`]?: LimebbComponentPickerAttributes[K] } & { [K in keyof LimebbComponentPicker & keyof LimebbComponentPickerAttributes as `prop:${K}`]?: LimebbComponentPicker[K] };
         "limebb-composer-toolbar": Omit<LimebbComposerToolbar, keyof LimebbComposerToolbarAttributes> & { [K in keyof LimebbComposerToolbar & keyof LimebbComposerToolbarAttributes]?: LimebbComposerToolbar[K] } & { [K in keyof LimebbComposerToolbar & keyof LimebbComposerToolbarAttributes as `attr:${K}`]?: LimebbComposerToolbarAttributes[K] } & { [K in keyof LimebbComposerToolbar & keyof LimebbComposerToolbarAttributes as `prop:${K}`]?: LimebbComposerToolbar[K] };
+        "limebb-condition-tree": Omit<LimebbConditionTree, keyof LimebbConditionTreeAttributes> & { [K in keyof LimebbConditionTree & keyof LimebbConditionTreeAttributes]?: LimebbConditionTree[K] } & { [K in keyof LimebbConditionTree & keyof LimebbConditionTreeAttributes as `attr:${K}`]?: LimebbConditionTreeAttributes[K] } & { [K in keyof LimebbConditionTree & keyof LimebbConditionTreeAttributes as `prop:${K}`]?: LimebbConditionTree[K] };
+        "limebb-condition-tree-editor": Omit<LimebbConditionTreeEditor, keyof LimebbConditionTreeEditorAttributes> & { [K in keyof LimebbConditionTreeEditor & keyof LimebbConditionTreeEditorAttributes]?: LimebbConditionTreeEditor[K] } & { [K in keyof LimebbConditionTreeEditor & keyof LimebbConditionTreeEditorAttributes as `attr:${K}`]?: LimebbConditionTreeEditorAttributes[K] } & { [K in keyof LimebbConditionTreeEditor & keyof LimebbConditionTreeEditorAttributes as `prop:${K}`]?: LimebbConditionTreeEditor[K] };
         "limebb-currency-picker": Omit<LimebbCurrencyPicker, keyof LimebbCurrencyPickerAttributes> & { [K in keyof LimebbCurrencyPicker & keyof LimebbCurrencyPickerAttributes]?: LimebbCurrencyPicker[K] } & { [K in keyof LimebbCurrencyPicker & keyof LimebbCurrencyPickerAttributes as `attr:${K}`]?: LimebbCurrencyPickerAttributes[K] } & { [K in keyof LimebbCurrencyPicker & keyof LimebbCurrencyPickerAttributes as `prop:${K}`]?: LimebbCurrencyPicker[K] };
         "limebb-dashboard-widget": Omit<LimebbDashboardWidget, keyof LimebbDashboardWidgetAttributes> & { [K in keyof LimebbDashboardWidget & keyof LimebbDashboardWidgetAttributes]?: LimebbDashboardWidget[K] } & { [K in keyof LimebbDashboardWidget & keyof LimebbDashboardWidgetAttributes as `attr:${K}`]?: LimebbDashboardWidgetAttributes[K] } & { [K in keyof LimebbDashboardWidget & keyof LimebbDashboardWidgetAttributes as `prop:${K}`]?: LimebbDashboardWidget[K] };
         "limebb-data-cells": Omit<LimebbDataCells, keyof LimebbDataCellsAttributes> & { [K in keyof LimebbDataCells & keyof LimebbDataCellsAttributes]?: LimebbDataCells[K] } & { [K in keyof LimebbDataCells & keyof LimebbDataCellsAttributes as `attr:${K}`]?: LimebbDataCellsAttributes[K] } & { [K in keyof LimebbDataCells & keyof LimebbDataCellsAttributes as `prop:${K}`]?: LimebbDataCells[K] };
@@ -8730,6 +9099,36 @@ declare module "@stencil/core" {
              * @beta 
              */
             "limebb-composer-toolbar": LocalJSX.IntrinsicElements["limebb-composer-toolbar"] & JSXBase.HTMLAttributes<HTMLLimebbComposerToolbarElement>;
+            /**
+             * The shared skeleton for editing a tree of conditions: nested groups joined by
+             * "All of the following" or "Any of the following", or the negations of those
+             * two, each holding conditions shown as chips, with the buttons that add,
+             * remove and regroup them.
+             * This component is deliberately ignorant of what a condition *is*.
+             * A condition is visualized as a chip, plus the tag name of an editor to open.
+             * So the same skeleton serves a condition that tests a property ("Deal value is
+             * greater than 100 000") and one that is opaque ("User is a member of a group")
+             * without either model leaking into it.
+             * It holds no tree of its own either. The consumer passes in its own tree, and
+             * an adapter that reads one node and rebuilds one group. Every structural edit
+             * — add, delete, regroup, rejoin, negate — is applied here and handed back as a
+             * tree of the same kind, so no consumer has to write that code twice.
+             * @exampleComponent limebb-example-condition-tree-basic
+             * @exampleComponent limebb-example-condition-tree-combinators
+             * @exampleComponent limebb-example-condition-tree-editors
+             * @exampleComponent limebb-example-condition-tree-palette
+             * @beta 
+             */
+            "limebb-condition-tree": LocalJSX.IntrinsicElements["limebb-condition-tree"] & JSXBase.HTMLAttributes<HTMLLimebbConditionTreeElement>;
+            /**
+             * The body of a condition's editor popover: the consumer's editor, and — for a
+             * condition that cannot express its own negation — a switch that negates it.
+             * It is an element of its own rather than markup inside the tree because
+             * `limel-popover` portals its content out of the tree's shadow DOM, leaving it
+             * behind. Carrying its own shadow root means its styles travel with it.
+             * @private 
+             */
+            "limebb-condition-tree-editor": LocalJSX.IntrinsicElements["limebb-condition-tree-editor"] & JSXBase.HTMLAttributes<HTMLLimebbConditionTreeEditorElement>;
             /**
              * All currencies have a ISO code, an international standard with three-letters
              * which is used by many systems such as ERPs.
@@ -9400,7 +9799,16 @@ declare module "@stencil/core" {
              * that provides it. An explicit Prop with a `limetype` wins, so an empty
              * default (e.g. an admin form's "no selection" context) doesn't shadow a
              * DOM-provided one.
+             * Pass `modes` to offer the author a few pre-defined answers above the
+             * tree — "Never", "Always", "Conditionally" — so an
+             * unconditional state is one click instead of an empty tree they have
+             * to reason about. A mode is a way of writing a rule, not a second
+             * output: all of them end up in `value`, and `ruleForMode` builds the
+             * same rule a click does.
              * @exampleComponent limebb-example-rule-editor
+             * @exampleComponent limebb-example-rule-editor-modes
+             * @exampleComponent limebb-example-rule-editor-invalid
+             * @exampleComponent limebb-example-rule-editor-help
              * @alpha 
              * @private 
              */

package/dist/types/index.d.ts

@@ -5,5 +5,7 @@ export * from './util/color-palettes';
 export * from './components/filter-chip/filter-chip.types';
 export * from './components/filter-chip/filter-condition-icons';
 export * from './components/filter-chip/filter-operators';
+export * from './components/rule-editor/rule-editor.types';
+export * from './components/rule-editor/rule-editor-modes';
 import '@lundalogik/lime-icons8';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/interface.d.ts

@@ -16,3 +16,5 @@ export {
 } from './components/text-editor/uploader/building-blocks-uploader';
 export * from './components/document-chips/document-chips.types';
 export * from './components/filter-chip/filter-chip.types';
+export * from './components/condition-tree/condition-tree.types';
+export * from './components/rule-editor/rule-editor.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-crm-building-blocks",
-  "version": "2.0.4",
+  "version": "2.2.0",
   "description": "A home for shared components meant for use with Lime CRM",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -37,7 +37,7 @@
     "@limetech/lime-elements": "^39.45.3",
     "@limetech/lime-web-components": "^7.4.0",
     "@lundalogik/lime-icons8": "^2.41.0",
-    "@lundalogik/limeclient.js": "^1.114.1",
+    "@lundalogik/limeclient.js": "^1.115.0",
     "@stencil/core": "^4.44.2",
     "@stencil/sass": "^3.3.3",
     "@stencil/vitest": "^1.14.0",
@@ -50,7 +50,7 @@
     "eslint": "^10.9.1",
     "fs": "^0.0.1-security",
     "globals": "^17.11.0",
-    "happy-dom": "^20.11.15",
+    "happy-dom": "^20.12.0",
     "kompendium": "npm:@limetech/kompendium@^1.3.0",
     "lodash-es": "^4.18.1",
     "prettier": "^3.9.6",

package/dist/lime-crm-building-blocks/p-1e83a491.entry.js

@@ -1 +0,0 @@
-import{r as e,c as t,h as o}from"./p-COtSgrC5.js";import{k as r,n as i}from"./p-Cj_3f9vm.js";import{L as s}from"./p-DVypQWZ4.js";const a=class{constructor(o){e(this,o),this.negate=t(this,"negate"),this.updateArgs=t(this,"updateArgs"),this.deleteChip=t(this,"deleteChip"),this.isNegated=!1,this.readonly=!1,this.disabled=!1,this.isMutable=!0,this.focusOnOpen=!1,this.handleNegateChange=e=>{e.stopPropagation(),this.negate.emit(e.detail)},this.handleArgsChange=e=>{e.stopPropagation(),this.updateArgs.emit(e.detail)},this.handleDelete=()=>{this.deleteChip.emit()}}render(){return o("div",{key:"8bad60ba81cd77526779921e975f9d0f4d8bb0d7",class:"popover"},this.renderHeader(),this.renderBody())}renderHeader(){var e,t,r,i;const s=(null===(e=this.metadata)||void 0===e?void 0:e.title)?this.translator.get(this.metadata.title):null!==(r=null===(t=this.refNode)||void 0===t?void 0:t.id)&&void 0!==r?r:"";return o("limel-header",{class:"popover__header is-narrow",heading:s,icon:null===(i=this.metadata)||void 0===i?void 0:i.icon},this.renderHeaderActions())}renderHeaderActions(){return this.isMutable?o("div",{slot:"actions",class:"popover__header-actions"},o("limel-switch",{class:"popover__negate-switch",label:this.translator.get("webclient.rule-editor.negate"),value:this.isNegated,onChange:this.handleNegateChange}),o("limel-icon-button",{class:"popover__delete-button",icon:"trash",label:this.translator.get("webclient.rule-editor.delete"),onClick:this.handleDelete})):null}get translator(){return this.platform.get(i.Translate)}renderBody(){var e,t;const r=null===(e=this.metadata)||void 0===e?void 0:e.configComponent;return r?o("div",{class:"popover__body"},o(s,{platform:this.platform,context:this.context,name:r.name,props:Object.assign(Object.assign({},r.props),{value:null===(t=this.refNode)||void 0===t?void 0:t.args,readonly:this.readonly,disabled:this.disabled,focusOnOpen:this.focusOnOpen,onChange:this.handleArgsChange})})):null}};(function(e,t,o,r){var i,s=arguments.length,a=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);s>3&&a&&Object.defineProperty(t,o,a)})([r("context")],a.prototype,"context",void 0),a.style=":host{display:block}.popover{display:flex;flex-direction:column;min-width:24rem;background-color:rgb(var(--contrast-100));border:1px solid rgb(var(--contrast-700));border-radius:0.5rem;box-shadow:0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);overflow:hidden}.popover__header{--header-background-color:rgba(var(--contrast-300));padding-right:0.5rem;gap:1rem}.popover__header-actions{display:grid;grid-auto-flow:column;grid-gap:0.75rem;padding:0.25rem;align-items:center}.popover__delete-button{color:rgb(var(--contrast-1100))}.popover__body{padding:1rem}";export{a as limebb_rule_chip_popover}