@juspay/svelte-ui-components 2.75.0 → 2.76.0

package/dist/LineChart/LineChart.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { LineChartProperties, LineChartTooltipContext } from './properties';
+  import type { ChartHighlightAPI } from '../_chart/highlight';
   import { onMount } from 'svelte';
   import ChartContainer from '../_chart/ChartContainer.svelte';
   import Axis from '../_chart/Axis.svelte';
@@ -25,6 +26,8 @@
     curve = 'monotone',
     gradientFill = false,
     fillOpacity = 0.3,
+    showArea = false,
+    areaGradient,
     showDots = true,
     showValues = false,
     dotRadius = 4,
@@ -37,11 +40,14 @@
     yDomain,
     xAxisLabel,
     yAxisLabel,
+    xAxisCategories,
     xTickFormat,
     yTickFormat,
     aspectRatio = 16 / 9,
     tooltipSnippet,
     empty,
+    highlightedIndex = null,
+    onChartReady,
     onpointclick,
     onpointhover,
     testId,
@@ -54,11 +60,42 @@
   let chartWidth = $state(0);
   let chartHeight = $state(0);
   let hovered = $state<{ si: number; pi: number } | null>(null);
+  // internalHighlight holds the index driven by the ChartHighlightAPI.highlight() call.
+  // The effective highlighted index merges this with the prop-driven highlightedIndex.
+  let internalHighlight = $state<number | null>(null);
   let mouseX = $state(0);
   let mouseY = $state(0);
 
+  // Effective highlighted index: the declarative prop takes precedence when it is a non-null
+  // number; otherwise the imperative API value (internalHighlight) is used. This lets callers
+  // mix both approaches — e.g. default to null so the API drives highlights, then override with
+  // a specific prop value when a controlled index is needed.
+  let effectiveHighlight = $derived(
+    typeof highlightedIndex === 'number' ? highlightedIndex : internalHighlight
+  );
+
   onMount(() => {
     uid = Math.random().toString(36).slice(2, 9);
+
+    const api: ChartHighlightAPI = {
+      type: 'line-chart',
+      highlight: (index) => {
+        internalHighlight = index;
+      },
+      getCategories: () => {
+        if (xAxisCategories && xAxisCategories.length > 0) {
+          return xAxisCategories;
+        }
+        // Fall back to the x-values of the longest series as string labels.
+        const reference = series.reduce(
+          (longest, s) => (s.data.length > longest.data.length ? s : longest),
+          series[0] ?? { data: [] }
+        );
+        return reference.data.map((d) => String(d.x));
+      }
+    };
+
+    onChartReady?.(api);
   });
 
   // ── Layout ─────────────────────────────────────────────────────
@@ -108,6 +145,23 @@
     series.map((s, i) => ({ label: s.name, color: s.color ?? getColor(i) }))
   );
 
+  // ── Category tick formatter ────────────────────────────────────
+
+  // When xAxisCategories is supplied we build a formatter that maps the numeric
+  // x-value (1-based index used in the data) to the corresponding category label.
+  let resolvedXTickFormat = $derived.by(() => {
+    if (xAxisCategories && xAxisCategories.length > 0) {
+      const categories = xAxisCategories;
+      return (value: number | string): string => {
+        const numericValue = typeof value === 'string' ? parseFloat(value) : value;
+        // x values are 1-based indices; category array is 0-based.
+        const categoryIndex = Math.round(numericValue) - 1;
+        return categories[categoryIndex] ?? String(value);
+      };
+    }
+    return xTickFormat;
+  });
+
   // ── Tooltip ────────────────────────────────────────────────────
 
   let hoveredPoint = $derived(
@@ -118,6 +172,24 @@
     hovered === null ? null : (lines[hovered.si]?.points[hovered.pi]?.x ?? null)
   );
 
+  // When a highlight index is active (imperative or prop), show the vertical
+  // crosshair at that point even without a mouse hover.
+  let highlightLineX = $derived.by<number | null>(() => {
+    if (effectiveHighlight === null) {
+      return null;
+    }
+    // Use the first series that has a point at this index.
+    for (const line of lines) {
+      const point = line.points[effectiveHighlight];
+      if (point) {
+        return point.x;
+      }
+    }
+    return null;
+  });
+
+  let activeLineX = $derived(hoverLineX ?? highlightLineX);
+
   let tooltipContext = $derived.by<LineChartTooltipContext | null>(() => {
     if (hovered === null || hoveredPoint === null) {
       return null;
@@ -140,8 +212,11 @@
     if (tooltipContext === null) {
       return null;
     }
+    const xLabel = resolvedXTickFormat
+      ? resolvedXTickFormat(tooltipContext.x)
+      : `x: ${formatNumber(tooltipContext.x)}`;
     return {
-      title: xTickFormat ? xTickFormat(tooltipContext.x) : `x: ${formatNumber(tooltipContext.x)}`,
+      title: xLabel,
       items: tooltipContext.points.map((p) => ({
         label: p.name,
         value: formatNumber(p.y),
@@ -150,18 +225,51 @@
     };
   });
 
+  // ── Highlight dim logic ────────────────────────────────────────
+
+  // A point index is "dimmed" when the highlight system is active (hover or
+  // imperative highlight) and the point is not the active one.
+  const isDotDimmed = (si: number, pi: number): boolean => {
+    // Hover interaction takes precedence over imperative highlight.
+    if (hovered !== null) {
+      return hovered.si !== si || hovered.pi !== pi;
+    }
+    if (effectiveHighlight !== null) {
+      return pi !== effectiveHighlight;
+    }
+    return false;
+  };
+
+  const isLineDimmed = (si: number): boolean => {
+    if (hovered !== null) {
+      return hovered.si !== si;
+    }
+    // When only a point index is highlighted (no series index), dim no lines.
+    return false;
+  };
+
+  const isHighlightedDot = (si: number, pi: number): boolean => {
+    if (hovered !== null) {
+      return hovered.si === si && hovered.pi === pi;
+    }
+    if (effectiveHighlight !== null) {
+      return pi === effectiveHighlight;
+    }
+    return false;
+  };
+
   // ── Interactions ───────────────────────────────────────────────
 
-  function trackMouse(e: MouseEvent) {
+  const trackMouse = (e: MouseEvent): void => {
     if (containerEl === null) {
       return;
     }
     const rect = containerEl.getBoundingClientRect();
     mouseX = e.clientX - rect.left;
     mouseY = e.clientY - rect.top;
-  }
+  };
 
-  function findNearest(plotX: number, plotY: number): { si: number; pi: number } | null {
+  const findNearest = (plotX: number, plotY: number): { si: number; pi: number } | null => {
     if (series.length === 0) {
       return null;
     }
@@ -196,9 +304,9 @@
       }
     }
     return { si: nearestSi, pi: nearestPi };
-  }
+  };
 
-  function handleOverlayMove(e: MouseEvent) {
+  const handleOverlayMove = (e: MouseEvent): void => {
     trackMouse(e);
     const plotX = mouseX - dims.margin.left;
     const plotY = mouseY - dims.margin.top;
@@ -212,16 +320,16 @@
       const point = series[next.si].data[next.pi];
       onpointhover?.({ seriesIndex: next.si, pointIndex: next.pi, point });
     }
-  }
+  };
 
-  function handleLeave() {
+  const handleLeave = (): void => {
     if (hovered !== null) {
       hovered = null;
       onpointhover?.(null);
     }
-  }
+  };
 
-  function handleClick() {
+  const handleClick = (): void => {
     if (hovered === null) {
       return;
     }
@@ -229,7 +337,7 @@
     if (point) {
       onpointclick?.({ seriesIndex: hovered.si, pointIndex: hovered.pi, point });
     }
-  }
+  };
 </script>
 
 <div
@@ -245,31 +353,54 @@
     {/if}
 
     <ChartContainer bind:width={chartWidth} bind:height={chartHeight} {aspectRatio}>
-      {#if gradientFill}
+      {#if gradientFill || showArea}
         <defs>
           {#each lines as line, si (si)}
-            <linearGradient
-              id="line-grad-{uid}-{si}"
-              x1="0"
-              y1="0"
-              x2="0"
-              y2={dims.innerHeight}
-              gradientUnits="userSpaceOnUse"
-            >
-              <!-- The gradient top stop is fillOpacity + 0.3 (clamped to 1), giving a richer
-                   anchor at the top that fades to transparent at the bottom. This intentionally
-                   exceeds the base fillOpacity so that gradient-fill areas appear more vivid
-                   than a flat solid-fill at fillOpacity alone. -->
-              <stop
-                offset="0%"
-                stop-color={line.color}
-                stop-opacity={Math.min(
-                  (hovered?.si === si ? fillOpacity + 0.2 : fillOpacity) + 0.3,
-                  1
-                )}
-              />
-              <stop offset="100%" stop-color={line.color} stop-opacity={0} />
-            </linearGradient>
+            {#if gradientFill}
+              <linearGradient
+                id="line-grad-{uid}-{si}"
+                x1="0"
+                y1="0"
+                x2="0"
+                y2={dims.innerHeight}
+                gradientUnits="userSpaceOnUse"
+              >
+                <!-- The gradient top stop is fillOpacity + 0.3 (clamped to 1), giving a richer
+                     anchor at the top that fades to transparent at the bottom. This intentionally
+                     exceeds the base fillOpacity so that gradient-fill areas appear more vivid
+                     than a flat solid-fill at fillOpacity alone. -->
+                <stop
+                  offset="0%"
+                  stop-color={line.color}
+                  stop-opacity={Math.min(
+                    (hovered?.si === si ? fillOpacity + 0.2 : fillOpacity) + 0.3,
+                    1
+                  )}
+                />
+                <stop offset="100%" stop-color={line.color} stop-opacity={0} />
+              </linearGradient>
+            {/if}
+            {#if showArea}
+              <linearGradient
+                id="line-area-{uid}-{si}"
+                x1="0"
+                y1="0"
+                x2="0"
+                y2={dims.innerHeight}
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop
+                  offset="0%"
+                  stop-color={areaGradient ? areaGradient.from : line.color}
+                  stop-opacity={areaGradient ? 1 : 0.35}
+                />
+                <stop
+                  offset="100%"
+                  stop-color={areaGradient ? areaGradient.to : line.color}
+                  stop-opacity={areaGradient ? 1 : 0}
+                />
+              </linearGradient>
+            {/if}
           {/each}
         </defs>
       {/if}
@@ -286,12 +417,24 @@
         {/if}
         {#if showXAxis}
           <g transform="translate(0, {dims.innerHeight})">
-            <Axis orientation="bottom" scale={xScale} label={xAxisLabel} tickFormat={xTickFormat} />
+            <Axis
+              orientation="bottom"
+              scale={xScale}
+              label={xAxisLabel}
+              tickFormat={resolvedXTickFormat}
+            />
           </g>
         {/if}
 
         {#each lines as line, si (si)}
-          {#if gradientFill}
+          {#if showArea}
+            <path
+              class="line-area-fill"
+              class:dimmed={isLineDimmed(si)}
+              d={line.areaD}
+              fill="url(#line-area-{uid}-{si})"
+            />
+          {:else if gradientFill}
             <path
               class="line-area-fill"
               class:dimmed={hovered !== null && hovered.si !== si}
@@ -301,7 +444,7 @@
           {/if}
           <path
             class="line-path"
-            class:dimmed={hovered !== null && hovered.si !== si}
+            class:dimmed={isLineDimmed(si)}
             d={line.path}
             stroke={line.color}
             stroke-width={strokeWidth}
@@ -310,7 +453,7 @@
           {#if line.points.length === 1 && !showDots}
             <circle
               class="single-point"
-              class:dimmed={hovered !== null && hovered.si !== si}
+              class:dimmed={isLineDimmed(si)}
               cx={line.points[0].x}
               cy={line.points[0].y}
               r={dotRadius * 1.5}
@@ -321,10 +464,11 @@
             {#each line.points as point, pi (pi)}
               <circle
                 class="dot"
-                class:dimmed={hovered !== null && hovered.si !== si}
+                class:dimmed={isDotDimmed(si, pi)}
+                class:highlighted={isHighlightedDot(si, pi)}
                 cx={point.x}
                 cy={point.y}
-                r={hovered?.si === si && hovered?.pi === pi ? dotRadius * 1.5 : dotRadius}
+                r={isHighlightedDot(si, pi) ? dotRadius * 1.5 : dotRadius}
                 fill={line.color}
               />
             {/each}
@@ -342,8 +486,8 @@
           {/if}
         {/each}
 
-        {#if hoverLineX !== null}
-          <line class="hover-line" x1={hoverLineX} x2={hoverLineX} y1={0} y2={dims.innerHeight} />
+        {#if activeLineX !== null}
+          <line class="hover-line" x1={activeLineX} x2={activeLineX} y1={0} y2={dims.innerHeight} />
         {/if}
 
         <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -412,6 +556,10 @@
   .dot.dimmed {
     opacity: var(--linechart-dimmed-opacity, 0.2);
   }
+  .dot.highlighted {
+    stroke: var(--linechart-highlight-ring-color, #fff);
+    stroke-width: var(--linechart-highlight-ring-width, 2.5);
+  }
   .point-value {
     fill: var(--linechart-value-color, #333);
     font-size: var(--linechart-value-font-size, 11px);

package/dist/LineChart/properties.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { CurveType } from '../_chart/types';
+import type { ChartHighlightAPI } from '../_chart/highlight';
 export type LineChartDataPoint = {
     x: number;
     y: number;
@@ -19,33 +20,95 @@ export type LineChartTooltipContext = {
         label?: string;
     }>;
 };
+/**
+ * Colours used for the vertical gradient fill rendered under the line when
+ * `showArea` is true. Both values accept any valid CSS colour string.
+ */
+export type LineChartAreaGradient = {
+    /** Colour at the top of the gradient (closest to the line). */
+    from: string;
+    /** Colour at the bottom of the gradient (at the baseline). */
+    to: string;
+};
 export type LineChartProperties = MandatoryLineChartProperties & OptionalLineChartProperties & LineChartEventProperties;
 export type MandatoryLineChartProperties = {
+    /** Array of `{name, data, color?}`. Each series renders as a separate line. */
     series: LineChartSeries[];
 };
 export type OptionalLineChartProperties = {
+    /** Interpolation between points. `'spline'` is an alias for `'monotone'`. */
     curve?: CurveType;
+    /**
+     * When true, renders a gradient fill under each line using the series colour,
+     * fading from `fillOpacity+0.3` at the top to transparent at the bottom.
+     * For per-series custom gradient colours use `showArea` + `areaGradient` instead.
+     */
     gradientFill?: boolean;
+    /** Base opacity of the gradient fill (0–1). Only used when `gradientFill` is true. */
     fillOpacity?: number;
+    /**
+     * When true, renders a solid filled area under each line. The fill colour is
+     * taken from `areaGradient` when provided, otherwise falls back to a
+     * transparent-to-series-colour vertical gradient.
+     */
+    showArea?: boolean;
+    /**
+     * Custom colours for the filled area rendered when `showArea` is true.
+     * Applies the same gradient to every series; supply a per-series colour via
+     * each series' own `color` field if distinct fills are needed.
+     */
+    areaGradient?: LineChartAreaGradient;
+    /** Whether to render dots at each data point. Hover still works via overlay when `false`. */
     showDots?: boolean;
+    /** Whether to render text labels with the y-value at each data point. */
     showValues?: boolean;
+    /** Radius of data point dots in pixels. Hovered or highlighted dot is 1.5× this. */
     dotRadius?: number;
+    /** Width of line strokes in pixels. */
     strokeWidth?: number;
+    /** Whether to show dashed gridlines across the Y axis. */
     showGridlines?: boolean;
+    /** Whether to render the X axis. */
     showXAxis?: boolean;
+    /** Whether to render the Y axis. */
     showYAxis?: boolean;
+    /** Whether to render the legend. Only shown when there are multiple series. */
     showLegend?: boolean;
+    /** Fixed `[min, max]` for the X axis. When omitted the domain is derived from data. */
     xDomain?: [number, number];
+    /** Fixed `[min, max]` for the Y axis. When omitted the domain is derived from data. */
     yDomain?: [number, number];
+    /** Text label below the X axis. */
     xAxisLabel?: string;
+    /** Text label beside the Y axis (rotated). */
     yAxisLabel?: string;
+    /**
+     * String category labels, one per unique x-index (parallel array to the
+     * numeric x values used in `series[n].data`). When provided these labels
+     * replace the raw numeric x values in the X-axis tick labels and tooltips.
+     * Index 0 maps to x=1, index 1 maps to x=2, and so on.
+     */
+    xAxisCategories?: string[];
+    /** Formatter for X axis tick labels. */
     xTickFormat?: (value: number | string) => string;
+    /** Formatter for Y axis tick labels. */
     yTickFormat?: (value: number | string) => string;
+    /** Width-to-height ratio for the chart. */
     aspectRatio?: number;
+    /** Custom tooltip. Receives `{x, points: [{name, y, color, label?}]}`. */
     tooltipSnippet?: Snippet<[LineChartTooltipContext]>;
+    /** Content rendered when all series are empty. */
     empty?: Snippet;
+    /** Value for the data-pw attribute on the chart container. */
     testId?: string;
+    /** CSS class string applied to the top-level element. */
     classes?: string;
+    /**
+     * Zero-based point index to highlight imperatively. When set, the marker at
+     * that index is emphasised and all others are dimmed. Pass `null` to clear.
+     * Use `onChartReady` for the imperative API equivalent.
+     */
+    highlightedIndex?: number | null;
 };
 export type LineChartEventProperties = {
     onpointclick?: (event: {
@@ -58,4 +121,10 @@ export type LineChartEventProperties = {
         pointIndex: number;
         point: LineChartDataPoint;
     } | null) => void;
+    /**
+     * Called once after the chart mounts, handing back a `ChartHighlightAPI`
+     * so an external orchestrator (e.g. voice narration sync) can drive point
+     * highlighting without knowledge of the chart's internal state.
+     */
+    onChartReady?: (api: ChartHighlightAPI) => void;
 };

package/dist/PieChart/PieChart.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import type { PieChartProperties } from './properties';
   import ChartContainer from '../_chart/ChartContainer.svelte';
   import ChartTooltip from '../_chart/ChartTooltip.svelte';
   import Legend from '../_chart/Legend.svelte';
+  import DeltaIndicator from '../DeltaIndicator/DeltaIndicator.svelte';
   import { arcPath } from '../_chart/paths';
   import { computePieLayout } from '../_chart/geometry';
   import { getColor } from '../_chart/colors';
@@ -31,7 +33,11 @@
     classes,
     semiCircle = false,
     legendShowValues = false,
-    percentDecimals = 0
+    percentDecimals = 0,
+    onChartReady,
+    highlightedIndex = null,
+    changePercentage,
+    changeInvertColors = false
   }: PieChartProperties = $props();
 
   // ── State ──────────────────────────────────────────────────────
@@ -40,31 +46,40 @@
   let chartWidth = $state(0);
   let chartHeight = $state(0);
   let hoveredIndex = $state<number | null>(null);
+  let programmaticIndex = $state<number | null>(null);
   let mouseX = $state(0);
   let mouseY = $state(0);
 
-  // Aspect ratio read from --piechart-semi-aspect-ratio CSS variable.
-  // Uses $effect so it re-reads whenever containerEl binds or semiCircle changes
-  // (e.g. media-query theme switch), not just on initial mount.
+  // ── Highlight API ──────────────────────────────────────────────
+
+  // Aspect ratio read from the --piechart-semi-aspect-ratio CSS variable on mount.
   let semiAspectRatioCssVar = $state(2);
 
-  // eslint-disable-next-line no-restricted-syntax
-  $effect(() => {
-    // Track semiCircle and containerEl so the effect re-runs when either changes.
-    void semiCircle;
-    void containerEl;
-    if (typeof window === 'undefined' || containerEl === null) {
-      return;
-    }
-    const rawValue = getComputedStyle(containerEl)
-      .getPropertyValue('--piechart-semi-aspect-ratio')
-      .trim();
-    const parsed = parseFloat(rawValue);
-    if (!Number.isNaN(parsed) && parsed > 0) {
-      semiAspectRatioCssVar = parsed;
+  onMount(() => {
+    onChartReady?.({
+      highlight: (index) => {
+        programmaticIndex = index;
+      },
+      getCategories: () => data.map((d) => d.label),
+      type: 'donut-chart'
+    });
+
+    if (typeof window !== 'undefined' && containerEl !== null) {
+      const rawValue = getComputedStyle(containerEl)
+        .getPropertyValue('--piechart-semi-aspect-ratio')
+        .trim();
+      const parsed = parseFloat(rawValue);
+      if (!Number.isNaN(parsed) && parsed > 0) {
+        semiAspectRatioCssVar = parsed;
+      }
     }
   });
 
+  // ── Active index ───────────────────────────────────────────────
+  // Precedence: mouse hover > declarative highlightedIndex prop > imperative API.
+
+  let activeIndex = $derived<number | null>(hoveredIndex ?? highlightedIndex ?? programmaticIndex);
+
   // ── Layout ─────────────────────────────────────────────────────
 
   let format = $derived(valueFormat ?? formatNumber);
@@ -146,6 +161,10 @@
 
   // ── Tooltip ────────────────────────────────────────────────────
 
+  // Tooltip visibility tracks hover only. activeIndex also covers declarative/imperative
+  // highlights, but those arrive without mouse coordinates, so a tooltip driven by them
+  // would render at the top-left (mouseX/mouseY still 0). Highlight styling uses
+  // activeIndex; the tooltip stays gated on hoveredIndex.
   let tooltipData = $derived.by(() => {
     if (hoveredIndex === null || !slices[hoveredIndex]) {
       return null;
@@ -209,8 +228,8 @@
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <path
             class="slice"
-            class:hovered={hoveredIndex === slice.index}
-            class:dimmed={hoveredIndex !== null && hoveredIndex !== slice.index}
+            class:hovered={activeIndex === slice.index}
+            class:dimmed={activeIndex !== null && activeIndex !== slice.index}
             d={slice.path}
             fill={slice.color}
             aria-label="{slice.label}: {format(slice.value)}"
@@ -250,6 +269,12 @@
       </g>
     </ChartContainer>
 
+    {#if typeof changePercentage === 'number'}
+      <div class="pie-delta-badge">
+        <DeltaIndicator value={changePercentage} invertColors={changeInvertColors} />
+      </div>
+    {/if}
+
     {#if showLegend && legendShowValues}
       <ul class="pie-legend-values">
         {#each data as d, i (i)}
@@ -312,6 +337,13 @@
     justify-content: center;
     text-align: center;
   }
+  .pie-delta-badge {
+    position: absolute;
+    top: var(--piechart-delta-top, 8px);
+    right: var(--piechart-delta-right, 8px);
+    z-index: 2;
+    pointer-events: none;
+  }
   .chart-tooltip-slot {
     position: absolute;
     z-index: 10;

package/dist/PieChart/properties.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { ChartHighlightAPI } from '../_chart/highlight';
 export type PieChartSlice = {
     label: string;
     value: number;
@@ -26,6 +27,31 @@ export type OptionalPieChartProperties = {
     semiCircle?: boolean;
     legendShowValues?: boolean;
     percentDecimals?: number;
+    /**
+     * Called once on mount with the imperative highlight API. Pass the returned
+     * object to an external orchestrator (e.g. voice narration) so it can drive
+     * slice highlighting without touching internal state. The `type` field is
+     * always `'donut-chart'` regardless of whether `innerRadius` is set.
+     */
+    onChartReady?: (api: ChartHighlightAPI) => void;
+    /**
+     * Index of the slice to highlight programmatically. The highlighted slice
+     * scales out and all others dim, exactly as if the user were hovering it.
+     * Pass `null` (or omit the prop) to clear all highlights.
+     */
+    highlightedIndex?: number | null;
+    /**
+     * When provided, renders a `DeltaIndicator` badge anchored to the top-right
+     * corner of the chart container. Positive values show green ↑, negative
+     * values show red ↓ (unless `changeInvertColors` is `true`).
+     */
+    changePercentage?: number;
+    /**
+     * Swap the up/down colors on the delta badge for lower-is-better metrics
+     * (e.g. RTO rate, bounce rate). Has no effect when `changePercentage` is
+     * not provided.
+     */
+    changeInvertColors?: boolean;
 };
 export type PieChartEventProperties = {
     onsliceclick?: (event: {