@limetech/lime-crm-building-blocks 1.115.1 → 1.116.1

package/dist/components/percentage-visualizer.js

@@ -1,219 +1 @@
-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: '0546d64013773f4c73fee3fffc7a9679ef6c95c5', 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: 'df29f109a2d606b2b8d724e92be4161f19d8e025', 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: '7a4f7c2fb608f0006e3963e5d6d0eaefba0ecbbe', 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() {
-    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;
-    } });
-}
-
-export { PercentageVisualizer as P, defineCustomElement as d };
+import{proxyCustomElement as e,HTMLElement as r,h as a,Host as l,transformTag as t}from"@stencil/core/internal/client";import{g as i}from"./percentage-class.js";const o=1e-4,s=e(class extends r{valueChanged(e){this.numValue=this.parseValue(e)}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.rangeMax=100,this.rangeMin=0,this.multiplier=1,this.reducePresence=!0,this.displayPercentageColors=!1,this.labelId="label-"+crypto.randomUUID(),this.helperTextId="helper-text-"+crypto.randomUUID(),this.zeroPointId="zero-point-"+crypto.randomUUID(),this.renderHelperLine=()=>{if(this.hasHelperText())return a("limel-helper-line",{helperTextId:this.helperTextId,helperText:this.helperText,invalid:this.invalid})},this.hasHelperText=()=>null!=this.helperText,this.numValue=this.parseValue(this.value)}componentDidLoad(){this.triggerRangeWarning()}componentWillUpdate(){this.triggerRangeWarning()}triggerRangeWarning(){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 e=this.getNormalizedValue(),r=this.getZeroPointPosition();return a(l,{key:"c4441d7dec4161e552ff323d65b7897d8f1cbf1d",class:this.getContainerClassList(),style:{"--limebb-percentage-visualizer-zero-point-position":`${r}%`,"--limebb-percentage-visualizer-width":`${Math.abs(e)}%`,"--limebb-percentage-visualizer-rotate":e>=0?"0deg":"180deg"}},a("limel-notched-outline",{key:"253d0bcd609dfeffa7a38d4c60dce4f844550071",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:!0,hasFloatingLabel:!0,"aria-controls":this.helperTextId},a("div",{key:"ae9e96a420963b143347d13252b1986a67da3172",slot:"content"},this.renderVisualization())),this.renderHelperLine())}renderVisualization(){if(!this.reducePresence||0!==this.numValue&&this.hasValue())return this.hasValue()?[a("div",{class:"percentage-bar"},a("div",{class:"percentage-fill"}),this.renderZeroPoint()),a("span",{class:"percentage-text"},this.formatValue(this.numValue),a("span",{class:"percent-sign"},"%"))]:a("span",{class:"no-value"},"–")}renderZeroPoint(){if(!(this.rangeMin>=0||this.rangeMax<=0))return[a("div",{id:this.zeroPointId,class:"zero-point"}),a("limel-tooltip",{elementId:this.zeroPointId,openDirection:"top",label:"0"})]}hasValue(){return null!=this.value&&""!==this.value}getContainerClassList(){if(!this.hasValue())return;const e=this.roundValue(this.multiplyByMultiplier(this.numValue)),r=i(e);return Object.assign({},r&&{[r]:!0})}getZeroPointPosition(){const e=this.rangeMax-this.rangeMin;return e<=0?0:(0-this.rangeMin)/e*100}getNormalizedValue(){const e=this.roundValue(this.multiplyByMultiplier(this.numValue)),r=this.rangeMax-this.rangeMin;if(r<=0)return 0;const a=(0-this.rangeMin)/r*100;return e>=0?e/Math.max(this.rangeMax,o)*(100-a):e/Math.max(Math.abs(this.rangeMin),o)*a}multiplyByMultiplier(e){return e*this.multiplier}roundValue(e){return Math.round(10*e)/10}unifyMinusSign(e){return e.replaceAll("−","-")}convertToUnicodeMinus(e){return e.replaceAll("-","−")}parseValue(e){return"string"==typeof e?Number.parseFloat(this.unifyMinusSign(e)):e}formatValue(e){const r=this.roundValue(this.multiplyByMultiplier(e)),a=`${r}`;return r<0?this.convertToUnicodeMinus(a):a}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return'@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))}'}},[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"]},void 0,{value:[{valueChanged:0}]}]);function n(){"undefined"!=typeof customElements&&["limebb-percentage-visualizer"].forEach((e=>{"limebb-percentage-visualizer"===e&&(customElements.get(t(e))||customElements.define(t(e),s))}))}export{s as P,n as d}

package/dist/components/property-selector.js

@@ -1,372 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { Z as Ze, c } from './index.esm.js';
-import { g as getIcon } from './limetype.js';
-
-/**
- * Get normalized properties for a limetype
- * Adds system properties (_id, _timestamp, etc.) that map to the actual limeobject attributes
- * @param limetype The limetype to normalize
- * @returns Normalized properties with system properties prefixed with underscore
- */
-function getNormalizedProperties(limetype) {
-    if (!(limetype === null || limetype === void 0 ? void 0 : limetype.properties)) {
-        return {};
-    }
-    const properties = Object.assign({}, limetype.properties);
-    // System properties that are exposed by the backend
-    // Map from internal property name to API property name
-    const systemProperties = {
-        id: '_id',
-        timestamp: '_timestamp',
-        descriptive: '_descriptive',
-        createduser: '_createduser',
-        createdtime: '_createdtime',
-        updateduser: '_updateduser',
-    };
-    // Find and normalize system properties by name
-    for (const [propName, systemPropName] of Object.entries(systemProperties)) {
-        const property = properties[propName];
-        if (property) {
-            properties[systemPropName] = property;
-            delete properties[propName];
-        }
-    }
-    return properties;
-}
-/**
- * Get property from limetype by path (e.g., "company.name")
- * Supports relation traversal with dot-notation
- * @param limetypes
- * @param limetype
- * @param path
- */
-function getPropertyFromPath(limetypes, limetype, path) {
-    if (!path || !limetype || !limetypes) {
-        return undefined;
-    }
-    const parts = path.split('.');
-    let currentType = limetypes[limetype];
-    let property;
-    for (const part of parts) {
-        if (!currentType) {
-            return undefined;
-        }
-        const normalizedProperties = getNormalizedProperties(currentType);
-        property = normalizedProperties[part];
-        if (!property) {
-            return undefined;
-        }
-        // If this is a relation, get the related limetype for next iteration
-        if (property.relation) {
-            currentType = property.relation.getLimetype();
-        }
-    }
-    return property;
-}
-/**
- * Validates a property path to ensure no intermediate properties are hasMany or hasAndBelongsToMany relations.
- * These relation types cannot be traversed in filter expressions.
- * @param limetypes All limetype definitions
- * @param limetype The starting limetype
- * @param path The property path to validate (e.g., "company.name")
- * @returns The property at the end of the path if valid, or undefined with error if invalid
- */
-function validatePropertyPath(limetypes, limetype, path) {
-    if (!path || !limetype || !limetypes) {
-        return { property: undefined };
-    }
-    const parts = path.split('.');
-    let currentType = limetypes[limetype];
-    let property;
-    for (let i = 0; i < parts.length; i++) {
-        const part = parts[i];
-        if (!currentType) {
-            return { property: undefined };
-        }
-        const normalizedProperties = getNormalizedProperties(currentType);
-        property = normalizedProperties[part];
-        if (!property) {
-            return {
-                property: undefined,
-                error: `Property '${part}' does not exist on limetype '${currentType.name}'`,
-            };
-        }
-        // Check if this property is a hasMany/hasAndBelongsToMany relation
-        // These cannot be traversed in filter expressions
-        if (property.type === 'hasmany' ||
-            property.type === 'hasandbelongstomany') {
-            // Build the path up to this point for the error message
-            const invalidPath = parts.slice(0, i + 1).join('.');
-            return {
-                property: undefined,
-                error: `Cannot filter on many-relation '${invalidPath}'. Use a related limetype's filter instead.`,
-            };
-        }
-        // If this is a relation, get the related limetype for next iteration
-        if (property.relation) {
-            currentType = property.relation.getLimetype();
-        }
-    }
-    return { property };
-}
-
-const propertySelectorCss = ":host(limebb-property-selector){display:block}limel-menu{display:block;width:100%}";
-const LimebbPropertySelectorStyle0 = propertySelectorCss;
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-        r = Reflect.decorate(decorators, target, key, desc);
-    else
-        for (var i = decorators.length - 1; i >= 0; i--)
-            if (d = decorators[i])
-                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;
-};
-const PropertySelector = /*@__PURE__*/ proxyCustomElement(class PropertySelector extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.change = createEvent(this, "change", 7);
-        /**
-         * Label for the input
-         */
-        this.label = 'Property';
-        /**
-         * Whether the field is required
-         */
-        this.required = false;
-        this.isOpen = false;
-        this.navigationPath = '';
-        this.menuItems = [];
-        this.handleChipSetWrapperClick = (event) => {
-            // Stop all clicks on the chip-set from bubbling
-            // This prevents the menu from opening when clicking chip remove buttons
-            event.stopPropagation();
-        };
-        this.handleChipSetFocus = () => {
-            // Open menu when the chip-set input receives focus
-            // This happens when user clicks to type/edit
-            if (!this.isOpen) {
-                this.navigationPath = this.value || '';
-                this.loadMenuItems();
-                this.isOpen = true;
-            }
-        };
-        this.handleSelect = (event) => {
-            event.stopPropagation();
-            const selectedPath = event.detail.value;
-            if (!selectedPath) {
-                return;
-            }
-            // Check if this is a complete path (leaf property, not a relation)
-            const property = getPropertyFromPath(this.limetypes, this.limetype, selectedPath);
-            if (property === null || property === void 0 ? void 0 : property.relation) {
-                // This is a relation - update navigation but don't emit
-                this.navigationPath = selectedPath;
-            }
-            else {
-                // This is a leaf property - emit and close
-                this.change.emit(selectedPath);
-                this.isOpen = false;
-                this.navigationPath = '';
-            }
-        };
-        this.handleNavigateMenu = (event) => {
-            var _a;
-            event.stopPropagation();
-            if ((_a = event.detail) === null || _a === void 0 ? void 0 : _a.value) {
-                // Update navigation path when drilling down
-                this.navigationPath = event.detail.value;
-            }
-        };
-        this.handleCancel = () => {
-            this.isOpen = false;
-            this.navigationPath = '';
-        };
-        this.handleChipSetChange = (event) => {
-            event.stopPropagation();
-            const detail = event.detail;
-            // Handle both single chip and array of chips
-            if (!detail) {
-                // Clear all was clicked
-                this.change.emit('');
-                this.navigationPath = '';
-                return;
-            }
-            // Convert to array if it's a single chip
-            const chips = Array.isArray(detail) ? detail : [detail];
-            if (chips.length === 0) {
-                // All chips removed
-                this.change.emit('');
-                this.navigationPath = '';
-            }
-            else {
-                // A chip was removed - emit the last remaining chip's value
-                const lastChip = chips.at(-1);
-                if (lastChip) {
-                    this.change.emit(lastChip.value);
-                }
-                this.navigationPath = '';
-            }
-        };
-    }
-    componentWillLoad() {
-        const language = this.platform
-            .get(c.Application)
-            .getLanguage();
-        this.collator = new Intl.Collator(language, {
-            numeric: true,
-            sensitivity: 'base',
-        });
-    }
-    render() {
-        if (!this.limetype || !this.limetypes) {
-            return null;
-        }
-        const chips = this.getChipsForPath(this.navigationPath || this.value || '');
-        return (h("limel-menu", { items: this.menuItems, open: this.isOpen, emptyResultMessage: "No available properties", surfaceWidth: "inherit-from-trigger", openDirection: "bottom-end", onSelect: this.handleSelect, onNavigateMenu: this.handleNavigateMenu, onCancel: this.handleCancel }, h("div", { slot: "trigger" }, h("div", { onClick: this.handleChipSetWrapperClick }, h("limel-chip-set", { type: "input", label: this.label, value: chips, required: this.required, helperText: this.helperText, delimiter: "\u203A", maxItems: 1, onChange: this.handleChipSetChange, onFocus: this.handleChipSetFocus })))));
-    }
-    loadMenuItems() {
-        // Get the limetype we're currently navigating in
-        const currentLimetype = this.getCurrentLimetype();
-        if (!currentLimetype) {
-            this.menuItems = [];
-            return;
-        }
-        this.menuItems = this.createMenuItems(currentLimetype, '');
-    }
-    getCurrentLimetype() {
-        if (!this.navigationPath) {
-            return this.limetypes[this.limetype];
-        }
-        // Get the limetype at the current navigation path
-        const property = getPropertyFromPath(this.limetypes, this.limetype, this.navigationPath);
-        if (property === null || property === void 0 ? void 0 : property.relation) {
-            return property.relation.getLimetype();
-        }
-        return this.limetypes[this.limetype];
-    }
-    createMenuItems(limetype, pathPrefix) {
-        const results = [];
-        if (!limetype) {
-            return results;
-        }
-        const normalizedProperties = getNormalizedProperties(limetype);
-        for (const [propName, property] of Object.entries(normalizedProperties)) {
-            // Skip hasMany and hasAndBelongsToMany relations
-            if (property.type === 'hasmany' ||
-                property.type === 'hasandbelongstomany') {
-                continue;
-            }
-            const fullPath = pathPrefix
-                ? `${pathPrefix}.${propName}`
-                : propName;
-            const isRelation = !!property.relation;
-            let items;
-            if (isRelation && property.relation) {
-                // Create submenu for relation (only belongsto at this point)
-                const relatedLimetype = property.relation.getLimetype();
-                if (relatedLimetype) {
-                    items = async () => this.createMenuItems(relatedLimetype, fullPath);
-                }
-            }
-            results.push({
-                text: property.localname || propName,
-                secondaryText: this.getSecondaryText(property),
-                icon: this.getIconForProperty(property),
-                value: fullPath,
-                items: items,
-            });
-        }
-        // Sort properties alphabetically by display text
-        results.sort((a, b) => { var _a, _b; return this.collator.compare((_a = a.text) !== null && _a !== void 0 ? _a : '', (_b = b.text) !== null && _b !== void 0 ? _b : ''); });
-        if (results.length === 0) {
-            return [
-                {
-                    text: 'No available properties',
-                    value: '',
-                    disabled: true,
-                },
-            ];
-        }
-        return results;
-    }
-    getSecondaryText(property) {
-        var _a;
-        if (property.relation) {
-            const relatedLimetype = property.relation.getLimetype();
-            return ((_a = relatedLimetype === null || relatedLimetype === void 0 ? void 0 : relatedLimetype.localname) === null || _a === void 0 ? void 0 : _a.singular) || 'Object';
-        }
-        // Return the property type as the secondary text
-        return property.type.charAt(0).toUpperCase() + property.type.slice(1);
-    }
-    getIconForProperty(property) {
-        if (property.relation) {
-            return getIcon(property.relation.getLimetype());
-        }
-        // Use generic property icon
-        return {
-            name: 'dot_circle',
-            color: 'rgb(var(--color-gray-default))',
-        };
-    }
-    getChipsForPath(path) {
-        if (!path) {
-            return [];
-        }
-        const parts = path.split('.');
-        const chips = [];
-        let currentLimetype = this.limetypes[this.limetype];
-        let currentPath = '';
-        for (const part of parts) {
-            currentPath = currentPath ? `${currentPath}.${part}` : part;
-            // Use getNormalizedProperties to include _id and _timestamp
-            const normalizedProperties = getNormalizedProperties(currentLimetype);
-            const property = normalizedProperties[part];
-            if (property) {
-                chips.push({
-                    id: currentPath,
-                    text: property.localname || part,
-                    icon: this.getIconForProperty(property),
-                    value: currentPath,
-                });
-                if (property.relation) {
-                    currentLimetype = property.relation.getLimetype();
-                }
-            }
-        }
-        return chips;
-    }
-    static get style() { return LimebbPropertySelectorStyle0; }
-}, [1, "limebb-property-selector", {
-        "platform": [16],
-        "context": [16],
-        "limetype": [1],
-        "value": [1],
-        "label": [1],
-        "required": [4],
-        "helperText": [1, "helper-text"],
-        "limetypes": [32],
-        "isOpen": [32],
-        "navigationPath": [32]
-    }]);
-__decorate([
-    Ze()
-], PropertySelector.prototype, "limetypes", void 0);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["limebb-property-selector"];
-    components.forEach(tagName => { switch (tagName) {
-        case "limebb-property-selector":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PropertySelector);
-            }
-            break;
-    } });
-}
-
-export { PropertySelector as P, getNormalizedProperties as a, defineCustomElement as d, getPropertyFromPath as g, validatePropertyPath as v };
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,transformTag as r}from"@stencil/core/internal/client";import{j as o,n}from"./index.esm.js";import{g as l}from"./limetype.js";function h(t){if(!(null==t?void 0:t.properties))return{};const e=Object.assign({},t.properties),i={id:"_id",timestamp:"_timestamp",descriptive:"_descriptive",createduser:"_createduser",createdtime:"_createdtime",updateduser:"_updateduser"};for(const[t,s]of Object.entries(i)){const i=e[t];i&&(e[s]=i,delete e[t])}return e}function c(t,e,i){if(!i||!e||!t)return;const s=i.split(".");let r,o=t[e];for(const t of s){if(!o)return;if(r=h(o)[t],!r)return;r.relation&&(o=r.relation.getLimetype())}return r}function a(t,e,i){if(!i||!e||!t)return{property:void 0};const s=i.split(".");let r,o=t[e];for(let t=0;t<s.length;t++){const e=s[t];if(!o)return{property:void 0};if(r=h(o)[e],!r)return{property:void 0,error:`Property '${e}' does not exist on limetype '${o.name}'`};if("hasmany"===r.type||"hasandbelongstomany"===r.type)return{property:void 0,error:`Cannot filter on many-relation '${s.slice(0,t+1).join(".")}'. Use a related limetype's filter instead.`};r.relation&&(o=r.relation.getLimetype())}return{property:r}}const u=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.change=i(this,"change",7),this.label="Property",this.required=!1,this.isOpen=!1,this.navigationPath="",this.menuItems=[],this.handleChipSetWrapperClick=t=>{t.stopPropagation()},this.handleChipSetFocus=()=>{this.isOpen||(this.navigationPath=this.value||"",this.loadMenuItems(),this.isOpen=!0)},this.handleSelect=t=>{t.stopPropagation();const e=t.detail.value;if(!e)return;const i=c(this.limetypes,this.limetype,e);(null==i?void 0:i.relation)?this.navigationPath=e:(this.change.emit(e),this.isOpen=!1,this.navigationPath="")},this.handleNavigateMenu=t=>{var e;t.stopPropagation(),(null===(e=t.detail)||void 0===e?void 0:e.value)&&(this.navigationPath=t.detail.value)},this.handleCancel=()=>{this.isOpen=!1,this.navigationPath=""},this.handleChipSetChange=t=>{t.stopPropagation();const e=t.detail;if(!e)return this.change.emit(""),void(this.navigationPath="");const i=Array.isArray(e)?e:[e];if(0===i.length)this.change.emit(""),this.navigationPath="";else{const t=i.at(-1);t&&this.change.emit(t.value),this.navigationPath=""}}}componentWillLoad(){const t=this.platform.get(n.Application).getLanguage();this.collator=new Intl.Collator(t,{numeric:!0,sensitivity:"base"})}render(){if(!this.limetype||!this.limetypes)return null;const t=this.getChipsForPath(this.navigationPath||this.value||"");return s("limel-menu",{items:this.menuItems,open:this.isOpen,emptyResultMessage:"No available properties",surfaceWidth:"inherit-from-trigger",openDirection:"bottom-end",onSelect:this.handleSelect,onNavigateMenu:this.handleNavigateMenu,onCancel:this.handleCancel},s("div",{slot:"trigger"},s("div",{onClick:this.handleChipSetWrapperClick},s("limel-chip-set",{type:"input",label:this.label,value:t,required:this.required,helperText:this.helperText,delimiter:"›",maxItems:1,onChange:this.handleChipSetChange,onFocus:this.handleChipSetFocus}))))}loadMenuItems(){const t=this.getCurrentLimetype();this.menuItems=t?this.createMenuItems(t,""):[]}getCurrentLimetype(){if(!this.navigationPath)return this.limetypes[this.limetype];const t=c(this.limetypes,this.limetype,this.navigationPath);return(null==t?void 0:t.relation)?t.relation.getLimetype():this.limetypes[this.limetype]}createMenuItems(t,e){const i=[];if(!t)return i;const s=h(t);for(const[t,r]of Object.entries(s)){if("hasmany"===r.type||"hasandbelongstomany"===r.type)continue;const s=e?`${e}.${t}`:t;let o;if(r.relation&&r.relation){const t=r.relation.getLimetype();t&&(o=async()=>this.createMenuItems(t,s))}i.push({text:r.localname||t,secondaryText:this.getSecondaryText(r),icon:this.getIconForProperty(r),value:s,items:o})}return i.sort(((t,e)=>{var i,s;return this.collator.compare(null!==(i=t.text)&&void 0!==i?i:"",null!==(s=e.text)&&void 0!==s?s:"")})),0===i.length?[{text:"No available properties",value:"",disabled:!0}]:i}getSecondaryText(t){var e;if(t.relation){const i=t.relation.getLimetype();return(null===(e=null==i?void 0:i.localname)||void 0===e?void 0:e.singular)||"Object"}return t.type.charAt(0).toUpperCase()+t.type.slice(1)}getIconForProperty(t){return t.relation?l(t.relation.getLimetype()):{name:"dot_circle",color:"rgb(var(--color-gray-default))"}}getChipsForPath(t){if(!t)return[];const e=t.split("."),i=[];let s=this.limetypes[this.limetype],r="";for(const t of e){r=r?`${r}.${t}`:t;const e=h(s)[t];e&&(i.push({id:r,text:e.localname||t,icon:this.getIconForProperty(e),value:r}),e.relation&&(s=e.relation.getLimetype()))}return i}static get style(){return":host(limebb-property-selector){display:block}limel-menu{display:block;width:100%}"}},[1,"limebb-property-selector",{platform:[16],context:[16],limetype:[1],value:[1],label:[1],required:[4],helperText:[1,"helper-text"],limetypes:[32],isOpen:[32],navigationPath:[32]}]);function p(){"undefined"!=typeof customElements&&["limebb-property-selector"].forEach((t=>{"limebb-property-selector"===t&&(customElements.get(r(t))||customElements.define(r(t),u))}))}!function(t,e,i,s){var r,o=arguments.length,n=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(n=(o<3?r(n):o>3?r(e,i,n):r(e,i))||n);o>3&&n&&Object.defineProperty(e,i,n)}([o()],u.prototype,"limetypes",void 0);export{u as P,h as a,p as d,c as g,a as v}