@limetech/lime-crm-building-blocks 1.135.0 → 1.136.0

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

@@ -66,7 +66,7 @@ export class DatePicker {
         if (this.value) {
             this.shouldEmitValueAsString = typeof this.value === 'string';
         }
-        return (h("limel-date-picker", { key: 'a4b3c97cf7d9261e6d9e97faeec5be9eae4cacf0', disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.parseDateValue(), type: this.type, language: this.language, formatter: this.formatter, onChange: this.handleChange }));
+        return (h("limel-date-picker", { key: '599136f59cc227d09cf88ef38a6b537fe9d72eed', disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.parseDateValue(), type: this.type, language: this.language, formatter: this.formatter, onChange: this.handleChange }));
     }
     parseDateValue() {
         const value = this.value;

package/dist/collection/components/date-range/date-range.js

@@ -33,7 +33,7 @@ export class DateRange {
         this.originalEndTime = this.endTime;
     }
     render() {
-        return (h("div", { key: 'bb16bab4456c6d321e7c9a7e3fc9b16ace0d9451', class: "date-pickers" }, this.renderStartDatePicker(), this.renderEndDatePicker()));
+        return (h("div", { key: '729645a2120439697592036553031d7eb02aaf6f', class: "date-pickers" }, this.renderStartDatePicker(), this.renderEndDatePicker()));
     }
     renderStartDatePicker() {
         if (!this.originalStartTime) {

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

@@ -44,7 +44,7 @@ export class DocumentChips {
         this.revokeAllBlobUrls();
     }
     render() {
-        return (h(Host, { key: '3ed9e562b60216e670aff7f4553b5ac2c1728f37', role: "list", "aria-label": this.accessibleLabel }, this.files.map((file) => this.renderFile(file))));
+        return (h(Host, { key: '35b924a6eb6e3ea6aa5349e74c0024e13a8a621c', role: "list", "aria-label": this.accessibleLabel }, this.files.map((file) => this.renderFile(file))));
     }
     renderFile(file) {
         const isReady = !file.uploadState || file.uploadState === 'done';

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

@@ -78,10 +78,10 @@ export class DocumentItemComponent {
     render() {
         const isUnavailable = this.isUnavailable();
         const image = this.getImage();
-        return (h(Host, { key: 'b78d90b2f90953d9ad1497e8990c8ba5d4fb6b12', id: String(this.item.file.id), class: {
+        return (h(Host, { key: 'a8bd1a95a2834995ef6691a5097b37274e44ecc4', id: String(this.item.file.id), class: {
                 'has-image': !!image,
                 'has-error': !!this.item.hasError,
-            }, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": this.item.selected ? 'true' : 'false', "aria-disabled": isUnavailable ? 'true' : 'false', tabIndex: isUnavailable ? -1 : 0 }, h("limel-card", { key: '9e21c00db9a4acd587a3e1a623dc5344937794bd', image: image, clickable: isUnavailable ? false : true, onClick: this.handleDocumentItemClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'eb5004e183de27119e0bc8d608c613150a4bcb55', slot: "component" }, this.renderFileSize(), this.renderBooleanInput())), this.renderHelp()));
+            }, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": this.item.selected ? 'true' : 'false', "aria-disabled": isUnavailable ? 'true' : 'false', tabIndex: isUnavailable ? -1 : 0 }, h("limel-card", { key: 'b44f43bfcee91aa60400d0233d193097be0c0579', image: image, clickable: isUnavailable ? false : true, onClick: this.handleDocumentItemClick, onKeyDown: this.handleKeyDown }, h("div", { key: '413561bee4bc5cfd95265558364600fcb77404ea', slot: "component" }, this.renderFileSize(), this.renderBooleanInput())), this.renderHelp()));
     }
     renderBooleanInput() {
         const id = this.getControlId();

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

@@ -76,7 +76,7 @@ export class DocumentPicker {
         this.labelId = createRandomString();
     }
     render() {
-        return (h(Host, { key: 'b0b0093bc5681362358e6b61dd396d0914dc1aed' }, h("limel-notched-outline", { key: '58b881645a5446c1aabca255272c0f24f030f1d3', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("limel-masonry-layout", { key: 'd19a596ad4ef247843a93588fb0632ccaea9ebd5', 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()));
+        return (h(Host, { key: '58cf7177c5c8fb22d09820b99bf0e1bd0b11ba02' }, h("limel-notched-outline", { key: 'e828c35390738e1efa1a99d0df1ff9f686432c1d', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("limel-masonry-layout", { key: '31428ffcd3b881b07ad24e4b9782825169ee2b0b', 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.file.id, type: this.type, onInteract: this.handleItemInteract })));

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

@@ -205,7 +205,7 @@ export class FeedTimelineItem {
     render() {
         var _a, _b;
         const helperTextId = `helper-text-${this.item.id}`;
-        return (h(Host, { key: '6e0269001c0a99c5792edb611cb62ccc3e58ecfd', id: this.item.id, class: {
+        return (h(Host, { key: 'e6ea0fac2e9cc308dd688c17e6818c1f5ab433e5', 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: '76d31bb0f3db364c5ef1897d43d0cbeeb2974de7' }, this.description);
+        return h("span", { key: '01df2ce076b4ec8cdf82532283671ee993b41efa' }, 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: '8af167b2f84c8a2dd00d1f4e8afffd1df3705b59', role: "log", "aria-busy": this.loading ? 'true' : 'false', style: {
+        return (h(Host, { key: '5e6abf57f825a9c8433047f2c34da0542c4cf1db', 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/filter-chip/filter-chip.css

@@ -0,0 +1,341 @@
+@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(limebb-filter-chip) {
+  isolation: isolate;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+button.chip {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  position: relative;
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  max-width: 20rem;
+  height: 1.75rem;
+  border-radius: 1.75rem;
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+  font-size: 0.875rem;
+  padding: 0 0.125rem;
+}
+button.chip:has(limel-icon) .text {
+  padding-left: 0;
+}
+button.chip:not([disabled]) {
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
+  cursor: pointer;
+  color: var(--limel-theme-on-surface-color);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
+}
+button.chip:not([disabled]):focus {
+  outline: none;
+}
+button.chip:not([disabled]):focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+button.chip:not([disabled]):hover, button.chip:not([disabled]):focus, button.chip:not([disabled]):focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
+button.chip:not([disabled]):hover, button.chip:not([disabled]):focus-visible {
+  transform: translate3d(0, 0.01rem, 0);
+  color: var(--limel-theme-on-surface-color);
+  background-color: var(--lime-elevated-surface-background-color);
+}
+button.chip:not([disabled]):hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+button.chip:not([disabled]):active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
+  background-color: var(--limel-theme-surface-background-color);
+  box-shadow: var(--button-shadow-inset-pressed);
+}
+button.chip:not([disabled]):hover, button.chip:not([disabled]):active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
+}
+button.chip[disabled] {
+  cursor: not-allowed;
+  color: rgba(var(--contrast-1600), 0.37);
+  background-color: rgba(var(--contrast-1600), 0.1);
+}
+button.chip:has(+ .remove-button:hover) {
+  box-shadow: var(--shadow-depth-8-error);
+}
+button.chip:has(+ .trailing-button) {
+  padding-right: calc(1.75rem + 0.125rem);
+}
+button.chip:has(+ .trailing-button) .text {
+  padding-right: 0;
+}
+button.chip .text.empty,
+button.chip .value-item.empty {
+  font-style: italic;
+  color: rgb(var(--contrast-800));
+}
+button.chip .conjunction {
+  color: rgb(var(--contrast-800));
+}
+button.chip limel-badge {
+  margin-left: 0.25rem;
+}
+
+:host(limebb-filter-chip[selected]) .chip {
+  background-color: rgb(var(--contrast-500));
+  box-shadow: var(--button-shadow-inset-pressed);
+}
+:host(limebb-filter-chip[selected]) .chip:hover {
+  background-color: rgb(var(--contrast-500));
+}
+:host(limebb-filter-chip[selected]) .chip limel-badge {
+  --badge-background-color: rgb(var(--contrast-200));
+}
+
+:host(limebb-filter-chip[invalid]) .chip {
+  background: url("data:image/svg+xml;charset=utf-8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' style='fill-rule:evenodd;'><path fill='rgba(186,186,192,0.16)' d='M0 0h4v4H0zM4 4h4v4H4z'/></svg>");
+  background-size: 0.5rem;
+  background-color: rgb(var(--color-red-default));
+}
+:host(limebb-filter-chip[invalid]) .text {
+  color: rgb(var(--color-white));
+}
+:host(limebb-filter-chip[invalid]) .conjunction {
+  color: rgba(var(--color-white), 0.7);
+}
+
+:host(limebb-filter-chip[readonly]:not([readonly=false])) .chip {
+  box-shadow: 0 0 0 1px var(--chip-readonly-border-color, rgb(var(--contrast-800), 0.5));
+  cursor: default;
+}
+
+limel-icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0.0625rem;
+}
+
+.text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+  padding: 0 0.5rem;
+}
+
+label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 100%;
+  transform: translateY(-50%);
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  padding: 0px 0.25rem;
+  color: rgb(var(--contrast-1200));
+  font-size: 0.65rem;
+  letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);
+}
+
+button.trailing-button {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
+  cursor: pointer;
+  color: var(--limel-theme-on-surface-color);
+  background-color: transparent;
+  z-index: 1;
+  flex-shrink: 0;
+  align-self: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: calc(1.75rem * -1 + 0.125rem);
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+}
+button.trailing-button:hover, button.trailing-button:focus, button.trailing-button:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
+button.trailing-button:hover, button.trailing-button:focus-visible {
+  transform: translate3d(0, 0.01rem, 0);
+  color: var(--limel-theme-on-surface-color);
+  background-color: var(--lime-elevated-surface-background-color);
+}
+button.trailing-button:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+button.trailing-button:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
+  box-shadow: var(--button-shadow-pressed);
+}
+button.trailing-button:hover, button.trailing-button:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
+}
+button.trailing-button svg {
+  transition: color 0.2s ease, transform 0.2s ease;
+  width: 1.25rem;
+}
+button.trailing-button.remove-button:hover {
+  color: rgb(var(--color-red-dark));
+}
+button.trailing-button.remove-button:hover svg {
+  transform: scale(0.8);
+}