@decidables/discountable-elements 0.6.3 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/discountable-elements",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "discountable-elements: Web Components for visualizing Hyperbolic Temporal Discounting",
   "keywords": [
     "web component",
@@ -53,7 +53,7 @@
     "gulp": "^5.0.1"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.5.5",
+    "@decidables/decidables-elements": "^0.5.6",
     "@decidables/discountable-math": "^0.2.5",
     "@lit-labs/motion": "^1.0.9",
     "@observablehq/plot": "^0.6.17",
@@ -61,5 +61,5 @@
     "d3": "^7.9.0",
     "lit": "^3.3.1"
   },
-  "gitHead": "045955a4696ea4b38440d84d467cad3ddaad812d"
+  "gitHead": "8c39b095d6cc3cf6a5f49457048bebf53e7158c1"
 }

package/src/components/discountable-control.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/button';
 import '@decidables/decidables-elements/slider';

package/src/components/discountable-response.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/button';
 

package/src/components/htd-calculation.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 import {animate, fadeIn} from '@lit-labs/motion';
 
 import '@decidables/decidables-elements/spinner';

package/src/components/htd-curves.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html, render} from 'lit';
 import * as d3 from 'd3';
 
 import HTDMath from '@decidables/discountable-math';
@@ -256,26 +256,45 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
 
         .option .interactive:hover {
           filter: url("#shadow-4");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          /* https://github.com/emilbjorklund/svg-weirdness/issues/27 */
+          transform: translateX(0);
         }
 
         .option .interactive:active {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateY(0);
         }
 
         :host(.keyboard) .option .interactive:focus-within {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateZ(0);
         }
 
         .option .body.interactive:has(~ .point:hover) {
           filter: url("#shadow-4");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateX(0);
         }
 
         .option .body.interactive:has(~ .point:active) {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateY(0);
         }
 
         :host(.keyboard) .option .body.interactive:has(~ .point:focus-within) {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateZ(0);
         }
 
         .gradient.sooner stop {
@@ -453,11 +472,15 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
       }]);
     //  ENTER
     const svgEnter = svgUpdate.enter().append('svg')
-      .classed('main', true);
-    svgEnter.html(DiscountableElement.svgDefs);
+      .classed('main', true)
+      .each((datum, index, nodes) => {
+        // Filters for shadows
+        render(DiscountableElement.svgFilters, nodes[index]);
+      });
     // Gradients for fill animations
-    const svgDefs = svgEnter.append('defs');
-    const soonerGradient = svgDefs.append('linearGradient')
+    const svgGradients = svgEnter.append('defs')
+      .classed('gradients', true);
+    const soonerGradient = svgGradients.append('linearGradient')
       .classed('gradient sooner', true)
       .attr('id', 'sooner-gradient');
     soonerGradient.append('stop')
@@ -472,7 +495,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
     soonerGradient.append('stop')
       .classed('stop-100', true)
       .attr('offset', '1');
-    const laterGradient = svgDefs.append('linearGradient')
+    const laterGradient = svgGradients.append('linearGradient')
       .classed('gradient later', true)
       .attr('id', 'later-gradient');
     laterGradient.append('stop')
@@ -1239,6 +1262,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
           return `${xScale(element.d)}`;
         };
       })
+      .attr('y1', yScale(0))
       .attrTween('y2', (datum, index, elements) => {
         const element = elements[index];
         const interpolateA = d3.interpolate(

package/src/components/htd-fit.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 import * as Plot from '@observablehq/plot';
 
 import HTDMath from '@decidables/discountable-math';

package/src/components/htd-parameters.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/slider';
 import HTDMath from '@decidables/discountable-math';

package/src/components/itc-choice.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import DiscountableElement from '../discountable-element';
 import './itc-option';

package/src/components/itc-option.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import DiscountableElement from '../discountable-element';
 

package/src/components/itc-task.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 import * as d3 from 'd3';
 
 import DiscountableElement from '../discountable-element';

package/src/examples/htd-example.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import DiscountableElement from '../discountable-element';