@praxisui/dynamic-fields 1.0.0-beta.42 → 1.0.0-beta.43

package/fesm2022/praxisui-dynamic-fields.mjs

@@ -5124,6 +5124,14 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
         return items;
     }, ...(ngDevMode ? [{ debugName: "shortcutItems" }] : []));
     activePresetId = () => this.control().value?.preset ?? null;
+    writeValue(value) {
+        const normalized = this.normalizeDateRangeValue(value);
+        super.writeValue(normalized);
+        this.rangeGroup.patchValue({
+            start: normalized?.startDate ?? null,
+            end: normalized?.endDate ?? null,
+        }, { emitEvent: false });
+    }
     ngOnInit() {
         // Contextual validator: start <= end
         this.rangeGroup.addValidators((group) => {
@@ -5154,7 +5162,11 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
         this.control()
             .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((val) => {
-            this.rangeGroup.patchValue({ start: val?.startDate ?? null, end: val?.endDate ?? null }, { emitEvent: false });
+            const normalized = this.normalizeDateRangeValue(val);
+            this.rangeGroup.patchValue({
+                start: normalized?.startDate ?? null,
+                end: normalized?.endDate ?? null,
+            }, { emitEvent: false });
         });
         // Sync overlay with picker lifecycle
         const p = this.picker;
@@ -5243,6 +5255,84 @@ class MaterialDateRangeComponent extends SimpleBaseInputComponent {
             this.picker?.close?.();
         }
     }
+    normalizeDateRangeValue(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        if (typeof value !== 'object' || Array.isArray(value)) {
+            return null;
+        }
+        const record = value;
+        const startDate = this.coerceDateLike(record['startDate'] ??
+            record['start'] ??
+            record['from'] ??
+            record['initialDate'] ??
+            record['begin']);
+        const endDate = this.coerceDateLike(record['endDate'] ??
+            record['end'] ??
+            record['to'] ??
+            record['finalDate'] ??
+            record['finish']);
+        const hasRange = startDate !== null || endDate !== null;
+        const preset = typeof record['preset'] === 'string' ? record['preset'] : undefined;
+        const timezone = typeof record['timezone'] === 'string' ? record['timezone'] : undefined;
+        const label = typeof record['label'] === 'string' ? record['label'] : undefined;
+        const isComparison = typeof record['isComparison'] === 'boolean'
+            ? record['isComparison']
+            : undefined;
+        if (!hasRange && !preset && !timezone && !label && isComparison === undefined) {
+            return null;
+        }
+        return {
+            startDate,
+            endDate,
+            ...(preset ? { preset } : {}),
+            ...(timezone ? { timezone } : {}),
+            ...(label ? { label } : {}),
+            ...(isComparison !== undefined ? { isComparison } : {}),
+        };
+    }
+    coerceDateLike(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : value;
+        }
+        if (typeof value === 'number') {
+            const numericDate = new Date(value);
+            return Number.isNaN(numericDate.getTime()) ? null : numericDate;
+        }
+        if (typeof value === 'string') {
+            const raw = value.trim();
+            if (!raw) {
+                return null;
+            }
+            const localIsoDate = raw.match(/^(\d{4})-(\d{2})-(\d{2})(?:[Tt].*)?$/);
+            if (localIsoDate) {
+                const year = Number(localIsoDate[1]);
+                const month = Number(localIsoDate[2]);
+                const day = Number(localIsoDate[3]);
+                const localDate = new Date(year, month - 1, day, 12, 0, 0, 0);
+                return Number.isNaN(localDate.getTime()) ? null : localDate;
+            }
+            const parsedDate = new Date(raw);
+            return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
+        }
+        if (typeof value === 'object') {
+            const nested = value;
+            const candidate = nested['date'] ??
+                nested['value'] ??
+                nested['startDate'] ??
+                nested['endDate'] ??
+                nested['start'] ??
+                nested['end'];
+            if (candidate !== undefined && candidate !== value) {
+                return this.coerceDateLike(candidate);
+            }
+        }
+        return null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialDateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialDateRangeComponent, isStandalone: true, selector: "pdx-material-date-range", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode", metadataInput: ["metadata", "metadataInput"] }, outputs: { validationChange: "validationChange" }, host: { properties: { "class": "componentCssClasses()", "class.praxis-disabled": "disabledMode", "style.display": "visible ? \"block\" : \"none\"", "style.width": "\"100%\"", "attr.data-field-type": "\"dateRange\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
             {
@@ -21142,14 +21232,17 @@ class FilterInlineDateRangeComponent extends MaterialDateRangeComponent {
         };
     }
     cloneDateRangeValue(value) {
-        if (!value) {
+        const normalized = this.normalizeDateRangeValue(value);
+        if (!normalized) {
             return null;
         }
         return {
-            startDate: this.coerceDate(value.startDate),
-            endDate: this.coerceDate(value.endDate),
-            preset: value.preset,
-            label: value.label,
+            startDate: this.coerceDate(normalized.startDate),
+            endDate: this.coerceDate(normalized.endDate),
+            preset: normalized.preset,
+            label: normalized.label,
+            timezone: normalized.timezone,
+            isComparison: normalized.isComparison,
         };
     }
     restoreBaselineSelection() {
@@ -21163,7 +21256,7 @@ class FilterInlineDateRangeComponent extends MaterialDateRangeComponent {
         if (this.inlineQuickPresetsApplyMode() === 'confirm' && this.overlayOpen) {
             return this.currentRangeGroupValue();
         }
-        return this.control().value;
+        return this.normalizeDateRangeValue(this.control().value);
     }
     rangeDisplayText() {
         const value = this.displayRangeValue();
@@ -26051,6 +26144,110 @@ const PDX_FILTER_INLINE_TREE_SELECT_COMPONENT_METADATA = {
     lib: '@praxisui/dynamic-fields',
 };
 
+const HEX_PATTERN = /^#([\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i;
+function clamp01(value) {
+    return Math.max(0, Math.min(1, value));
+}
+function clamp255(value) {
+    return Math.max(0, Math.min(255, Math.round(value)));
+}
+function parseHexColor(raw) {
+    const normalized = raw.trim();
+    if (!HEX_PATTERN.test(normalized)) {
+        return null;
+    }
+    const hex = normalized.slice(1);
+    if (hex.length === 3 || hex.length === 4) {
+        return {
+            r: Number.parseInt(hex[0] + hex[0], 16),
+            g: Number.parseInt(hex[1] + hex[1], 16),
+            b: Number.parseInt(hex[2] + hex[2], 16),
+        };
+    }
+    return {
+        r: Number.parseInt(hex.slice(0, 2), 16),
+        g: Number.parseInt(hex.slice(2, 4), 16),
+        b: Number.parseInt(hex.slice(4, 6), 16),
+    };
+}
+function parseRgbChannel(token) {
+    const part = token.trim();
+    if (!part)
+        return null;
+    if (part.endsWith('%')) {
+        const pct = Number.parseFloat(part.slice(0, -1));
+        if (!Number.isFinite(pct))
+            return null;
+        return clamp255((pct / 100) * 255);
+    }
+    const value = Number.parseFloat(part);
+    if (!Number.isFinite(value))
+        return null;
+    return clamp255(value);
+}
+function parseRgbColor(raw) {
+    const normalized = raw.trim().toLowerCase();
+    if (!normalized.startsWith('rgb')) {
+        return null;
+    }
+    const parts = normalized.match(/[\d.]+%?/g) ?? [];
+    if (parts.length < 3) {
+        return null;
+    }
+    const [rRaw, gRaw, bRaw] = parts;
+    if (rRaw === undefined || gRaw === undefined || bRaw === undefined) {
+        return null;
+    }
+    const r = parseRgbChannel(rRaw);
+    const g = parseRgbChannel(gRaw);
+    const b = parseRgbChannel(bRaw);
+    if (r === null || g === null || b === null) {
+        return null;
+    }
+    return { r, g, b };
+}
+function parseCssColor(raw) {
+    return parseHexColor(raw) ?? parseRgbColor(raw);
+}
+function toRgbString(color) {
+    return `rgb(${color.r}, ${color.g}, ${color.b})`;
+}
+function mixRgb(start, end, ratio) {
+    const amount = clamp01(ratio);
+    return {
+        r: clamp255(start.r + (end.r - start.r) * amount),
+        g: clamp255(start.g + (end.g - start.g) * amount),
+        b: clamp255(start.b + (end.b - start.b) * amount),
+    };
+}
+function mixCssColors(start, end, ratio) {
+    const startColor = parseCssColor(start);
+    const endColor = parseCssColor(end);
+    if (!startColor || !endColor) {
+        return clamp01(ratio) >= 0.5 ? end : start;
+    }
+    return toRgbString(mixRgb(startColor, endColor, ratio));
+}
+function interpolateThreeStopGradientColor(low, mid, high, ratio) {
+    const normalized = clamp01(ratio);
+    if (normalized <= 0)
+        return low;
+    if (normalized >= 1)
+        return high;
+    if (normalized <= 0.5) {
+        return mixCssColors(low, mid, normalized / 0.5);
+    }
+    return mixCssColors(mid, high, (normalized - 0.5) / 0.5);
+}
+function applyAlphaToColor(color, alpha) {
+    const parsed = parseCssColor(color);
+    if (!parsed) {
+        return color;
+    }
+    const safeAlpha = clamp01(alpha);
+    return `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${safeAlpha.toFixed(3)})`;
+}
+
 class FilterInlineRatingComponent extends FilterInlineRangeSliderComponent {
     overlayPositions = [
         { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },
@@ -26166,6 +26363,11 @@ class FilterInlineRatingComponent extends FilterInlineRangeSliderComponent {
             return 'mid';
         return 'high';
     }
+    slotColor(slot) {
+        const slots = this.ratingScaleSlots();
+        const index = Math.max(0, slots.indexOf(slot));
+        return this.ratingGradientColorByIndex(index, slots.length);
+    }
     isSlotInSelectedRange(slot) {
         const range = this.readSelectedRange();
         if (!range) {
@@ -26201,10 +26403,36 @@ class FilterInlineRatingComponent extends FilterInlineRangeSliderComponent {
         const palette = this.parseColorPalette(md.ratingToneColors ?? md.ratingColors ?? md.starColors);
         return this.resolveColorToken(md.ratingToneHighColor, md.ratingHighColor, palette?.high, palette?.max);
     }
+    ratingGradientLowColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.ratingGradientLowColor, this.toneLowColor()) || '#ef4444';
+    }
+    ratingGradientMidColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.ratingGradientMidColor, this.toneMidColor()) || '#f59e0b';
+    }
+    ratingGradientHighColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.ratingGradientHighColor, this.toneHighColor()) || '#22a45d';
+    }
+    ratingGradient() {
+        const low = this.ratingGradientLowColor();
+        const mid = this.ratingGradientMidColor();
+        const high = this.ratingGradientHighColor();
+        return `linear-gradient(90deg, ${low} 0%, ${mid} 50%, ${high} 100%)`;
+    }
     badgeStarColor() {
         const md = this.metadata() || {};
         const palette = this.parseColorPalette(md.ratingToneColors ?? md.ratingColors ?? md.starColors);
-        return this.resolveColorToken(md.ratingBadgeColor, md.ratingIndicatorColor, md.ratingToneMidColor, md.ratingMidColor, palette?.badge, palette?.indicator, palette?.mid, palette?.middle);
+        return this.resolveColorToken(md.ratingBadgeColor, md.ratingIndicatorColor, md.ratingToneMidColor, md.ratingMidColor, palette?.badge, palette?.indicator, palette?.mid, palette?.middle, this.ratingGradientMidColor());
+    }
+    ratingGradientColorByIndex(index, total) {
+        const safeTotal = Math.max(2, total);
+        const ratio = safeTotal <= 1 ? 0 : index / (safeTotal - 1);
+        return this.ratingGradientColorByRatio(ratio);
+    }
+    ratingGradientColorByRatio(ratio) {
+        return interpolateThreeStopGradientColor(this.ratingGradientLowColor(), this.ratingGradientMidColor(), this.ratingGradientHighColor(), ratio);
     }
     readSelectedRange() {
         const min = this.minValue();
@@ -26430,6 +26658,7 @@ class FilterInlineRatingComponent extends FilterInlineRangeSliderComponent {
                 [class.tone-mid]="slotTone(slot) === 'mid'"
                 [class.tone-high]="slotTone(slot) === 'high'"
                 [class.is-active]="isSlotInSelectedRange(slot)"
+                [style.color]="slotColor(slot)"
               >
                 {{ isSlotInSelectedRange(slot) ? ratingActiveStarIconName() : ratingInactiveStarIconName() }}
               </mat-icon>
@@ -26631,6 +26860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 [class.tone-mid]="slotTone(slot) === 'mid'"
                 [class.tone-high]="slotTone(slot) === 'high'"
                 [class.is-active]="isSlotInSelectedRange(slot)"
+                [style.color]="slotColor(slot)"
               >
                 {{ isSlotInSelectedRange(slot) ? ratingActiveStarIconName() : ratingInactiveStarIconName() }}
               </mat-icon>
@@ -26974,6 +27204,50 @@ class FilterInlineDistanceRadiusComponent extends FilterInlineRangeSliderCompone
         const ratio = this.normalizedDistanceRatio();
         return Number((0.12 + ratio * 0.4).toFixed(3));
     }
+    radialFillBackground() {
+        const low = this.distanceGradientLowColor();
+        const mid = this.distanceGradientMidColor();
+        const high = this.distanceGradientHighColor();
+        return `radial-gradient(circle, ${applyAlphaToColor(low, 0.48)} 0%, ${applyAlphaToColor(mid, 0.4)} 58%, ${applyAlphaToColor(high, 0.34)} 100%)`;
+    }
+    distanceRadialValueColor() {
+        return this.gradientColorForRatio(this.normalizedDistanceRatio());
+    }
+    showRadialRangeBand() {
+        const ratios = this.currentNormalizedRangeRatios();
+        if (!ratios) {
+            return false;
+        }
+        return ratios.end - ratios.start > 0.0005;
+    }
+    radialRangeBandGradient() {
+        const ratios = this.currentNormalizedRangeRatios();
+        if (!ratios) {
+            return null;
+        }
+        const innerScale = this.radialScaleForRatio(ratios.start);
+        const outerScale = this.radialScaleForRatio(ratios.end);
+        const innerPct = Math.max(0, Math.min(100, innerScale * 50));
+        const outerPct = Math.max(innerPct, Math.min(100, outerScale * 50));
+        const edgeSoftness = 1.2;
+        const innerStop = Math.max(0, innerPct - edgeSoftness);
+        const outerStop = Math.min(100, outerPct + edgeSoftness);
+        const startColor = this.gradientColorForRatio(ratios.start);
+        const endColor = this.gradientColorForRatio(ratios.end);
+        return `radial-gradient(circle, transparent 0 ${innerStop.toFixed(2)}%, ${startColor} ${innerPct.toFixed(2)}%, ${endColor} ${outerPct.toFixed(2)}%, transparent ${outerStop.toFixed(2)}% 100%)`;
+    }
+    radialRangeBandOpacity() {
+        const override = this.distanceRangeBandOpacityOverride();
+        if (override !== null) {
+            return override;
+        }
+        const ratios = this.currentNormalizedRangeRatios();
+        if (!ratios) {
+            return 0;
+        }
+        const width = Math.max(0, ratios.end - ratios.start);
+        return Number((0.2 + Math.min(0.22, width * 0.45)).toFixed(3));
+    }
     distancePresets() {
         const md = this.metadata() || {};
         const source = md.distancePresets ?? md.quickPresets ?? null;
@@ -27052,6 +27326,18 @@ class FilterInlineDistanceRadiusComponent extends FilterInlineRangeSliderCompone
         const md = this.metadata() || {};
         return this.resolveColorToken(md.distanceGlowColor, md.distanceAccentColor);
     }
+    distanceGradientLowColor() {
+        const md = this.metadata() || {};
+        return (this.resolveColorToken(md.distanceGradientLowColor, md.distanceToneLowColor, md.ratingToneLowColor, md.distanceAccentColor) || '#22c55e');
+    }
+    distanceGradientMidColor() {
+        const md = this.metadata() || {};
+        return (this.resolveColorToken(md.distanceGradientMidColor, md.distanceToneMidColor, md.ratingToneMidColor, md.distanceGlowColor) || '#f59e0b');
+    }
+    distanceGradientHighColor() {
+        const md = this.metadata() || {};
+        return (this.resolveColorToken(md.distanceGradientHighColor, md.distanceToneHighColor, md.ratingToneHighColor, md.distanceAccentColor) || '#ef4444');
+    }
     syncUnitFromMetadata() {
         const md = this.metadata() || {};
         const units = this.availableUnits();
@@ -27071,13 +27357,30 @@ class FilterInlineDistanceRadiusComponent extends FilterInlineRangeSliderCompone
         const min = this.minValue();
         const max = this.maxValue();
         const current = this.currentRadialBaseValue() ?? min;
+        return this.normalizedRatioForValue(current, min, max);
+    }
+    normalizedRatioForValue(value, min, max) {
         if (max <= min)
             return 1;
-        const ratio = (current - min) / (max - min);
+        const ratio = (value - min) / (max - min);
         return Math.max(0, Math.min(1, ratio));
     }
     radialFillScale() {
-        return 0.2 + this.normalizedDistanceRatio() * 0.8;
+        return this.radialScaleForRatio(this.normalizedDistanceRatio());
+    }
+    radialScaleForRatio(ratio) {
+        return 0.2 + ratio * 0.8;
+    }
+    gradientColorForRatio(ratio) {
+        return interpolateThreeStopGradientColor(this.distanceGradientLowColor(), this.distanceGradientMidColor(), this.distanceGradientHighColor(), ratio);
+    }
+    distanceRangeBandOpacityOverride() {
+        const md = this.metadata() || {};
+        const candidate = Number(md.distanceRangeBandOpacity ?? md.distanceRadialRangeOpacity ?? md.distanceRangeOpacity);
+        if (!Number.isFinite(candidate)) {
+            return null;
+        }
+        return Math.max(0, Math.min(1, Number(candidate.toFixed(3))));
     }
     currentBaseValue() {
         const raw = this.control().value;
@@ -27109,6 +27412,23 @@ class FilterInlineDistanceRadiusComponent extends FilterInlineRangeSliderCompone
         }
         return this.currentBaseValue();
     }
+    currentNormalizedRangeRatios() {
+        if (!this.isRangeMode()) {
+            return null;
+        }
+        const range = this.currentRangeBaseValue();
+        if (!range) {
+            return null;
+        }
+        const min = this.minValue();
+        const max = this.maxValue();
+        let start = this.normalizedRatioForValue(range.start ?? min, min, max);
+        let end = this.normalizedRatioForValue(range.end ?? max, min, max);
+        if (start > end) {
+            [start, end] = [end, start];
+        }
+        return { start, end };
+    }
     clampBaseValue(value) {
         const min = this.minValue();
         const max = this.maxValue();
@@ -27471,6 +27791,10 @@ class FilterInlineDistanceRadiusComponent extends FilterInlineRangeSliderCompone
       [style.--pdx-inline-distance-ring]="distanceRingColor()"
       [style.--pdx-inline-distance-track]="distanceTrackColor()"
       [style.--pdx-inline-distance-glow]="distanceGlowColor()"
+      [style.--pdx-inline-distance-gradient-low]="distanceGradientLowColor()"
+      [style.--pdx-inline-distance-gradient-mid]="distanceGradientMidColor()"
+      [style.--pdx-inline-distance-gradient-high]="distanceGradientHighColor()"
+      [style.--pdx-inline-distance-value-color]="distanceRadialValueColor()"
       [matTooltip]="inlineTooltipText()"
       [matTooltipDisabled]="inlineTooltipDisabled()"
       [matTooltipPosition]="tooltipPosition()"
@@ -27570,7 +27894,15 @@ class FilterInlineDistanceRadiusComponent extends FilterInlineRangeSliderCompone
                 class="pdx-inline-distance-fill"
                 [style.transform]="radialFillTransform()"
                 [style.opacity]="radialFillOpacity()"
+                [style.background]="radialFillBackground()"
               ></span>
+              @if (showRadialRangeBand()) {
+                <span
+                  class="pdx-inline-distance-range-band"
+                  [style.background]="radialRangeBandGradient()"
+                  [style.opacity]="radialRangeBandOpacity()"
+                ></span>
+              }
               <span class="pdx-inline-distance-dot"></span>
             </div>
           </div>
@@ -27663,7 +27995,7 @@ class FilterInlineDistanceRadiusComponent extends FilterInlineRangeSliderCompone
         </div>
       </ng-template>
     </div>
-  `, isInline: true, styles: [":host{display:inline-block;width:auto;min-width:0;max-width:100%}.pdx-inline-distance-root{display:inline-block;width:auto;min-width:0;max-width:100%}.pdx-inline-distance-chip{display:inline-flex;align-items:center;gap:6px;width:auto;min-width:0;min-height:42px;min-inline-size:var(--pdx-inline-distance-min-w, 188px);max-width:min(var(--pdx-inline-distance-max-w, 340px),calc(100vw - 48px));padding:0 8px 0 0;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);box-sizing:border-box;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease,color .12s ease}.pdx-inline-distance-chip.is-active{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pdx-inline-distance-chip.is-open{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.pdx-inline-distance-trigger{flex:1 1 auto;display:inline-flex;align-items:center;gap:10px;min-width:0;width:100%;min-height:40px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0 12px;text-align:left}.pdx-inline-distance-trigger:focus-visible{outline:2px solid color-mix(in srgb,currentColor 42%,transparent);outline-offset:-2px;border-radius:999px}.pdx-inline-distance-trigger[disabled]{cursor:default;opacity:var(--md-sys-state-disabled-content-opacity, .38)}.pdx-inline-distance-icon{width:18px;height:18px;font-size:18px;line-height:1}.pdx-inline-distance-text{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;line-height:1.15;font-weight:500}.pdx-inline-distance-clear{--clear-ring-color: var(--md-sys-color-primary);width:22px;height:22px;min-width:22px;margin-right:10px;display:grid;place-items:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;outline:none;padding:0;background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,transparent);color:inherit;cursor:pointer;line-height:0;font-size:0;transition:background-color .12s ease,box-shadow .12s ease,color .12s ease}.pdx-inline-distance-clear:hover{background:color-mix(in srgb,var(--md-sys-color-on-surface) 18%,transparent)}.pdx-inline-distance-chip.is-active .pdx-inline-distance-clear{--clear-ring-color: var(--md-sys-color-on-primary);background:color-mix(in srgb,var(--md-sys-color-on-primary) 22%,transparent)}.pdx-inline-distance-clear:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--clear-ring-color) 34%,transparent)}.pdx-inline-distance-clear mat-icon{width:15px;height:15px;font-size:15px}.pdx-inline-distance-panel{width:min(var(--pdx-inline-distance-panel-max-w, 560px),calc(100vw - 24px));min-width:min(var(--pdx-inline-distance-panel-min-w, 320px),calc(100vw - 24px));max-width:min(var(--pdx-inline-distance-panel-max-w, 560px),calc(100vw - 24px));padding:14px 16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface);box-shadow:0 14px 30px color-mix(in srgb,var(--md-sys-color-shadow) 20%,transparent);box-sizing:border-box;display:grid;gap:12px}.pdx-inline-distance-header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}.pdx-inline-distance-header-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--md-sys-color-primary) 14%,var(--md-sys-color-surface-container-high));color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}.pdx-inline-distance-header-icon mat-icon{width:20px;height:20px;font-size:20px}.pdx-inline-distance-title{font-size:1rem;font-weight:600}.pdx-inline-distance-subtitle{color:var(--md-sys-color-on-surface-variant);font-size:.82rem;line-height:1.25}.pdx-inline-distance-radial-wrap{display:grid;place-items:center;padding-top:2px}.pdx-inline-distance-radial{width:min(196px,52vw);aspect-ratio:1;position:relative;display:grid;place-items:center}.pdx-inline-distance-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--pdx-inline-distance-ring, var(--md-sys-color-outline-variant));transform-origin:center}.pdx-inline-distance-ring.is-active{border-color:color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 65%,var(--pdx-inline-distance-ring, var(--md-sys-color-outline-variant)))}.pdx-inline-distance-fill{position:absolute;width:100%;height:100%;border-radius:50%;transform-origin:center;background:radial-gradient(circle,color-mix(in srgb,var(--pdx-inline-distance-glow, var(--md-sys-color-primary)) 26%,transparent) 0%,color-mix(in srgb,var(--pdx-inline-distance-glow, var(--md-sys-color-primary)) 10%,transparent) 58%,transparent 100%)}.pdx-inline-distance-dot{width:22px;height:22px;border-radius:50%;border:3px solid color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 75%,white);background:var(--pdx-inline-distance-accent, var(--md-sys-color-primary));box-shadow:0 0 0 6px color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 16%,transparent)}.pdx-inline-distance-value{display:inline-flex;align-items:baseline;justify-content:center;gap:2px}.pdx-inline-distance-value-number{font-size:2rem;font-weight:700;line-height:1;color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}.pdx-inline-distance-value-unit{font-size:.95rem;color:var(--md-sys-color-on-surface-variant)}.pdx-inline-distance-units{display:inline-grid;grid-auto-flow:column;gap:0;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);overflow:hidden;justify-self:center}.pdx-inline-distance-unit-btn{min-width:56px;min-height:32px;border:0;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font:inherit;font-size:.85rem;font-weight:600;letter-spacing:.02em;padding:0 12px;cursor:pointer}.pdx-inline-distance-unit-btn.is-active{background:color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 18%,var(--md-sys-color-surface-container-high));color:var(--md-sys-color-on-surface)}.pdx-inline-distance-unit-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 38%,transparent);outline-offset:-2px}.pdx-inline-distance-unit-btn[disabled]{opacity:.56;cursor:default}.pdx-inline-distance-slider-wrap{padding-top:2px}.pdx-inline-distance-slider{width:100%}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__track--inactive{background:var(--pdx-inline-distance-track, var(--md-sys-color-outline-variant))}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__track--active_fill{border-color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__thumb-knob{border-color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}.pdx-inline-distance-edges{display:flex;justify-content:space-between;color:var(--md-sys-color-on-surface-variant);font-size:.82rem}.pdx-inline-distance-presets{display:flex;flex-wrap:wrap;gap:8px}.pdx-inline-distance-preset{border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);border-radius:999px;min-height:31px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}.pdx-inline-distance-preset.is-active{border-color:color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 80%,var(--md-sys-color-primary));background:var(--pdx-inline-distance-accent, var(--md-sys-color-primary));color:var(--md-sys-color-on-primary);box-shadow:0 8px 16px color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 28%,transparent)}.pdx-inline-distance-preset[disabled]{opacity:.56;cursor:default}@media(max-width:768px){.pdx-inline-distance-panel{min-width:min(300px,calc(100vw - 24px));padding:12px}.pdx-inline-distance-radial{width:min(176px,56vw)}.pdx-inline-distance-value-number{font-size:1.8rem}.pdx-inline-distance-preset{min-height:29px;padding:0 10px;font-size:.82rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i3$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i3$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+  `, isInline: true, styles: [":host{display:inline-block;width:auto;min-width:0;max-width:100%}.pdx-inline-distance-root{display:inline-block;width:auto;min-width:0;max-width:100%}.pdx-inline-distance-chip{display:inline-flex;align-items:center;gap:6px;width:auto;min-width:0;min-height:42px;min-inline-size:var(--pdx-inline-distance-min-w, 188px);max-width:min(var(--pdx-inline-distance-max-w, 340px),calc(100vw - 48px));padding:0 8px 0 0;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);box-sizing:border-box;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease,color .12s ease}.pdx-inline-distance-chip.is-active{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pdx-inline-distance-chip.is-open{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.pdx-inline-distance-trigger{flex:1 1 auto;display:inline-flex;align-items:center;gap:10px;min-width:0;width:100%;min-height:40px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0 12px;text-align:left}.pdx-inline-distance-trigger:focus-visible{outline:2px solid color-mix(in srgb,currentColor 42%,transparent);outline-offset:-2px;border-radius:999px}.pdx-inline-distance-trigger[disabled]{cursor:default;opacity:var(--md-sys-state-disabled-content-opacity, .38)}.pdx-inline-distance-icon{width:18px;height:18px;font-size:18px;line-height:1}.pdx-inline-distance-text{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;line-height:1.15;font-weight:500}.pdx-inline-distance-clear{--clear-ring-color: var(--md-sys-color-primary);width:22px;height:22px;min-width:22px;margin-right:10px;display:grid;place-items:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;outline:none;padding:0;background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,transparent);color:inherit;cursor:pointer;line-height:0;font-size:0;transition:background-color .12s ease,box-shadow .12s ease,color .12s ease}.pdx-inline-distance-clear:hover{background:color-mix(in srgb,var(--md-sys-color-on-surface) 18%,transparent)}.pdx-inline-distance-chip.is-active .pdx-inline-distance-clear{--clear-ring-color: var(--md-sys-color-on-primary);background:color-mix(in srgb,var(--md-sys-color-on-primary) 22%,transparent)}.pdx-inline-distance-clear:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--clear-ring-color) 34%,transparent)}.pdx-inline-distance-clear mat-icon{width:15px;height:15px;font-size:15px}.pdx-inline-distance-panel{width:min(var(--pdx-inline-distance-panel-max-w, 560px),calc(100vw - 24px));min-width:min(var(--pdx-inline-distance-panel-min-w, 320px),calc(100vw - 24px));max-width:min(var(--pdx-inline-distance-panel-max-w, 560px),calc(100vw - 24px));padding:14px 16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface);box-shadow:0 14px 30px color-mix(in srgb,var(--md-sys-color-shadow) 20%,transparent);box-sizing:border-box;display:grid;gap:12px}.pdx-inline-distance-header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}.pdx-inline-distance-header-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--md-sys-color-primary) 14%,var(--md-sys-color-surface-container-high));color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}.pdx-inline-distance-header-icon mat-icon{width:20px;height:20px;font-size:20px}.pdx-inline-distance-title{font-size:1rem;font-weight:600}.pdx-inline-distance-subtitle{color:var(--md-sys-color-on-surface-variant);font-size:.82rem;line-height:1.25}.pdx-inline-distance-radial-wrap{display:grid;place-items:center;padding-top:2px}.pdx-inline-distance-radial{width:min(196px,52vw);aspect-ratio:1;position:relative;display:grid;place-items:center}.pdx-inline-distance-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--pdx-inline-distance-ring, var(--md-sys-color-outline-variant));transform-origin:center}.pdx-inline-distance-ring.is-active{border-color:color-mix(in srgb,var(--pdx-inline-distance-value-color, var(--pdx-inline-distance-accent, var(--md-sys-color-primary))) 65%,var(--pdx-inline-distance-ring, var(--md-sys-color-outline-variant)))}.pdx-inline-distance-fill{position:absolute;width:100%;height:100%;border-radius:50%;transform-origin:center;background:radial-gradient(circle,color-mix(in srgb,var(--pdx-inline-distance-gradient-low, #22c55e) 48%,transparent),color-mix(in srgb,var(--pdx-inline-distance-gradient-mid, #f59e0b) 40%,transparent) 58%,color-mix(in srgb,var(--pdx-inline-distance-gradient-high, #ef4444) 34%,transparent))}.pdx-inline-distance-range-band{position:absolute;inset:0;border-radius:50%;pointer-events:none}.pdx-inline-distance-dot{width:22px;height:22px;border-radius:50%;border:3px solid color-mix(in srgb,var(--pdx-inline-distance-value-color, var(--pdx-inline-distance-accent, var(--md-sys-color-primary))) 75%,white);background:var( --pdx-inline-distance-value-color, var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) );box-shadow:0 0 0 6px color-mix(in srgb,var(--pdx-inline-distance-value-color, var(--pdx-inline-distance-accent, var(--md-sys-color-primary))) 16%,transparent)}.pdx-inline-distance-value{display:inline-flex;align-items:baseline;justify-content:center;gap:2px}.pdx-inline-distance-value-number{font-size:2rem;font-weight:700;line-height:1;color:var( --pdx-inline-distance-value-color, var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) )}.pdx-inline-distance-value-unit{font-size:.95rem;color:var(--md-sys-color-on-surface-variant)}.pdx-inline-distance-units{display:inline-grid;grid-auto-flow:column;gap:0;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);overflow:hidden;justify-self:center}.pdx-inline-distance-unit-btn{min-width:56px;min-height:32px;border:0;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font:inherit;font-size:.85rem;font-weight:600;letter-spacing:.02em;padding:0 12px;cursor:pointer}.pdx-inline-distance-unit-btn.is-active{background:color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 18%,var(--md-sys-color-surface-container-high));color:var(--md-sys-color-on-surface)}.pdx-inline-distance-unit-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 38%,transparent);outline-offset:-2px}.pdx-inline-distance-unit-btn[disabled]{opacity:.56;cursor:default}.pdx-inline-distance-slider-wrap{padding-top:2px}.pdx-inline-distance-slider{width:100%}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__track--inactive{background:var(--pdx-inline-distance-track, var(--md-sys-color-outline-variant))}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__track--active_fill{border-color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__thumb-knob{border-color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}.pdx-inline-distance-edges{display:flex;justify-content:space-between;color:var(--md-sys-color-on-surface-variant);font-size:.82rem}.pdx-inline-distance-presets{display:flex;flex-wrap:wrap;gap:8px}.pdx-inline-distance-preset{border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);border-radius:999px;min-height:31px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}.pdx-inline-distance-preset.is-active{border-color:color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 80%,var(--md-sys-color-primary));background:var(--pdx-inline-distance-accent, var(--md-sys-color-primary));color:var(--md-sys-color-on-primary);box-shadow:0 8px 16px color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 28%,transparent)}.pdx-inline-distance-preset[disabled]{opacity:.56;cursor:default}@media(max-width:768px){.pdx-inline-distance-panel{min-width:min(300px,calc(100vw - 24px));padding:12px}.pdx-inline-distance-radial{width:min(176px,56vw)}.pdx-inline-distance-value-number{font-size:1.8rem}.pdx-inline-distance-preset{min-height:29px;padding:0 10px;font-size:.82rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: A11yModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i3$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i3$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i3$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FilterInlineDistanceRadiusComponent, decorators: [{
             type: Component,
@@ -27686,6 +28018,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       [style.--pdx-inline-distance-ring]="distanceRingColor()"
       [style.--pdx-inline-distance-track]="distanceTrackColor()"
       [style.--pdx-inline-distance-glow]="distanceGlowColor()"
+      [style.--pdx-inline-distance-gradient-low]="distanceGradientLowColor()"
+      [style.--pdx-inline-distance-gradient-mid]="distanceGradientMidColor()"
+      [style.--pdx-inline-distance-gradient-high]="distanceGradientHighColor()"
+      [style.--pdx-inline-distance-value-color]="distanceRadialValueColor()"
       [matTooltip]="inlineTooltipText()"
       [matTooltipDisabled]="inlineTooltipDisabled()"
       [matTooltipPosition]="tooltipPosition()"
@@ -27785,7 +28121,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 class="pdx-inline-distance-fill"
                 [style.transform]="radialFillTransform()"
                 [style.opacity]="radialFillOpacity()"
+                [style.background]="radialFillBackground()"
               ></span>
+              @if (showRadialRangeBand()) {
+                <span
+                  class="pdx-inline-distance-range-band"
+                  [style.background]="radialRangeBandGradient()"
+                  [style.opacity]="radialRangeBandOpacity()"
+                ></span>
+              }
               <span class="pdx-inline-distance-dot"></span>
             </div>
           </div>
@@ -27895,7 +28239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                         '[attr.data-component-id]': 'componentId()',
                         '(window:resize)': 'onViewportResize()',
                         '(document:keydown.escape)': 'onDocumentEscape()',
-                    }, styles: [":host{display:inline-block;width:auto;min-width:0;max-width:100%}.pdx-inline-distance-root{display:inline-block;width:auto;min-width:0;max-width:100%}.pdx-inline-distance-chip{display:inline-flex;align-items:center;gap:6px;width:auto;min-width:0;min-height:42px;min-inline-size:var(--pdx-inline-distance-min-w, 188px);max-width:min(var(--pdx-inline-distance-max-w, 340px),calc(100vw - 48px));padding:0 8px 0 0;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);box-sizing:border-box;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease,color .12s ease}.pdx-inline-distance-chip.is-active{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pdx-inline-distance-chip.is-open{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.pdx-inline-distance-trigger{flex:1 1 auto;display:inline-flex;align-items:center;gap:10px;min-width:0;width:100%;min-height:40px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0 12px;text-align:left}.pdx-inline-distance-trigger:focus-visible{outline:2px solid color-mix(in srgb,currentColor 42%,transparent);outline-offset:-2px;border-radius:999px}.pdx-inline-distance-trigger[disabled]{cursor:default;opacity:var(--md-sys-state-disabled-content-opacity, .38)}.pdx-inline-distance-icon{width:18px;height:18px;font-size:18px;line-height:1}.pdx-inline-distance-text{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;line-height:1.15;font-weight:500}.pdx-inline-distance-clear{--clear-ring-color: var(--md-sys-color-primary);width:22px;height:22px;min-width:22px;margin-right:10px;display:grid;place-items:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;outline:none;padding:0;background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,transparent);color:inherit;cursor:pointer;line-height:0;font-size:0;transition:background-color .12s ease,box-shadow .12s ease,color .12s ease}.pdx-inline-distance-clear:hover{background:color-mix(in srgb,var(--md-sys-color-on-surface) 18%,transparent)}.pdx-inline-distance-chip.is-active .pdx-inline-distance-clear{--clear-ring-color: var(--md-sys-color-on-primary);background:color-mix(in srgb,var(--md-sys-color-on-primary) 22%,transparent)}.pdx-inline-distance-clear:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--clear-ring-color) 34%,transparent)}.pdx-inline-distance-clear mat-icon{width:15px;height:15px;font-size:15px}.pdx-inline-distance-panel{width:min(var(--pdx-inline-distance-panel-max-w, 560px),calc(100vw - 24px));min-width:min(var(--pdx-inline-distance-panel-min-w, 320px),calc(100vw - 24px));max-width:min(var(--pdx-inline-distance-panel-max-w, 560px),calc(100vw - 24px));padding:14px 16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface);box-shadow:0 14px 30px color-mix(in srgb,var(--md-sys-color-shadow) 20%,transparent);box-sizing:border-box;display:grid;gap:12px}.pdx-inline-distance-header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}.pdx-inline-distance-header-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--md-sys-color-primary) 14%,var(--md-sys-color-surface-container-high));color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}.pdx-inline-distance-header-icon mat-icon{width:20px;height:20px;font-size:20px}.pdx-inline-distance-title{font-size:1rem;font-weight:600}.pdx-inline-distance-subtitle{color:var(--md-sys-color-on-surface-variant);font-size:.82rem;line-height:1.25}.pdx-inline-distance-radial-wrap{display:grid;place-items:center;padding-top:2px}.pdx-inline-distance-radial{width:min(196px,52vw);aspect-ratio:1;position:relative;display:grid;place-items:center}.pdx-inline-distance-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--pdx-inline-distance-ring, var(--md-sys-color-outline-variant));transform-origin:center}.pdx-inline-distance-ring.is-active{border-color:color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 65%,var(--pdx-inline-distance-ring, var(--md-sys-color-outline-variant)))}.pdx-inline-distance-fill{position:absolute;width:100%;height:100%;border-radius:50%;transform-origin:center;background:radial-gradient(circle,color-mix(in srgb,var(--pdx-inline-distance-glow, var(--md-sys-color-primary)) 26%,transparent) 0%,color-mix(in srgb,var(--pdx-inline-distance-glow, var(--md-sys-color-primary)) 10%,transparent) 58%,transparent 100%)}.pdx-inline-distance-dot{width:22px;height:22px;border-radius:50%;border:3px solid color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 75%,white);background:var(--pdx-inline-distance-accent, var(--md-sys-color-primary));box-shadow:0 0 0 6px color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 16%,transparent)}.pdx-inline-distance-value{display:inline-flex;align-items:baseline;justify-content:center;gap:2px}.pdx-inline-distance-value-number{font-size:2rem;font-weight:700;line-height:1;color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}.pdx-inline-distance-value-unit{font-size:.95rem;color:var(--md-sys-color-on-surface-variant)}.pdx-inline-distance-units{display:inline-grid;grid-auto-flow:column;gap:0;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);overflow:hidden;justify-self:center}.pdx-inline-distance-unit-btn{min-width:56px;min-height:32px;border:0;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font:inherit;font-size:.85rem;font-weight:600;letter-spacing:.02em;padding:0 12px;cursor:pointer}.pdx-inline-distance-unit-btn.is-active{background:color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 18%,var(--md-sys-color-surface-container-high));color:var(--md-sys-color-on-surface)}.pdx-inline-distance-unit-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 38%,transparent);outline-offset:-2px}.pdx-inline-distance-unit-btn[disabled]{opacity:.56;cursor:default}.pdx-inline-distance-slider-wrap{padding-top:2px}.pdx-inline-distance-slider{width:100%}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__track--inactive{background:var(--pdx-inline-distance-track, var(--md-sys-color-outline-variant))}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__track--active_fill{border-color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__thumb-knob{border-color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}.pdx-inline-distance-edges{display:flex;justify-content:space-between;color:var(--md-sys-color-on-surface-variant);font-size:.82rem}.pdx-inline-distance-presets{display:flex;flex-wrap:wrap;gap:8px}.pdx-inline-distance-preset{border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);border-radius:999px;min-height:31px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}.pdx-inline-distance-preset.is-active{border-color:color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 80%,var(--md-sys-color-primary));background:var(--pdx-inline-distance-accent, var(--md-sys-color-primary));color:var(--md-sys-color-on-primary);box-shadow:0 8px 16px color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 28%,transparent)}.pdx-inline-distance-preset[disabled]{opacity:.56;cursor:default}@media(max-width:768px){.pdx-inline-distance-panel{min-width:min(300px,calc(100vw - 24px));padding:12px}.pdx-inline-distance-radial{width:min(176px,56vw)}.pdx-inline-distance-value-number{font-size:1.8rem}.pdx-inline-distance-preset{min-height:29px;padding:0 10px;font-size:.82rem}}\n"] }]
+                    }, styles: [":host{display:inline-block;width:auto;min-width:0;max-width:100%}.pdx-inline-distance-root{display:inline-block;width:auto;min-width:0;max-width:100%}.pdx-inline-distance-chip{display:inline-flex;align-items:center;gap:6px;width:auto;min-width:0;min-height:42px;min-inline-size:var(--pdx-inline-distance-min-w, 188px);max-width:min(var(--pdx-inline-distance-max-w, 340px),calc(100vw - 48px));padding:0 8px 0 0;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);box-sizing:border-box;transition:border-color .12s ease,box-shadow .12s ease,background-color .12s ease,color .12s ease}.pdx-inline-distance-chip.is-active{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pdx-inline-distance-chip.is-open{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.pdx-inline-distance-trigger{flex:1 1 auto;display:inline-flex;align-items:center;gap:10px;min-width:0;width:100%;min-height:40px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0 12px;text-align:left}.pdx-inline-distance-trigger:focus-visible{outline:2px solid color-mix(in srgb,currentColor 42%,transparent);outline-offset:-2px;border-radius:999px}.pdx-inline-distance-trigger[disabled]{cursor:default;opacity:var(--md-sys-state-disabled-content-opacity, .38)}.pdx-inline-distance-icon{width:18px;height:18px;font-size:18px;line-height:1}.pdx-inline-distance-text{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;line-height:1.15;font-weight:500}.pdx-inline-distance-clear{--clear-ring-color: var(--md-sys-color-primary);width:22px;height:22px;min-width:22px;margin-right:10px;display:grid;place-items:center;border:0;border-radius:50%;appearance:none;-webkit-appearance:none;outline:none;padding:0;background:color-mix(in srgb,var(--md-sys-color-on-surface) 10%,transparent);color:inherit;cursor:pointer;line-height:0;font-size:0;transition:background-color .12s ease,box-shadow .12s ease,color .12s ease}.pdx-inline-distance-clear:hover{background:color-mix(in srgb,var(--md-sys-color-on-surface) 18%,transparent)}.pdx-inline-distance-chip.is-active .pdx-inline-distance-clear{--clear-ring-color: var(--md-sys-color-on-primary);background:color-mix(in srgb,var(--md-sys-color-on-primary) 22%,transparent)}.pdx-inline-distance-clear:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--clear-ring-color) 34%,transparent)}.pdx-inline-distance-clear mat-icon{width:15px;height:15px;font-size:15px}.pdx-inline-distance-panel{width:min(var(--pdx-inline-distance-panel-max-w, 560px),calc(100vw - 24px));min-width:min(var(--pdx-inline-distance-panel-min-w, 320px),calc(100vw - 24px));max-width:min(var(--pdx-inline-distance-panel-max-w, 560px),calc(100vw - 24px));padding:14px 16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface);box-shadow:0 14px 30px color-mix(in srgb,var(--md-sys-color-shadow) 20%,transparent);box-sizing:border-box;display:grid;gap:12px}.pdx-inline-distance-header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}.pdx-inline-distance-header-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--md-sys-color-primary) 14%,var(--md-sys-color-surface-container-high));color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}.pdx-inline-distance-header-icon mat-icon{width:20px;height:20px;font-size:20px}.pdx-inline-distance-title{font-size:1rem;font-weight:600}.pdx-inline-distance-subtitle{color:var(--md-sys-color-on-surface-variant);font-size:.82rem;line-height:1.25}.pdx-inline-distance-radial-wrap{display:grid;place-items:center;padding-top:2px}.pdx-inline-distance-radial{width:min(196px,52vw);aspect-ratio:1;position:relative;display:grid;place-items:center}.pdx-inline-distance-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--pdx-inline-distance-ring, var(--md-sys-color-outline-variant));transform-origin:center}.pdx-inline-distance-ring.is-active{border-color:color-mix(in srgb,var(--pdx-inline-distance-value-color, var(--pdx-inline-distance-accent, var(--md-sys-color-primary))) 65%,var(--pdx-inline-distance-ring, var(--md-sys-color-outline-variant)))}.pdx-inline-distance-fill{position:absolute;width:100%;height:100%;border-radius:50%;transform-origin:center;background:radial-gradient(circle,color-mix(in srgb,var(--pdx-inline-distance-gradient-low, #22c55e) 48%,transparent),color-mix(in srgb,var(--pdx-inline-distance-gradient-mid, #f59e0b) 40%,transparent) 58%,color-mix(in srgb,var(--pdx-inline-distance-gradient-high, #ef4444) 34%,transparent))}.pdx-inline-distance-range-band{position:absolute;inset:0;border-radius:50%;pointer-events:none}.pdx-inline-distance-dot{width:22px;height:22px;border-radius:50%;border:3px solid color-mix(in srgb,var(--pdx-inline-distance-value-color, var(--pdx-inline-distance-accent, var(--md-sys-color-primary))) 75%,white);background:var( --pdx-inline-distance-value-color, var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) );box-shadow:0 0 0 6px color-mix(in srgb,var(--pdx-inline-distance-value-color, var(--pdx-inline-distance-accent, var(--md-sys-color-primary))) 16%,transparent)}.pdx-inline-distance-value{display:inline-flex;align-items:baseline;justify-content:center;gap:2px}.pdx-inline-distance-value-number{font-size:2rem;font-weight:700;line-height:1;color:var( --pdx-inline-distance-value-color, var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) )}.pdx-inline-distance-value-unit{font-size:.95rem;color:var(--md-sys-color-on-surface-variant)}.pdx-inline-distance-units{display:inline-grid;grid-auto-flow:column;gap:0;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);overflow:hidden;justify-self:center}.pdx-inline-distance-unit-btn{min-width:56px;min-height:32px;border:0;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font:inherit;font-size:.85rem;font-weight:600;letter-spacing:.02em;padding:0 12px;cursor:pointer}.pdx-inline-distance-unit-btn.is-active{background:color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 18%,var(--md-sys-color-surface-container-high));color:var(--md-sys-color-on-surface)}.pdx-inline-distance-unit-btn:focus-visible{outline:2px solid color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 38%,transparent);outline-offset:-2px}.pdx-inline-distance-unit-btn[disabled]{opacity:.56;cursor:default}.pdx-inline-distance-slider-wrap{padding-top:2px}.pdx-inline-distance-slider{width:100%}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__track--inactive{background:var(--pdx-inline-distance-track, var(--md-sys-color-outline-variant))}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__track--active_fill{border-color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}:host ::ng-deep .pdx-inline-distance-slider .mdc-slider__thumb-knob{border-color:var(--pdx-inline-distance-accent, var(--md-sys-color-primary))}.pdx-inline-distance-edges{display:flex;justify-content:space-between;color:var(--md-sys-color-on-surface-variant);font-size:.82rem}.pdx-inline-distance-presets{display:flex;flex-wrap:wrap;gap:8px}.pdx-inline-distance-preset{border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface);border-radius:999px;min-height:31px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}.pdx-inline-distance-preset.is-active{border-color:color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 80%,var(--md-sys-color-primary));background:var(--pdx-inline-distance-accent, var(--md-sys-color-primary));color:var(--md-sys-color-on-primary);box-shadow:0 8px 16px color-mix(in srgb,var(--pdx-inline-distance-accent, var(--md-sys-color-primary)) 28%,transparent)}.pdx-inline-distance-preset[disabled]{opacity:.56;cursor:default}@media(max-width:768px){.pdx-inline-distance-panel{min-width:min(300px,calc(100vw - 24px));padding:12px}.pdx-inline-distance-radial{width:min(176px,56vw)}.pdx-inline-distance-value-number{font-size:1.8rem}.pdx-inline-distance-preset{min-height:29px;padding:0 10px;font-size:.82rem}}\n"] }]
         }] });
 
 const PDX_FILTER_INLINE_DISTANCE_RADIUS_COMPONENT_METADATA = {
@@ -28147,7 +28491,9 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
         this.onClearClick();
     }
     pipelineOptions() {
-        return this.filteredOptions().map((option, index) => this.toVisualOption(option, index));
+        const filtered = this.filteredOptions();
+        const optionPool = this.options();
+        return filtered.map((option) => this.toVisualOption(option, this.resolveOptionOrderIndex(option, optionPool), optionPool.length));
     }
     selectedVisualOptions() {
         const selectedValues = this.selectedValues();
@@ -28158,7 +28504,7 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
         selectedValues.forEach((selectedValue, index) => {
             const option = optionPool.find((entry) => this.equalsOptionValue(entry, selectedValue));
             if (option) {
-                out.push(this.toVisualOption(option, index));
+                out.push(this.toVisualOption(option, this.resolveOptionOrderIndex(option, optionPool), optionPool.length));
             }
             else {
                 out.push({
@@ -28166,7 +28512,7 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
                     label: String(selectedValue ?? ''),
                     subtitle: '',
                     value: selectedValue,
-                    color: this.resolveFallbackColor(index),
+                    color: this.resolveFallbackColor(index, selectedValues.length),
                     weight: 1,
                     disabled: false,
                     selected: true,
@@ -28176,7 +28522,8 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
         return out;
     }
     pipelineSegments() {
-        const options = this.options().map((option, index) => this.toVisualOption(option, index));
+        const optionPool = this.options();
+        const options = optionPool.map((option, index) => this.toVisualOption(option, index, optionPool.length));
         if (!options.length)
             return [];
         const totalWeight = options.reduce((sum, item) => sum + item.weight, 0);
@@ -28198,6 +28545,24 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
             selected: option.selected,
         }));
     }
+    pipelineGradientLowColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.pipelineGradientLowColor, md.pipelineToneLowColor) || '#64748b';
+    }
+    pipelineGradientMidColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.pipelineGradientMidColor, md.pipelineToneMidColor) || '#0ea5e9';
+    }
+    pipelineGradientHighColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.pipelineGradientHighColor, md.pipelineToneHighColor) || '#22c55e';
+    }
+    pipelineGradient() {
+        const low = this.pipelineGradientLowColor();
+        const mid = this.pipelineGradientMidColor();
+        const high = this.pipelineGradientHighColor();
+        return `linear-gradient(90deg, ${low} 0%, ${mid} 52%, ${high} 100%)`;
+    }
     pipelineBarAriaLabel() {
         const label = this.placeholderText();
         const selected = this.selectedVisualOptions();
@@ -28305,7 +28670,7 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
     isInteractionBlocked() {
         return this.disabledMode || this.isReadonlyEffective() || this.presentationMode;
     }
-    toVisualOption(option, index) {
+    toVisualOption(option, index, totalOptions = 0) {
         const raw = option;
         const subtitle = this.resolveOptionSubtitle(raw);
         const weight = this.resolveOptionWeight(raw, subtitle);
@@ -28314,12 +28679,20 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
             label: String(option.label ?? raw.text ?? raw.name ?? raw.title ?? option.value ?? '').trim() || `Item ${index + 1}`,
             subtitle,
             value: option.value,
-            color: this.resolveOptionColor(raw, index),
+            color: this.resolveOptionColor(raw, index, totalOptions),
             weight,
             disabled: !!option.disabled,
             selected: this.selectedValues().some((entry) => this.equalsOptionValue({ value: entry, label: '' }, option.value)),
         };
     }
+    resolveOptionOrderIndex(option, optionPool) {
+        const matchedIndex = optionPool.findIndex((entry) => this.equalsOptionValue(entry, option.value));
+        if (matchedIndex >= 0) {
+            return matchedIndex;
+        }
+        const fallback = optionPool.indexOf(option);
+        return fallback >= 0 ? fallback : 0;
+    }
     resolveOptionSubtitle(raw) {
         const md = this.metadata() || {};
         const customKey = this.resolveMetadataKey(md.pipelineOptionSubtitleKey, md.optionSubtitleKey);
@@ -28358,7 +28731,7 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
         }
         return 1;
     }
-    resolveOptionColor(raw, index) {
+    resolveOptionColor(raw, index, totalOptions) {
         const md = this.metadata() || {};
         const customKey = this.resolveMetadataKey(md.pipelineOptionColorKey, md.optionColorKey);
         if (customKey) {
@@ -28379,11 +28752,19 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
         if (palette.length) {
             return palette[index % palette.length];
         }
-        return this.resolveFallbackColor(index);
+        return this.resolveFallbackColor(index, totalOptions);
     }
-    resolveFallbackColor(index) {
-        const defaults = ['#64748b', '#0ea5e9', '#f59e0b', '#22c55e', '#ef4444', '#14b8a6'];
-        return defaults[index % defaults.length];
+    resolveFallbackColor(index, totalOptions = 0) {
+        const normalizedTotal = Math.max(2, totalOptions);
+        return this.pipelineGradientColorByIndex(index, normalizedTotal);
+    }
+    pipelineGradientColorByIndex(index, total) {
+        const safeTotal = Math.max(2, total);
+        const ratio = Math.max(0, Math.min(1, index / (safeTotal - 1)));
+        return this.pipelineGradientColorByRatio(ratio);
+    }
+    pipelineGradientColorByRatio(ratio) {
+        return interpolateThreeStopGradientColor(this.pipelineGradientLowColor(), this.pipelineGradientMidColor(), this.pipelineGradientHighColor(), ratio);
     }
     parseColorPalette(source) {
         if (Array.isArray(source)) {
@@ -28464,6 +28845,15 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
         const text = String(value ?? '').trim();
         return text.length ? text : null;
     }
+    resolveColorToken(...values) {
+        for (const value of values) {
+            const text = this.nonEmptyText(value);
+            if (text) {
+                return text;
+            }
+        }
+        return null;
+    }
     mapRawOption(option, index) {
         if (option && typeof option === 'object') {
             const label = String(option.label ?? option.text ?? option.name ?? option.title ?? '').trim();
@@ -28604,6 +28994,9 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
       [style.--pdx-inline-pipeline-max-w.px]="inlineMaxWidthPx || null"
       [style.--pdx-inline-pipeline-panel-min-w.px]="panelMinWidthPx || null"
       [style.--pdx-inline-pipeline-panel-max-w.px]="panelMaxWidthPx || null"
+      [style.--pdx-inline-pipeline-gradient-low]="pipelineGradientLowColor()"
+      [style.--pdx-inline-pipeline-gradient-mid]="pipelineGradientMidColor()"
+      [style.--pdx-inline-pipeline-gradient-high]="pipelineGradientHighColor()"
       [matTooltip]="inlineTooltipText()"
       [matTooltipDisabled]="inlineTooltipDisabled()"
       [matTooltipPosition]="tooltipPosition()"
@@ -28689,7 +29082,12 @@ class FilterInlinePipelineStatusComponent extends SimpleBaseSelectComponent {
           </div>
 
           @if (showPipelineBar() && pipelineSegments().length) {
-            <div class="pdx-inline-pipeline-bar" role="img" [attr.aria-label]="pipelineBarAriaLabel()">
+            <div
+              class="pdx-inline-pipeline-bar"
+              role="img"
+              [style.background]="pipelineGradient()"
+              [attr.aria-label]="pipelineBarAriaLabel()"
+            >
               @for (segment of pipelineSegments(); track segment.id) {
                 <span
                   class="pdx-inline-pipeline-segment"
@@ -28809,6 +29207,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       [style.--pdx-inline-pipeline-max-w.px]="inlineMaxWidthPx || null"
       [style.--pdx-inline-pipeline-panel-min-w.px]="panelMinWidthPx || null"
       [style.--pdx-inline-pipeline-panel-max-w.px]="panelMaxWidthPx || null"
+      [style.--pdx-inline-pipeline-gradient-low]="pipelineGradientLowColor()"
+      [style.--pdx-inline-pipeline-gradient-mid]="pipelineGradientMidColor()"
+      [style.--pdx-inline-pipeline-gradient-high]="pipelineGradientHighColor()"
       [matTooltip]="inlineTooltipText()"
       [matTooltipDisabled]="inlineTooltipDisabled()"
       [matTooltipPosition]="tooltipPosition()"
@@ -28894,7 +29295,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           </div>
 
           @if (showPipelineBar() && pipelineSegments().length) {
-            <div class="pdx-inline-pipeline-bar" role="img" [attr.aria-label]="pipelineBarAriaLabel()">
+            <div
+              class="pdx-inline-pipeline-bar"
+              role="img"
+              [style.background]="pipelineGradient()"
+              [attr.aria-label]="pipelineBarAriaLabel()"
+            >
               @for (segment of pipelineSegments(); track segment.id) {
                 <span
                   class="pdx-inline-pipeline-segment"
@@ -29161,15 +29567,15 @@ class FilterInlineScorePriorityComponent extends FilterInlineRangeSliderComponen
         const visual = [];
         if (hasExplicitRanges) {
             rawBands
-                .map((band, index) => {
+                .map((band) => {
                 const start = this.scoreClampValue(this.scoreToFiniteNumber(band.start ?? band.from ?? band.min ?? band.valueStart) ?? min);
                 const end = this.scoreClampValue(this.scoreToFiniteNumber(band.end ?? band.to ?? band.max ?? band.valueEnd) ?? max);
-                return { band, index, start: Math.min(start, end), end: Math.max(start, end) };
+                return { band, start: Math.min(start, end), end: Math.max(start, end) };
             })
                 .sort((a, b) => a.start - b.start)
-                .forEach(({ band, index, start, end }) => {
+                .forEach(({ band, start, end }, sortedIndex) => {
                 const safeEnd = end === start ? this.scoreClampValue(start + this.stepValue()) : end;
-                visual.push(this.scoreBuildBandVisual(band, index, start, Math.max(start, safeEnd), min, max));
+                visual.push(this.scoreBuildBandVisual(band, sortedIndex, start, Math.max(start, safeEnd), min, max, rawBands.length));
             });
         }
         else {
@@ -29179,7 +29585,7 @@ class FilterInlineScorePriorityComponent extends FilterInlineRangeSliderComponen
                 const end = index === rawBands.length - 1
                     ? max
                     : min + (span * (index + 1)) / rawBands.length;
-                visual.push(this.scoreBuildBandVisual(band, index, start, end, min, max));
+                visual.push(this.scoreBuildBandVisual(band, index, start, end, min, max, rawBands.length));
             });
         }
         return visual;
@@ -29189,7 +29595,10 @@ class FilterInlineScorePriorityComponent extends FilterInlineRangeSliderComponen
         if (!bands.length) {
             const md = this.metadata() || {};
             const fallback = String(md.scoreEmptyGradient ?? md.priorityEmptyGradient ?? '').trim();
-            return fallback || 'linear-gradient(90deg, #6b7280 0%, #9ca3af 100%)';
+            if (fallback.length) {
+                return fallback;
+            }
+            return `linear-gradient(90deg, ${this.scoreGradientLowColor()} 0%, ${this.scoreGradientMidColor()} 50%, ${this.scoreGradientHighColor()} 100%)`;
         }
         return `linear-gradient(90deg, ${bands
             .map((band) => `${band.color} ${band.startPct.toFixed(2)}%, ${band.color} ${band.endPct.toFixed(2)}%`)
@@ -29376,7 +29785,7 @@ class FilterInlineScorePriorityComponent extends FilterInlineRangeSliderComponen
         }
         return { start, end };
     }
-    scoreBuildBandVisual(rawBand, index, start, end, min, max) {
+    scoreBuildBandVisual(rawBand, index, start, end, min, max, totalBands) {
         const safeStart = this.scoreClampValue(start);
         const safeEnd = this.scoreClampValue(end);
         const label = String(rawBand.label ?? rawBand.name ?? rawBand.title ?? '').trim() ||
@@ -29384,7 +29793,7 @@ class FilterInlineScorePriorityComponent extends FilterInlineRangeSliderComponen
         const id = String(rawBand.id ?? rawBand.key ?? label.toLowerCase().replace(/\s+/g, '-')).trim() ||
             `score-band-${index}`;
         const color = String(rawBand.color ?? rawBand.toneColor ?? rawBand.backgroundColor ?? '').trim() ||
-            this.scoreFallbackColor(index);
+            this.scoreFallbackColor(index, totalBands);
         const startPct = this.scoreRangeToPct(safeStart, min, max);
         const endPct = this.scoreRangeToPct(safeEnd, min, max);
         return {
@@ -29398,13 +29807,13 @@ class FilterInlineScorePriorityComponent extends FilterInlineRangeSliderComponen
             centerPct: (startPct + endPct) / 2,
         };
     }
-    scoreFallbackColor(index) {
+    scoreFallbackColor(index, totalBands = 0) {
         const md = this.metadata() || {};
         const configured = this.parseColorList(md.scorePalette ?? md.priorityPalette ?? md.palette);
-        const palette = configured.length
-            ? configured
-            : ['#16a34a', '#f59e0b', '#0ea5e9', '#ef4444', '#8b5cf6', '#14b8a6'];
-        return palette[index % palette.length];
+        if (configured.length) {
+            return configured[index % configured.length];
+        }
+        return this.scoreGradientColorByIndex(index, Math.max(2, totalBands));
     }
     scoreParseBandsSource(source) {
         if (Array.isArray(source)) {
@@ -29514,7 +29923,27 @@ class FilterInlineScorePriorityComponent extends FilterInlineRangeSliderComponen
     scoreSelectedFallbackColor() {
         const md = this.metadata() || {};
         const configured = String(md.scoreValueFallbackColor ?? md.priorityValueFallbackColor ?? '').trim();
-        return configured || '#334155';
+        return configured || this.scoreGradientMidColor();
+    }
+    scoreGradientLowColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.scoreGradientLowColor, md.priorityGradientLowColor, md.scoreToneLowColor, md.priorityToneLowColor) || '#16a34a';
+    }
+    scoreGradientMidColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.scoreGradientMidColor, md.priorityGradientMidColor, md.scoreToneMidColor, md.priorityToneMidColor) || '#f59e0b';
+    }
+    scoreGradientHighColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.scoreGradientHighColor, md.priorityGradientHighColor, md.scoreToneHighColor, md.priorityToneHighColor) || '#ef4444';
+    }
+    scoreGradientColorByIndex(index, total) {
+        const safeTotal = Math.max(2, total);
+        const ratio = safeTotal <= 1 ? 0 : index / (safeTotal - 1);
+        return this.scoreGradientColorByRatio(ratio);
+    }
+    scoreGradientColorByRatio(ratio) {
+        return interpolateThreeStopGradientColor(this.scoreGradientLowColor(), this.scoreGradientMidColor(), this.scoreGradientHighColor(), ratio);
     }
     resolveScoreText(configKey, fallback, ...legacyKeys) {
         const md = this.metadata() || {};
@@ -29591,6 +30020,15 @@ class FilterInlineScorePriorityComponent extends FilterInlineRangeSliderComponen
         const text = String(value ?? '').trim();
         return text.length ? text : null;
     }
+    resolveColorToken(...values) {
+        for (const value of values) {
+            const text = String(value ?? '').trim();
+            if (text.length) {
+                return text;
+            }
+        }
+        return null;
+    }
     scoreRecalculateInlineSizeBounds() {
         const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 1280;
         const isMobile = viewportWidth <= 768;
@@ -30309,6 +30747,24 @@ class FilterInlineRelativePeriodComponent extends SimpleBaseSelectComponent {
         const percent = Math.round(this.progressPercent());
         return `${this.placeholderText()}: ${percent}%`;
     }
+    progressGradientLowColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.relativePeriodProgressGradientLowColor, md.relativePeriodProgressLowColor) || '#64748b';
+    }
+    progressGradientMidColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.relativePeriodProgressGradientMidColor, md.relativePeriodProgressMidColor) || '#0ea5e9';
+    }
+    progressGradientHighColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.relativePeriodProgressGradientHighColor, md.relativePeriodProgressHighColor) || '#22c55e';
+    }
+    progressGradient() {
+        const low = this.progressGradientLowColor();
+        const mid = this.progressGradientMidColor();
+        const high = this.progressGradientHighColor();
+        return `linear-gradient(90deg, ${low} 0%, ${mid} 50%, ${high} 100%)`;
+    }
     cardColumns() {
         const md = this.metadata() || {};
         const configured = Number(md.relativePeriodColumns ?? md.columns);
@@ -30549,6 +31005,15 @@ class FilterInlineRelativePeriodComponent extends SimpleBaseSelectComponent {
         const text = String(value ?? '').trim();
         return text.length ? text : null;
     }
+    resolveColorToken(...values) {
+        for (const value of values) {
+            const text = String(value ?? '').trim();
+            if (text.length) {
+                return text;
+            }
+        }
+        return null;
+    }
     mapRawOption(option, index) {
         if (option && typeof option === 'object') {
             const label = String(option.label ?? option.text ?? option.name ?? option.title ?? '').trim();
@@ -30682,6 +31147,9 @@ class FilterInlineRelativePeriodComponent extends SimpleBaseSelectComponent {
       [style.--pdx-inline-relative-max-w.px]="inlineMaxWidthPx || null"
       [style.--pdx-inline-relative-panel-min-w.px]="panelMinWidthPx || null"
       [style.--pdx-inline-relative-panel-max-w.px]="panelMaxWidthPx || null"
+      [style.--pdx-inline-relative-progress-gradient-low]="progressGradientLowColor()"
+      [style.--pdx-inline-relative-progress-gradient-mid]="progressGradientMidColor()"
+      [style.--pdx-inline-relative-progress-gradient-high]="progressGradientHighColor()"
       [matTooltip]="inlineTooltipText()"
       [matTooltipDisabled]="inlineTooltipDisabled()"
       [matTooltipPosition]="tooltipPosition()"
@@ -30769,7 +31237,11 @@ class FilterInlineRelativePeriodComponent extends SimpleBaseSelectComponent {
           @if (showProgressBar()) {
             <div class="pdx-inline-relative-progress" role="img" [attr.aria-label]="progressAriaLabel()">
               <span class="pdx-inline-relative-progress-track">
-                <span class="pdx-inline-relative-progress-fill" [style.width.%]="progressPercent()"></span>
+                <span
+                  class="pdx-inline-relative-progress-fill"
+                  [style.width.%]="progressPercent()"
+                  [style.background]="progressGradient()"
+                ></span>
               </span>
               <div class="pdx-inline-relative-progress-labels" aria-hidden="true">
                 <span>{{ progressStartLabel() }}</span>
@@ -30841,6 +31313,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       [style.--pdx-inline-relative-max-w.px]="inlineMaxWidthPx || null"
       [style.--pdx-inline-relative-panel-min-w.px]="panelMinWidthPx || null"
       [style.--pdx-inline-relative-panel-max-w.px]="panelMaxWidthPx || null"
+      [style.--pdx-inline-relative-progress-gradient-low]="progressGradientLowColor()"
+      [style.--pdx-inline-relative-progress-gradient-mid]="progressGradientMidColor()"
+      [style.--pdx-inline-relative-progress-gradient-high]="progressGradientHighColor()"
       [matTooltip]="inlineTooltipText()"
       [matTooltipDisabled]="inlineTooltipDisabled()"
       [matTooltipPosition]="tooltipPosition()"
@@ -30928,7 +31403,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           @if (showProgressBar()) {
             <div class="pdx-inline-relative-progress" role="img" [attr.aria-label]="progressAriaLabel()">
               <span class="pdx-inline-relative-progress-track">
-                <span class="pdx-inline-relative-progress-fill" [style.width.%]="progressPercent()"></span>
+                <span
+                  class="pdx-inline-relative-progress-fill"
+                  [style.width.%]="progressPercent()"
+                  [style.background]="progressGradient()"
+                ></span>
               </span>
               <div class="pdx-inline-relative-progress-labels" aria-hidden="true">
                 <span>{{ progressStartLabel() }}</span>
@@ -31203,7 +31682,8 @@ class FilterInlineSentimentComponent extends SimpleBaseSelectComponent {
         return `${option.label}. ${option.subtitle}`;
     }
     sentimentOptions() {
-        return this.options().map((option, index) => this.toVisualOption(option, index));
+        const optionPool = this.options();
+        return optionPool.map((option, index) => this.toVisualOption(option, index, optionPool.length));
     }
     selectedOptions() {
         return this.sentimentOptions().filter((option) => option.selected);
@@ -31298,7 +31778,7 @@ class FilterInlineSentimentComponent extends SimpleBaseSelectComponent {
             return null;
         }
     }
-    toVisualOption(option, index) {
+    toVisualOption(option, index, totalOptions = 0) {
         const raw = option;
         return {
             id: String(raw.id ?? raw.key ?? `sentiment-option-${index}`),
@@ -31306,7 +31786,7 @@ class FilterInlineSentimentComponent extends SimpleBaseSelectComponent {
                 `Opcao ${index + 1}`,
             subtitle: String(raw.subtitle ?? raw.description ?? '').trim(),
             emoji: this.resolveOptionEmoji(raw),
-            color: this.resolveOptionColor(raw, index),
+            color: this.resolveOptionColor(raw, index, totalOptions),
             value: option.value,
             disabled: !!option.disabled,
             selected: this.selectedValues().some((entry) => this.equalsOptionValue(entry, option.value)),
@@ -31324,7 +31804,7 @@ class FilterInlineSentimentComponent extends SimpleBaseSelectComponent {
         const fallback = String(raw.emoji ?? raw.iconText ?? '').trim();
         return fallback || '🙂';
     }
-    resolveOptionColor(raw, index) {
+    resolveOptionColor(raw, index, totalOptions = 0) {
         const md = this.metadata() || {};
         const customKey = this.resolveMetadataKey(md.sentimentColorKey, md.optionColorKey);
         if (customKey) {
@@ -31341,8 +31821,15 @@ class FilterInlineSentimentComponent extends SimpleBaseSelectComponent {
         if (palette.length) {
             return palette[index % palette.length];
         }
-        const defaults = ['#d32f2f', '#f59e0b', '#9ca3af', '#34d399', '#14b8a6'];
-        return defaults[index % defaults.length];
+        return this.sentimentGradientColorByIndex(index, Math.max(2, totalOptions));
+    }
+    sentimentGradientColorByIndex(index, totalOptions) {
+        const safeTotal = Math.max(2, totalOptions);
+        const ratio = safeTotal <= 1 ? 0 : index / (safeTotal - 1);
+        return this.sentimentGradientColorByRatio(ratio);
+    }
+    sentimentGradientColorByRatio(ratio) {
+        return interpolateThreeStopGradientColor(this.sentimentGradientLowColor(), this.sentimentGradientMidColor(), this.sentimentGradientHighColor(), ratio);
     }
     parseColorList(source) {
         if (Array.isArray(source)) {
@@ -31451,6 +31938,15 @@ class FilterInlineSentimentComponent extends SimpleBaseSelectComponent {
         const text = String(value ?? '').trim();
         return text.length ? text : null;
     }
+    resolveColorToken(...values) {
+        for (const value of values) {
+            const text = String(value ?? '').trim();
+            if (text.length) {
+                return text;
+            }
+        }
+        return null;
+    }
     mapRawOption(option, index) {
         if (option && typeof option === 'object') {
             const label = String(option.label ?? option.text ?? option.name ?? option.title ?? '').trim();
@@ -31570,6 +32066,24 @@ class FilterInlineSentimentComponent extends SimpleBaseSelectComponent {
     multipleMode() {
         return this.multiple();
     }
+    sentimentGradientLowColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.sentimentGradientLowColor, md.sentimentToneLowColor) || '#ef4444';
+    }
+    sentimentGradientMidColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.sentimentGradientMidColor, md.sentimentToneMidColor) || '#f59e0b';
+    }
+    sentimentGradientHighColor() {
+        const md = this.metadata() || {};
+        return this.resolveColorToken(md.sentimentGradientHighColor, md.sentimentToneHighColor) || '#22c55e';
+    }
+    sentimentGradient() {
+        const low = this.sentimentGradientLowColor();
+        const mid = this.sentimentGradientMidColor();
+        const high = this.sentimentGradientHighColor();
+        return `linear-gradient(90deg, ${low} 0%, ${mid} 50%, ${high} 100%)`;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: FilterInlineSentimentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: FilterInlineSentimentComponent, isStandalone: true, selector: "pdx-filter-inline-sentiment", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode" }, host: { listeners: { "window:resize": "onViewportResize()", "document:keydown.escape": "onDocumentEscape()" }, properties: { "class": "componentCssClasses()", "class.praxis-disabled": "disabledMode", "style.display": "visible ? \"inline-block\" : \"none\"", "style.width": "\"auto\"", "style.maxWidth": "\"100%\"", "attr.data-field-type": "\"filter-sentiment-inline\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
             {
@@ -31584,6 +32098,9 @@ class FilterInlineSentimentComponent extends SimpleBaseSelectComponent {
       [style.--pdx-inline-sentiment-max-w.px]="inlineMaxWidthPx || null"
       [style.--pdx-inline-sentiment-panel-min-w.px]="panelMinWidthPx || null"
       [style.--pdx-inline-sentiment-panel-max-w.px]="panelMaxWidthPx || null"
+      [style.--pdx-inline-sentiment-gradient-low]="sentimentGradientLowColor()"
+      [style.--pdx-inline-sentiment-gradient-mid]="sentimentGradientMidColor()"
+      [style.--pdx-inline-sentiment-gradient-high]="sentimentGradientHighColor()"
       [matTooltip]="inlineTooltipText()"
       [matTooltipDisabled]="inlineTooltipDisabled()"
       [matTooltipPosition]="tooltipPosition()"
@@ -31669,7 +32186,12 @@ class FilterInlineSentimentComponent extends SimpleBaseSelectComponent {
           </div>
 
           @if (showSentimentBar() && sentimentOptions().length) {
-            <div class="pdx-inline-sentiment-bar" role="img" [attr.aria-label]="sentimentBarAriaLabel()">
+            <div
+              class="pdx-inline-sentiment-bar"
+              role="img"
+              [style.background]="sentimentGradient()"
+              [attr.aria-label]="sentimentBarAriaLabel()"
+            >
               @for (option of sentimentOptions(); track option.id) {
                 <span
                   class="pdx-inline-sentiment-segment"
@@ -31738,6 +32260,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       [style.--pdx-inline-sentiment-max-w.px]="inlineMaxWidthPx || null"
       [style.--pdx-inline-sentiment-panel-min-w.px]="panelMinWidthPx || null"
       [style.--pdx-inline-sentiment-panel-max-w.px]="panelMaxWidthPx || null"
+      [style.--pdx-inline-sentiment-gradient-low]="sentimentGradientLowColor()"
+      [style.--pdx-inline-sentiment-gradient-mid]="sentimentGradientMidColor()"
+      [style.--pdx-inline-sentiment-gradient-high]="sentimentGradientHighColor()"
       [matTooltip]="inlineTooltipText()"
       [matTooltipDisabled]="inlineTooltipDisabled()"
       [matTooltipPosition]="tooltipPosition()"
@@ -31823,7 +32348,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           </div>
 
           @if (showSentimentBar() && sentimentOptions().length) {
-            <div class="pdx-inline-sentiment-bar" role="img" [attr.aria-label]="sentimentBarAriaLabel()">
+            <div
+              class="pdx-inline-sentiment-bar"
+              role="img"
+              [style.background]="sentimentGradient()"
+              [attr.aria-label]="sentimentBarAriaLabel()"
+            >
               @for (option of sentimentOptions(); track option.id) {
                 <span
                   class="pdx-inline-sentiment-segment"