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

package/dist/collection/components/rule-editor/rule-editor.css

@@ -1,23 +1,138 @@
+@charset "UTF-8";
+/**
+* Root-level entry point for consuming @limetech/lime-elements SCSS utilities.
+*
+* This file enables the clean import path:
+* `@use '@limetech/lime-elements' as lime-elements;`
+*
+* It simply forwards everything from the built exports file.
+*/
+/**
+* Public SCSS exports for consumers of @limetech/lime-elements.
+*
+* This file provides reusable styling utilities.
+*
+* Import this file using:
+* `@use '@limetech/lime-elements' as lime-elements;`
+*
+* For detailed documentation of each utility, its parameters,
+* and usage examples, refer to the respective source files.
+*/
+/**
+* Note! This file is forwarded via `src/style/exports.scss`
+* and exposed to consumers through the root `index.scss`.
+*
+* Consumers import it using:
+* `@use '@limetech/lime-elements' as lime-elements;`
+*
+* Legacy import paths (`dist/scss/mixins`) are maintained
+* for backward compatibility via copy rules in the Stencil config.
+*/
+/**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host {
   display: block;
+  position: relative;
 }
 
-.rule-editor--disabled {
-  opacity: 0.6;
-  pointer-events: none;
+.limel-notched-outline {
+  --limel-notched-outline-background-color: transparent;
+  padding: 0.5rem 0 0 0;
 }
 
-.rule-editor__label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: rgb(var(--contrast-1500));
-  margin-bottom: 0.25rem;
+limel-notched-outline:not([invalid]:not([invalid=false])) .limel-notched-outline {
+  --limel-notched-outline-border-color: transparent;
 }
 
-.rule-editor__helper-text {
-  font-size: 0.75rem;
-  color: rgb(var(--contrast-1300));
-  margin-top: 0.25rem;
+.rule-editor--disabled {
+  opacity: 0.6;
+  pointer-events: none;
 }
 
 .rule-node {
@@ -94,4 +209,30 @@ limel-popover.rule-node__chips-popover {
 .rule-node__issue {
   color: rgb(var(--color-red-default));
   font-size: 0.875rem;
+}
+
+:host(limebb-rule-editor:focus),
+:host(limebb-rule-editor:focus-visible),
+:host(limebb-rule-editor:focus-within) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
+  --limel-h-l-grid-template-rows: 1fr;
+}
+
+:host(limebb-rule-editor) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
+  --limel-h-l-grid-template-rows: 0fr;
+}
+
+:host(limebb-rule-editor:focus) limel-helper-line,
+:host(limebb-rule-editor:focus-visible) limel-helper-line,
+:host(limebb-rule-editor:focus-within) limel-helper-line,
+:host(limebb-rule-editor:hover) limel-helper-line {
+  will-change: grid-template-rows;
+}
+
+limel-help {
+  position: absolute;
+  top: calc(var(--form-row-gap, 1rem) * -0.5);
+  left: calc(var(--form-column-gap, 1rem) * -0.5);
+  z-index: 1;
 }

package/dist/collection/components/rule-editor/rule-editor.js

@@ -8,12 +8,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
                 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { PlatformServiceName, SelectContext, } from "@limetech/lime-web-components";
 import { deleteNode, getNode, replaceNode, updateArgs, } from "./rule-operations";
 import { extractGroup, RuleNodeView, } from "./rule-editor-views";
 import { buildChipPath, extractRef } from "./chip-picker-view";
 import { createPrimitiveOptions, primitiveReadsCovered } from "./view-helpers";
+import { RuleModeView } from "./rule-editor-mode-view";
+import { ALWAYS_PRIMITIVE_ID, ruleForMode, ruleMode, } from "./rule-editor-modes";
+import { createRandomString } from "../../util/random-string";
 /**
  * Tree editor for {@link Rule}.
  *
@@ -44,7 +47,17 @@ import { createPrimitiveOptions, primitiveReadsCovered } from "./view-helpers";
  * 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
@@ -53,6 +66,16 @@ export class RuleEditor {
     constructor() {
         this.issues = [];
         this.openChipPath = null;
+        /**
+         * The mode the author last clicked, held until `value` reads back
+         * as it.
+         *
+         * A purely derived mode cannot express one case: `conditional` with
+         * nothing to restore emits no rule, so the derivation would fall
+         * back to the first offered mode and snap the control away from
+         * what the author just clicked.
+         */
+        this.modeOverride = null;
         this.focusOnOpen = false;
         this.metadataById = new Map();
         this.allPrimitiveOptions = [];
@@ -60,6 +83,26 @@ export class RuleEditor {
         this.reachableSlots = new Set();
         this.normalizedCache = null;
         this.hasLoaded = false;
+        this.labelId = createRandomString();
+        this.helperTextId = createRandomString();
+        /**
+         * Write the picked mode as a rule and emit it. The tree the author
+         * had is stashed on the way out, so picking `conditional` again
+         * puts it back instead of starting from empty. An emptied tree is
+         * stashed too — restoring it is what tells the author their
+         * conditions are gone, rather than handing back the ones they
+         * removed. With nothing stashed, `conditional` emits no rule, which
+         * is how the editor already says "the author cleared this".
+         * @param mode
+         */
+        this.handleModeChange = (mode) => {
+            var _a;
+            if (this.currentMode === 'conditional') {
+                this.stashedTree = this.value;
+            }
+            this.modeOverride = mode;
+            this.change.emit((_a = ruleForMode(mode)) !== null && _a !== void 0 ? _a : this.stashedTree);
+        };
         this.handleDelete = (path) => {
             this.openChipPath = null;
             this.focusOnOpen = false;
@@ -113,6 +156,7 @@ export class RuleEditor {
         this.emitNormalization();
     }
     onValueChange() {
+        this.clearReachedModeOverride();
         if (this.emitNormalization()) {
             return;
         }
@@ -122,23 +166,42 @@ export class RuleEditor {
         this.rebuildFromRegistries();
     }
     render() {
-        const containerClasses = {
-            'rule-editor': true,
-            'rule-editor--disabled': this.disabled,
-        };
-        return (h("div", { key: '135743195612e7553075236f0dabfbab52331338', class: containerClasses }, this.renderLabel(), h(RuleNodeView, { key: '4c58eb82dd0fb9c60b24905d6a12b9c2a17f1e52', node: this.normalizedValue, path: [], ctx: this.createRenderContext() }), this.renderHelperText()));
+        return (h(Host, { key: '4b342b249b781177e52a63b864e85ba3d17f7239' }, this.renderHelp(), h("limel-notched-outline", { key: 'e6ffe3d2dc9226e99be1f56bdd3274528b4d917f', label: this.label, labelId: this.labelId, required: this.required, readonly: this.readonly, disabled: this.disabled, invalid: this.invalid, hasValue: true, hasFloatingLabel: true }, h("div", { key: '790a6c064d07647ab3bbe5687af7a763f49e1982', slot: "content", class: {
+                'rule-editor': true,
+                'rule-editor--disabled': this.disabled,
+            }, role: "group", "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderModes(), this.renderTree())), this.renderHelperLine()));
+    }
+    renderModes() {
+        const modes = this.modes;
+        const selected = this.currentMode;
+        if (!modes || !selected) {
+            return null;
+        }
+        return (h(RuleModeView, { modes: modes, selected: selected, disabled: this.disabled || this.readonly, translator: this.translator, onModeChange: this.handleModeChange }));
     }
-    renderLabel() {
-        if (!this.label) {
+    /**
+     * The condition tree, shown unless a mode other than `conditional`
+     * is selected — an unconditional rule has no conditions to show.
+     * A caller offering no modes at all gets the tree, as before.
+     */
+    renderTree() {
+        const mode = this.currentMode;
+        if (mode && mode !== 'conditional') {
             return null;
         }
-        return h("div", { class: "rule-editor__label" }, this.label);
+        return (h(RuleNodeView, { node: this.normalizedValue, path: [], ctx: this.createRenderContext() }));
     }
-    renderHelperText() {
+    renderHelperLine() {
         if (!this.helperText) {
             return null;
         }
-        return h("div", { class: "rule-editor__helper-text" }, this.helperText);
+        return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.invalid }));
+    }
+    renderHelp() {
+        if (!this.help) {
+            return null;
+        }
+        return h("limel-help", { value: this.help });
     }
     createRenderContext() {
         return {
@@ -161,6 +224,39 @@ export class RuleEditor {
             onPopoverClose: this.handlePopoverClose,
         };
     }
+    /**
+     * The mode the editor is in, or `undefined` when it offers none —
+     * then it is the plain tree editor it was before modes existed.
+     *
+     * Derived from `value`, falling back to the first offered mode for
+     * a caller who has not stored a rule yet: the control has to show
+     * something, and nothing is emitted until the author picks.
+     */
+    get currentMode() {
+        var _a, _b;
+        const modes = this.modes;
+        if (!(modes === null || modes === void 0 ? void 0 : modes.length)) {
+            return undefined;
+        }
+        return (_b = (_a = this.modeOverride) !== null && _a !== void 0 ? _a : ruleMode(this.value)) !== null && _b !== void 0 ? _b : modes[0];
+    }
+    /**
+     * Drop the override once `value` contradicts it, handing the mode
+     * back to the derivation — that is how a later value from the
+     * caller wins over the mode the author picked.
+     *
+     * A value that expresses no mode at all does not contradict
+     * anything: an emptied tree emits no rule, and the author is still
+     * in `conditional`. Dropping the override there would read the
+     * empty value back as the first offered mode and rewrite the
+     * setting under the author.
+     */
+    clearReachedModeOverride() {
+        const mode = ruleMode(this.value);
+        if (mode !== undefined && mode !== this.modeOverride) {
+            this.modeOverride = null;
+        }
+    }
     /**
      * Path of a newly added chip whose primitive declares a config
      * component, so its args editor opens immediately on add. The new
@@ -219,14 +315,18 @@ export class RuleEditor {
     /**
      * The subset of registered metadata offered for adding in the
      * palette: primitives whose `reads` aren't fully covered by the
-     * reachable slots are dropped. Filtering only the palette — not the
-     * full `allPrimitiveOptions` — keeps already-placed chips resolving
-     * to their proper title even when their read slot isn't reachable.
+     * reachable slots are dropped, and so is the always primitive —
+     * it reads nothing, so it is always covered, but an "Always" chip
+     * among a group's conditions says nothing. Filtering only the
+     * palette — not the full `allPrimitiveOptions` — keeps
+     * already-placed chips resolving to their proper title even when
+     * their read slot isn't reachable.
      */
     availablePrimitiveMetadata() {
         const filtered = new Map();
         for (const [id, meta] of this.metadataById) {
-            if (primitiveReadsCovered(meta, this.reachableSlots)) {
+            if (id !== ALWAYS_PRIMITIVE_ID &&
+                primitiveReadsCovered(meta, this.reachableSlots)) {
                 filtered.set(id, meta);
             }
         }
@@ -267,10 +367,18 @@ export class RuleEditor {
         ]);
         this.issues = result.ok ? [] : result.issues;
     }
+    /**
+     * Emit an edited tree. Editing the tree is only possible in
+     * `conditional`, so the edit itself records the mode: an edit that
+     * empties the tree emits no rule, and without this the empty value
+     * would read back as the first offered mode.
+     * @param next
+     */
     emitIfChanged(next) {
         if (next === this.normalizedValue) {
             return;
         }
+        this.modeOverride = 'conditional';
         this.change.emit(collapseEmptyRoot(next));
     }
     /**
@@ -280,17 +388,23 @@ export class RuleEditor {
      * `emitNormalization` will *not* push that placeholder back to the
      * caller, so an unset value stays unset until the user edits.
      *
+     * An unconditional mode is the exception: its sentinel is left
+     * exactly as it came in, because wrapping it would rewrite the
+     * shape the mode is read back from.
+     *
      * Memoized so callers that read this several times in one handler
      * see the same reference — the identity check in `emitIfChanged`
      * depends on it.
      */
     get normalizedValue() {
+        const mode = this.currentMode;
         if (this.normalizedCache !== null &&
-            this.normalizedCache.source === this.value) {
+            this.normalizedCache.source === this.value &&
+            this.normalizedCache.mode === mode) {
             return this.normalizedCache.normalized;
         }
-        const normalized = normalize(this.value);
-        this.normalizedCache = { source: this.value, normalized };
+        const normalized = normalize(this.value, mode);
+        this.normalizedCache = { source: this.value, mode, normalized };
         return normalized;
     }
     /**
@@ -444,6 +558,30 @@ export class RuleEditor {
                 "getter": false,
                 "setter": false
             },
+            "modes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RuleEditorMode[]",
+                    "resolved": "RuleEditorMode[] | undefined",
+                    "references": {
+                        "RuleEditorMode": {
+                            "location": "import",
+                            "path": "./rule-editor.types",
+                            "id": "src/components/rule-editor/rule-editor.types.ts::RuleEditorMode",
+                            "referenceLocation": "RuleEditorMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The ways of writing a rule offered above the tree, in the order\ngiven. Leave it unset to offer none, and render the tree alone.\n\nWhich modes make sense is the caller's to decide, because it\ndiffers per setting: a \"when to show\" toggle offers `always` and\n`conditional`, while a \"when to make required\" one also offers\n`never`. `conditional` is not forced into the list \u2014 a caller\npassing only the unconditional modes usually gets a plain toggle\nwith no tree, which is a legitimate thing to want.\n\n\"Usually\", because the offered modes do not constrain `value`. A\nstored condition tree is still drawn, and the control then shows\nno mode as selected, because none of the offered ones describes\nwhat is stored. Hiding a rule the author cannot otherwise see\nwould be worse than an unselected control."
+                },
+                "getter": false,
+                "setter": false
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -510,6 +648,25 @@ export class RuleEditor {
                 "reflect": true,
                 "attribute": "disabled"
             },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `true` to mark the rule as invalid, which reddens the\noutline and the helper text.\n\nThis is the caller's verdict on the rule as a whole \u2014 typically a\nform reporting that the field is required and empty. It is\nseparate from the diagnostics the editor finds itself, which mark\nthe individual nodes they belong to and show regardless of this\nprop."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "invalid"
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -553,6 +710,25 @@ export class RuleEditor {
                 "setter": false,
                 "reflect": false,
                 "attribute": "helper-text"
+            },
+            "help": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Contextual help for the setting as a whole, rendered as a `?`\nbeside the label that opens a popover on click. Markdown.\n\nFor what a rule *is* rather than what this one is for \u2014 the\nhelper text is the shorter, always-legible answer, and the two\nare meant to be used together rather than instead of each other."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help"
             }
         };
     }
@@ -561,6 +737,7 @@ export class RuleEditor {
             "resolvedContext": {},
             "issues": {},
             "openChipPath": {},
+            "modeOverride": {},
             "availablePrimitiveOptions": {}
         };
     }
@@ -607,10 +784,15 @@ const EMPTY_CONTEXT = Object.freeze({
     limetype: null,
     id: null,
 });
-function normalize(value) {
+function normalize(value, mode) {
     if (!value) {
         return { type: 'all', rules: [] };
     }
+    // Neither sentinel is a group, and wrapping one would rewrite the
+    // very shape the mode is read back from.
+    if (mode === 'always' || mode === 'never') {
+        return value;
+    }
     if (extractGroup(value)) {
         return value;
     }

package/dist/collection/components/rule-editor/rule-editor.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/rule-editor/value-comparison-editor/value-comparison-editor.js

@@ -174,7 +174,7 @@ export class ValueComparisonEditor {
     }
     render() {
         const selectedType = TYPE_OPTIONS.find((option) => option.value === this.valueType);
-        return (h("div", { key: '46633e3dd6527173fdb2a54f50e7844175dbbbe5', class: "rule" }, h("limel-select", { key: '98f82c22a21840061c57a942c273b85416c539cb', class: "type-select", label: "Compare as", options: TYPE_OPTIONS, value: selectedType, onChange: this.handleTypeChange }), h("limebb-filter-condition-picker", { key: 'dac247e83cb2fac41b0e6fdb49f070d5c1b18081', class: "operator-select", platform: this.platform, propertyType: PROPERTY_TYPE_BY_VALUE_TYPE[this.valueType], conditions: COMPARISON_CONDITIONS, value: operatorToCondition(this.currentOperator), onChange: this.handleConditionChange }), this.renderOperand()));
+        return (h("div", { key: 'adecd47e558632637dec3506429c285dcddf7746', class: "rule" }, h("limel-select", { key: '41032f0494cccf8ab9ef429e0648e84b70de7a80', class: "type-select", label: "Compare as", options: TYPE_OPTIONS, value: selectedType, onChange: this.handleTypeChange }), h("limebb-filter-condition-picker", { key: '118a34ec6bf0b057ad504690ea2bbb50295697ef', class: "operator-select", platform: this.platform, propertyType: PROPERTY_TYPE_BY_VALUE_TYPE[this.valueType], conditions: COMPARISON_CONDITIONS, value: operatorToCondition(this.currentOperator), onChange: this.handleConditionChange }), this.renderOperand()));
     }
     renderOperand() {
         if (TEMPORAL_TYPES.has(this.valueType)) {

package/dist/collection/components/rule-gate/rule-gate.js

@@ -33,7 +33,7 @@ export class RuleGate {
         this.evaluate();
     }
     render() {
-        return (h(Host, { key: '5381dbe9461d4275df18e9a603b4ddaa6d00ec7e', hidden: !this.shouldRender }, h("slot", { key: 'cd6da1fa8de521af851ebb2c481f883ca39c0886' })));
+        return (h(Host, { key: 'ce41c51b7f8b049d7d89374ef0c452b2e961aa23', hidden: !this.shouldRender }, h("slot", { key: 'ad04db83bceca78bf7bb2eb7b7b2dae018025319' })));
     }
     get ruleRegistry() {
         return this.platform.get(PlatformServiceName.RuleRegistry);

package/dist/collection/components/summary-popover/summary-popover.js

@@ -128,9 +128,9 @@ export class SummaryPopover {
             top: '0.125rem',
             right: '0.125rem',
         };
-        return (h("limel-popover", { key: 'aab644ef558c8a9a28bebcf72bf052f154e45246', style: {
+        return (h("limel-popover", { key: '0eebed7c2685d3d162d8987bca7f3ce3acd38a62', style: {
                 '--limebb-summary-popover-timeout': `${this.triggerDelay}ms`,
-            }, open: this.isPopoverOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("div", { key: 'e7315c93a90e2d6aec4f3ed8588aa13a29b5eab0', slot: "trigger", onMouseEnter: this.openPopoverWithDelay, onMouseLeave: this.resetTimeout, onFocusin: this.openPopoverWithDelay }, h("slot", { key: '5465321a8056c44556e73b1034f95fc2604a5bbe', name: "trigger" }), h("div", { key: 'c61742bc59ef1a4f93396544816887e92648af14', class: "opening-countdown-indicator" })), this.renderCard(closeButtonStyle)));
+            }, open: this.isPopoverOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("div", { key: 'df2242c223d4b6a2a61e822f63f50757ebfa16c4', slot: "trigger", onMouseEnter: this.openPopoverWithDelay, onMouseLeave: this.resetTimeout, onFocusin: this.openPopoverWithDelay }, h("slot", { key: '8f0bfcc7295cf604a4d395bc535cd4cf72069ecd', name: "trigger" }), h("div", { key: '804bb712139d21944fb5ce8e1fbb918115ba3dd8', class: "opening-countdown-indicator" })), this.renderCard(closeButtonStyle)));
     }
     renderCard(closeButtonStyle) {
         return (h("limel-card", { style: {

package/dist/collection/components/text-editor/mention-group-counter.js

@@ -13,8 +13,8 @@ export class MentionGroupCounter {
     render() {
         const label = this.getLabel();
         return [
-            h("span", { key: 'c2137988c33f772a83c5b433b04ceb539faaea83', id: this.tooltipId }, label),
-            h("limel-tooltip", { key: '38e6d698205fe6169ad63598adb542eb6d596b29', elementId: this.tooltipId, label: label, helperLabel: this.helperLabel }),
+            h("span", { key: 'b6e816b8efd22fdaff81f6669d11ab8efae9e05e', id: this.tooltipId }, label),
+            h("limel-tooltip", { key: '62294172fabc48ad688b14ae75fe43d142ac0cb7', elementId: this.tooltipId, label: label, helperLabel: this.helperLabel }),
         ];
     }
     getLabel() {

package/dist/collection/components/text-editor/text-editor.js

@@ -382,7 +382,7 @@ export class LimeBBTextEditor {
     }
     render() {
         return [
-            h("limel-text-editor", { key: '6529adf1830ad449f67b9179d348330c1f985310', ref: (el) => (this.textEditor = el), tabindex: this.disabled ? -1 : 0, value: this.value, contentType: this.contentType, customElements: this.registeredCustomElements, "aria-disabled": this.disabled, language: this.language, triggers: this.registeredTriggers, onTriggerStart: this.handleTriggerStart, onTriggerStop: this.handleTriggerStop, onTriggerChange: this.handleTriggerChange, inlineImages: this.inlineImages, ui: this.ui, allowResize: this.allowResize, required: this.required, disabled: this.disabled, readonly: this.readonly, helperText: this.helperText, placeholder: this.placeholder, label: this.label, invalid: this.invalid }),
+            h("limel-text-editor", { key: '7c5597fd2affe6f7a625c3fabfbaaef70ac41b00', ref: (el) => (this.textEditor = el), tabindex: this.disabled ? -1 : 0, value: this.value, contentType: this.contentType, customElements: this.registeredCustomElements, "aria-disabled": this.disabled, language: this.language, triggers: this.registeredTriggers, onTriggerStart: this.handleTriggerStart, onTriggerStop: this.handleTriggerStop, onTriggerChange: this.handleTriggerChange, inlineImages: this.inlineImages, ui: this.ui, allowResize: this.allowResize, required: this.required, disabled: this.disabled, readonly: this.readonly, helperText: this.helperText, placeholder: this.placeholder, label: this.label, invalid: this.invalid }),
             this.renderPicker(),
         ];
     }

package/dist/collection/components/trend-indicator/trend-indicator.js

@@ -69,7 +69,7 @@ export class TrendIndicator {
         this.numValue = this.parseValue(this.value);
     }
     render() {
-        return (h(Host, { key: '781bfa7183116ad7c157fec886510c16acf1d357', class: this.getContainerClassList() }, h("limel-notched-outline", { key: 'fa7c7395dc8bc08140aa3a77bdd1c0c185d47fec', id: this.tooltipId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, "aria-controls": this.helperTextId }, h("div", { key: '8d5a6c831d74fc9070883c8e7b3c2eeb49e7f71b', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
+        return (h(Host, { key: 'b963d9086b70b11dce31375284e54574f54b4f0c', class: this.getContainerClassList() }, h("limel-notched-outline", { key: 'd2d2587a0239cba584177dbc1806762e9d783460', id: this.tooltipId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, "aria-controls": this.helperTextId }, h("div", { key: '8e7b6c37d803c5c682220681e93c3a096d4e02d2', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
     }
     renderVisualization() {
         if (this.reducePresence && (this.numValue === 0 || !this.hasValue())) {

package/dist/collection/index.js

@@ -5,4 +5,6 @@ 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";

package/dist/components/chat-icon-list.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as i,h as n,Host as o,transformTag as t}from"@stencil/core/internal/client";const r=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return n(o,{key:"8b396a9fe990300692e21c71e0674c412286db68",id:this.item.id},this.renderLabel(),n("div",{key:"8f1da67a4bb6916a3a76203dee5c2050ac2db1d3",class:"icons"},this.item.icons.map(((e,i)=>this.renderIcon(e,i)))))}renderLabel(){if(this.item.label)return n("span",{class:"label"},this.item.label)}renderIcon(e,i){const o=`icon-${this.item.id}-${i}`;return[n("limel-icon",{tabIndex:0,key:i,id:o,badge:!0,name:e.name,class:{"is-pending":!!e.pending,"is-clickable":!!e.onClick},style:{color:e.color,"background-color":e.backgroundColor},onClick:e.onClick}),this.renderTooltip(e,o)]}renderTooltip(e,i){if(e.title)return n("limel-tooltip",{label:e.title,elementId:i})}static get style(){return'@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}:host(limebb-chat-icon-list){display:flex;align-items:center;gap:0.5rem;margin-right:auto;max-width:calc(100% - 2rem);padding:0 0.25rem}.label{font-size:0.75rem;color:rgb(var(--contrast-900))}.icons{display:flex;align-items:center;gap:0.25rem}.icons:hover limel-icon,.icons:focus-within limel-icon{margin-left:0 !important}limel-icon{--icon-background-color:rgb(var(--contrast-500), 0.5)}limel-icon.is-clickable{cursor:pointer}limel-icon:focus{outline:none}limel-icon:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{transition:margin-left 0.2s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.2s ease, box-shadow 0.2s ease;position:relative;width:1.75rem;padding:0.375rem;flex-shrink:0}limel-icon:not(.is-pending):not(:first-child){margin-left:-0.75rem}limel-icon.is-pending{animation:pending 3s linear infinite;padding:0.5rem}limel-icon.is-pending:after{content:"";position:absolute;inset:0;width:1.75rem;height:1.75rem;border-radius:50%;pointer-events:none;border-radius:50%;border:0.125rem solid rgb(var(--color-white), 0.5);border-top-color:rgb(var(--color-black), 0.8);mix-blend-mode:color-dodge;animation:spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite}@keyframes pending{0%,20%,80%,100%{filter:grayscale(0%)}45%,55%{filter:grayscale(100%)}}@keyframes spin{to{transform:rotate(360deg)}}'}},[1,"limebb-chat-icon-list",{item:[16]}]);function s(){"undefined"!=typeof customElements&&["limebb-chat-icon-list"].forEach((e=>{"limebb-chat-icon-list"===e&&(customElements.get(t(e))||customElements.define(t(e),r))}))}export{r as C,s as d}
+import{proxyCustomElement as e,HTMLElement as i,h as n,Host as o,transformTag as t}from"@stencil/core/internal/client";const r=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}render(){return n(o,{key:"5f1f10992e05f44d64189dfb622e4294ca325417",id:this.item.id},this.renderLabel(),n("div",{key:"80f8b801710cb713f019897cac35ea2de1b6384f",class:"icons"},this.item.icons.map(((e,i)=>this.renderIcon(e,i)))))}renderLabel(){if(this.item.label)return n("span",{class:"label"},this.item.label)}renderIcon(e,i){const o=`icon-${this.item.id}-${i}`;return[n("limel-icon",{tabIndex:0,key:i,id:o,badge:!0,name:e.name,class:{"is-pending":!!e.pending,"is-clickable":!!e.onClick},style:{color:e.color,"background-color":e.backgroundColor},onClick:e.onClick}),this.renderTooltip(e,o)]}renderTooltip(e,i){if(e.title)return n("limel-tooltip",{label:e.title,elementId:i})}static get style(){return'@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}:host(limebb-chat-icon-list){display:flex;align-items:center;gap:0.5rem;margin-right:auto;max-width:calc(100% - 2rem);padding:0 0.25rem}.label{font-size:0.75rem;color:rgb(var(--contrast-900))}.icons{display:flex;align-items:center;gap:0.25rem}.icons:hover limel-icon,.icons:focus-within limel-icon{margin-left:0 !important}limel-icon{--icon-background-color:rgb(var(--contrast-500), 0.5)}limel-icon.is-clickable{cursor:pointer}limel-icon:focus{outline:none}limel-icon:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{transition:margin-left 0.2s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.2s ease, box-shadow 0.2s ease;position:relative;width:1.75rem;padding:0.375rem;flex-shrink:0}limel-icon:not(.is-pending):not(:first-child){margin-left:-0.75rem}limel-icon.is-pending{animation:pending 3s linear infinite;padding:0.5rem}limel-icon.is-pending:after{content:"";position:absolute;inset:0;width:1.75rem;height:1.75rem;border-radius:50%;pointer-events:none;border-radius:50%;border:0.125rem solid rgb(var(--color-white), 0.5);border-top-color:rgb(var(--color-black), 0.8);mix-blend-mode:color-dodge;animation:spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite}@keyframes pending{0%,20%,80%,100%{filter:grayscale(0%)}45%,55%{filter:grayscale(100%)}}@keyframes spin{to{transform:rotate(360deg)}}'}},[1,"limebb-chat-icon-list",{item:[16]}]);function s(){"undefined"!=typeof customElements&&["limebb-chat-icon-list"].forEach((e=>{"limebb-chat-icon-list"===e&&(customElements.get(t(e))||customElements.define(t(e),r))}))}export{r as C,s as d}