@decidables/discountable-elements 0.6.3 → 0.6.5

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() {
@@ -12214,9 +12170,9 @@
     }
     update(t, [i]) {
       const s = void 0 === this.u;
-      return s && (this.u = t.options?.host, this.u.addController(this), this.u.updateComplete.then(t => this.t = true), this.element = t.element, j.set(this.element, this)), this.optionsOrCallback = i, (s || "function" != typeof i) && this.p(i), this.render(i);
+      return s && (this.u = t.options?.host, this.u.addController(this), this.u.updateComplete.then(t => this.t = true), this.element = t.element, j.set(this.element, this)), this.optionsOrCallback = i, (s || "function" != typeof i) && this.m(i), this.render(i);
     }
-    p(t) {
+    m(t) {
       t = t ?? {};
       const i = this.getController();
       void 0 !== i && ((t = {
@@ -12227,7 +12183,7 @@
         ...t.keyframeOptions
       }), t.properties ??= b, this.options = t;
     }
-    m() {
+    p() {
       const t = {},
         i = this.element.getBoundingClientRect(),
         s = getComputedStyle(this.element);
@@ -12248,20 +12204,20 @@
       })(t, this._)), this.h = this.t && !this.isDisabled() && !this.isAnimating() && i && this.element.isConnected, this.h && (this._ = Array.isArray(t) ? Array.from(t) : t), this.h;
     }
     hostUpdate() {
-      "function" == typeof this.optionsOrCallback && this.p(this.optionsOrCallback()), this.v() && (this.A = this.m(), this.i = this.i ?? this.element.parentNode, this.o = this.element.nextSibling);
+      "function" == typeof this.optionsOrCallback && this.m(this.optionsOrCallback()), this.v() && (this.A = this.p(), this.i = this.i ?? this.element.parentNode, this.o = this.element.nextSibling);
     }
     async hostUpdated() {
       if (!this.h || !this.element.isConnected || this.options.skipInitial && !this.isHostRendered) return;
       let t;
       this.prepare(), await a;
-      const i = this.O(),
-        s = this.j(this.options.keyframeOptions, i),
-        e = this.m();
+      const i = this.P(),
+        s = this.V(this.options.keyframeOptions, i),
+        e = this.p();
       if (void 0 !== this.A) {
         const {
           from: s,
           to: h
-        } = this.N(this.A, e, i);
+        } = this.O(this.A, e, i);
         this.log("measured", [this.A, e, s, h]), t = this.calculateKeyframes(s, h);
       } else {
         const s = r.get(this.options.inId);
@@ -12270,7 +12226,7 @@
           const {
             from: h,
             to: n
-          } = this.N(s, e, i);
+          } = this.O(s, e, i);
           t = this.calculateKeyframes(h, n), t = this.options.in ? [{
             ...this.options.in[0],
             ...t[0]
@@ -12280,10 +12236,10 @@
       this.animate(t, s);
     }
     resetStyles() {
-      void 0 !== this.P && (this.element.setAttribute("style", this.P ?? ""), this.P = void 0);
+      void 0 !== this.j && (this.element.setAttribute("style", this.j ?? ""), this.j = void 0);
     }
     commitStyles() {
-      this.P = this.element.getAttribute("style"), this.webAnimation?.commitStyles(), this.webAnimation?.cancel();
+      this.j = this.element.getAttribute("style"), this.webAnimation?.commitStyles(), this.webAnimation?.cancel();
     }
     reconnected() {}
     async disconnected() {
@@ -12292,14 +12248,14 @@
       if (this.prepare(), await a(), this.i?.isConnected) {
         const t = this.o && this.o.parentNode === this.i ? this.o : null;
         if (this.i.insertBefore(this.element, t), this.options.stabilizeOut) {
-          const t = this.m();
+          const t = this.p();
           this.log("stabilizing out");
           const i = this.A.left - t.left,
             s = this.A.top - t.top;
           !("static" === getComputedStyle(this.element).position) || 0 === i && 0 === s || (this.element.style.position = "relative"), 0 !== i && (this.element.style.left = i + "px"), 0 !== s && (this.element.style.top = s + "px");
         }
       }
-      const t = this.j(this.options.keyframeOptions);
+      const t = this.V(this.options.keyframeOptions);
       await this.animate(this.options.out, t), this.element.remove();
     }
     prepare() {
@@ -12311,7 +12267,7 @@
     didFinish(t) {
       t && this.options.onComplete?.(this), this.A = void 0, this.animatingProperties = void 0, this.frames = void 0, this.resolveFinished();
     }
-    O() {
+    P() {
       const t = [];
       for (let i = this.element.parentNode; i; i = i?.parentNode) {
         const s = j.get(i);
@@ -12325,13 +12281,13 @@
         n.add(this.u);
       }), t;
     }
-    j(t, i = this.O()) {
+    V(t, i = this.P()) {
       const s = {
         ...A
       };
       return i.forEach(t => Object.assign(s, t.options.keyframeOptions)), Object.assign(s, t), s;
     }
-    N(t, i, s) {
+    O(t, i, s) {
       t = {
         ...t
       }, i = {
@@ -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) {
+        :host(.keyboard) .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 => {