@decidables/prospectable-elements 0.5.2 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/prospectable-elements",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "prospectable-elements: Web Components for visualizing Cumulative Prospect Theory",
   "keywords": [
     "web component",
@@ -49,6 +49,7 @@
     "lib"
   ],
   "scripts": {
+    "clean": "gulp clean",
     "lint": "gulp lint",
     "test": "gulp test -X \"$@\"",
     "build": "gulp build"
@@ -57,8 +58,8 @@
     "gulp": "^5.0.1"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.5.7",
-    "@decidables/prospectable-math": "^0.3.5",
+    "@decidables/decidables-elements": "^0.6.0",
+    "@decidables/prospectable-math": "^0.3.6",
     "@lit-labs/motion": "^1.1.0",
     "@observablehq/plot": "^0.6.17",
     "bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
@@ -67,5 +68,5 @@
     "d3-3d": "^2.0.0",
     "lit": "^3.3.2"
   },
-  "gitHead": "6fcd31a19c082ec41bde7d351bcb52161c5b654b"
+  "gitHead": "72981c711111354170ece1e403d497073da7be96"
 }

package/src/components/cpt-parameters.js

@@ -92,6 +92,7 @@ export default class CPTParameters extends ProspectableElement {
 
         decidables-slider {
           line-height: 1;
+
           text-align: center;
         }
 

package/src/components/cpt-probability.js

@@ -275,9 +275,9 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
 
         .curve.interactive {
           cursor: nwse-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .curve.interactive:hover {
@@ -295,7 +295,7 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
           transform: translateY(0);
         }
 
-        :host(.keyboard) .curve.interactive:focus {
+        .curve.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -304,9 +304,9 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
 
         .point.interactive {
           cursor: nesw-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
 
           /* HACK: This gets Safari to correctly apply the filter! */
           stroke: #000000;
@@ -328,7 +328,7 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
           stroke: #00ff00;
         }
 
-        :host(.keyboard) .point.interactive:focus {
+        .point.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -362,8 +362,8 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
 
         .diagonal {
           stroke: var(---color-element-border);
-          stroke-dasharray: 4;
           stroke-width: 1;
+          stroke-dasharray: 4;
         }
 
         .curve {
@@ -396,8 +396,8 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
           font-size: 0.75rem;
 
           dominant-baseline: middle;
-          text-anchor: middle;
 
+          text-anchor: middle;
           fill: var(---color-text-inverse);
         }
 
@@ -409,8 +409,8 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
 
         @media (pointer: coarse) {
           .interactive .touch {
-            stroke-linecap: round;
             stroke-width: 12;
+            stroke-linecap: round;
           }
         }
       `,

package/src/components/cpt-space.js

@@ -327,6 +327,7 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -350,6 +351,7 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -390,6 +392,7 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 

package/src/components/cpt-value.js

@@ -289,9 +289,9 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
         .curve-p.interactive,
         .curve-n.interactive {
           cursor: nwse-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .curve-p.interactive:hover,
@@ -311,8 +311,8 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
           transform: translateY(0);
         }
 
-        :host(.keyboard) .curve-p.interactive:focus,
-        :host(.keyboard) .curve-n.interactive:focus {
+        .curve-p.interactive:focus-visible,
+        .curve-n.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -321,9 +321,9 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
 
         .point.interactive {
           cursor: nesw-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
 
           /* HACK: This gets Safari to correctly apply the filter! */
           stroke: #000000;
@@ -345,7 +345,7 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
           stroke: #00ff00;
         }
 
-        :host(.keyboard) .point.interactive:focus {
+        .point.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -385,8 +385,8 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
 
         .diagonal {
           stroke: var(---color-element-border);
-          stroke-dasharray: 4;
           stroke-width: 1;
+          stroke-dasharray: 4;
         }
 
         .curve-p,
@@ -420,8 +420,8 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
           font-size: 0.75rem;
 
           dominant-baseline: middle;
-          text-anchor: middle;
 
+          text-anchor: middle;
           fill: var(---color-text-inverse);
         }
 
@@ -433,8 +433,8 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
 
         @media (pointer: coarse) {
           .interactive .touch {
-            stroke-linecap: round;
             stroke-width: 12;
+            stroke-linecap: round;
           }
         }
       `,

package/src/components/decision-space.js

@@ -397,6 +397,7 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -420,6 +421,7 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -460,6 +462,7 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 

package/src/components/prospectable-response.js

@@ -265,6 +265,7 @@ export default class ProspectableResponse extends ProspectableElement {
 
           width: 5.25rem;
           height: 3.5rem;
+
           padding: 0.375rem 0.75rem;
           margin: 0.25rem;
 
@@ -292,6 +293,7 @@ export default class ProspectableResponse extends ProspectableElement {
 
         .feedback .outcome {
           font-weight: 600;
+
           line-height: 1.15;
         }
 

package/src/components/risky-option.js

@@ -23,6 +23,8 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
           --decidables-spinner-input-width: 4rem;
           --decidables-spinner-prefix: "$";
 
+          position: relative;
+
           display: inline-block;
 
           width: 10rem;
@@ -32,6 +34,7 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
         .main {
           width: 100%;
           height: 100%;
+
           overflow: visible;
         }
 
@@ -48,9 +51,9 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
 
         .arc.interactive {
           cursor: ns-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .arc.interactive:hover {
@@ -61,7 +64,7 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
           filter: url("#shadow-8");
         }
 
-        :host(.keyboard) .arc.interactive:focus {
+        .arc.interactive:focus-visible {
           filter: url("#shadow-8");
         }
 
@@ -80,23 +83,20 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
         .label.static {
           font-size: 1.75rem;
 
+          dominant-baseline: middle;
+
           user-select: none;
 
-          dominant-baseline: middle;
           text-anchor: middle;
         }
 
         .label.interactive {
+          position: absolute;
+
           width: var(--decidables-spinner-input-width);
           height: calc(var(--decidables-spinner-font-size) * 1.5);
-          overflow: visible;
-        }
 
-        /* HACK: Get Safari to work with SVG foreignObject */
-        /* https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari */
-        /* https://bugs.webkit.org/show_bug.cgi?id=23113 */
-        .label.interactive decidables-spinner {
-          position: fixed;
+          overflow: visible;
         }
 
         .label.interactive.win decidables-spinner {
@@ -332,12 +332,12 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
     //  DATA-JOIN
     const labelStaticUpdate = pieMerge.selectAll('.label.static')
       .data(arcsStatic);
-    const labelInteractiveUpdate = pieMerge.selectAll('.label.interactive')
+    const labelInteractiveUpdate = d3.select(this.renderRoot).selectAll('.label.interactive')
       .data(arcsInteractive);
     //  ENTER
     const labelStaticEnter = labelStaticUpdate.enter().append('text');
-    const labelInteractiveEnter = labelInteractiveUpdate.enter().append('foreignObject');
-    labelInteractiveEnter.append('xhtml:decidables-spinner')
+    const labelInteractiveEnter = labelInteractiveUpdate.enter().append('xhtml:div');
+    labelInteractiveEnter.append('decidables-spinner')
       .on('input', (event, datum) => {
         datum.data.x = parseFloat(event.target.value);
 
@@ -364,22 +364,19 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
       .text((datum) => { return `$${datum.data.x.toFixed(0)}`; });
     const labelInteractiveMerge = labelInteractiveEnter.merge(labelInteractiveUpdate)
       .attr('class', (datum) => { return `label interactive ${datum.data.name}`; })
-      .attr('transform', (datum) => {
-        // HACK: Center spinner here instead of CSS for Safari SVG foreignObject
-        // x: calc(var(--decidables-spinner-input-width) / -2);
-        // y: calc(var(--decidables-spinner-font-size) * 1.5 / -2);
+      .attr('style', (datum) => {
         const inputWidth = parseFloat(this.getComputedStyleValue('--decidables-spinner-input-width'));
         const fontSize = parseFloat(this.getComputedStyleValue('--decidables-spinner-font-size'));
         const rem = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('font-size'), 10);
-        const x = (inputWidth * rem) / -2;
-        const y = (fontSize * rem * 1.5) / -2;
+        const x = (width / 2) + (inputWidth * rem) / -2;
+        const y = (height / 2) + (fontSize * rem * 1.5) / -2;
 
         if (arcs.length === 1) {
-          return `translate(${x}, ${y})`;
+          return `left: ${x}px; top: ${y}px;`;
         }
         const radius = (Math.min(width, height) / 2) * 0.6;
         const arcLabel = d3.arc().innerRadius(radius).outerRadius(radius);
-        return `translate(${arcLabel.centroid(datum)[0] + x}, ${arcLabel.centroid(datum)[1] + y})`;
+        return `left: ${arcLabel.centroid(datum)[0] + x}px; top: ${arcLabel.centroid(datum)[1] + y}px;`;
       });
     labelInteractiveMerge.select('decidables-spinner')
       .attr('value', (datum) => { return `${datum.data.x.toFixed(0)}`; });

package/src/equations/cpt-equation.js

@@ -87,11 +87,13 @@ export default class CPTEquation extends ProspectableElement {
 
         .addend {
           position: relative;
+
           display: inline-block;
         }
 
         .comparison {
           position: relative;
+
           display: inline-block;
 
           font-size: 125%;