@rubin-epo/epo-widget-lib 0.4.3 → 0.5.1-alpha.1

package/dist/widgets/ColorTool/styles.cjs

@@ -1,27 +1,20 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),r=require("@rubin-epo/epo-react-lib/Button"),l=require("@rubin-epo/epo-react-lib/HorizontalSlider"),d=require("./FilterImage/FilterImage.cjs"),o=e=>e&&e.__esModule?e:{default:e},t=o(i),a=o(r),s=o(l),c=t.default.section`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),n=require("@rubin-epo/epo-react-lib/Button"),r=require("@rubin-epo/epo-react-lib/HorizontalSlider"),l=require("@rubin-epo/epo-react-lib/styles"),d=require("./FilterImage/FilterImage.cjs"),i=e=>e&&e.__esModule?e:{default:e},t=i(o),a=i(n),s=i(r),c=t.default.section`
+  container: colorTool / inline-size;
+`,u=l.token("BREAK_LARGE_TABLET_MIN"),g=t.default.div`
+  --widget-areas: "title" "subtitle" "image" "caption" "controls" "reset";
+  --controls-row: "controls image";
   display: grid;
   gap: var(--PADDING_SMALL, 20px);
+  grid-template-areas: var(--widget-areas);
 
-  ${({$isCondensed:e,$hideControls:n})=>e?i.css`
-          grid-template-areas:
-            "title"
-            "subtitle"
-            "image"
-            "caption"
-            "controls"
-            "reset";
-        `:i.css`
-          grid-template-areas:
-            "title title"
-            "subtitle subtitle"
-            ${n?"'image image'":"'controls image'"}
-            "reset reset"
-            "caption caption";
-        `}
+  @container colorTool (min-width: ${u}) {
+    --widget-areas: "title title" "subtitle subtitle" var(--controls-row)
+      "reset reset" "caption caption";
+  }
 `;t.default.h2`
   grid-area: title;
   margin: 0;
-`;const u=t.default.dl`
+`;const f=t.default.dl`
   grid-area: subtitle;
   margin: 0;
   font-size: 18px;
@@ -46,22 +39,22 @@
       white-space: pre;
     }
   }
-`,g=t.default.div`
+`,p=t.default.div`
   display: grid;
   grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 2fr);
   grid-auto-rows: max-content;
   grid-area: controls;
   gap: 10px;
   align-items: center;
-`,f=t.default(s.default)`
+`,m=t.default(s.default)`
   padding: 0;
   width: 100%;
-`,p=t.default.div`
+`,b=t.default.div`
   position: relative;
   aspect-ratio: 1 / 1;
   grid-area: image;
   background-color: rgba(0, 0, 0, 0.1);
-`,m=t.default.img`
+`,h=t.default.img`
   position: absolute;
   top: 0;
   right: 0;
@@ -70,7 +63,7 @@
   display: ${({$filtersActive:e})=>e?"block":"none"};
   width: 100%;
   height: 100%;
-`,b=t.default(d.default)`
+`,x=t.default(d.default)`
   user-select: none;
   position: absolute;
   top: 0;
@@ -81,27 +74,27 @@
   height: 100%;
   mix-blend-mode: screen;
 
-  ${({active:e})=>e?i.css`
+  ${({active:e})=>e?o.css`
           visibility: visible;
           opacity: 1;
-        `:i.css`
+        `:o.css`
           visibility: hidden;
           opacity: 0;
         `}
-`,h=t.default.div`
+`,v=t.default.div`
   grid-column: span 3;
-`,x=t.default.div`
+`,w=t.default.div`
   font-weight: var(--FONT_WEIGHT_BOLD, 600);
-`,v=t.default.footer`
+`,_=t.default.footer`
   grid-area: caption;
-`,_=t.default(a.default)`
+`,y=t.default(a.default)`
   grid-area: reset;
   text-align: left;
 
   span {
     text-align: left;
   }
-`,y=t.default(a.default)`
+`,T=t.default(a.default)`
   border-radius: 50%;
   font-weight: var(--FONT_WEIGHT_MEDIUM, 500);
   font-size: 22px;
@@ -111,13 +104,13 @@
   height: 38px;
   padding: 0;
 
-  ${({$active:e})=>e?i.css`
+  ${({$active:e})=>e?o.css`
           background-color: var(--turquoise85, #12726c);
           &:not(:disabled):not([aria-disabled="true"]):hover {
             outline: 1px solid var(--white, #fff);
             outline-offset: -3px;
           }
-        `:i.css`
+        `:o.css`
           background-color: #f7f7f7;
           border-color: #6c6e6e;
           color: #6c6e6e !important;
@@ -126,4 +119,4 @@
             outline-offset: -2px;
           }
         `}
-`;exports.BackgroundImage=m;exports.Caption=v;exports.ControlsContainer=g;exports.FilterToggleButton=y;exports.FilteredImage=b;exports.ImageContainer=p;exports.ResetButton=_;exports.SelectionContainer=h;exports.Slider=f;exports.Subtitle=u;exports.ToolsHeader=x;exports.WidgetContainer=c;
+`;exports.BackgroundImage=h;exports.Caption=_;exports.ControlsContainer=p;exports.FilterToggleButton=T;exports.FilteredImage=x;exports.ImageContainer=b;exports.ResetButton=y;exports.SelectionContainer=v;exports.Slider=m;exports.Subtitle=f;exports.ToolsHeader=w;exports.WidgetContainer=c;exports.WidgetLayout=g;

package/dist/widgets/ColorTool/styles.js

@@ -1,33 +1,27 @@
 import t, { css as i } from "styled-components";
 import o from "@rubin-epo/epo-react-lib/Button";
-import a from "@rubin-epo/epo-react-lib/HorizontalSlider";
+import r from "@rubin-epo/epo-react-lib/HorizontalSlider";
+import { token as a } from "@rubin-epo/epo-react-lib/styles";
 import n from "./FilterImage/FilterImage.js";
-const g = t.section`
+const m = t.section`
+  container: colorTool / inline-size;
+`, l = a("BREAK_LARGE_TABLET_MIN"), f = t.div`
+  --widget-areas: "title" "subtitle" "image" "caption" "controls" "reset";
+  --controls-row: "controls image";
   display: grid;
   gap: var(--PADDING_SMALL, 20px);
+  grid-template-areas: var(--widget-areas);
 
-  ${({ $isCondensed: e, $hideControls: r }) => e ? i`
-          grid-template-areas:
-            "title"
-            "subtitle"
-            "image"
-            "caption"
-            "controls"
-            "reset";
-        ` : i`
-          grid-template-areas:
-            "title title"
-            "subtitle subtitle"
-            ${r ? "'image image'" : "'controls image'"}
-            "reset reset"
-            "caption caption";
-        `}
+  @container colorTool (min-width: ${l}) {
+    --widget-areas: "title title" "subtitle subtitle" var(--controls-row)
+      "reset reset" "caption caption";
+  }
 `;
 t.h2`
   grid-area: title;
   margin: 0;
 `;
-const p = t.dl`
+const u = t.dl`
   grid-area: subtitle;
   margin: 0;
   font-size: 18px;
@@ -52,22 +46,22 @@ const p = t.dl`
       white-space: pre;
     }
   }
-`, m = t.div`
+`, b = t.div`
   display: grid;
   grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 2fr);
   grid-auto-rows: max-content;
   grid-area: controls;
   gap: 10px;
   align-items: center;
-`, f = t(a)`
+`, h = t(r)`
   padding: 0;
   width: 100%;
-`, u = t.div`
+`, x = t.div`
   position: relative;
   aspect-ratio: 1 / 1;
   grid-area: image;
   background-color: rgba(0, 0, 0, 0.1);
-`, b = t.img`
+`, v = t.img`
   position: absolute;
   top: 0;
   right: 0;
@@ -76,7 +70,7 @@ const p = t.dl`
   display: ${({ $filtersActive: e }) => e ? "block" : "none"};
   width: 100%;
   height: 100%;
-`, h = t(n)`
+`, w = t(n)`
   user-select: none;
   position: absolute;
   top: 0;
@@ -94,20 +88,20 @@ const p = t.dl`
           visibility: hidden;
           opacity: 0;
         `}
-`, x = t.div`
+`, y = t.div`
   grid-column: span 3;
-`, v = t.div`
+`, T = t.div`
   font-weight: var(--FONT_WEIGHT_BOLD, 600);
-`, w = t.footer`
+`, I = t.footer`
   grid-area: caption;
-`, y = t(o)`
+`, _ = t(o)`
   grid-area: reset;
   text-align: left;
 
   span {
     text-align: left;
   }
-`, I = t(o)`
+`, k = t(o)`
   border-radius: 50%;
   font-weight: var(--FONT_WEIGHT_MEDIUM, 500);
   font-size: 22px;
@@ -134,16 +128,17 @@ const p = t.dl`
         `}
 `;
 export {
-  b as BackgroundImage,
-  w as Caption,
-  m as ControlsContainer,
-  I as FilterToggleButton,
-  h as FilteredImage,
-  u as ImageContainer,
-  y as ResetButton,
-  x as SelectionContainer,
-  f as Slider,
-  p as Subtitle,
-  v as ToolsHeader,
-  g as WidgetContainer
+  v as BackgroundImage,
+  I as Caption,
+  b as ControlsContainer,
+  k as FilterToggleButton,
+  w as FilteredImage,
+  x as ImageContainer,
+  _ as ResetButton,
+  y as SelectionContainer,
+  h as Slider,
+  u as Subtitle,
+  T as ToolsHeader,
+  m as WidgetContainer,
+  f as WidgetLayout
 };

package/dist/widgets/ColorTool/utilities.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("lodash/flattenDeep"),D=require("lodash/find"),v=require("lodash/isEmpty"),o=e=>e&&e.__esModule?e:{default:e},y=o(g),_=o(D),c=o(v),l=(e,t,r)=>(t-e)*(r/100)+e,i=e=>e.some(t=>t.active),F=e=>c.default(e)?!1:i(e.filters),u=e=>e.filters.map(t=>{const{value:r,defaultValue:s,defaultColor:a,min:n,max:p,color:f}=t,d=r||s||1,m=a||f;return{...t,brightness:l(n,p,d),color:m}}),b=e=>c.default(e)?e:{...e,filters:u(e)},B=(e,t)=>y.default(e.map(s=>s.objects.filter(a=>a.name===t).map(u))),V=(e,t)=>{const r=_.default(e,{objects:[{name:t}]}),{type:s=null}=r||{};return s},h=e=>e.map(t=>{const{defaultValue:r,min:s,max:a}=t,n=r||1;return{...t,active:!1,color:"",brightness:l(n,s,a),value:n}});exports.getBrightnessValue=l;exports.getCategoryName=V;exports.getDataFiltersByName=B;exports.isFilterActive=i;exports.isResetButtonActive=F;exports.prepareData=b;exports.resetFilters=h;exports.updateFilters=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("lodash/flattenDeep"),g=require("lodash/find"),v=require("lodash/isEmpty"),o=e=>e&&e.__esModule?e:{default:e},y=o(m),_=o(g),F=o(v),l=(e,t,s)=>(t-e)*(s/100)+e,u=e=>e.some(t=>t.active),b=e=>F.default(e)?!1:u(e.filters),c=e=>e.filters.map(t=>{const{value:s,defaultValue:r,defaultColor:a,min:n,max:i,color:d}=t,f=s||r||1,p=a||d;return{...t,brightness:l(n,i,f),color:p}}),D=(e,t)=>y.default(e.map(r=>r.objects.filter(a=>a.name===t).map(c))),B=(e,t)=>{const s=_.default(e,{objects:[{name:t}]}),{type:r=null}=s||{};return r},V=e=>e.map(t=>{const{defaultValue:s,min:r,max:a}=t,n=s||1;return{...t,active:!1,color:"",brightness:l(n,r,a),value:n}});exports.getBrightnessValue=l;exports.getCategoryName=B;exports.getDataFiltersByName=D;exports.isFilterActive=u;exports.isResetButtonActive=b;exports.resetFilters=V;exports.updateFilters=c;

package/dist/widgets/ColorTool/utilities.js

@@ -1,38 +1,34 @@
-import f from "lodash/flattenDeep";
-import d from "lodash/find";
-import a from "lodash/isEmpty";
-const c = (e, t, r) => (t - e) * (r / 100) + e, g = (e) => e.some((t) => t.active), y = (e) => a(e) ? !1 : g(e.filters), l = (e) => e.filters.map((t) => {
-  const { value: r, defaultValue: s, defaultColor: o, min: n, max: i, color: p } = t, u = r || s || 1, m = o || p;
+import m from "lodash/flattenDeep";
+import p from "lodash/find";
+import f from "lodash/isEmpty";
+const a = (t, e, r) => (e - t) * (r / 100) + t, d = (t) => t.some((e) => e.active), D = (t) => f(t) ? !1 : d(t.filters), g = (t) => t.filters.map((e) => {
+  const { value: r, defaultValue: s, defaultColor: o, min: n, max: c, color: l } = e, i = r || s || 1, u = o || l;
   return {
-    ...t,
-    brightness: c(n, i, u),
-    color: m
+    ...e,
+    brightness: a(n, c, i),
+    color: u
   };
-}), F = (e) => a(e) ? e : {
-  ...e,
-  filters: l(e)
-}, V = (e, t) => f(
-  e.map((s) => s.objects.filter((o) => o.name === t).map(l))
-), h = (e, t) => {
-  const r = d(e, { objects: [{ name: t }] }), { type: s = null } = r || {};
+}), F = (t, e) => m(
+  t.map((s) => s.objects.filter((o) => o.name === e).map(g))
+), V = (t, e) => {
+  const r = p(t, { objects: [{ name: e }] }), { type: s = null } = r || {};
   return s;
-}, j = (e) => e.map((t) => {
-  const { defaultValue: r, min: s, max: o } = t, n = r || 1;
+}, h = (t) => t.map((e) => {
+  const { defaultValue: r, min: s, max: o } = e, n = r || 1;
   return {
-    ...t,
+    ...e,
     active: !1,
     color: "",
-    brightness: c(n, s, o),
+    brightness: a(n, s, o),
     value: n
   };
 });
 export {
-  c as getBrightnessValue,
-  h as getCategoryName,
-  V as getDataFiltersByName,
-  g as isFilterActive,
-  y as isResetButtonActive,
-  F as prepareData,
-  j as resetFilters,
-  l as updateFilters
+  a as getBrightnessValue,
+  V as getCategoryName,
+  F as getDataFiltersByName,
+  d as isFilterActive,
+  D as isResetButtonActive,
+  h as resetFilters,
+  g as updateFilters
 };

package/dist/widgets/SourceSelector/utilities.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=(t,n)=>{const[r,a]=t,[e,c]=n;return i=>i/(a-r)*(c-e)+e};exports.getLinearScale=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=(e,t,u=!1)=>c=>{const l=e[1]-e[0];if(l===0)return(t[0]+t[1])/2;let r=(c-e[0])/l;return u&&(r=Math.min(Math.max(r,0),1)),r*(t[1]-t[0])+t[0]};exports.getLinearScale=i;

package/dist/widgets/SourceSelector/utilities.js

@@ -1,7 +1,10 @@
-const M = (r, t) => {
-  const [e, a] = r, [n, c] = t;
-  return (o) => o / (a - e) * (c - n) + n;
+const f = (e, t, u = !1) => (c) => {
+  const s = e[1] - e[0];
+  if (s === 0)
+    return (t[0] + t[1]) / 2;
+  let r = (c - e[0]) / s;
+  return u && (r = Math.min(Math.max(r, 0), 1)), r * (t[1] - t[0]) + t[0];
 };
 export {
-  M as getLinearScale
+  f as getLinearScale
 };

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@rubin-epo/epo-widget-lib",
-  "version": "0.4.3",
+  "version": "0.5.1-alpha.1",
   "description": "Rubin Observatory Education & Public Outreach team React scientific and educational widgets.",
   "author": "Rubin EPO",
   "license": "MIT",
   "homepage": "https://lsst-epo.github.io/epo-react-lib",
   "repository": {
     "type": "git",
-    "url": "https://github.com/lsst-epo/epo-react-lib"
+    "url": "https://github.com/lsst-epo/epo-react-lib",
+    "directory": "packages/epo-widget-lib"
   },
   "supportedLocales": [
     "en",
@@ -19,10 +20,45 @@
   ],
   "sideEffects": false,
   "exports": {
-    "./*": {
-      "import": "./dist/*.js",
-      "require": "./dist/*.cjs",
-      "types": "./dist/*.d.ts"
+    "./CameraFilter": {
+      "import": {
+        "default": "./dist/CameraFilter.js",
+        "types": "./dist/types/CameraFilter.d.ts"
+      },
+      "require": {
+        "default": "./dist/CameraFilter.cjs",
+        "types": "./dist/types/cjs/CameraFilter.d.cts"
+      }
+    },
+    "./ColorTool": {
+      "import": {
+        "default": "./dist/ColorTool.js",
+        "types": "./dist/types/ColorTool.d.ts"
+      },
+      "require": {
+        "default": "./dist/ColorTool.cjs",
+        "types": "./dist/types/cjs/ColorTool.d.cts"
+      }
+    },
+    "./FilterTool": {
+      "import": {
+        "default": "./dist/FilterTool.js",
+        "types": "./dist/types/FilterTool.d.ts"
+      },
+      "require": {
+        "default": "./dist/FilterTool.cjs",
+        "types": "./dist/types/cjs/FilterTool.d.cts"
+      }
+    },
+    "./SourceSelector": {
+      "import": {
+        "default": "./dist/SourceSelector.js",
+        "types": "./dist/types/SourceSelector.d.ts"
+      },
+      "require": {
+        "default": "./dist/SourceSelector.cjs",
+        "types": "./dist/types/cjs/SourceSelector.d.cts"
+      }
     },
     "./localeStrings": "./dist/localeStrings"
   },
@@ -38,7 +74,7 @@
     "react-i18next": "^12.2.0"
   },
   "dependencies": {
-    "@rubin-epo/epo-react-lib": "^2.0.0",
+    "@rubin-epo/epo-react-lib": "^2.0.3",
     "lodash": "^4.17.21",
     "styled-components": "^6.0.4",
     "use-resize-observer": "^9.1.0"

package/dist/CameraFilter.d.ts

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

package/dist/ColorTool.d.ts

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

package/dist/FilterTool.d.ts

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

package/dist/SourceSelector.d.ts

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

package/dist/atomic/Blinker/Image/styles.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const BlinkerImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
-    $active: boolean;
-}>>;

package/dist/atomic/Blinker/_mocks/index.d.ts

@@ -1,2 +0,0 @@
-import { ImageShape } from "@rubin-epo/epo-react-lib";
-export declare const mockImages: ImageShape[];