@rubin-epo/epo-widget-lib 1.1.2 → 1.1.3

package/dist/CameraFilter.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./widgets/CameraFilter/CameraFilter.cjs");exports.default=e.default;

package/dist/CameraFilter.d.ts

@@ -0,0 +1,3 @@
+export * from './widgets/CameraFilter/index'
+import _default from './widgets/CameraFilter/index'
+export default _default

package/dist/CameraFilter.js

@@ -0,0 +1,4 @@
+import { default as o } from "./widgets/CameraFilter/CameraFilter.js";
+export {
+  o as default
+};

package/dist/lib/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("lodash/mergeWith"),g=require("lodash/isNil"),o=t=>t&&t.__esModule?t:{default:t},m=o(d),c=o(g),h=(t,e)=>{switch(!0){case t>e:return 0;case t<0:return e;default:return t}},M=(t,e,r)=>t>=e&&t<=r,p=t=>t[Math.round((t.length-1)/2)],A=(t=[0,1],e=[0,1],r)=>{const n={clamp:!1,fractionDigits:2},{clamp:i,fractionDigits:s}={...n,...r};return l=>{const u=t[1]-t[0];if(u===0)return(e[0]+e[1])/2;let a=(l-t[0])/u;return i&&(a=Math.min(Math.max(a,0),1)),Number((a*(e[1]-e[0])+e[0]).toFixed(s))}},S=()=>{const t=navigator.userAgent.indexOf("Chrome")>-1;return navigator.userAgent.indexOf("Safari")>-1&&!t},f=(t,e)=>c.default(e)&&t?c.default(t)?e:t:e,_=(t,e)=>m.default({},e,t,f),b=(t,e=[0,0])=>t.reduce((r,{x:n,y:i},s)=>r+=`${s===0?"M":" L"}${n+e[0]},${i+e[1]}`,"");exports.between=M;exports.buildPath=b;exports.defaultsMerger=f;exports.getClampedArrayIndex=h;exports.getLinearScale=A;exports.isSafari=S;exports.mergeWithDefaults=_;exports.middle=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("lodash/mergeWith"),g=require("lodash/isNil"),o=t=>t&&t.__esModule?t:{default:t},m=o(d),c=o(g),h=(t,e)=>{switch(!0){case t>e:return 0;case t<0:return e;default:return t}},M=(t,e,r)=>t>=e&&t<=r,p=(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]]},A=t=>t[Math.round((t.length-1)/2)],S=(t=[0,1],e=[0,1],r)=>{const n={clamp:!1,fractionDigits:2},{clamp:i,fractionDigits:s}={...n,...r};return l=>{const a=t[1]-t[0];if(a===0)return(e[0]+e[1])/2;let u=(l-t[0])/a;return i&&(u=Math.min(Math.max(u,0),1)),Number((u*(e[1]-e[0])+e[0]).toFixed(s))}},_=()=>{const t=navigator.userAgent.indexOf("Chrome")>-1;return navigator.userAgent.indexOf("Safari")>-1&&!t},f=(t,e)=>c.default(e)&&t?c.default(t)?e:t:e,D=(t,e)=>m.default({},e,t,f),b=(t,e=[0,0])=>t.reduce((r,{x:n,y:i},s)=>r+=`${s===0?"M":" L"}${n+e[0]},${i+e[1]}`,"");exports.between=M;exports.buildPath=b;exports.defaultsMerger=f;exports.getClampedArrayIndex=h;exports.getLinearScale=S;exports.intersection=p;exports.isSafari=_;exports.mergeWithDefaults=D;exports.middle=A;

package/dist/lib/utils.js

@@ -1,6 +1,6 @@
-import u from "lodash/mergeWith";
-import a from "lodash/isNil";
-const d = (t, e) => {
+import a from "lodash/mergeWith";
+import u from "lodash/isNil";
+const l = (t, e) => {
   switch (!0) {
     case t > e:
       return 0;
@@ -9,7 +9,10 @@ const d = (t, e) => {
     default:
       return t;
   }
-}, l = (t, e, r) => t >= e && t <= r, p = (t) => t[Math.round((t.length - 1) / 2)], A = (t = [0, 1], e = [0, 1], r) => {
+}, d = (t, e, r) => t >= e && t <= r, p = (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]];
+}, A = (t) => t[Math.round((t.length - 1) / 2)], M = (t = [0, 1], e = [0, 1], r) => {
   const n = { clamp: !1, fractionDigits: 2 }, { clamp: i, fractionDigits: s } = { ...n, ...r };
   return (f) => {
     const c = t[1] - t[0];
@@ -20,17 +23,18 @@ const d = (t, e) => {
       (o * (e[1] - e[0]) + e[0]).toFixed(s)
     );
   };
-}, M = () => {
+}, x = () => {
   const t = navigator.userAgent.indexOf("Chrome") > -1;
   return navigator.userAgent.indexOf("Safari") > -1 && !t;
-}, m = (t, e) => a(e) && t ? a(t) ? e : t : e, D = (t, e) => u({}, e, t, m), I = (t, e = [0, 0]) => t.reduce((r, { x: n, y: i }, s) => r += `${s === 0 ? "M" : " L"}${n + e[0]},${i + e[1]}`, "");
+}, m = (t, e) => u(e) && t ? u(t) ? e : t : e, D = (t, e) => a({}, e, t, m), I = (t, e = [0, 0]) => t.reduce((r, { x: n, y: i }, s) => r += `${s === 0 ? "M" : " L"}${n + e[0]},${i + e[1]}`, "");
 export {
-  l as between,
+  d as between,
   I as buildPath,
   m as defaultsMerger,
-  d as getClampedArrayIndex,
-  A as getLinearScale,
-  M as isSafari,
+  l as getClampedArrayIndex,
+  M as getLinearScale,
+  p as intersection,
+  x as isSafari,
   D as mergeWithDefaults,
-  p as middle
+  A as middle
 };

package/dist/widgets/CameraFilter/CameraFilter.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),v=require("react"),q=require("@rubin-epo/epo-react-lib/SelectListbox"),y=require("@rubin-epo/epo-react-lib/styles"),C=require("react-i18next"),S=require("use-resize-observer"),r=require("./data.cjs"),l=require("./styles.cjs"),R=require("./CondensedFilterRanges/CondensedFilterRanges.cjs"),L=require("./SpectrumDisplay/SpectrumDisplay.cjs"),x=i=>i&&i.__esModule?i:{default:i},M=x(q),O=x(S),m=()=>{const{t:i}=C.useTranslation(),{ref:h,width:j=1}=O.default(),[c,p]=v.useState(null),{BREAK_TABLET:b}=y.tokens,s=j<parseInt(b),{[s?"condensed":"default"]:{min:o,max:F,range:n}}=r.rangeConfig,d=r.filters[0].range[0],u=r.filters[r.filters.length-1].range[1]-d,f=r.filters.filter(({band:t})=>t),g=[{value:"none",label:i("camera_filter.labels.option",{context:"none"})}].concat(f.map(({band:t})=>({value:t,label:i("camera_filter.labels.option",{band:t})}))),_=r.filters.find(({band:t})=>t===c);return e.jsx(l.FilterWrapper,{ratio:5/4,children:e.jsxs(l.FilterContainer,{ref:h,children:[e.jsx(l.FilterTitle,{children:i("camera_filter.title")}),s&&e.jsx(R.default,{filters:f,min:o,spectrumRange:n}),e.jsxs(l.FilterTable,{style:{"--filter-table-margin-inline-start":`${((d-o)/n*100).toFixed(2)}%`,"--filter-table-width":`${(u/n*100).toFixed(2)}%`},"data-testid":"expanded-filters",children:[e.jsx("colgroup",{children:r.filters.map(({range:t})=>e.jsx("col",{style:{width:`${(t[1]-t[0])/u*100}%`}},t.join("")))}),e.jsx(l.FilterNames,{children:e.jsx("tr",{children:r.filters.map(({band:t},a)=>e.jsx(l.FilterName,{id:`${t}-name`,style:{"--filter-name-border":t?"solid #b2b2b2":"none"},scope:"col","aria-hidden":!t,children:t},a))})}),!s&&e.jsx(l.FilterRanges,{children:e.jsx("tr",{children:r.filters.map(({band:t,range:a})=>e.jsx(l.FilterRange,{"aria-hidden":!t,children:t&&e.jsxs(e.Fragment,{children:[a.join("–"),e.jsx("br",{}),e.jsx(l.Wavelength,{children:"nm"})]})},a.join()))})})]}),e.jsx(L.default,{min:o,max:F,range:n,isCondensed:s,activeFilter:_}),e.jsxs(l.SelectContainer,{children:[e.jsx(l.SelectLabel,{id:"filterSelectLabel",children:i("camera_filter.labels.select")}),e.jsx(M.default,{options:g,value:c,onChangeCallback:t=>p(t),width:"100%",maxWidth:"100%",labelledById:"filterSelectLabel"})]})]})})};m.displayName="Widgets.CameraFilter";const T=m;exports.default=T;

package/dist/widgets/CameraFilter/CameraFilter.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as t, jsxs as o, Fragment as v } from "react/jsx-runtime";
+import { useState as y } from "react";
+import R from "@rubin-epo/epo-react-lib/SelectListbox";
+import { tokens as S } from "@rubin-epo/epo-react-lib/styles";
+import { useTranslation as j } from "react-i18next";
+import B from "use-resize-observer";
+import { filters as i, rangeConfig as L } from "./data.js";
+import { FilterWrapper as T, FilterContainer as _, FilterTitle as $, FilterTable as w, FilterNames as O, FilterName as W, FilterRanges as A, FilterRange as M, Wavelength as N, SelectContainer as k, SelectLabel as E } from "./styles.js";
+import I from "./CondensedFilterRanges/CondensedFilterRanges.js";
+import z from "./SpectrumDisplay/SpectrumDisplay.js";
+const p = () => {
+  const { t: r } = j(), { ref: h, width: F = 1 } = B(), [c, b] = y(null), { BREAK_TABLET: g } = S, l = F < parseInt(g), {
+    [l ? "condensed" : "default"]: { min: s, max: u, range: n }
+  } = L, d = i[0].range[0], m = i[i.length - 1].range[1] - d, f = i.filter(({ band: e }) => e), x = [{
+    value: "none",
+    label: r("camera_filter.labels.option", { context: "none" })
+  }].concat(
+    f.map(({ band: e }) => ({
+      value: e,
+      label: r("camera_filter.labels.option", { band: e })
+    }))
+  ), C = i.find(({ band: e }) => e === c);
+  return /* @__PURE__ */ t(T, { ratio: 5 / 4, children: /* @__PURE__ */ o(_, { ref: h, children: [
+    /* @__PURE__ */ t($, { children: r("camera_filter.title") }),
+    l && /* @__PURE__ */ t(
+      I,
+      {
+        filters: f,
+        min: s,
+        spectrumRange: n
+      }
+    ),
+    /* @__PURE__ */ o(
+      w,
+      {
+        style: {
+          "--filter-table-margin-inline-start": `${((d - s) / n * 100).toFixed(2)}%`,
+          "--filter-table-width": `${(m / n * 100).toFixed(2)}%`
+        },
+        "data-testid": "expanded-filters",
+        children: [
+          /* @__PURE__ */ t("colgroup", { children: i.map(({ range: e }) => /* @__PURE__ */ t(
+            "col",
+            {
+              style: {
+                width: `${(e[1] - e[0]) / m * 100}%`
+              }
+            },
+            e.join("")
+          )) }),
+          /* @__PURE__ */ t(O, { children: /* @__PURE__ */ t("tr", { children: i.map(({ band: e }, a) => /* @__PURE__ */ t(
+            W,
+            {
+              id: `${e}-name`,
+              style: {
+                "--filter-name-border": e ? "solid #b2b2b2" : "none"
+              },
+              scope: "col",
+              "aria-hidden": !e,
+              children: e
+            },
+            a
+          )) }) }),
+          !l && /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t("tr", { children: i.map(({ band: e, range: a }) => /* @__PURE__ */ t(M, { "aria-hidden": !e, children: e && /* @__PURE__ */ o(v, { children: [
+            a.join("–"),
+            /* @__PURE__ */ t("br", {}),
+            /* @__PURE__ */ t(N, { children: "nm" })
+          ] }) }, a.join())) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      z,
+      {
+        min: s,
+        max: u,
+        range: n,
+        isCondensed: l,
+        activeFilter: C
+      }
+    ),
+    /* @__PURE__ */ o(k, { children: [
+      /* @__PURE__ */ t(E, { id: "filterSelectLabel", children: r("camera_filter.labels.select") }),
+      /* @__PURE__ */ t(
+        R,
+        {
+          options: x,
+          value: c,
+          onChangeCallback: (e) => b(e),
+          width: "100%",
+          maxWidth: "100%",
+          labelledById: "filterSelectLabel"
+        }
+      )
+    ] })
+  ] }) });
+};
+p.displayName = "Widgets.CameraFilter";
+const Z = p;
+export {
+  Z as default
+};

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

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("react"),d=require("../styles.cjs"),c=({filters:o,min:i,spectrumRange:l})=>{const n=m.useRef(null),a=n.current?Array.from(n.current.children):null;return e.jsxs(e.Fragment,{children:[e.jsx(d.CondensedRangeRow,{ref:n,"data-testid":"condensed-filters",children:o.map(({range:t,band:s})=>e.jsxs(d.CondensedRange,{"aria-labelledby":`${s}-name`,children:[t.join("–"),e.jsx("br",{}),"nm"]},s))}),a&&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:s},u)=>{const x=a[u],{offsetLeft:f,offsetWidth:h,offsetParent:b}=x,{offsetWidth:j}=b,p=l/j,r=(t[0]+t[1])/2,g=(f+h/2)*p;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:g+i,y1:"75%",y2:"0%",role:"presentation"})]},s)})})})]})};c.displayName="Widgets.CameraFilter.CondensedFilterRanges";exports.default=c;

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

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

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

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

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

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { useTranslation as f } from "react-i18next";
+import { intersection as g } from "../../../../lib/utils.js";
+import { ColorName as k, ColorSpectrum as A, ColorSpectrumUnit as L } from "../../styles.js";
+const M = ({
+  colors: l,
+  activeRange: s,
+  isBandSelected: m,
+  isCondensed: t
+}) => {
+  const {
+    t: d,
+    i18n: { language: x }
+  } = f(), n = t ? 350 : l[0].range[0], h = (t ? 1e3 : 820) - n, p = Math.floor(h / (l.length - 1));
+  return /* @__PURE__ */ o("g", { role: "list", "data-testid": "color-labels", children: l.map(({ name: c, range: r, color: b }, y) => {
+    const e = n + p * y, u = m && g(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: "100",
+          y2: t ? "105" : "110",
+          role: "presentation"
+        }
+      ),
+      /* @__PURE__ */ o(
+        "line",
+        {
+          strokeWidth: 1,
+          stroke: "#b2b2b2",
+          x1: i,
+          x2: e,
+          y1: t ? "105" : "110",
+          y2: t ? "145" : "140",
+          role: "presentation"
+        }
+      ),
+      /* @__PURE__ */ o(
+        "circle",
+        {
+          cx: e,
+          cy: t ? "145" : "140",
+          r: t ? 15 : 10,
+          fill: b,
+          role: "presentation"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "text",
+        {
+          x: e,
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          y: "150",
+          role: "listitem",
+          "aria-hidden": u,
+          children: [
+            /* @__PURE__ */ o(
+              k,
+              {
+                x: e,
+                dy: "1.25em",
+                textAnchor: "middle",
+                children: d(`filterTool.colors.${c}`).toLocaleLowerCase(x)
+              }
+            ),
+            /* @__PURE__ */ o(
+              A,
+              {
+                x: e,
+                dy: "1.25em",
+                textAnchor: "middle",
+                children: r.join("–")
+              }
+            ),
+            /* @__PURE__ */ o(
+              L,
+              {
+                x: e,
+                dy: "1.25em",
+                textAnchor: "middle",
+                children: "nm"
+              }
+            )
+          ]
+        }
+      )
+    ] }, c);
+  }) });
+};
+M.displayName = "Widgets.CameraFilter.ColorLabels";
+export {
+  M 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"),o=require("../../../lib/utils.cjs"),t=require("../data.cjs"),l=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} 260`,"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:j})=>e.jsx("stop",{offset:a,stopColor:h,id:j},`${a}-${h}`))},d)),e.jsxs("mask",{id:"spectrumMask",children:[e.jsx("rect",{width:"100%",height:"100",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&&!o.between(r,s.range[0],s.range[1])?"#000":"#fff",x1:r,x2:r,y1:0,y2:"50%"},d))}),e.jsx(l.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";exports.default=x;

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

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

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

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

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

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

package/dist/widgets/CameraFilter/data.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=[{band:"u",range:[338,395]},{range:[396,404]},{band:"g",range:[405,552]},{band:"r",range:[553,690]},{band:"i",range:[690,817]},{band:"z",range:[818,920]},{band:"y",range:[920,1010]}],r=[{offset:0,stopColor:"#e0e0e0"},{offset:.262,stopColor:"#dedde0"},{offset:.41,stopColor:"#dbd5e1"},{offset:.53,stopColor:"#d4c7e3"},{offset:.635,stopColor:"#cbb3e6"},{offset:.73,stopColor:"#bf9aeb"},{offset:.818,stopColor:"#b17af0"},{offset:.9,stopColor:"#a055f5"},{offset:.976,stopColor:"#8c2afc"},{offset:1,stopColor:"#861cff"}],l=[{offset:.11,stopColor:"#861cff"},{offset:.25,stopColor:"blue"},{offset:.27,stopColor:"#001ee0"},{offset:.3,stopColor:"#006d91"},{offset:.33,stopColor:"#00ab53"},{offset:.36,stopColor:"#00d826"},{offset:.38,stopColor:"#00f40a"},{offset:.39,stopColor:"lime"},{offset:.41,stopColor:"#05fe00"},{offset:.43,stopColor:"#14fc01"},{offset:.45,stopColor:"#2df803"},{offset:.47,stopColor:"#50f406"},{offset:.49,stopColor:"#7cee0a"},{offset:.51,stopColor:"#b3e70e"},{offset:.54,stopColor:"#f2de14"},{offset:.54,stopColor:"#ffdd15"},{offset:.56,stopColor:"#fccb17"},{offset:.6,stopColor:"#f49f1e"},{offset:.62,stopColor:"#f18922"},{offset:.63,stopColor:"#f08220"},{offset:.66,stopColor:"#f0711c"},{offset:.69,stopColor:"#ef5415"},{offset:.72,stopColor:"#ed2d0b"},{offset:.75,stopColor:"#ec0000"},{offset:.79,stopColor:"#eb0303"},{offset:.82,stopColor:"#e90f0f"},{offset:.86,stopColor:"#e62323"},{offset:.89,stopColor:"#e23e3e"},{offset:.93,stopColor:"#dc6262"},{offset:.96,stopColor:"#d58e8e"},{offset:.99,stopColor:"#cdc0c0"},{offset:1,stopColor:"#ccc"}],n=[{offset:0,stopColor:"#ccc"},{offset:1,stopColor:"#f2f2f2"}],t=[{name:"violet",color:"#861CFF",range:[380,450]},{name:"blue",color:"#0000FF",range:[450,495]},{name:"green",color:"#00FF00",range:[495,570]},{name:"yellow",color:"#FFDD15",range:[570,590]},{name:"orange",color:"#F18922",range:[590,620]},{name:"red",color:"#EC0000",range:[620,750]}],p=[{name:"ultraviolet",upper:400,stops:r},{name:"visible",upper:750,lower:400,stops:l,colors:t},{name:"infrared",lower:750,stops:n}],e=255,f=322,o=1084,a={condensed:{min:f,max:o,range:o-f},default:{min:e,max:o,range:o-e}};exports.colors=t;exports.filters=s;exports.rangeConfig=a;exports.spectrums=p;

package/dist/widgets/CameraFilter/data.js

@@ -0,0 +1,84 @@
+const n = [
+  { band: "u", range: [338, 395] },
+  { range: [396, 404] },
+  { band: "g", range: [405, 552] },
+  { band: "r", range: [553, 690] },
+  { band: "i", range: [690, 817] },
+  { band: "z", range: [818, 920] },
+  { band: "y", range: [920, 1010] }
+], s = [
+  { offset: 0, stopColor: "#e0e0e0" },
+  { offset: 0.262, stopColor: "#dedde0" },
+  { offset: 0.41, stopColor: "#dbd5e1" },
+  { offset: 0.53, stopColor: "#d4c7e3" },
+  { offset: 0.635, stopColor: "#cbb3e6" },
+  { offset: 0.73, stopColor: "#bf9aeb" },
+  { offset: 0.818, stopColor: "#b17af0" },
+  { offset: 0.9, stopColor: "#a055f5" },
+  { offset: 0.976, stopColor: "#8c2afc" },
+  { offset: 1, stopColor: "#861cff" }
+], t = [
+  { offset: 0.11, stopColor: "#861cff" },
+  { offset: 0.25, stopColor: "blue" },
+  { offset: 0.27, stopColor: "#001ee0" },
+  { offset: 0.3, stopColor: "#006d91" },
+  { offset: 0.33, stopColor: "#00ab53" },
+  { offset: 0.36, stopColor: "#00d826" },
+  { offset: 0.38, stopColor: "#00f40a" },
+  { offset: 0.39, stopColor: "lime" },
+  { offset: 0.41, stopColor: "#05fe00" },
+  { offset: 0.43, stopColor: "#14fc01" },
+  { offset: 0.45, stopColor: "#2df803" },
+  { offset: 0.47, stopColor: "#50f406" },
+  { offset: 0.49, stopColor: "#7cee0a" },
+  { offset: 0.51, stopColor: "#b3e70e" },
+  { offset: 0.54, stopColor: "#f2de14" },
+  { offset: 0.54, stopColor: "#ffdd15" },
+  { offset: 0.56, stopColor: "#fccb17" },
+  { offset: 0.6, stopColor: "#f49f1e" },
+  { offset: 0.62, stopColor: "#f18922" },
+  { offset: 0.63, stopColor: "#f08220" },
+  { offset: 0.66, stopColor: "#f0711c" },
+  { offset: 0.69, stopColor: "#ef5415" },
+  { offset: 0.72, stopColor: "#ed2d0b" },
+  { offset: 0.75, stopColor: "#ec0000" },
+  { offset: 0.79, stopColor: "#eb0303" },
+  { offset: 0.82, stopColor: "#e90f0f" },
+  { offset: 0.86, stopColor: "#e62323" },
+  { offset: 0.89, stopColor: "#e23e3e" },
+  { offset: 0.93, stopColor: "#dc6262" },
+  { offset: 0.96, stopColor: "#d58e8e" },
+  { offset: 0.99, stopColor: "#cdc0c0" },
+  { offset: 1, stopColor: "#ccc" }
+], r = [
+  { offset: 0, stopColor: "#ccc" },
+  { offset: 1, stopColor: "#f2f2f2" }
+], l = [
+  { name: "violet", color: "#861CFF", range: [380, 450] },
+  { name: "blue", color: "#0000FF", range: [450, 495] },
+  { name: "green", color: "#00FF00", range: [495, 570] },
+  { name: "yellow", color: "#FFDD15", range: [570, 590] },
+  { name: "orange", color: "#F18922", range: [590, 620] },
+  { name: "red", color: "#EC0000", range: [620, 750] }
+], p = [
+  { name: "ultraviolet", upper: 400, stops: s },
+  { name: "visible", upper: 750, lower: 400, stops: t, colors: l },
+  { name: "infrared", lower: 750, stops: r }
+], e = 255, f = 322, o = 1084, a = {
+  condensed: {
+    min: f,
+    max: o,
+    range: o - f
+  },
+  default: {
+    min: e,
+    max: o,
+    range: o - e
+  }
+};
+export {
+  l as colors,
+  n as filters,
+  a as rangeConfig,
+  p as spectrums
+};

package/dist/widgets/CameraFilter/styles.cjs

@@ -0,0 +1,105 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("@rubin-epo/epo-react-lib/styles"),o=require("../../layout/AspectRatio/index.cjs"),a=n=>n&&n.__esModule?n:{default:n},e=a(i),l=e.default(o.default)`
+  display: flex;
+  align-items: center;
+`,r=e.default.div`
+  container-type: inline-size;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: min-content;
+  text-align: center;
+  width: 100%;
+`,s=e.default.h3`
+  margin: 0;
+`,d=e.default.table`
+  border-collapse: collapse;
+  text-align: center;
+  margin-inline-start: var(--filter-table-margin-inline-start);
+  width: var(--filter-table-width);
+
+  @container (min-width: ${t.token("BREAK_TABLET")}) {
+    margin-block-start: var(--PADDING_SMALL, 20px);
+  }
+`,c=e.default.tbody`
+  display: table-header-group;
+`,f=e.default.thead`
+  display: table-row-group;
+`,m=e.default.td`
+  line-height: 1.2;
+  font-size: 80%;
+`,u=e.default.span`
+  font-size: 80%;
+`,p=e.default.th`
+  font-size: 120%;
+  font-weight: var(--FONT_WEIGHT_NORMAL, 400);
+  border: var(--filter-name-border);
+  border-width: 1px;
+
+  @container (min-width: ${t.token("BREAK_TABLET")}) {
+    border-width: 3px;
+  }
+`,g=e.default.div`
+  min-width: 20ch;
+  width: 50%;
+  max-width: 30ch;
+  justify-self: center;
+  text-align: left;
+`,h=e.default.label`
+  font-size: 0.75em;
+`,w=e.default.text`
+  font-size: 2em;
+
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
+    font-size: 1.25em;
+  }
+
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+    font-size: 0.75em;
+  }
+`,b=e.default.tspan`
+  font-size: 2em;
+
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
+    font-size: 1.25em;
+  }
+
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+    font-size: 0.75em;
+  }
+`,_=e.default.tspan`
+  font-size: 1.5em;
+
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
+    font-size: 1em;
+  }
+
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+    font-size: 0.5em;
+  }
+`,A=e.default.tspan`
+  font-size: 1.3em;
+
+  @container (min-width: ${t.token("BREAK_MOBILE")}) {
+    font-size: 0.8em;
+  }
+
+  @container (min-width: ${t.token("BREAK_PHABLET_MIN")}) {
+    font-size: 0.4em;
+  }
+`,B=e.default.ul`
+  display: flex;
+  justify-content: space-between;
+  line-height: 1.2;
+  font-size: 80%;
+  margin: var(--PADDING_SMALL, 20px) 0 0;
+  padding: 0;
+  list-style-type: none;
+`,E=e.default.li`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  &:before {
+    content: "\\200B";
+  }
+`;exports.ColorName=b;exports.ColorSpectrum=_;exports.ColorSpectrumUnit=A;exports.CondensedRange=E;exports.CondensedRangeRow=B;exports.FilterContainer=r;exports.FilterName=p;exports.FilterNames=f;exports.FilterRange=m;exports.FilterRanges=c;exports.FilterTable=d;exports.FilterTitle=s;exports.FilterWrapper=l;exports.SelectContainer=g;exports.SelectLabel=h;exports.SpectrumLabel=w;exports.Wavelength=u;

package/dist/widgets/CameraFilter/styles.js

@@ -0,0 +1,128 @@
+"use client";
+import t from "styled-components";
+import { token as e } from "@rubin-epo/epo-react-lib/styles";
+import n from "../../layout/AspectRatio/index.js";
+const a = t(n)`
+  display: flex;
+  align-items: center;
+`, s = t.div`
+  container-type: inline-size;
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: min-content;
+  text-align: center;
+  width: 100%;
+`, l = t.h3`
+  margin: 0;
+`, c = t.table`
+  border-collapse: collapse;
+  text-align: center;
+  margin-inline-start: var(--filter-table-margin-inline-start);
+  width: var(--filter-table-width);
+
+  @container (min-width: ${e("BREAK_TABLET")}) {
+    margin-block-start: var(--PADDING_SMALL, 20px);
+  }
+`, m = t.tbody`
+  display: table-header-group;
+`, d = t.thead`
+  display: table-row-group;
+`, p = t.td`
+  line-height: 1.2;
+  font-size: 80%;
+`, f = t.span`
+  font-size: 80%;
+`, h = t.th`
+  font-size: 120%;
+  font-weight: var(--FONT_WEIGHT_NORMAL, 400);
+  border: var(--filter-name-border);
+  border-width: 1px;
+
+  @container (min-width: ${e("BREAK_TABLET")}) {
+    border-width: 3px;
+  }
+`, g = t.div`
+  min-width: 20ch;
+  width: 50%;
+  max-width: 30ch;
+  justify-self: center;
+  text-align: left;
+`, w = t.label`
+  font-size: 0.75em;
+`, A = t.text`
+  font-size: 2em;
+
+  @container (min-width: ${e("BREAK_MOBILE")}) {
+    font-size: 1.25em;
+  }
+
+  @container (min-width: ${e("BREAK_PHABLET_MIN")}) {
+    font-size: 0.75em;
+  }
+`, B = t.tspan`
+  font-size: 2em;
+
+  @container (min-width: ${e("BREAK_MOBILE")}) {
+    font-size: 1.25em;
+  }
+
+  @container (min-width: ${e("BREAK_PHABLET_MIN")}) {
+    font-size: 0.75em;
+  }
+`, E = t.tspan`
+  font-size: 1.5em;
+
+  @container (min-width: ${e("BREAK_MOBILE")}) {
+    font-size: 1em;
+  }
+
+  @container (min-width: ${e("BREAK_PHABLET_MIN")}) {
+    font-size: 0.5em;
+  }
+`, b = t.tspan`
+  font-size: 1.3em;
+
+  @container (min-width: ${e("BREAK_MOBILE")}) {
+    font-size: 0.8em;
+  }
+
+  @container (min-width: ${e("BREAK_PHABLET_MIN")}) {
+    font-size: 0.4em;
+  }
+`, z = t.ul`
+  display: flex;
+  justify-content: space-between;
+  line-height: 1.2;
+  font-size: 80%;
+  margin: var(--PADDING_SMALL, 20px) 0 0;
+  padding: 0;
+  list-style-type: none;
+`, _ = t.li`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  &:before {
+    content: "\\200B";
+  }
+`;
+export {
+  B as ColorName,
+  E as ColorSpectrum,
+  b as ColorSpectrumUnit,
+  _ as CondensedRange,
+  z as CondensedRangeRow,
+  s as FilterContainer,
+  h as FilterName,
+  d as FilterNames,
+  p as FilterRange,
+  m as FilterRanges,
+  c as FilterTable,
+  l as FilterTitle,
+  a as FilterWrapper,
+  g as SelectContainer,
+  w as SelectLabel,
+  A as SpectrumLabel,
+  f as Wavelength
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubin-epo/epo-widget-lib",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Rubin Observatory Education & Public Outreach team React scientific and educational widgets.",
   "author": "Rubin EPO",
   "license": "MIT",