@decidables/discountable-elements 0.6.3 → 0.6.4

package/lib/discountableElements.umd.js

@@ -10356,54 +10356,12 @@
       const ambientS = rotate ? `${-ambientM.y}px ${ambientM.y / 2}px ${ambientM.b}px ${ambientM.s}px` : `${ambientM.y / 2}px ${ambientM.y}px ${ambientM.b}px ${ambientM.s}px`;
       return `${umbraS} ${umbraC}, ${penumbraS} ${penumbraC}, ${ambientS} ${ambientC}`;
     }
-    static get svgDefs() {
-      const shadows = DecidablesElement.shadows; /* eslint-disable-line prefer-destructuring */
-
-      const filters = shadows.elevations.map(z => {
-        return `
-        <filter id=${`shadow-${z}`} filterUnits="userSpaceOnUse" x="-100%" y="-100%" width="200%" height="200%">
-          <feComponentTransfer in="SourceAlpha" result="solid">
-            <feFuncA type="table" tableValues="0 1 1"/>
-          </feComponentTransfer>
-          <feOffset in="solid" result="offU" dx=${shadows.mapUmbra[z].y / 2} dy=${shadows.mapUmbra[z].y} />
-          <feOffset in="solid" result="offP" dx=${shadows.mapPenumbra[z].y / 2} dy=${shadows.mapPenumbra[z].y} />
-          <feOffset in="solid" result="offA" dx=${shadows.mapAmbient[z].y / 2} dy=${shadows.mapAmbient[z].y} />
-          ${shadows.mapUmbra[z].s === 0 ? '' : `<feMorphology in="offU" result="spreadU" operator=${shadows.mapUmbra[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapUmbra[z].s)} />`}
-          ${shadows.mapPenumbra[z].s === 0 ? '' : `<feMorphology in="offP" result="spreadP" operator=${shadows.mapPenumbra[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapPenumbra[z].s)} />`}
-          ${shadows.mapAmbient[z].s === 0 ? '' : `<feMorphology in="offA" result="spreadA" operator=${shadows.mapAmbient[z].s > 0 ? 'dilate' : 'erode'} radius=${Math.abs(shadows.mapAmbient[z].s)} />`}
-          <feGaussianBlur in=${shadows.mapUmbra[z].s === 0 ? 'offU' : 'spreadU'} result="blurU" stdDeviation=${shadows.mapUmbra[z].b / 2} />
-          <feGaussianBlur in=${shadows.mapPenumbra[z].s === 0 ? 'offP' : 'spreadP'} result="blurP" stdDeviation=${shadows.mapPenumbra[z].b / 2} />
-          <feGaussianBlur in=${shadows.mapAmbient[z].s === 0 ? 'offA' : 'spreadA'} result="blurA" stdDeviation=${shadows.mapAmbient[z].b / 2} />
-          <feFlood in="SourceGraphic" result="opU" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityUmbra + shadows.opacityBoost} />
-          <feFlood in="SourceGraphic" result="opP" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityPenumbra + shadows.opacityBoost} />
-          <feFlood in="SourceGraphic" result="opA" flood-color=${shadows.baselineColor} flood-opacity=${shadows.opacityAmbient + shadows.opacityBoost} />
-          <feComposite in="opU" in2="blurU" result="shU" operator="in" />
-          <feComposite in="opP" in2="blurP" result="shP" operator="in" />
-          <feComposite in="opA" in2="blurA" result="shA" operator="in" />
-          <feMorphology in="solid" result="smaller" operator="erode" radius="1" />
-          <feComposite in="shU" in2="smaller" result="finalU" operator="out" />
-          <feComposite in="shP" in2="smaller" result="finalP" operator="out" />
-          <feComposite in="shA" in2="smaller" result="finalA" operator="out" />
-          <feMerge>
-            <feMergeNode in="finalU" />
-            <feMergeNode in="finalP" />
-            <feMergeNode in="finalA" />
-            <feMergeNode in="SourceGraphic" />
-          </feMerge>
-        </filter>`;
-      });
-      return `
-      <defs>
-        ${filters}
-      </defs>
-    `;
-    }
     static get svgFilters() {
       const shadows = DecidablesElement.shadows; /* eslint-disable-line prefer-destructuring */
 
       const filters = shadows.elevations.map(z => {
         return b$1`
-        <filter id=${`shadow-${z}`} x="-250%" y="-250%" width="600%" height="600%">
+        <filter id=${`shadow-${z}`} filterUnits="userSpaceOnUse" x="-100%" y="-100%" width="200%" height="200%">
           <feComponentTransfer in="SourceAlpha" result="solid">
             <feFuncA type="table" tableValues="0 1 1"/>
           </feComponentTransfer>
@@ -10435,11 +10393,9 @@
         </filter>`;
       });
       return b$1`
-      <svg class="defs">
-        <defs>
-          ${filters}
-        </defs>
-      </svg>
+      <defs class="filtersUser">
+        ${filters}
+      </defs>
     `;
     }
     static get styles() {
@@ -13072,26 +13028,45 @@
 
         .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 {
@@ -13257,16 +13232,18 @@
         rem: this.rem
       }]);
       //  ENTER
-      const svgEnter = svgUpdate.enter().append('svg').classed('main', true);
-      svgEnter.html(DiscountableElement.svgDefs);
+      const svgEnter = svgUpdate.enter().append('svg').classed('main', true).each((datum, index, nodes) => {
+        // Filters for shadows
+        B$1(DiscountableElement.svgFilters, nodes[index]);
+      });
       // Gradients for fill animations
-      const svgDefs = svgEnter.append('defs');
-      const soonerGradient = svgDefs.append('linearGradient').classed('gradient sooner', true).attr('id', 'sooner-gradient');
+      const svgGradients = svgEnter.append('defs').classed('gradients', true);
+      const soonerGradient = svgGradients.append('linearGradient').classed('gradient sooner', true).attr('id', 'sooner-gradient');
       soonerGradient.append('stop').classed('stop-0', true).attr('offset', '0');
       soonerGradient.append('stop').classed('stop-before animation', true).attr('offset', '1');
       soonerGradient.append('stop').classed('stop-after animation', true).attr('offset', '1');
       soonerGradient.append('stop').classed('stop-100', true).attr('offset', '1');
-      const laterGradient = svgDefs.append('linearGradient').classed('gradient later', true).attr('id', 'later-gradient');
+      const laterGradient = svgGradients.append('linearGradient').classed('gradient later', true).attr('id', 'later-gradient');
       laterGradient.append('stop').classed('stop-0', true).attr('offset', '0');
       laterGradient.append('stop').classed('stop-before animation', true).attr('offset', '1');
       laterGradient.append('stop').classed('stop-after animation', true).attr('offset', '1');
@@ -13814,7 +13791,7 @@
           element.d = interpolateD(time);
           return `${xScale(element.d)}`;
         };
-      }).attrTween('y2', (datum, index, elements) => {
+      }).attr('y1', yScale(0)).attrTween('y2', (datum, index, elements) => {
         const element = elements[index];
         const interpolateA = interpolate$1(element.a !== undefined ? element.a : datum.a, datum.a);
         return time => {