@limetech/lime-crm-building-blocks 1.109.2 → 1.110.0

package/dist/components/kanban-item.js

@@ -3,7 +3,7 @@ import { c } from './index.esm.js';
 import { d as defineCustomElement$2 } from './navigation-button.js';
 import { d as defineCustomElement$1 } from './summary-popover.js';
 
-const kanbanItemCss = "@charset \"UTF-8\";*,*:before,*:after{box-sizing:border-box}:host(limebb-kanban-item){position:relative;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}:host(limebb-kanban-item):before{content:\"\";display:block;position:absolute;top:1rem;bottom:1rem;right:0;transform:translateX(50%);width:0.25rem;border-radius:1rem;background-color:var(--limebb-kanban-item-color-code)}.content{padding-top:0.25rem;min-height:3rem}.header{display:flex;align-items:flex-start;gap:0.5rem;min-height:1.75rem;padding:0.25rem 0.5rem;border-radius:0.5rem 0.5rem 0 0;background-color:rgb(var(--contrast-300))}.header a{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary);text-decoration:none}.header a:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}.header a:hover{color:rgb(var(--color-teal-light))}.header a:hover:before{opacity:0.3;transform:scale(1)}.heading{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.unpromoted-actions-menu{margin:-0.5rem -0.5rem -0.25rem auto}.body{--limel-top-edge-fade-height:0.5rem;--limel-bottom-edge-fade-height:1rem;display:block;padding-left:0.5rem;padding-right:0.5rem;margin-top:-0.5rem;color:rgb(var(--contrast-1100));max-height:12rem;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem)}limel-chip-set{--limel-chip-size:1.5rem;display:block;margin-left:-0.5rem;margin-right:0.5rem;padding-bottom:0.5rem}.footer{position:relative;display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.25rem 0.125rem;margin:0 0.25rem;border-top:1px dashed rgb(var(--contrast-300))}.header limel-icon,.footer limel-icon{flex-shrink:0;width:1.25rem;height:1.25rem}.header .actions{margin:0.5rem 0.25rem 0}.header .actions:hover{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)}.header .actions:hover:hover,.header .actions:hover:focus,.header .actions:hover:focus-visible{will-change:color, background-color, box-shadow, transform}.header .actions:hover:hover,.header .actions:hover:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.header .actions:hover:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.header .actions:hover:hover,.header .actions:hover:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.footer img{border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4);flex-shrink:0;width:1.25rem;height:1.25rem}.assignees{display:flex;align-items:center;gap:0.25rem}.assignees:has(>:nth-child(2)) span{display:none}.assignees:has(>:nth-child(2)) img,.assignees:has(>:nth-child(2)) limel-icon{margin-right:-0.5rem}.assignees:hover img,.assignees:hover limel-icon,.assignees:focus-within img,.assignees:focus-within limel-icon{margin-right:0rem}.assignees:hover .assignee:not(:hover):not(:focus-visible) img,.assignees:hover .assignee:not(:hover):not(:focus-visible) limel-icon,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) img,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) limel-icon{filter:grayscale(1);opacity:0.6}.assignee{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;display:flex;align-items:center;text-decoration:none;gap:0.25rem;margin-left:0;border-radius:1rem}.assignee:hover,.assignee:focus,.assignee:focus-visible{will-change:color, background-color, box-shadow, transform}.assignee:hover,.assignee:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.assignee:hover{box-shadow:var(--button-shadow-hovered)}.assignee:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.assignee:hover,.assignee:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.assignee:focus{outline:none}.assignee:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.assignee limel-icon,.assignee img{transition:margin 0.2s ease, opacity 0.2s ease, filter 0.2s ease}.assignee limel-icon{padding:0.125rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4);background-color:rgb(var(--contrast-100))}.assignee span{font-size:0.75rem;color:rgb(var(--contrast-900));padding-right:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}slot[name=body]{display:block;padding:0 0.5rem 0.5rem 0.5rem}";
+const kanbanItemCss = "@charset \"UTF-8\";*,*:before,*:after{box-sizing:border-box}:host(limebb-kanban-item){position:relative;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}:host(limebb-kanban-item):before{content:\"\";display:block;position:absolute;top:1rem;bottom:1rem;right:0;transform:translateX(50%);width:0.25rem;border-radius:1rem;background-color:var(--limebb-kanban-item-color-code)}.content{padding-top:0.25rem}.header{display:flex;align-items:flex-start;gap:0.5rem;min-height:1.75rem;padding:0.25rem 0.5rem;border-radius:0.5rem 0.5rem 0 0;background-color:rgb(var(--contrast-300))}.header a{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary);text-decoration:none}.header a:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}.header a:hover{color:rgb(var(--color-teal-light))}.header a:hover:before{opacity:0.3;transform:scale(1)}.heading{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.unpromoted-actions-menu{margin:-0.5rem -0.5rem -0.25rem auto}.body{--limel-top-edge-fade-height:0.5rem;--limel-bottom-edge-fade-height:0.5rem;display:block;padding-left:0.5rem;padding-right:0.5rem;margin-top:-0.5rem;color:rgb(var(--contrast-1100));max-height:12rem;--limel-overflow-mask-vertical:linear-gradient(\n      to bottom,\n      transparent 0%,\n      black calc(0% + var(--limel-top-edge-fade-height, 1rem)),\n      black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),\n      transparent 100%\n  );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem)}limel-chip-set{--limel-chip-size:1.5rem;display:block;margin-left:-0.5rem;margin-right:0.5rem;padding-bottom:0.5rem}.footer{position:relative;display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.25rem 0.125rem;margin:0 0.25rem;border-top:1px dashed rgb(var(--contrast-300))}.header limel-icon,.footer limel-icon{flex-shrink:0;width:1.25rem;height:1.25rem}.header .actions{margin:0.5rem 0.25rem 0}.header .actions:hover{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)}.header .actions:hover:hover,.header .actions:hover:focus,.header .actions:hover:focus-visible{will-change:color, background-color, box-shadow, transform}.header .actions:hover:hover,.header .actions:hover:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.header .actions:hover:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.header .actions:hover:hover,.header .actions:hover:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.footer img{border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4);flex-shrink:0;width:1.25rem;height:1.25rem}.assignees{display:flex;align-items:center;gap:0.25rem}.assignees:has(>:nth-child(2)) span{display:none}.assignees:has(>:nth-child(2)) img,.assignees:has(>:nth-child(2)) limel-icon{margin-right:-0.5rem}.assignees:hover img,.assignees:hover limel-icon,.assignees:focus-within img,.assignees:focus-within limel-icon{margin-right:0rem}.assignees:hover .assignee:not(:hover):not(:focus-visible) img,.assignees:hover .assignee:not(:hover):not(:focus-visible) limel-icon,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) img,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) limel-icon{filter:grayscale(1);opacity:0.6}.assignee{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;display:flex;align-items:center;text-decoration:none;gap:0.25rem;margin-left:0;border-radius:1rem}.assignee:hover,.assignee:focus,.assignee:focus-visible{will-change:color, background-color, box-shadow, transform}.assignee:hover,.assignee:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.assignee:hover{box-shadow:var(--button-shadow-hovered)}.assignee:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.assignee:hover,.assignee:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.assignee:focus{outline:none}.assignee:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.assignee limel-icon,.assignee img{transition:margin 0.2s ease, opacity 0.2s ease, filter 0.2s ease}.assignee limel-icon{padding:0.125rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4);background-color:rgb(var(--contrast-100))}.assignee span{font-size:0.75rem;color:rgb(var(--contrast-900));padding-right:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}slot[name=body]{display:block;padding:0.5rem}";
 const LimebbKanbanItemStyle0 = kanbanItemCss;
 
 const KanbanItemComponent = /*@__PURE__*/ proxyCustomElement(class KanbanItemComponent extends HTMLElement {
@@ -65,7 +65,7 @@ const KanbanItemComponent = /*@__PURE__*/ proxyCustomElement(class KanbanItemCom
                 'is-selected': !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.selected),
             }, style: {
                 '--limebb-kanban-item-color-code': `${this.item.color}`,
-            }, onClick: this.handleKanbanItemClick, onKeyDown: this.handleKeyDown }, this.renderHeader(), this.renderContent(), this.renderSlot(), this.renderFooter()));
+            }, onClick: this.handleKanbanItemClick, onKeyDown: this.handleKeyDown }, this.renderHeader(), this.renderContent(), this.renderSlot(), this.renderRelations(), this.renderFooter()));
     }
     renderHeader() {
         return (h("div", { class: "header" }, this.renderIcon(), this.renderHeading(), this.renderUnpromotedActionsMenu()));
@@ -81,7 +81,10 @@ const KanbanItemComponent = /*@__PURE__*/ proxyCustomElement(class KanbanItemCom
             } }));
     }
     renderContent() {
-        return (h("div", { class: "content" }, this.renderValue(), this.renderRelations()));
+        if (!this.item.value) {
+            return;
+        }
+        return h("div", { class: "content" }, this.renderValue());
     }
     renderHeading() {
         if (!this.item.heading) {

package/dist/components/limebb-data-cells.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LimebbDataCells extends Components.LimebbDataCells, HTMLElement {}
+export const LimebbDataCells: {
+    prototype: LimebbDataCells;
+    new (): LimebbDataCells;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/limebb-data-cells.js

@@ -0,0 +1,162 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c } from './index.esm.js';
+import { d as defineCustomElement$2 } from './percentage-visualizer.js';
+
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 30 * DAY;
+const YEAR = 365 * DAY;
+const units = [
+    { unit: 'year', ms: YEAR },
+    { unit: 'month', ms: MONTH },
+    { unit: 'week', ms: WEEK },
+    { unit: 'day', ms: DAY },
+    { unit: 'hour', ms: HOUR },
+    { unit: 'minute', ms: MINUTE },
+    { unit: 'second', ms: SECOND },
+];
+/**
+ * Formats a date as a localized relative time expression,
+ * e.g. "3 days ago" or "in 2 months".
+ *
+ * Uses the browser's native `Intl.RelativeTimeFormat` API.
+ * @param date
+ * @param language
+ */
+function formatRelativeDate(date, language) {
+    var _a;
+    const diff = date.getTime() - Date.now();
+    const { unit, ms } = (_a = units.find((u) => Math.abs(diff) >= u.ms)) !== null && _a !== void 0 ? _a : units.at(-1);
+    return new Intl.RelativeTimeFormat(language, { style: 'long' }).format(Math.round(diff / ms), unit);
+}
+
+const dataCellsCss = "@charset \"UTF-8\";*,*:before,*:after{box-sizing:border-box;min-width:0;min-height:0}:host(limebb-data-cells){box-sizing:border-box;display:flex;flex-direction:column;gap:0.5rem;padding:var(--limebb-data-cells-padding)}div{display:flex;flex-direction:column}dl{display:flex;flex-wrap:wrap;gap:0.75rem 1rem;margin:0;padding:0;list-style:none}dd,dt{display:flex;align-items:center}dd span,dt span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}dd{margin:0;font-size:var(--limel-theme-default-font-size);line-height:1.25rem;height:1.25rem;font-weight:500;color:rgb(var(--contrast-1100))}dd a{text-decoration:none;border-radius:1.25rem}dd a:focus{outline:none}dd a:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}dd a:not(.belongs-to){position:relative;cursor:pointer;transition:color 0.2s ease;color:rgb(var(--color-blue-default))}dd a:not(.belongs-to):before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}dd a:not(.belongs-to):hover{color:rgb(var(--color-blue-default))}dd a:not(.belongs-to):hover:before{opacity:0.3;transform:scale(1)}dd a.belongs-to{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);color:inherit;background-color:rgb(var(--contrast-400));padding:1px 0.375rem}dd a.belongs-to:hover,dd a.belongs-to:focus-visible{color:rgb(var(--color-white));background-color:rgb(var(--color-sky-default))}dd:has(.belongs-to){transform:translateX(-0.375rem)}dt{order:1;transition:color 0.2s ease;font-size:0.65rem;color:rgb(var(--contrast-800))}:host(:hover) dt,:host(:focus-within) dt{color:rgb(var(--contrast-900))}.primary+.secondary{padding-top:0.5rem;border-top:1px dashed rgb(var(--contrast-500))}.secondary dd{font-size:0.75rem;font-weight:400;line-height:1rem;height:1rem}";
+const LimebbDataCellsStyle0 = dataCellsCss;
+
+const DataCells = /*@__PURE__*/ proxyCustomElement(class DataCells extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * The data cells to render.
+         */
+        this.items = [];
+        this.renderCell = (item) => (h("div", null, h("dt", null, h("span", null, item.label)), h("dd", null, h("span", null, this.renderValue(item)))));
+    }
+    render() {
+        return [this.renderPrimary(), this.renderSecondary()];
+    }
+    renderPrimary() {
+        const items = this.items.filter((item) => item.value != null && item.value !== '' && !item.secondary);
+        if (items.length === 0) {
+            return;
+        }
+        return h("dl", { class: "primary" }, items.map(this.renderCell));
+    }
+    renderSecondary() {
+        const items = this.items.filter((item) => item.value != null && item.value !== '' && item.secondary);
+        if (items.length === 0) {
+            return;
+        }
+        return h("dl", { class: "secondary" }, items.map(this.renderCell));
+    }
+    renderValue(item) {
+        if (item.type === 'belongsto') {
+            const href = this.getBelongsToHref(item.field);
+            if (!href) {
+                return item.value;
+            }
+            return (h("a", { class: "belongs-to", href: href }, item.value));
+        }
+        if (item.type === 'phone') {
+            return h("a", { href: this.toTelUri(item.value) }, item.value);
+        }
+        if (item.type === 'email') {
+            return h("a", { href: `mailto:${item.value}` }, item.value);
+        }
+        if (item.type === 'link') {
+            return (h("a", { href: this.ensureUrlProtocol(item.value), target: "_blank", rel: "noopener" }, this.stripUrlPrefix(item.value)));
+        }
+        if (item.type === 'time' || item.type === 'date') {
+            return formatRelativeDate(new Date(item.value), this.language);
+        }
+        if (item.type === 'percent') {
+            return (h("limebb-percentage-visualizer", { value: Number(item.value), multiplier: 100, displayPercentageColors: true, reducePresence: false }));
+        }
+        return item.value;
+    }
+    toTelUri(phoneNumber) {
+        return `tel:${phoneNumber.replaceAll(' ', '')}`;
+    }
+    ensureUrlProtocol(url) {
+        if (/^https?:\/\//i.test(url)) {
+            return url;
+        }
+        return `https://${url}`;
+    }
+    stripUrlPrefix(url) {
+        return url.replace(/^https?:\/\//, '').replace(/^www\./, '');
+    }
+    getBelongsToHref(field) {
+        var _a;
+        if (!this.limeobject || !field) {
+            return undefined;
+        }
+        try {
+            const relatedObject = this.limeobject.getValue(field);
+            if (!relatedObject || typeof relatedObject !== 'object') {
+                return undefined;
+            }
+            const limetype = (_a = relatedObject.getLimetype) === null || _a === void 0 ? void 0 : _a.call(relatedObject);
+            if (!(limetype === null || limetype === void 0 ? void 0 : limetype.name) || !relatedObject.id) {
+                return undefined;
+            }
+            return `object/${limetype.name}/${relatedObject.id}`;
+        }
+        catch (_b) {
+            return undefined;
+        }
+    }
+    get language() {
+        var _a;
+        try {
+            return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(c.Application).getLanguage();
+        }
+        catch (_b) {
+            return navigator.language;
+        }
+    }
+    static get style() { return LimebbDataCellsStyle0; }
+}, [1, "limebb-data-cells", {
+        "platform": [16],
+        "context": [16],
+        "limeobject": [8],
+        "items": [16]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["limebb-data-cells", "limebb-percentage-visualizer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "limebb-data-cells":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DataCells);
+            }
+            break;
+        case "limebb-percentage-visualizer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const LimebbDataCells = DataCells;
+const defineCustomElement = defineCustomElement$1;
+
+export { LimebbDataCells, defineCustomElement };

package/dist/components/limebb-percentage-visualizer.js

@@ -1,220 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getPercentageClass } from './percentage-class.js';
-
-const percentageVisualizerCss = "@charset \"UTF-8\";*,::before,::after{box-sizing:border-box}:host(limebb-percentage-visualizer){width:100%}limel-notched-outline:not([invalid]:not([invalid=false])) .limel-notched-outline--outlines{--limel-notched-outline-border-color:transparent}div[slot=content]{display:flex;align-items:center;gap:0.5rem;border-radius:inherit;background-color:transparent !important}div[slot=content]:focus{outline:none}div[slot=content]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}:host(limebb-percentage-visualizer[invalid]:not([invalid=false])) div[slot=content]{border-color:rgb(var(--color-red-default))}:host(limebb-percentage-visualizer):has(label) div[slot=content]{min-height:2.5rem;padding:0 0.375rem 0 1rem}.percentage-text{flex-shrink:0;min-width:2.5rem}:host([range-min^=\"-\"]) .percentage-text{min-width:3.75rem}.percent-sign{opacity:0.4}.zero-point{content:\"\";position:absolute;transform:translateX(-50%);left:var(--limebb-percentage-visualizer-zero-point-position);height:0.25rem;width:0.25rem;border-radius:50%;box-shadow:0 0 0 0.125rem var(--limebb-percentage-visualizer-zero-point-color, rgb(var(--contrast-1200), 0.3));background-color:var(--limebb-percentage-visualizer-zero-point-color, rgb(var(--contrast-200), 0.9))}.percentage-bar{overflow:hidden;flex-grow:1;position:relative;display:flex;align-items:center;height:0.5rem;min-width:2rem;border-radius:0.5rem;background-color:rgb(var(--contrast-800), 0.6)}.percentage-fill{transition:width 0.2s ease;position:absolute;margin:auto;left:var(--limebb-percentage-visualizer-zero-point-position, 0);rotate:var(--limebb-percentage-visualizer-rotate, 0deg);transform-origin:left center;width:var(--limebb-percentage-visualizer-width);height:100%;border-radius:0.5rem}:host(limebb-percentage-visualizer:focus),:host(limebb-percentage-visualizer:focus-visible),:host(limebb-percentage-visualizer:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limebb-percentage-visualizer){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limebb-percentage-visualizer:focus) limel-helper-line,:host(limebb-percentage-visualizer:focus-visible) limel-helper-line,:host(limebb-percentage-visualizer:focus-within) limel-helper-line,:host(limebb-percentage-visualizer:hover) limel-helper-line{will-change:grid-template-rows}.percentage-fill{background-color:var(--percentage-visualizer-color, var(--limebb-percentage-visualizer-color, var(--mdc-theme-primary)))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-200or-larger-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-red-darker))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-200to100-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-red-dark))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-100to90-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-red-dark))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-90to80-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-red-dark))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-80to70-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-red-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-70to60-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-red-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-60to50-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-coral-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-50to40-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-coral-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-40to30-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-orange-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-30to20-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-orange-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-20to10-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-amber-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-10to0-negative) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-amber-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-0) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--contrast-800))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-0to10-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-yellow-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-10to20-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-yellow-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-20to30-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-grass-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-30to40-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-grass-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-40to50-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-lime-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-50to60-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-lime-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-60to70-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-teal-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-70to80-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-teal-default))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-80to90-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-teal-dark))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-90to100-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-teal-dark))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-100to200-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-teal-dark))}:host([range-min^=\"-\"][display-percentage-colors]:not([display-percentage-colors=false]).has-value-200or-larger-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-teal-darker))}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-0) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--contrast-800))}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-0to10-positive) .percentage-fill{--limebb-percentage-visualizer-color:var(--color-percent--0to10)}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-10to20-positive) .percentage-fill{--limebb-percentage-visualizer-color:var(--color-percent--10to20)}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-20to30-positive) .percentage-fill{--limebb-percentage-visualizer-color:var(--color-percent--20to30)}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-30to40-positive) .percentage-fill{--limebb-percentage-visualizer-color:var(--color-percent--30to40)}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-40to50-positive) .percentage-fill{--limebb-percentage-visualizer-color:var(--color-percent--40to50)}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-50to60-positive) .percentage-fill{--limebb-percentage-visualizer-color:var(--color-percent--50to60)}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-60to70-positive) .percentage-fill{--limebb-percentage-visualizer-color:var(--color-percent--60to70)}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-70to80-positive) .percentage-fill{--limebb-percentage-visualizer-color:var(--color-percent--70to80)}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-80to90-positive) .percentage-fill{--limebb-percentage-visualizer-color:var(--color-percent--80to90)}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-90to100-positive) .percentage-fill{--limebb-percentage-visualizer-color:var(--color-percent--90to100)}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-100to200-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-teal-dark))}:host([display-percentage-colors]:not([display-percentage-colors=false]).has-value-200or-larger-positive) .percentage-fill{--limebb-percentage-visualizer-color:rgb(var(--color-teal-darker))}";
-const LimebbPercentageVisualizerStyle0 = percentageVisualizerCss;
-
-const DEFAULT_MULTIPLIER_FACTOR = 1;
-const DEFAULT_RANGE_MAX = 100;
-const DEFAULT_RANGE_MIN = 0;
-const PERCENTAGE = 100;
-const DECIMALS = 10;
-const EPSILON = 0.0001;
-const PercentageVisualizer = /*@__PURE__*/ proxyCustomElement(class PercentageVisualizer extends HTMLElement {
-    valueChanged(newValue) {
-        this.numValue = this.parseValue(newValue);
-    }
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * The maximum value of the visualization range.
-         * This defines the upper bound of the scale used for visualization.
-         * Must be greater than rangeMin.
-         */
-        this.rangeMax = DEFAULT_RANGE_MAX;
-        /**
-         * The minimum value of the visualization range.
-         * This defines the lower bound of the scale used for visualization.
-         * Must be less than rangeMax.
-         */
-        this.rangeMin = DEFAULT_RANGE_MIN;
-        /**
-         * A multiplier factor to convert input values to percentages.
-         * For example, if your input is 0.75 and you want to display it as 75%, use a multiplier of 100.
-         */
-        this.multiplier = DEFAULT_MULTIPLIER_FACTOR;
-        /**
-         * When set to `false`, if the `value` equals `0` or there is no value
-         * (_undefined_, _null_ or empty string), the component will
-         * render the visualization. See the examples for more details.
-         */
-        this.reducePresence = true;
-        /**
-         * When set to `true`, makes the filled section showing the percentage colorful.
-         * Colors change follow Lime CRM's conventions:
-         * - with intervals of 10%, from 0% to 100% (when the range doesn't start with a negative value).
-         * - with intervals of 20%, from -200% to +200% (when the range starts with a negative value).
-         */
-        this.displayPercentageColors = false;
-        this.labelId = 'label-' + crypto.randomUUID();
-        this.helperTextId = 'helper-text-' + crypto.randomUUID();
-        this.zeroPointId = 'zero-point-' + crypto.randomUUID();
-        this.renderHelperLine = () => {
-            if (!this.hasHelperText()) {
-                return;
-            }
-            return (h("limel-helper-line", { helperTextId: this.helperTextId, helperText: this.helperText, invalid: this.invalid }));
-        };
-        this.hasHelperText = () => {
-            return this.helperText !== null && this.helperText !== undefined;
-        };
-        this.numValue = this.parseValue(this.value);
-    }
-    componentDidLoad() {
-        this.triggerRangeWarning();
-    }
-    componentWillUpdate() {
-        this.triggerRangeWarning();
-    }
-    triggerRangeWarning() {
-        if (this.rangeMin >= this.rangeMax) {
-            console.warn(`[limebb-percentage-visualizer] Invalid range: rangeMin (${this.rangeMin}) must be less than rangeMax (${this.rangeMax}). Visualization may not appear as expected.`);
-        }
-    }
-    render() {
-        const normalizedValue = this.getNormalizedValue();
-        const zeroPoint = this.getZeroPointPosition();
-        return (h(Host, { key: 'a99a367379f75613f8f37824fae64d5425e13c92', class: this.getContainerClassList(), style: {
-                '--limebb-percentage-visualizer-zero-point-position': `${zeroPoint}%`,
-                '--limebb-percentage-visualizer-width': `${Math.abs(normalizedValue)}%`,
-                '--limebb-percentage-visualizer-rotate': `${normalizedValue >= 0 ? '0deg' : '180deg'}`,
-            } }, h("limel-notched-outline", { key: '498c23ad0ddd79219de646286f9958a84c2592c9', tabIndex: 0, role: "meter", "aria-valuemin": this.rangeMin, "aria-valuemax": this.rangeMax, "aria-valuenow": this.numValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-controls": this.helperTextId }, h("div", { key: 'f8ba78a9b92bb93fc107e04f3001413c7560431b', slot: "content" }, this.renderVisualization())), this.renderHelperLine()));
-    }
-    renderVisualization() {
-        if (this.reducePresence && (this.numValue === 0 || !this.hasValue())) {
-            return;
-        }
-        if (!this.hasValue()) {
-            return h("span", { class: "no-value" }, "\u2013");
-        }
-        return [
-            h("div", { class: "percentage-bar" }, h("div", { class: "percentage-fill" }), this.renderZeroPoint()),
-            h("span", { class: "percentage-text" }, this.formatValue(this.numValue), h("span", { class: "percent-sign" }, "%")),
-        ];
-    }
-    renderZeroPoint() {
-        if (this.rangeMin >= 0 || this.rangeMax <= 0) {
-            return;
-        }
-        return [
-            h("div", { id: this.zeroPointId, class: "zero-point" }),
-            h("limel-tooltip", { elementId: this.zeroPointId, openDirection: "top", label: "0" }),
-        ];
-    }
-    hasValue() {
-        return (this.value !== undefined && this.value !== null && this.value !== '');
-    }
-    getContainerClassList() {
-        if (!this.hasValue()) {
-            return;
-        }
-        const processedValue = this.roundValue(this.multiplyByMultiplier(this.numValue));
-        const percentageClass = getPercentageClass(processedValue);
-        return Object.assign({}, (percentageClass && { [percentageClass]: true }));
-    }
-    getZeroPointPosition() {
-        const totalRange = this.rangeMax - this.rangeMin;
-        if (totalRange <= 0) {
-            // Handle invalid range by providing a safe default
-            return 0; // Align zero point at the start as a consistent fallback
-        }
-        return ((0 - this.rangeMin) / totalRange) * PERCENTAGE;
-    }
-    getNormalizedValue() {
-        const processedValue = this.roundValue(this.multiplyByMultiplier(this.numValue));
-        const totalRange = this.rangeMax - this.rangeMin;
-        if (totalRange <= 0) {
-            return 0;
-        }
-        const zeroRelativePosition = ((0 - this.rangeMin) / totalRange) * PERCENTAGE;
-        // Calculate the position relative to the zero point
-        // Using the EPSILON value serves several purposes:
-        // 1. Prevents Division by Zero:
-        // If this.maxValue or this.minValue is exactly 0,
-        // we'd get an infinity or NaN result without this protection.
-        // 2. Handles Edge Cases:
-        // Even though we validate that minValue < maxValue,
-        // there could still be cases where one of them is very close to zero,
-        // which could cause unstable calculations.
-        // 3. Defensive Programming:
-        // It ensures that the component degrades gracefully
-        // even in unexpected scenarios (like when a consumer sets maxValue to 0).
-        // .4 Numerical Stability:
-        // In floating-point math, using a small epsilon value
-        // is a best practice to avoid precision issues.
-        if (processedValue >= 0) {
-            return ((processedValue / Math.max(this.rangeMax, EPSILON)) *
-                (PERCENTAGE - zeroRelativePosition));
-        }
-        else {
-            return ((processedValue / Math.max(Math.abs(this.rangeMin), EPSILON)) *
-                zeroRelativePosition);
-        }
-    }
-    multiplyByMultiplier(value) {
-        return value * this.multiplier;
-    }
-    roundValue(value) {
-        // Round to 1 decimal place
-        return Math.round(value * DECIMALS) / DECIMALS;
-    }
-    unifyMinusSign(input) {
-        // Replace Unicode minus sign (−) with ASCII hyphen-minus (-)
-        return input.replaceAll('−', '-');
-    }
-    convertToUnicodeMinus(input) {
-        // Replace ASCII hyphen-minus (-) with Unicode minus sign (−)
-        return input.replaceAll('-', '−');
-    }
-    parseValue(value) {
-        if (typeof value === 'string') {
-            return Number.parseFloat(this.unifyMinusSign(value));
-        }
-        return value;
-    }
-    formatValue(value) {
-        const processedValue = this.roundValue(this.multiplyByMultiplier(value));
-        const constructedValue = `${processedValue}`;
-        if (processedValue < 0) {
-            return this.convertToUnicodeMinus(constructedValue);
-        }
-        return constructedValue;
-    }
-    static get watchers() { return {
-        "value": ["valueChanged"]
-    }; }
-    static get style() { return LimebbPercentageVisualizerStyle0; }
-}, [1, "limebb-percentage-visualizer", {
-        "platform": [16],
-        "context": [16],
-        "value": [520],
-        "rangeMax": [514, "range-max"],
-        "rangeMin": [514, "range-min"],
-        "multiplier": [514],
-        "label": [513],
-        "invalid": [516],
-        "required": [516],
-        "helperText": [513, "helper-text"],
-        "reducePresence": [516, "reduce-presence"],
-        "displayPercentageColors": [516, "display-percentage-colors"]
-    }, undefined, {
-        "value": ["valueChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["limebb-percentage-visualizer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "limebb-percentage-visualizer":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PercentageVisualizer);
-            }
-            break;
-    } });
-}
+import { P as PercentageVisualizer, d as defineCustomElement$1 } from './percentage-visualizer.js';
 
 const LimebbPercentageVisualizer = PercentageVisualizer;
 const defineCustomElement = defineCustomElement$1;