@decidables/decidables-elements 0.0.4 → 0.2.0

package/package.json

@@ -1,7 +1,14 @@
 {
   "name": "@decidables/decidables-elements",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "description": "decidables-elements: Basic UI Web Components for the decidables project",
+  "keywords": [
+    "web component",
+    "explorable explanation",
+    "explorable",
+    "decision making",
+    "decidables"
+  ],
   "type": "module",
   "main": "./lib/decidablesElements.umd.min.js",
   "browser": "./lib/decidablesElements.umd.min.js",
@@ -36,17 +43,13 @@
     "test:file": "web-test-runner $@ --config ../../.webtestrunnerrc.js",
     "build": "gulp build"
   },
-  "browserslist": [
-    "> 0.25%",
-    "not dead"
-  ],
   "devDependencies": {
     "@web/test-runner": "^0.13.27",
     "gulp": "^4.0.2"
   },
   "dependencies": {
     "d3": "^7.3.0",
-    "lit": "^2.1.2"
+    "lit": "^2.2.1"
   },
-  "gitHead": "f3e3115ad33a8e1ad5db8ae455b67f571f4561c6"
+  "gitHead": "07fdb2ad62b19a19a284992cb74119bd0963b2a3"
 }

package/src/decidables-element.js

@@ -12,27 +12,8 @@ import * as d3 from 'd3';
   <decidables-element>
 */
 export default class DecidablesElement extends LitElement {
-  // HACK: Create a unique ID for each DecidablesElement
-  // This is needed because Edge/IE11 don't have real Shadow DOM, so IDs leak
-  // out of elements and collide if there is more than one of an element on a
-  // page. Known issue for checkbox/switches and the id/for pattern on <input>
-  // and <label>
-  static get uniqueId() {
-    DecidablesElement.ID += 1;
-    return DecidablesElement.ID;
-  }
-
-  constructor() {
-    super();
-    this.uniqueId = `decidables-${DecidablesElement.uniqueId}`;
-  }
-
   getComputedStyleValue(property) {
-    // HACK: IE11 requires use of polyfill interface to get custom property value in Javascript
-    if (window.ShadyCSS) {
-      return window.ShadyCSS.getComputedStyleValue(this, property);
-    }
-    return getComputedStyle(this).getPropertyValue(property);
+    return getComputedStyle(this).getPropertyValue(property).trim();
   }
 
   firstUpdated(changedProperties) {
@@ -145,7 +126,6 @@ export default class DecidablesElement extends LitElement {
 
   static get svgFilters() {
     const shadows = DecidablesElement.shadows; // eslint-disable-line prefer-destructuring
-    const erodeRadius = 1;
 
     const filters = shadows.elevations.map((z) => {
       return svg`
@@ -177,8 +157,7 @@ export default class DecidablesElement extends LitElement {
           <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" />
-          <!-- HACK Edge: Using a dynamic value for erode radius stops Edge from corrupting the "radius" value! -->
-          <feMorphology in="solid" result="smaller" operator="erode" radius=${erodeRadius} />
+          <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" />
@@ -259,6 +238,3 @@ export default class DecidablesElement extends LitElement {
     `;
   }
 }
-
-// Static property of DecidablesElement!
-DecidablesElement.ID = 0;

package/src/slider.js

@@ -319,11 +319,11 @@ export default class DecidablesSlider extends DecidablesElement {
 
   render() {
     return html`
-      <label for=${`${this.uniqueId}-slider`}>
+      <label for="slider">
         <slot></slot>
       </label>
       <div class="range">
-        <input type="range" id=${`${this.uniqueId}-slider`} min=${ifDefined(this.min)} max=${ifDefined(this.max)} step=${ifDefined(this.step)} .value=${this.value} @change=${this.changed.bind(this)} @input=${this.inputted.bind(this)}>
+        <input type="range" id="slider" min=${ifDefined(this.min)} max=${ifDefined(this.max)} step=${ifDefined(this.step)} .value=${this.value} @change=${this.changed.bind(this)} @input=${this.inputted.bind(this)}>
       </div>
       <decidables-spinner min=${ifDefined(this.min)} max=${ifDefined(this.max)} step=${ifDefined(this.step)} .value=${this.value} @input=${this.inputted.bind(this)}></decidables-spinner>
     `;

package/src/switch.js

@@ -165,11 +165,11 @@ export default class DecidablesSwitch extends DecidablesElement {
 
   render() {
     return html`
-      <input type="checkbox" id=${`${this.uniqueId}-checkbox`} ?checked=${this.checked} ?disabled=${this.disabled} @change=${this.changed.bind(this)}>
-      <label for=${`${this.uniqueId}-checkbox`}>
+      <input type="checkbox" id="switch" ?checked=${this.checked} ?disabled=${this.disabled} @change=${this.changed.bind(this)}>
+      <label for="switch">
         <slot name="off-label"></slot>
       </label>
-      <label for=${`${this.uniqueId}-checkbox`}>
+      <label for="switch">
         <slot></slot>
       </label>
     `;

package/src/toggle-option.js

@@ -152,8 +152,8 @@ export default class DecidablesToggleOption extends DecidablesElement {
 
   render() {
     return html`
-      <input type="radio" id=${`${this.uniqueId}-radio`} name=${this.name} value=${this.value} .checked=${this.checked} @change=${this.changed.bind(this)}>
-      <label for=${`${this.uniqueId}-radio`}>
+      <input type="radio" id="toggle-option" name=${this.name} value=${this.value} .checked=${this.checked} @change=${this.changed.bind(this)}>
+      <label for="toggle-option">
         <slot></slot>
       </label>
     `;