@decidables/decidables-elements 0.3.4 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/decidables-elements",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "decidables-elements: Basic UI Web Components for the decidables project",
   "keywords": [
     "web component",
@@ -44,12 +44,12 @@
     "build": "gulp build"
   },
   "devDependencies": {
-    "@web/test-runner": "^0.15.1",
+    "@web/test-runner": "^0.17.1",
     "gulp": "^4.0.2"
   },
   "dependencies": {
-    "d3": "^7.8.2",
-    "lit": "^2.7.0"
+    "d3": "^7.8.5",
+    "lit": "^2.8.0"
   },
-  "gitHead": "6d3c14bd3e0aa1ed9d50a685fb9dccec24633a05"
+  "gitHead": "0c1c25702476045288038e7cacaaa70245b84cd1"
 }

package/src/decidables-element.js

@@ -124,6 +124,59 @@ export default class DecidablesElement extends LitElement {
     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 */
 
@@ -131,7 +184,7 @@ export default class DecidablesElement extends LitElement {
       return svg`
         <filter id=${`shadow-${z}`} x="-250%" y="-250%" width="600%" height="600%">
           <feComponentTransfer in="SourceAlpha" result="solid">
-            <feFuncA  type="table" tableValues="0 1 1"/>
+            <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} />

package/src/index.js

@@ -1,5 +1,8 @@
 
+// Base class for Decidables Web Components
 export {default as DecidablesElement} from './decidables-element';
+
+// UI Elements
 export {default as DecidablesButton} from './button';
 export {default as DecidablesSlider} from './slider';
 export {default as DecidablesSpinner} from './spinner';
@@ -7,5 +10,9 @@ export {default as DecidablesSwitch} from './switch';
 export {default as DecidablesToggle} from './toggle';
 export {default as DecidablesToggleOption} from './toggle-option';
 
+// Property Converters
 export {default as DecidablesConverterArray} from './converter-array';
 export {default as DecidablesConverterSet} from './converter-set';
+
+// Mixins
+export {default as DecidablesMixinResizeable} from './mixin-resizeable';

package/src/mixin-resizeable.js

@@ -0,0 +1,51 @@
+
+export default function DecidablesMixinResizeable(superClass) {
+  return class extends superClass {
+    static get properties() {
+      return {
+        width: {
+          attribute: false,
+          type: Number,
+          reflect: false,
+        },
+        height: {
+          attribute: false,
+          type: Number,
+          reflect: false,
+        },
+        rem: {
+          attribute: false,
+          type: Number,
+          reflect: false,
+        },
+      };
+    }
+
+    constructor() {
+      super();
+
+      this.width = NaN;
+      this.height = NaN;
+      this.rem = NaN;
+    }
+
+    getDimensions() {
+      this.width = parseFloat(this.getComputedStyleValue('width'), 10);
+      this.height = parseFloat(this.getComputedStyleValue('height'), 10);
+      this.rem = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('font-size'), 10);
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+
+      this.resizeObserver = new ResizeObserver(this.getDimensions.bind(this));
+      this.resizeObserver.observe(this);
+    }
+
+    disconnectedCallback() {
+      this.resizeObserver.unobserve(this);
+
+      super.disconnectedCallback();
+    }
+  };
+}

package/src/spinner.js

@@ -59,6 +59,9 @@ export default class DecidablesSpinner extends DecidablesElement {
           ---decidables-spinner-input-width: var(--decidables-spinner-input-width, 4rem);
           ---decidables-spinner-prefix: var(--decidables-spinner-prefix, "");
 
+          ---decidables-spinner-postfix: var(--decidables-spinner-postfix, "");
+          ---decidables-spinner-postfix-padding: var(--decidables-spinner-postfix-padding, 0);
+
           display: block;
         }
 
@@ -86,8 +89,20 @@ export default class DecidablesSpinner extends DecidablesElement {
           content: var(---decidables-spinner-prefix);
         }
 
+        label::after {
+          position: absolute;
+          right: 0.25rem;
+          bottom: 1px;
+
+          font-size: var(---decidables-spinner-font-size);
+          line-height: normal;
+
+          content: var(---decidables-spinner-postfix);
+        }
+
         input[type=number] {
           width: var(---decidables-spinner-input-width);
+          padding-right: var(---decidables-spinner-postfix-padding);
 
           font-family: var(---font-family-base);
           font-size: var(---decidables-spinner-font-size);