@decidables/detectable-elements 0.1.0 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/detectable-elements",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "description": "detectable-elements: Web Components for visualizing Signal Detection Theory",
   "keywords": [
     "web component",
@@ -56,11 +56,11 @@
     "gulp": "^4.0.2"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.1.0",
-    "@decidables/detectable-math": "^0.1.0",
+    "@decidables/decidables-elements": "^0.3.0",
+    "@decidables/detectable-math": "^0.1.1",
     "d3": "^7.3.0",
     "jstat": "^1.9.5",
     "lit": "^2.2.1"
   },
-  "gitHead": "ff0be0d953bf39b21f81d8303edee92c3e76d04c"
+  "gitHead": "6cb4f73701fe96a9344ae979a1a8d6782e7bc94d"
 }

package/src/components/detectable-control.js

@@ -234,11 +234,11 @@ export default class DetectableControl extends DetectableElement {
           ? html`
             <decidables-toggle @change=${this.chooseColor.bind(this)}>
               <span slot="label">Emphasis</span>
-              <decidables-toggle-option name=${`${this.uniqueId}-color`} value="none" ?checked=${this.color === 'none'}>None</decidables-toggle-option>
-              <decidables-toggle-option name=${`${this.uniqueId}-color`} value="accuracy" ?checked=${this.color === 'accuracy'}>Accuracy</decidables-toggle-option>
-              <decidables-toggle-option name=${`${this.uniqueId}-color`} value="stimulus" ?checked=${this.color === 'stimulus'}>Stimulus</decidables-toggle-option>
-              <decidables-toggle-option name=${`${this.uniqueId}-color`} value="response" ?checked=${this.color === 'response'}>Response</decidables-toggle-option>
-              <decidables-toggle-option name=${`${this.uniqueId}-color`} value="outcome" ?checked=${this.color === 'outcome'}>Outcome</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="none" ?checked=${this.color === 'none'}>None</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="accuracy" ?checked=${this.color === 'accuracy'}>Accuracy</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="stimulus" ?checked=${this.color === 'stimulus'}>Stimulus</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="response" ?checked=${this.color === 'response'}>Response</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="outcome" ?checked=${this.color === 'outcome'}>Outcome</decidables-toggle-option>
             </decidables-toggle>
           `
           : html``}

package/src/components/detectable-table.js

@@ -527,10 +527,10 @@ export default class DetectableTable extends DetectableElement {
           </tr>
           <tr>
             <th class="th th-sub" scope="col">
-              "Present"
+              ‘Present’
             </th>
             <th class="th th-sub" scope="col">
-              "Absent"
+              ‘Absent’
             </th>
           </tr>
         </thead>

package/src/components/rdk-task.js

@@ -164,7 +164,7 @@ export default class RDKTask extends DetectableElement {
         }
 
         .dot {
-          /* r: 2px; HACK: Firefox does not support CSS SVG Geometry Properties */
+          r: 2px;
         }
 
         .dots.coherent {
@@ -213,8 +213,7 @@ export default class RDKTask extends DetectableElement {
     super.firstUpdated(changedProperties);
 
     // Get the width and height after initial render/update has occurred
-    // HACK Edge: Edge doesn't have width/height until after a 0ms timeout
-    window.setTimeout(this.getDimensions.bind(this), 0);
+    this.getDimensions();
   }
 
   update(changedProperties) {
@@ -556,8 +555,7 @@ export default class RDKTask extends DetectableElement {
       .data((datum) => { return datum; });
     //  ENTER
     const dotEnter = dotUpdate.enter().append('circle')
-      .classed('dot', true)
-      .attr('r', 2); /* HACK: Firefox does not support CSS SVG Geometry Properties */
+      .classed('dot', true);
     //  MERGE
     dotEnter.merge(dotUpdate)
       .attr('cx', (datum) => { return datum.x; })

package/src/components/roc-space.js

@@ -361,13 +361,13 @@ export default class ROCSpace extends DetectableElement {
         .point .circle {
           fill: var(---color-element-emphasis);
 
-          /* r: 6; HACK: Firefox does not support CSS SVG Geometry Properties */
+          r: 6px;
         }
 
         .point .label {
           font-size: 0.75rem;
 
-          dominant-baseline: middle;
+          dominant-baseline: central;
           text-anchor: middle;
 
           fill: var(---color-text-inverse);
@@ -403,8 +403,7 @@ export default class ROCSpace extends DetectableElement {
     super.firstUpdated(changedProperties);
 
     // Get the width and height after initial render/update has occurred
-    // HACK Edge: Edge doesn't have width/height until after a 0ms timeout
-    window.setTimeout(this.getDimensions.bind(this), 0);
+    this.getDimensions();
   }
 
   update(changedProperties) {
@@ -1054,8 +1053,7 @@ export default class ROCSpace extends DetectableElement {
     const pointEnter = pointUpdate.enter().append('g')
       .classed('point', true);
     pointEnter.append('circle')
-      .classed('circle', true)
-      .attr('r', 6); /* HACK: Firefox does not support CSS SVG Geometry Properties */
+      .classed('circle', true);
     pointEnter.append('text')
       .classed('label', true);
     //  MERGE

package/src/components/sdt-model.js

@@ -415,7 +415,7 @@ export default class SDTModel extends DetectableElement {
         .threshold .handle {
           fill: var(---color-element-emphasis);
 
-          /* r: 6; HACK: Firefox does not support CSS SVG Geometry Properties */
+          r: 6px;
         }
 
         /* Make a larger target for touch users */
@@ -517,8 +517,7 @@ export default class SDTModel extends DetectableElement {
     super.firstUpdated(changedProperties);
 
     // Get the width and height after initial render/update has occurred
-    // HACK Edge: Edge doesn't have width/height until after a 0ms timeout
-    window.setTimeout(this.getDimensions.bind(this), 0);
+    this.getDimensions();
   }
 
   update(changedProperties) {
@@ -1467,8 +1466,7 @@ export default class SDTModel extends DetectableElement {
     thresholdEnter.append('line')
       .classed('line', true);
     thresholdEnter.append('circle')
-      .classed('handle', true)
-      .attr('r', 6); /* HACK: Firefox does not support CSS SVG Geometry Properties */
+      .classed('handle', true);
     //  MERGE
     const thresholdMerge = thresholdEnter.merge(thresholdUpdate)
       .attr('tabindex', this.interactive ? 0 : null)

package/src/equations/hmfacr2acc.js

@@ -149,7 +149,7 @@ export default class SDTEquationHMFaCr2Acc extends SDTEquation {
             </tr>
             <tr>
               <td>
-                ${h}<span class="plus">+</span>${m}<span class="plus">+</span>${fa}<span class="plus">+</span>${cr}
+                ${h}<span class="plus">+</span>${cr}<span class="plus">+</span>${m}<span class="plus">+</span>${fa}
               </td>
             </tr>
           </tbody>

package/src/equations/sdt-equation.js

@@ -64,6 +64,10 @@ export default class SDTEquation extends DetectableElement {
           font-style: normal;
         }
 
+        var {
+          border-radius: var(---border-radius);
+        }
+
         .tight {
           padding: 0;
         }
@@ -89,6 +93,8 @@ export default class SDTEquation extends DetectableElement {
           padding: 0.125rem 0.375rem 0.375rem;
 
           vertical-align: middle;
+
+          border-radius: var(---border-radius);
         }
 
         .bottom {

package/src/examples/sdt-example.js

@@ -13,12 +13,8 @@ export default class SDTExample extends DetectableElement {
       super.styles,
       css`
         :host {
-          ---border: var(--border, 1px solid var(---color-border));
           display: inline-block;
 
-          /* This makes IE11 happy */
-          width: 100%;
-
           margin-bottom: 1rem;
         }
 
@@ -37,7 +33,7 @@ export default class SDTExample extends DetectableElement {
           padding: 0.625rem;
 
           border: var(---border);
-          border-radius: 0.25rem;
+          border-radius: var(---border-radius);
         }
 
         .body ::slotted(*) {