@rubin-epo/epo-widget-lib 0.2.0 → 0.4.0

package/dist/atomic/ElapsedTime/styles.js

@@ -0,0 +1,49 @@
+import e from "styled-components";
+const i = e.div`
+  background-color: var(--neutral20, #dce0e3);
+  border-radius: 5px;
+  color: var(--neutral95, "#1F2121");
+  display: grid;
+  grid-template-areas: "header" "time";
+  font-size: 0.75em;
+  font-weight: var(--FONT_WEIGHT_NORMAL, 400);
+  min-width: 70px;
+  max-width: fit-content;
+`, r = e.h2`
+  border-bottom: 1px solid var(--neutral95, "#1F2121");
+  font-weight: inherit;
+  font-size: 1em;
+  line-height: 1;
+  grid-area: header;
+  text-align: center;
+  margin: 0;
+  padding: 0.5em 0.75em;
+`, n = e.time`
+  grid-area: time;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: 1fr;
+  grid-auto-columns: 1fr;
+`, o = e.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.25em 0.5em;
+  line-height: 1.6;
+
+  &:not(:first-of-type) {
+    border-left: 1px solid var(--neutral95, "#1F2121");
+  }
+`, a = e.span`
+  font-size: 1.167em;
+`, d = e.span`
+  font-size: 0.6em;
+`;
+export {
+  i as ElapsedTimeContainer,
+  r as Header,
+  o as Interval,
+  a as Number,
+  d as Step,
+  n as Time
+};

package/dist/atomic/PlaybackControl/PlaybackControl.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),r=require("@rubin-epo/epo-react-lib/IconComposer"),t=require("./styles.cjs"),i=e=>e&&e.__esModule?e:{default:e},a=i(r),n=({icon:e,label:s,handleClick:c,...l})=>o.jsxs(t.PlaybackButton,{...l,onClick:c,children:[o.jsx(t.IconContainer,{children:o.jsx(a.default,{icon:e,size:15})}),o.jsx("span",{children:s})]});n.displayName="Atomic.PlaybackControl";const u=n;exports.default=u;

package/dist/atomic/PlaybackControl/PlaybackControl.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent, HTMLProps, MouseEventHandler } from "react";
-import { IconKey } from "@rubin-epo/epo-react-lib/dist/svg/icons";
+import { IconKey } from "@rubin-epo/epo-react-lib";
 interface PlaybackControlProps extends HTMLProps<HTMLButtonElement> {
     icon: IconKey;
     label: string;

package/dist/atomic/PlaybackControl/PlaybackControl.js

@@ -0,0 +1,17 @@
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import l from "@rubin-epo/epo-react-lib/IconComposer";
+import { PlaybackButton as e, IconContainer as s } from "./styles.js";
+const n = ({
+  icon: r,
+  label: c,
+  handleClick: t,
+  ...i
+}) => /* @__PURE__ */ a(e, { ...i, onClick: t, children: [
+  /* @__PURE__ */ o(s, { children: /* @__PURE__ */ o(l, { icon: r, size: 15 }) }),
+  /* @__PURE__ */ o("span", { children: c })
+] });
+n.displayName = "Atomic.PlaybackControl";
+const k = n;
+export {
+  k as default
+};

package/dist/atomic/PlaybackControl/styles.cjs

@@ -0,0 +1,39 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),r=t=>t&&t.__esModule?t:{default:t},e=r(n),o=e.default.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 22px;
+  background-color: var(--button-background-color);
+  color: var(--neutral95, #1f2121);
+`,a=e.default.button`
+  --button-color: var(--white, #fff);
+  --button-background-color: var(--neutral15, #e6e6e6);
+
+  background: transparent;
+  border: none;
+  color: var(--button-color);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75em;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+
+  &:not(:disabled):not([aria-disabled="true"]):hover,
+  &:not(:disabled):not([aria-disabled="true"]):focus-visible,
+  &:not(:disabled):not([aria-disabled="true"]).focus-visible {
+    text-decoration: underline;
+
+    ${o} {
+      outline: 1px solid var(--white, #fff);
+      outline-offset: 1px;
+    }
+  }
+  &:not(:disabled):not([aria-disabled="true"]):focus {
+    outline: none;
+  }
+`;exports.IconContainer=o;exports.PlaybackButton=a;

package/dist/atomic/PlaybackControl/styles.d.ts

@@ -1,2 +1,3 @@
-export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PlaybackButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+/// <reference types="react" />
+export declare const IconContainer: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const PlaybackButton: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;

package/dist/atomic/PlaybackControl/styles.js

@@ -0,0 +1,44 @@
+import o from "styled-components";
+const t = o.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 22px;
+  background-color: var(--button-background-color);
+  color: var(--neutral95, #1f2121);
+`, n = o.button`
+  --button-color: var(--white, #fff);
+  --button-background-color: var(--neutral15, #e6e6e6);
+
+  background: transparent;
+  border: none;
+  color: var(--button-color);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75em;
+  text-align: center;
+  padding: 0;
+  margin: 0;
+
+  &:not(:disabled):not([aria-disabled="true"]):hover,
+  &:not(:disabled):not([aria-disabled="true"]):focus-visible,
+  &:not(:disabled):not([aria-disabled="true"]).focus-visible {
+    text-decoration: underline;
+
+    ${t} {
+      outline: 1px solid var(--white, #fff);
+      outline-offset: 1px;
+    }
+  }
+  &:not(:disabled):not([aria-disabled="true"]):focus {
+    outline: none;
+  }
+`;
+export {
+  t as IconContainer,
+  n as PlaybackButton
+};

package/dist/hooks/useInterval.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react");function s(u,e){const t=r.useRef();r.useEffect(()=>{t.current=u},[u]),r.useEffect(()=>{function n(){t.current&&t.current()}if(e!==null){let c=setInterval(n,e);return()=>clearInterval(c)}},[e])}exports.default=s;

package/dist/hooks/useInterval.js

@@ -0,0 +1,18 @@
+import { useRef as f, useEffect as n } from "react";
+function i(r, t) {
+  const e = f();
+  n(() => {
+    e.current = r;
+  }, [r]), n(() => {
+    function u() {
+      e.current && e.current();
+    }
+    if (t !== null) {
+      let c = setInterval(u, t);
+      return () => clearInterval(c);
+    }
+  }, [t]);
+}
+export {
+  i as default
+};

package/dist/lib/utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=(e,t)=>{switch(!0){case e>t:return 0;case e<0:return t;default:return e}},o=(e,t,r)=>e>=t&&e<=r,s=(e=[],t=[])=>{const r=e[0]<t[0]?e:t,n=r===e?t:e;return r[1]<n[0]?null:[n[0],r[1]<n[1]?r[1]:n[1]]};exports.between=o;exports.getClampedArrayIndex=c;exports.intersection=s;

package/dist/lib/utils.js

@@ -0,0 +1,18 @@
+const c = (t, e) => {
+  switch (!0) {
+    case t > e:
+      return 0;
+    case t < 0:
+      return e;
+    default:
+      return t;
+  }
+}, s = (t, e, r) => t >= e && t <= r, u = (t = [], e = []) => {
+  const r = t[0] < e[0] ? t : e, n = r === t ? e : t;
+  return r[1] < n[0] ? null : [n[0], r[1] < n[1] ? r[1] : n[1]];
+};
+export {
+  s as between,
+  c as getClampedArrayIndex,
+  u as intersection
+};

package/dist/lib/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/localeStrings/en/epo-widget-lib.json

@@ -0,0 +1,77 @@
+{
+  "blinker": {
+    "controls": {
+      "backward": "Rewind",
+      "forward": "Forward",
+      "play": "Play",
+      "pause": "Pause"
+    }
+  },
+  "elapsed_time": {
+    "title": "Elapsed Time",
+    "step": {
+      "day_one": "Day",
+      "day_other": "Days",
+      "hour_one": "Hour",
+      "hour_other": "Hours",
+      "minute_one": "Minute",
+      "minute_other": "Minutes",
+      "second_one": "Second",
+      "second_other": "Seconds",
+      "year_one": "Year",
+      "year_other": "Years"
+    }
+  },
+  "filterTool": {
+    "title": "Filter Tool",
+    "filter": "Filter",
+    "whiteLight": "White Light",
+    "prism": "Prism",
+    "selectLabel": "Select a filter:",
+    "light_out": "Light out",
+    "light_filtered": "Light filtered",
+    "colors": {
+      "violet": "Violet",
+      "blue": "Blue",
+      "green": "Green",
+      "yellow": "Yellow",
+      "orange": "Orange",
+      "red": "Red",
+      "none": "None"
+    }
+  },
+  "colorTool": {
+    "labels": {
+      "object_type": "Object type:",
+      "object": "Object:",
+      "object_selected": "Selected object:",
+      "filter": "Filter",
+      "color": "Color",
+      "color_intensity": "Color Intensity"
+    },
+    "actions": {
+      "select_an_object": "Select an object",
+      "select_filter": "Select a filter",
+      "reset": "Reset"
+    }
+  },
+  "source_selector": {
+    "messages": {
+      "success": "You found it!",
+      "failure": "Try again."
+    }
+  },
+  "camera_filter": {
+    "title": "Rubin Observatory LSST Camera Filter Ranges",
+    "labels": {
+      "select": "Select one of the Rubin filters",
+      "option": "{{band}} filter",
+      "option_none": "None",
+      "captured_range": "Electromagnetic spectrums captured with {{filter}} filter applied",
+      "captured_range_no_filter": "Electromagnetic spectrums without filter applied",
+      "ultraviolet": "Ultraviolet",
+      "visible": "Visible Light",
+      "infrared": "Infrared"
+    }
+  }
+}

package/dist/localeStrings/es/epo-widget-lib.json

@@ -0,0 +1,33 @@
+{
+  "elapsed_time": {
+    "title": "Tiempo transcurrido",
+    "step": {
+      "day_one": "Día",
+      "day_other": "Días",
+      "hour_one": "Hora",
+      "hour_other": "Horas",
+      "minute_one": "Minuto",
+      "minute_other": "Minutos",
+      "second_one": "Segundo",
+      "second_other": "Segundos",
+      "year_one": "Año",
+      "year_other": "Años"
+    }
+  },
+  "filterTool": {
+    "title": "Herramienta de filtro",
+    "filter": "El filtro",
+    "whiteLight": "Luz blanca",
+    "prism": "Prisma",
+    "selectLabel": "Seleccione un filtro:",
+    "colors": {
+      "violet": "Violeta",
+      "blue": "Azul",
+      "green": "Verde",
+      "yellow": "Amarillo",
+      "orange": "Naranja",
+      "red": "Rojo",
+      "none": "Ninguno"
+    }
+  }
+}

package/dist/styles/svg.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),i=t=>t&&t.__esModule?t:{default:t},n=i(e),o=n.default.div`
+  position: relative;
+  min-width: var(--BREAK_MOBILE_MIN, 280px);
+
+  @media print {
+    width: var(--BREAK_MOBILE_MIN, 280px);
+  }
+`;exports.Container=o;

package/dist/styles/svg.d.ts

@@ -1 +1,2 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const Container: import("styled-components").IStyledComponent<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/dist/styles/svg.js

@@ -0,0 +1,12 @@
+import i from "styled-components";
+const r = i.div`
+  position: relative;
+  min-width: var(--BREAK_MOBILE_MIN, 280px);
+
+  @media print {
+    width: var(--BREAK_MOBILE_MIN, 280px);
+  }
+`;
+export {
+  r as Container
+};

package/dist/widgets/CameraFilter/CondensedFilterRanges/CondensedFilterRanges.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("react"),a=require("../styles.cjs"),c=({filters:o,min:i,spectrumRange:l})=>{const s=m.useRef(null),d=s.current?Array.from(s.current.children):null;return e.jsxs(e.Fragment,{children:[e.jsx(a.CondensedRangeRow,{ref:s,"data-testid":"condensed-filters",children:o.map(({range:t,band:n})=>e.jsxs(a.CondensedRange,{"aria-labelledby":`${n}-name`,children:[t.join("–"),e.jsx("br",{}),"nm"]},n))}),d&&e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMinYMin meet",viewBox:`${i} 0 ${l} 50`,role:"presentation","aria-hidden":"true",children:e.jsx("g",{role:"presentation",children:o.map(({range:t,band:n},u)=>{const x=d[u],{offsetLeft:f,offsetWidth:h,offsetParent:b}=x,{offsetWidth:g}=b,j=l/g,r=(t[0]+t[1])/2,p=(f+h/2)*j;return e.jsxs("g",{children:[e.jsx("line",{strokeWidth:1,stroke:"#b2b2b2",x1:r,x2:r,y1:"100%",y2:"75%",role:"presentation"}),e.jsx("line",{strokeWidth:1,stroke:"#b2b2b2",x1:r,x2:p+i,y1:"75%",y2:"0%",role:"presentation"})]},n)})})})]})};c.displayName="Widgets.CameraFilter.CondensedFilterRanges";const y=c;exports.default=y;

package/dist/widgets/CameraFilter/CondensedFilterRanges/CondensedFilterRanges.js

@@ -0,0 +1,61 @@
+import { jsxs as s, Fragment as y, jsx as e } from "react/jsx-runtime";
+import { useRef as R } from "react";
+import { CondensedRangeRow as w, CondensedRange as C } from "../styles.js";
+const c = ({
+  filters: i,
+  min: l,
+  spectrumRange: d
+}) => {
+  const r = R(null), a = r.current ? Array.from(r.current.children) : null;
+  return /* @__PURE__ */ s(y, { children: [
+    /* @__PURE__ */ e(w, { ref: r, "data-testid": "condensed-filters", children: i.map(({ range: t, band: n }) => /* @__PURE__ */ s(C, { "aria-labelledby": `${n}-name`, children: [
+      t.join("–"),
+      /* @__PURE__ */ e("br", {}),
+      "nm"
+    ] }, n)) }),
+    a && /* @__PURE__ */ e(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        preserveAspectRatio: "xMinYMin meet",
+        viewBox: `${l} 0 ${d} 50`,
+        role: "presentation",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ e("g", { role: "presentation", children: i.map(({ range: t, band: n }, f) => {
+          const m = a[f], { offsetLeft: p, offsetWidth: h, offsetParent: b } = m, { offsetWidth: g } = b, x = d / g, o = (t[0] + t[1]) / 2, u = (p + h / 2) * x;
+          return /* @__PURE__ */ s("g", { children: [
+            /* @__PURE__ */ e(
+              "line",
+              {
+                strokeWidth: 1,
+                stroke: "#b2b2b2",
+                x1: o,
+                x2: o,
+                y1: "100%",
+                y2: "75%",
+                role: "presentation"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "line",
+              {
+                strokeWidth: 1,
+                stroke: "#b2b2b2",
+                x1: o,
+                x2: u + l,
+                y1: "75%",
+                y2: "0%",
+                role: "presentation"
+              }
+            )
+          ] }, n);
+        }) })
+      }
+    )
+  ] });
+};
+c.displayName = "Widgets.CameraFilter.CondensedFilterRanges";
+const v = c;
+export {
+  v as default
+};

package/dist/widgets/CameraFilter/SpectrumDisplay/ColorLabels/ColorLabels.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),y=require("../../../../lib/utils.cjs"),s=require("../../styles.cjs"),a=({colors:o,activeRange:x,isBandSelected:d,isCondensed:e})=>{const n=e?350:o[0].range[0],m=(e?1e3:820)-n,u=Math.floor(m/(o.length-1));return t.jsx("g",{role:"list","data-testid":"color-labels",children:o.map(({name:c,range:r,color:h},b)=>{const l=n+u*b,j=d&&y.intersection(r,x)===null,i=(r[0]+r[1])/2;return t.jsxs("g",{children:[t.jsx("line",{strokeWidth:1,stroke:"#b2b2b2",x1:i,x2:i,y1:"50%",y2:e?"52.5%":"55%",role:"presentation"}),t.jsx("line",{strokeWidth:1,stroke:"#b2b2b2",x1:i,x2:l,y1:e?"52.5%":"55%",y2:e?"72.5%":"70%",role:"presentation"}),t.jsx("circle",{cx:l,cy:e?"72.5%":"70%",r:e?15:10,fill:h,role:"presentation"}),t.jsxs("text",{x:l,dominantBaseline:"middle",textAnchor:"middle",y:"75%",role:"listitem","aria-hidden":j,children:[t.jsx(s.ColorName,{x:l,dy:"1.25em",textAnchor:"middle",children:c}),t.jsx(s.ColorSpectrum,{x:l,dy:"1.25em",textAnchor:"middle",children:r.join("–")}),t.jsx(s.ColorSpectrumUnit,{x:l,dy:"1.25em",textAnchor:"middle",children:"nm"})]})]},c)})})};a.displayName="Widgets.CameraFilter.ColorLabels";const p=a;exports.default=p;

package/dist/widgets/CameraFilter/SpectrumDisplay/ColorLabels/ColorLabels.js

@@ -0,0 +1,95 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { intersection as f } from "../../../../lib/utils.js";
+import { ColorName as u, ColorSpectrum as k, ColorSpectrumUnit as A } from "../../styles.js";
+const m = ({
+  colors: l,
+  activeRange: s,
+  isBandSelected: x,
+  isCondensed: t
+}) => {
+  const c = t ? 350 : l[0].range[0], d = (t ? 1e3 : 820) - c, h = Math.floor(d / (l.length - 1));
+  return /* @__PURE__ */ o("g", { role: "list", "data-testid": "color-labels", children: l.map(({ name: n, range: r, color: p }, b) => {
+    const e = c + h * b, y = x && f(r, s) === null, i = (r[0] + r[1]) / 2;
+    return /* @__PURE__ */ a("g", { children: [
+      /* @__PURE__ */ o(
+        "line",
+        {
+          strokeWidth: 1,
+          stroke: "#b2b2b2",
+          x1: i,
+          x2: i,
+          y1: "50%",
+          y2: t ? "52.5%" : "55%",
+          role: "presentation"
+        }
+      ),
+      /* @__PURE__ */ o(
+        "line",
+        {
+          strokeWidth: 1,
+          stroke: "#b2b2b2",
+          x1: i,
+          x2: e,
+          y1: t ? "52.5%" : "55%",
+          y2: t ? "72.5%" : "70%",
+          role: "presentation"
+        }
+      ),
+      /* @__PURE__ */ o(
+        "circle",
+        {
+          cx: e,
+          cy: t ? "72.5%" : "70%",
+          r: t ? 15 : 10,
+          fill: p,
+          role: "presentation"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "text",
+        {
+          x: e,
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          y: "75%",
+          role: "listitem",
+          "aria-hidden": y,
+          children: [
+            /* @__PURE__ */ o(
+              u,
+              {
+                x: e,
+                dy: "1.25em",
+                textAnchor: "middle",
+                children: n
+              }
+            ),
+            /* @__PURE__ */ o(
+              k,
+              {
+                x: e,
+                dy: "1.25em",
+                textAnchor: "middle",
+                children: r.join("–")
+              }
+            ),
+            /* @__PURE__ */ o(
+              A,
+              {
+                x: e,
+                dy: "1.25em",
+                textAnchor: "middle",
+                children: "nm"
+              }
+            )
+          ]
+        }
+      )
+    ] }, n);
+  }) });
+};
+m.displayName = "Widgets.CameraFilter.ColorLabels";
+const W = m;
+export {
+  W as default
+};

package/dist/widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),c=require("../../../lib/utils.cjs"),t=require("../data.cjs"),j=require("./SpectrumLabels/SpectrumLabels.cjs"),x=({min:n,max:u,range:g,isCondensed:p,activeFilter:s})=>e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMinYMin meet",viewBox:`${n} 0 ${g} 200`,"data-testid":"spectrum-display",children:[e.jsxs("defs",{children:[t.spectrums.map(({name:d,stops:r})=>e.jsx("linearGradient",{id:`${d}-gradient`,children:r.map(({offset:a,stopColor:h,id:o})=>e.jsx("stop",{offset:a,stopColor:h,id:o},`${a}-${h}`))},d)),e.jsxs("mask",{id:"spectrumMask",children:[e.jsx("rect",{width:"100%",height:"50%",fill:"white",x:n}),s&&e.jsxs(e.Fragment,{children:[e.jsx("rect",{x:n,width:s.range[0]-n,height:"100%",fill:"black"}),e.jsx("rect",{x:s.range[1],width:u-s.range[1],height:"100%",fill:"black"})]})]})]}),e.jsx("g",{mask:"url(#spectrumMask)",role:"presentation",children:t.spectrums.map(({name:d,upper:r,lower:a})=>e.jsx("rect",{width:(r||u)-(a||n),height:"50%",fill:`url(#${d}-gradient)`,x:a||n,role:"presentation"},d))}),e.jsx("g",{children:t.spectrums.map(({name:d,upper:r})=>r&&e.jsx("line",{strokeWidth:2,strokeDasharray:"8 8",stroke:s&&!c.between(r,s.range[0],s.range[1])?"#000":"#fff",x1:r,x2:r,y1:0,y2:"50%"},d))}),e.jsx(j.default,{spectrums:t.spectrums,activeBand:s==null?void 0:s.band,min:n,max:u,activeMin:s==null?void 0:s.range[0],activeMax:s==null?void 0:s.range[1],isCondensed:p})]});x.displayName="Widgets.CameraFilter.SpectrumDisplay";const l=x;exports.default=l;

package/dist/widgets/CameraFilter/SpectrumDisplay/SpectrumDisplay.js

@@ -0,0 +1,98 @@
+import { jsxs as p, jsx as r, Fragment as w } from "react/jsx-runtime";
+import { between as k } from "../../../lib/utils.js";
+import { spectrums as e } from "../data.js";
+import l from "./SpectrumLabels/SpectrumLabels.js";
+const o = ({
+  min: n,
+  max: g,
+  range: t,
+  isCondensed: f,
+  activeFilter: s
+}) => /* @__PURE__ */ p(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    preserveAspectRatio: "xMinYMin meet",
+    viewBox: `${n} 0 ${t} 200`,
+    "data-testid": "spectrum-display",
+    children: [
+      /* @__PURE__ */ p("defs", { children: [
+        e.map(({ name: h, stops: d }) => /* @__PURE__ */ r("linearGradient", { id: `${h}-gradient`, children: d.map(({ offset: a, stopColor: m, id: x }) => /* @__PURE__ */ r(
+          "stop",
+          {
+            offset: a,
+            stopColor: m,
+            id: x
+          },
+          `${a}-${m}`
+        )) }, h)),
+        /* @__PURE__ */ p("mask", { id: "spectrumMask", children: [
+          /* @__PURE__ */ r("rect", { width: "100%", height: "50%", fill: "white", x: n }),
+          s && /* @__PURE__ */ p(w, { children: [
+            /* @__PURE__ */ r(
+              "rect",
+              {
+                x: n,
+                width: s.range[0] - n,
+                height: "100%",
+                fill: "black"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "rect",
+              {
+                x: s.range[1],
+                width: g - s.range[1],
+                height: "100%",
+                fill: "black"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ r("g", { mask: "url(#spectrumMask)", role: "presentation", children: e.map(({ name: h, upper: d, lower: a }) => /* @__PURE__ */ r(
+        "rect",
+        {
+          width: (d || g) - (a || n),
+          height: "50%",
+          fill: `url(#${h}-gradient)`,
+          x: a || n,
+          role: "presentation"
+        },
+        h
+      )) }),
+      /* @__PURE__ */ r("g", { children: e.map(
+        ({ name: h, upper: d }) => d && /* @__PURE__ */ r(
+          "line",
+          {
+            strokeWidth: 2,
+            strokeDasharray: "8 8",
+            stroke: s && !k(d, s.range[0], s.range[1]) ? "#000" : "#fff",
+            x1: d,
+            x2: d,
+            y1: 0,
+            y2: "50%"
+          },
+          h
+        )
+      ) }),
+      /* @__PURE__ */ r(
+        l,
+        {
+          spectrums: e,
+          activeBand: s == null ? void 0 : s.band,
+          min: n,
+          max: g,
+          activeMin: s == null ? void 0 : s.range[0],
+          activeMax: s == null ? void 0 : s.range[1],
+          isCondensed: f
+        }
+      )
+    ]
+  }
+);
+o.displayName = "Widgets.CameraFilter.SpectrumDisplay";
+const M = o;
+export {
+  M as default
+};

package/dist/widgets/CameraFilter/SpectrumDisplay/SpectrumLabels/SpectrumLabels.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),L=require("react-i18next"),S=require("../../styles.cjs"),j=require("../../../../lib/utils.cjs"),_=require("../ColorLabels/ColorLabels.cjs"),c=({spectrums:u,activeBand:e,min:d,max:m,activeMin:l=0,activeMax:i=0,isCondensed:p})=>{const{t:a}=L.useTranslation(),b=a("camera_filter.labels.captured_range",{context:e?"":"no_filter",filter:e});return t.jsx("g",{role:"list","aria-label":b,"aria-live":"polite","data-testid":"spectrum-labels",children:u.map(({name:r,upper:f,lower:x,colors:n})=>{const o=f||m,s=x||d,g=e&&j.intersection([s,o],[l,i])===null;return t.jsxs("g",{role:"listitem","aria-hidden":g,children:[t.jsx(S.SpectrumLabel,{x:(o-s)/2+s,y:"25%",dominantBaseline:"middle",textAnchor:"middle",children:a(`camera_filter.labels.${r}`)},r),n&&t.jsx(_.default,{colors:n,isBandSelected:!!e,activeRange:[l,i],isCondensed:p})]},r)})})};c.displayName="Widgets.CameraFilter.SpectrumLabels";const h=c;exports.default=h;