@limetech/lime-crm-building-blocks 1.95.0 → 1.97.0

package/dist/collection/components/document-picker/document-picker.js

@@ -0,0 +1,304 @@
+import { h, Host } from "@stencil/core";
+import { createRandomString } from "../../util/random-string";
+/**
+ * The document picker component allows users to select one or more
+ * files from a list of available documents.
+ *
+ * It is primarily designed to facilitate the selection of files
+ * that a user might want to import into the CRM, for example via
+ * our Microsoft Outlook Add-in.
+ *
+ * @exampleComponent limebb-example-document-picker-basic
+ * @exampleComponent limebb-example-document-picker-selection-mode
+ * @exampleComponent limebb-example-document-picker-limited-selection
+ * @exampleComponent limebb-example-document-picker-contextual-info
+ *
+ * @beta
+ */
+export class DocumentPicker {
+    constructor() {
+        /**
+         * The list of document items to display in the picker.
+         */
+        this.items = [];
+        /**
+         * Set to `true` to indicate that the current selection is invalid.
+         */
+        this.invalid = false;
+        /**
+         * Set to `true` to indicate that selecting an item is required.
+         */
+        this.required = false;
+        /**
+         * Defines whether the picker allows single or multiple selection.
+         * - 'radio': Allows single selection within a group.
+         * - 'checkbox': Allows multiple selection.
+         */
+        this.type = 'checkbox';
+        this.handleItemInteract = (event) => {
+            event.stopPropagation();
+            const interactedItem = event.detail;
+            if (!interactedItem) {
+                return;
+            }
+            let updatedItems;
+            if (this.type === 'radio') {
+                // For radio buttons: either select the clicked item (and deselect others)
+                // or allow deselecting if clicking the already selected item
+                updatedItems = this.items
+                    .map((item) => {
+                    if (item.id === interactedItem.id) {
+                        return Object.assign(Object.assign({}, item), { selected: interactedItem.selected });
+                    }
+                    return Object.assign(Object.assign({}, item), { selected: false });
+                })
+                    .find((item) => item.selected);
+            }
+            else {
+                updatedItems = this.items
+                    .map((item) => {
+                    if (item.id === interactedItem.id) {
+                        return Object.assign(Object.assign({}, item), { selected: interactedItem.selected });
+                    }
+                    return item;
+                })
+                    .filter((item) => item.selected);
+            }
+            this.change.emit(updatedItems);
+        };
+        this.renderHelperLine = () => {
+            if (!this.helperText) {
+                return;
+            }
+            return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.invalid }));
+        };
+        this.helperTextId = createRandomString();
+        this.labelId = createRandomString();
+    }
+    render() {
+        return (h(Host, { key: '28bf6afd1999efc62689bc43b7d63d8c308d3663' }, h("limel-notched-outline", { key: '0b6f3d9f0cc88e9e1b782e3d12e7a08853211be6', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("div", { key: 'a3d64740ca2139a3435884526b9a6195929d8060', slot: "content", role: this.type === 'radio' ? 'radiogroup' : 'group', "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderItems())), this.renderHelperLine()));
+    }
+    renderItems() {
+        return this.items.map((item) => (h("limebb-document-item", { platform: this.platform, context: this.context, item: item, key: item.id, type: this.type, onInteract: this.handleItemInteract })));
+    }
+    static get is() { return "limebb-document-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["document-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["document-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "platform": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentPlatform",
+                    "resolved": "LimeWebComponentPlatform",
+                    "references": {
+                        "LimeWebComponentPlatform": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentPlatform"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "inheritdoc",
+                            "text": undefined
+                        }],
+                    "text": "Reference to the platform"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "context": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LimeWebComponentContext",
+                    "resolved": "LimeWebComponentContext",
+                    "references": {
+                        "LimeWebComponentContext": {
+                            "location": "import",
+                            "path": "@limetech/lime-web-components",
+                            "id": "node_modules::LimeWebComponentContext"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "inheritdoc",
+                            "text": undefined
+                        }],
+                    "text": "The context this component belongs to"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DocumentItem[]",
+                    "resolved": "DocumentItem[]",
+                    "references": {
+                        "DocumentItem": {
+                            "location": "import",
+                            "path": "./document-item/document-item.types",
+                            "id": "src/components/document-picker/document-item/document-item.types.ts::DocumentItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The list of document items to display in the picker."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label to display for the group of items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": true
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional helper text to display below the items."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "helper-text",
+                "reflect": true
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `true` to indicate that the current selection is invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "invalid",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `true` to indicate that selecting an item is required."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DocumentType",
+                    "resolved": "\"checkbox\" | \"radio\"",
+                    "references": {
+                        "DocumentType": {
+                            "location": "import",
+                            "path": "./document.types",
+                            "id": "src/components/document-picker/document.types.ts::DocumentType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines whether the picker allows single or multiple selection.\n- 'radio': Allows single selection within a group.\n- 'checkbox': Allows multiple selection."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'checkbox'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a user changes the selection state of an item."
+                },
+                "complexType": {
+                    "original": "DocumentItem | DocumentItem[]",
+                    "resolved": "DocumentItem | DocumentItem[]",
+                    "references": {
+                        "DocumentItem": {
+                            "location": "import",
+                            "path": "./document-item/document-item.types",
+                            "id": "src/components/document-picker/document-item/document-item.types.ts::DocumentItem"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/document-picker/document.types.js

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

package/dist/collection/components/feed/feed-item/feed-timeline-item.js

@@ -188,7 +188,7 @@ export class FeedTimelineItem {
     render() {
         var _a, _b;
         const helperTextId = `helper-text-${this.item.id}`;
-        return (h(Host, { key: 'fcf4ac09958d87a2173381127bcbb589494923f5', id: this.item.id, class: {
+        return (h(Host, { key: 'ae530cfe3aa5c54f8c1d3ceae6630b606f5ca57f', id: this.item.id, class: {
                 'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
                 'has-author-picture': !!((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.picture),
                 'shows-less': !this.showMore,

package/dist/collection/components/feed/feed-item-thumbnail-file-info/feed-item-thumbnail-file-info.js

@@ -8,7 +8,7 @@ import { h } from "@stencil/core";
  */
 export class FeedItemThumbnailFileInfo {
     render() {
-        return h("span", { key: 'adefcb0955cf6ae663bc9edd1a449e21b352c202' }, this.description);
+        return h("span", { key: 'dd3413d387c4183a82de9b4bc2e3c276f2e0d3e5' }, this.description);
     }
     static get is() { return "limebb-feed-item-thumbnail-file-info"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feed/feed.js

@@ -103,7 +103,7 @@ export class Feed {
         this.highlighter.unregisterFeed(this.feedItemElement);
     }
     render() {
-        return (h(Host, { key: '78617233bbe38626901f6d266d495483f2bfd523', role: "log", "aria-busy": this.loading ? 'true' : 'false', style: {
+        return (h(Host, { key: '8b53e0a71a8921ed0cb7fcd50273c1070eef365e', role: "log", "aria-busy": this.loading ? 'true' : 'false', style: {
                 '--limebb-feed-highlight-duration': `${ITEM_HIGHLIGHT_DURATION}ms`,
             } }, this.renderLoadMore(), this.renderEmptyFeedMessage(), this.renderSpinner(), this.renderFeedItems()));
     }

package/dist/collection/components/icon-picker/icon-picker.js

@@ -35,7 +35,7 @@ export class IconPicker {
                 icon: this.value,
             };
         }
-        return (h("limel-picker", { key: '4be7dd4855e9fb6bbb0f6167a9c3e478f262b23c', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, value: value, searcher: this.search, onChange: this.handleChange, badgeIcons: false, leadingIcon: "search", searchLabel: "Start typing to find the right icon" }));
+        return (h("limel-picker", { key: 'cfb1562215c69464d6736ec96fd39e0d45c92d7d', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, value: value, searcher: this.search, onChange: this.handleChange, badgeIcons: false, leadingIcon: "search", searchLabel: "Start typing to find the right icon" }));
     }
     static get is() { return "limebb-icon-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info-tile/format/config/info-tile-format.js

@@ -92,7 +92,7 @@ export class InfoTileAdminConfig {
             },
         ];
         return [
-            h("limel-button-group", { key: '74a794bc61c9692587bf35e54712c649d3768f9b', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
+            h("limel-button-group", { key: '8c7bba2402e84e73df2bc5e906780aeb66b1af58', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
             this.renderFormatConfig(),
         ];
     }

package/dist/collection/components/info-tile/info-tile.js

@@ -92,7 +92,7 @@ export class InfoTile {
         const errorProps = Object.assign(Object.assign({}, baseProps), { icon: 'error', prefix: 'ERROR', loading: true, label: this.getLabel(filter) });
         const normalProps = Object.assign(Object.assign({}, baseProps), { label: this.getLabel(filter), link: this.getLink(filter), loading: this.loading, value: value === null || value === void 0 ? void 0 : value.value.trim() });
         const props = !filter || this.error ? errorProps : normalProps;
-        return (h("limel-info-tile", Object.assign({ key: '4fca09fbc878e3960ed691f68c6041ce53eb12da', class: { error: !filter || this.error } }, props)));
+        return (h("limel-info-tile", Object.assign({ key: 'bb8b9eede8bdd3fdd17934753e463d134c46f7df', class: { error: !filter || this.error } }, props)));
     }
     getFormattedValue() {
         if (!this.value && this.value !== 0) {

package/dist/collection/components/kanban/kanban-group/kanban-group.js

@@ -31,7 +31,7 @@ export class KanbanGroup {
             this.renderHelp(),
             this.renderGroupHeading(),
             this.renderGroupSummary(),
-            h("div", { key: 'e295aac5500dc6a6a09c3a55dffaeff9a997edf6', class: "items" }, this.renderKanbanItems(), this.renderSpinner(), this.renderLoadMore()),
+            h("div", { key: 'f02bad3d0fc87d2359dfb1a9b6ee72c93433d3f2', class: "items" }, this.renderKanbanItems(), this.renderSpinner(), this.renderLoadMore()),
         ];
     }
     renderGroupSummary() {

package/dist/collection/components/kanban/kanban-item/kanban-item.js

@@ -50,7 +50,7 @@ export class KanbanItemComponent {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '15d9b0f4cb7074024a1869ca02e08bc60d6c3153', id: this.item.id.toString(), class: {
+        return (h(Host, { key: '4219ff4f6c63ffdf95d24ad12000c4e23b1b53c2', id: this.item.id.toString(), class: {
                 'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
                 'is-selected': !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.selected),
             }, style: {

package/dist/collection/components/lime-query-builder/expressions/lime-query-filter-and.css

@@ -0,0 +1,121 @@
+@charset "UTF-8";
+/**
+* Note! This file is exported to `dist/scss/` in the published
+* node module, for consumer projects to import.
+* That means this file cannot import from any file that isn't
+* also exported, keeping the same relative path.
+*
+* Or, just don't import anything, that works too.
+*/
+/**
+* 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.
+*/
+/**
+ * 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!
+  */
+/**
+* @mixin action-bar-interactions($item-selector)
+* This mixin applies styles for the action bar interactions.
+* For example, it animates the height of the action bar from `0` to `auto`.
+*
+* :::note
+* The consumer should set:
+* `--limebb-promoted-action-bar-grid-template-rows: 0fr;`
+* when the action bar is not supposed to be visible.
+* :::
+*
+* @param {string} $item-selector - The consumer component's tag name for the item that displays the action bar.
+*/
+.expression {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+  gap: 0;
+  background-color: rgb(var(--contrast-100));
+  border: 1px solid rgb(var(--contrast-500));
+  border-radius: 0.75rem;
+}
+.expression > ul {
+  margin-top: 0;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  margin-left: 1rem;
+  padding-left: 1rem;
+  list-style: disc;
+}
+.expression > ul li {
+  margin-top: 1rem;
+}
+.expression > ul li.add-button {
+  list-style: none;
+}