funnel-gfx-wc 0.0.196 → 0.0.200

package/dist/cjs/{color-picker_6.cjs.entry.js → funnel-app.cjs.entry.js}

@@ -2,7 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a44a40b7.js');
+const index = require('./index-53976b87.js');
+
+const Radio = props => {
+  const hex = props.hex || 'currentColor';
+  const klass = props.class;
+  const label = props.label || 'radio';
+  const selected = props.selected || false;
+  const size = props.size || 24;
+  return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+    index.h("title", null, label),
+    ' ',
+    index.h("g", { fill: hex }, selected ? (index.h("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })) : (index.h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }))),
+    index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2193,6 +2206,8 @@ const black = '#111111';
 const gray = '#aaaaaa';
 const silver = '#dddddd';
 const bada55 = '#bada55';
+const slate = '#708090';
+const slate4 = '#4e5964';
 const white = '#ffffff';
 // NOTE:  this is ONLY used internally...
 const _namedColors = {
@@ -2214,7 +2229,8 @@ const _namedColors = {
   gray,
   silver,
 };
-const colorFor = (key) => _namedColors[key];
+const _allColors = Object.assign(Object.assign({}, _namedColors), { slate, slate4, white });
+const colorFor = (key) => _allColors[key];
 const colorKeys = Object.keys(_namedColors);
 
 const appendToMap = (map, propName, value) => {
@@ -2423,230 +2439,217 @@ const actions = {
   },
 };
 
-const ChevronDoubleLeft = ({ hex = navy, size = 24 }) => {
-  return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24" },
+const ColorPicker = _props => {
+  const { pick } = store.state;
+  return (index.h("div", { id: "toolbar", class: "flex flex-wrap", role: "radiogroup" }, colorKeys.map((key) => {
+    const hex = colorFor(key);
+    const selected = pick == key;
+    return (index.h("div", { "aria-label": key, role: "radio", title: key, onClick: () => {
+        actions.updatePick(key);
+      } },
+      index.h(Radio, { hex: hex, selected: selected })));
+  })));
+};
+
+const ChevronDoubleLeft = props => {
+  const hex = props.hex || 'currentColor';
+  const klass = props.class;
+  const label = props.label || 'chevron-double-left';
+  const size = props.size || 24;
+  return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+    index.h("title", null, label),
     index.h("g", { fill: hex },
       index.h("path", { d: "M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z" })),
     index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
 };
 
-const Close = ({ hex = white, size = 24 }) => {
-  return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24" },
+const Close = props => {
+  const hex = props.hex || 'currentColor';
+  const klass = props.class;
+  const label = props.label || 'close';
+  const size = props.size || 24;
+  return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+    index.h("title", null, label),
     index.h("g", { fill: hex },
       index.h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })),
     index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
 };
 
-const Paw = ({ hex = white, size = 24 }) => {
-  return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24" },
-    index.h("g", { fill: hex },
-      index.h("path", { d: "M8.35,3C9.53,2.83 10.78,4.12 11.14,5.9C11.5,7.67 10.85,9.25\n      9.67,9.43C8.5,9.61 7.24,8.32 6.87,6.54C6.5,4.77 7.17,3.19\n      8.35,3M15.5,3C16.69,3.19 17.35,4.77 17,6.54C16.62,8.32 15.37,9.61\n      14.19,9.43C13,9.25 12.35,7.67 12.72,5.9C13.08,4.12 14.33,2.83\n      15.5,3M3,7.6C4.14,7.11 5.69,8 6.5,9.55C7.26,11.13 7,12.79\n      5.87,13.28C4.74,13.77 3.2,12.89 2.41,11.32C1.62,9.75 1.9,8.08\n      3,7.6M21,7.6C22.1,8.08 22.38,9.75 21.59,11.32C20.8,12.89 19.26,13.77\n      18.13,13.28C17,12.79 16.74,11.13 17.5,9.55C18.31,8 19.86,7.11\n      21,7.6M19.33,18.38C19.37,19.32 18.65,20.36 17.79,20.75C16,21.57\n      13.88,19.87 11.89,19.87C9.9,19.87 7.76,21.64 6,20.75C5,20.26 4.31,18.96\n      4.44,17.88C4.62,16.39 6.41,15.59 7.47,14.5C8.88,13.09 9.88,10.44\n      11.89,10.44C13.89,10.44 14.95,13.05 16.3,14.5C17.41,15.72 19.26,16.75\n      19.33,18.38Z" })),
-    index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
-};
-
-const Radio = ({ hex = white, selected = false, size = 24 }) => {
-  return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24" },
-    index.h("g", { fill: hex }, selected ? (index.h("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" })) : (index.h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }))),
-    index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
-};
-
-const Refresh = ({ hex = white, size = 24 }) => {
-  return (index.h("svg", { width: size, height: size, viewBox: "0 0 24 24" },
+const Refresh = props => {
+  const hex = props.hex || 'currentColor';
+  const klass = props.class;
+  const label = props.label || 'refresh';
+  const size = props.size || 24;
+  return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+    index.h("title", null, label),
     index.h("g", { fill: hex },
-      index.h("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" })),
+      index.h("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99\n          8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65\n          4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35\n          2.35z" })),
     index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
 };
 
-const colorPickerCss = "#toolbar{display:flex;flex-direction:row;flex-wrap:wrap}";
-
-let FunnelGfx$1 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tag = 'color-picker';
-  }
-  render() {
-    const { pick } = store.state;
-    return (index.h("div", { id: "toolbar", role: "radiogroup" }, colorKeys.map((key) => {
-      const hex = colorFor(key);
-      const selected = pick == key;
-      return (index.h("div", { "aria-label": key, role: "radio", title: key, onClick: () => {
-          actions.updatePick(key);
-        } }, Radio({ hex, selected })));
-    })));
-  }
-};
-FunnelGfx$1.style = colorPickerCss;
-
-const dataSourceCss = "#toolbar{display:flex;flex-direction:row;align-items:center;margin-top:10px;margin-bottom:10px}button{display:flex;align-content:center;border-radius:5px;border:1px solid #ccc;padding:5px;margin:0px;margin-right:5px;cursor:pointer}button:active{background-color:var(--clrs-gray)}.bg-blue{background:var(--clrs-blue)}.bg-red{background:var(--clrs-red)}.info{color:var(--clrs-navy);fill:var(--clrs-navy);display:flex;flex-direction:row;align-items:center}.help{font-style:italic}";
-
 const help = 'click a button... ';
-let DataSource = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tag = 'data-source';
-  }
-  render() {
-    const { count } = store.state;
-    return (index.h("div", { id: "toolbar" }, index.h("button", { "aria-label": "Refresh", title: "Refresh", class: "bg-blue", onClick: () => {
+const DataSource = _props => {
+  const { count } = store.state;
+  return (index.h("div", { class: "flex mt-3 mb-10px items-center" },
+    index.h("button", { "aria-label": "Refresh", title: "Refresh", class: "ds1-button data-button bg-clrs-blue", onClick: () => {
         actions.refresh();
-      } }, Refresh({})), index.h("button", { "aria-label": "Reset", title: "Reset", class: "bg-red", onClick: () => {
+      } },
+      index.h(Refresh, null)),
+    index.h("button", { "aria-label": "Reset", title: "Reset", class: "ds1-button data-button bg-clrs-red", onClick: () => {
         actions.reset();
-      } }, Close({})), index.h("span", { class: "info" }, ChevronDoubleLeft({ size: 28 }), index.h("span", { class: "help" }, help, index.h("sup", null, count)))));
-  }
+      } },
+      index.h(Close, null)),
+    index.h("span", { class: "flex items-center" },
+      index.h(ChevronDoubleLeft, { size: 28 }),
+      index.h("span", { class: "italic" },
+        help,
+        index.h("sup", null, count)))));
+};
+
+const DataValues = _props => {
+  const { values, pick, count } = store.state;
+  return (index.h("div", { class: "flex flex-col" },
+    index.h("div", { class: "flex" },
+      index.h("span", { class: "font-bold mr-10px" }, "color:"),
+      index.h("span", { class: "italic text-clrs-slate4" }, pick)),
+    index.h("div", { class: "flex mt-5px" },
+      index.h("span", { class: "font-bold mr-10px" }, "sample:"),
+      index.h("span", { class: "italic text-clrs-slate4" }, `${count > 0 ? values : '...'}`))));
 };
-DataSource.style = dataSourceCss;
 
-const dataValuesCss = ".info{display:flex;flex-direction:column}.row{display:flex;flex-direction:row;align-items:center}.sample{margin-top:5px}.label{color:var(--clrs-navy);font-weight:bold;margin-right:10px}.value{color:var(--clrs-slate4);font-style:italic}";
+var between = createCommonjsModule(function (module, exports) {
+/* Between.js v0.1.2-fix.2 */
+!function(t,n){module.exports=n();}(commonjsGlobal,function(){function O(t){return (O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,n){for(var e=0;e<n.length;e++){var r=n[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r);}}function n(t,n,e){return n&&r(t.prototype,n),e&&r(t,e),t}function M(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function I(t){return (I=Object.getPrototypeOf||function(t){return t.__proto__})(t)}function o(t,n){return (o=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function u(t,n,e){return (u="undefined"!=typeof Reflect&&Reflect.construct?Reflect.construct:function(t,n,e){var r=[null];r.push.apply(r,n);var u=new(t.bind.apply(t,r));return e&&o(u,e.prototype),u}).apply(null,arguments)}function _(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}var t=function(o){var a={},i=[];(o=o||this).on=function(t,n,e){return (a[t]=a[t]||[]).push([n,e]),o},o.off=function(t,n){t||(a={});for(var e=a[t]||i,r=e.length=n?e.length:0;r--;)n==e[r][0]&&e.splice(r,1);return o},o.emit=function(t){for(var n,e=a[t]||i,r=0<e.length?e.slice(0,e.length):e,u=0;n=r[u++];)n[0].apply(n[1],i.slice.call(arguments,1));return o};};var V=function(t,n,e){return t*(1-e)+n*e},e="undefined"!=typeof window?window:"undefined"!=typeof commonjsGlobal?commonjsGlobal:"undefined"!=typeof self?self:{};function a(t,n){return t(n={exports:{}},n.exports),n.exports}for(var i=a(function(t){var n=t.exports={Linear:{None:function(t){return t}},Quadratic:{In:function(t){return t*t},Out:function(t){return t*(2-t)},InOut:function(t){return (t*=2)<1?.5*t*t:-.5*(--t*(t-2)-1)}},Cubic:{In:function(t){return t*t*t},Out:function(t){return --t*t*t+1},InOut:function(t){return (t*=2)<1?.5*t*t*t:.5*((t-=2)*t*t+2)}},Quartic:{In:function(t){return t*t*t*t},Out:function(t){return 1- --t*t*t*t},InOut:function(t){return (t*=2)<1?.5*t*t*t*t:-.5*((t-=2)*t*t*t-2)}},Quintic:{In:function(t){return t*t*t*t*t},Out:function(t){return --t*t*t*t*t+1},InOut:function(t){return (t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)}},Sinusoidal:{In:function(t){return 1-Math.cos(t*Math.PI/2)},Out:function(t){return Math.sin(t*Math.PI/2)},InOut:function(t){return .5*(1-Math.cos(Math.PI*t))}},Exponential:{In:function(t){return 0===t?0:Math.pow(1024,t-1)},Out:function(t){return 1===t?1:1-Math.pow(2,-10*t)},InOut:function(t){return 0===t?0:1===t?1:(t*=2)<1?.5*Math.pow(1024,t-1):.5*(2-Math.pow(2,-10*(t-1)))}},Circular:{In:function(t){return 1-Math.sqrt(1-t*t)},Out:function(t){return Math.sqrt(1- --t*t)},InOut:function(t){return (t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)}},Elastic:{In:function(t){var n,e=.1;return 0===t?0:1===t?1:(!e||e<1?(e=1,n=.1):n=.4*Math.asin(1/e)/(2*Math.PI),-e*Math.pow(2,10*(t-=1))*Math.sin((t-n)*(2*Math.PI)/.4))},Out:function(t){var n,e=.1;return 0===t?0:1===t?1:(!e||e<1?(e=1,n=.1):n=.4*Math.asin(1/e)/(2*Math.PI),e*Math.pow(2,-10*t)*Math.sin((t-n)*(2*Math.PI)/.4)+1)},InOut:function(t){var n,e=.1;return 0===t?0:1===t?1:(!e||e<1?(e=1,n=.1):n=.4*Math.asin(1/e)/(2*Math.PI),(t*=2)<1?e*Math.pow(2,10*(t-=1))*Math.sin((t-n)*(2*Math.PI)/.4)*-.5:e*Math.pow(2,-10*(t-=1))*Math.sin((t-n)*(2*Math.PI)/.4)*.5+1)}},Back:{In:function(t){return t*t*(2.70158*t-1.70158)},Out:function(t){return --t*t*(2.70158*t+1.70158)+1},InOut:function(t){var n=2.5949095;return (t*=2)<1?t*t*((n+1)*t-n)*.5:.5*((t-=2)*t*((n+1)*t+n)+2)}},Bounce:{In:function(t){return 1-n.Bounce.Out(1-t)},Out:function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},InOut:function(t){return t<.5?.5*n.Bounce.In(2*t):.5*n.Bounce.Out(2*t-1)+.5}}};}),c=(a(function(a){(function(){var t,n,e,r,u,o;"undefined"!=typeof performance&&null!==performance&&performance.now?a.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(a.exports=function(){return (t()-u)/1e6},n=process.hrtime,r=(t=function(){var t;return 1e9*(t=n())[0]+t[1]})(),o=1e9*process.uptime(),u=r-o):Date.now?(a.exports=function(){return Date.now()-e},e=Date.now()):(a.exports=function(){return (new Date).getTime()-e},e=(new Date).getTime());}).call(e);})),l="undefined"==typeof window?e:window,f=["moz","webkit"],s="AnimationFrame",p=l["request"+s],h=l["cancel"+s]||l["cancelRequest"+s],m=0;!p&&m<f.length;m++)p=l[f[m]+"Request"+s],h=l[f[m]+"Cancel"+s]||l[f[m]+"CancelRequest"+s];if(!p||!h){var d=0,y=0,v=[];p=function(t){if(0===v.length){var n=c(),e=Math.max(0,1e3/60-(n-d));d=e+n,setTimeout(function(){for(var t=v.slice(0),n=v.length=0;n<t.length;n++)if(!t[n].cancelled)try{t[n].callback(d);}catch(t){setTimeout(function(){throw t},0);}},Math.round(e));}return v.push({handle:++y,callback:t,cancelled:!1}),y},h=function(t){for(var n=0;n<v.length;n++)v[n].handle===t&&(v[n].cancelled=!0);};}var b=function(t){return p.call(l,t)};b.cancel=function(){h.apply(l,arguments);},b.polyfill=function(t){t||(t=l),t.requestAnimationFrame=p,t.cancelAnimationFrame=h;};var w,k,P=[],T=Symbol("type"),j=Symbol("start_time"),x=Symbol("completed"),D=Symbol("paused"),g=requestAnimationFrame||b,A=Date.now();!function t(){g(t),w=Date.now(),k=w-A;for(var n=0;n<P.length;n++)P[n][x]||P[n](k,Date.now()-P[n][j]);A=w;}();var E=function(t){function g(e,t){var n,r,u,o;!function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}(this,g),u=this,o=I(g).call(this),M(_(_(r=!o||"object"!=typeof o&&"function"!=typeof o?_(u):o)),"update",function(){var e=_(_(r))._updateValue;return function(t,n){r[x]||r[D]||(0===r.localTime&&r.emit("start",r.value,_(_(r))),e(r.ease(r.loopFunction.progress(Math.min(1,(n||r.localTime)/r.duration)))),r.emit("update",r.value,_(_(r)),t),r.localTime>=r.duration&&r.loopFunction.complete(function(){r[x]=!0,r.emit("complete",r.value,_(_(r)));}),r.localTime+=t);}});var a=r.plugin=Object.values(g._plugins).reduce(function(t,n){return t||n&&n.test&&n.test(e)&&n},!1),i=a&&a.name||("object"===O(e)?Array.isArray(e)?"array":"object":"number");if(a){var c=a.initialize(e,t);e=c.startValue,t=c.destValue,r.data=c.data;}switch(Object.assign(_(_(r)),(M(n={duration:1e3,localTime:0,startValue:e,destValue:t,loopMode:"once",loopFunction:g.DEFAULT_LOOP,ease:function(t){return t},value:"array"===i?[].concat(e):"object"===i?Object.assign({},e):e},x,!1),M(n,T,i),M(n,j,Date.now()),M(n,D,!1),n)),r[T]){case"number":r._updateValue=function(t){r.value=V(r.startValue,r.destValue,t);};break;case"array":var l=r.value.length,f=_(_(r)),s=f.startValue,p=f.destValue,h=f.value;r._updateValue=function(t){for(var n=0;n<l;n++)h[n]=V(s[n],p[n],t);};break;case"object":var m=Object.keys(r.startValue),d=m.length,y=_(_(r)),v=y.startValue,b=y.destValue,w=y.value;r._updateValue=function(t){for(var n=0;n<d;n++){var e=m[n];w[e]=V(v[e],b[e],t);}};break;default:r.plugin?r._updateValue=function(t){r.value=r.plugin.interpolate(r.startValue,r.destValue,t,r.data);}:(console.warn("Between: startValue type was unrecognized."),r._updateValue=function(){return null});}return P.push(r.update()),r}return n(g,null,[{key:"between",value:function(){for(var t=arguments.length,n=new Array(t),e=0;e<t;e++)n[e]=arguments[e];return u(g,n)}}]),n(g,[{key:"pause",value:function(){return this[D]=!0,this.emit("pause",this.value,this,k),this}},{key:"play",value:function(){return this[D]=!1,this.emit("play",this.value,this,k),this}},{key:"easing",value:function(t){return this.ease=t,this}},{key:"time",value:function(t){return this.duration=t,this}},{key:"loop",value:function(){for(var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"once",n="__loop_".concat(t),e=arguments.length,r=new Array(1<e?e-1:0),u=1;u<e;u++)r[u-1]=arguments[u];return this.loopFunction=n in this?Object.assign({},g.DEFAULT_LOOP,this[n].apply(this,r)):g.DEFAULT_LOOP,this}},{key:"__loop_repeat",value:function(t){var n=this,e=t;return this.times=0,{complete:function(t){n.localTime=0,Number.isInteger(e)&&++n.times===e?t():Number.isInteger(e)||++n.times;}}}},{key:"__loop_bounce",value:function(t){var n=this,e=t,r=1;return this.times=0,{complete:function(t){n.localTime=0,r=-r,Number.isInteger(e)&&++n.times===e?t():Number.isInteger(e)||++n.times;},progress:function(t){return 0<r?t:1-t}}}},{key:"isPaused",get:function(){return this[D]}}]),function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");o(t.prototype,n&&n.prototype),n&&o(t,n);}(g,t),g}(t);return M(E,"DEFAULT_LOOP",{complete:function(t){return t()},progress:function(t){return t}}),E.Easing=i,E._plugins={},E});
+});
 
-let DataValues = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tag = 'data-values';
-  }
-  render() {
-    const { values, pick, count } = store.state;
-    return (index.h("div", { class: "info" }, index.h("div", { class: "row" }, index.h("span", { class: "label" }, "color:"), index.h("span", { class: "value" }, pick)), index.h("div", { class: "row sample" }, index.h("span", { class: "label" }, "sample:"), index.h("span", { class: "value" }, `${count > 0 ? values : '...'}`))));
+between._plugins.color = ColorPlugin;
+let barHeight = [];
+let barRefs = undefined;
+const bgdFill = colorFor('white');
+const xFill = colorFor('bada55');
+let lastHex = '#bada55';
+let tween = undefined;
+let lastVal = [0, 0, 0, 0, 0];
+let tween2 = [undefined, undefined, undefined, undefined, undefined];
+const processColor = (next) => {
+  if (!barRefs)
+    return;
+  const hex1 = lastHex;
+  const hex2 = colorFor(next);
+  // IMPORTANT:  we are tweening between the hex values, not the names...
+  if (hex1 !== null && hex1 !== hex2) {
+    if (tween) {
+      tween.pause();
+    }
+    tween = new between(hex1, hex2)
+      .time(1000)
+      .easing(between.Easing.Cubic.InOut)
+      .on('update', (v) => {
+      barRefs.forEach(bar => {
+        bar.setAttribute('fill', `${v}`);
+      });
+      lastHex = v;
+    });
   }
 };
-DataValues.style = dataValuesCss;
+const processValues = (next) => {
+  if (!barRefs)
+    return;
+  barRefs.forEach((bar, index) => {
+    const height = barHeight[index];
+    const last = lastVal[index];
+    const value = next[index];
+    if (last !== null && last !== value) {
+      if (tween2[index]) {
+        tween2[index].pause();
+      }
+      // NOTE:  next & last are values between 0-100 (aka. percentage)
+      tween2[index] = new between(last, value)
+        .time(1000)
+        .easing(between.Easing.Cubic.InOut)
+        .on('update', (v) => {
+        const y = height * ((100 - v) / 100);
+        bar.setAttribute('y', `${y}`);
+        lastVal[index] = v;
+      });
+    }
+  });
+};
+const createFunnel = ({ id, height, width, x, y, drop }) => {
+  const obj = {
+    id: id,
+    height,
+    width,
+    x,
+    y,
+    maskId: `mask-${id}`,
+    maskUri: `url('#mask-${id}')`,
+    mask: `0.5,0.5,0.5,${height - 0.5},${width - 0.5},${height - drop - 0.5},${width - 0.5},${drop + 0.5}`,
+    matrix: `matrix(1,0,0,1,${x},${y})`,
+    points: `0,0,0,${height},${width},${height - drop},${width},${drop}`,
+  };
+  return obj;
+};
+const generateBars = () => {
+  return funnelDefs.map(item => {
+    return createFunnel(item);
+  });
+};
+const FunnelGfx = _props => {
+  const bars = generateBars();
+  const stroke = 'currentColor';
+  // IMPORTANT:  initialize these arrays when you render...
+  barHeight = Array(bars.length);
+  barRefs = Array(bars.length);
+  return (index.h("svg", { class: "funnel", viewBox: "0 0 600 420" },
+    index.h("desc", null, "Created with Snap"),
+    index.h("defs", null, bars.map(item => {
+      return (index.h("mask", { id: item.maskId },
+        index.h("polygon", { points: item.mask, fill: bgdFill })));
+    })),
+    bars.map((item, index$1) => {
+      const { height, width, maskUri, matrix, points } = item;
+      barHeight[index$1] = height;
+      return (index.h("g", { transform: matrix },
+        index.h("polygon", { points: points, fill: bgdFill, stroke: stroke }),
+        index.h("rect", { ref: el => (barRefs[index$1] = el), x: "0", y: height, width: width, height: height, mask: maskUri, fill: xFill, stroke: stroke })));
+    })));
+};
 
-const eswat2IoCss = "a{position:absolute;top:32px;right:32px}:hover{fill:var(--clrs-navy)}";
+const Fingerprint = props => {
+  const hex = props.hex || 'currentColor';
+  const klass = props.class;
+  const label = props.label || 'fingerprint';
+  const size = props.size || 24;
+  return (index.h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+    index.h("title", null, label),
+    index.h("g", { fill: hex },
+      index.h("path", { d: "M17.81,4.47C17.73,4.47 17.65,4.45 17.58,4.41C15.66,3.42 14,3\n      12,3C10.03,3 8.15,3.47 6.44,4.41C6.2,4.54 5.9,4.45 5.76,4.21C5.63,3.97\n      5.72,3.66 5.96,3.53C7.82,2.5 9.86,2 12,2C14.14,2 16,2.47\n      18.04,3.5C18.29,3.65 18.38,3.95 18.25,4.19C18.16,4.37 18,4.47\n      17.81,4.47M3.5,9.72C3.4,9.72 3.3,9.69 3.21,9.63C3,9.47 2.93,9.16\n      3.09,8.93C4.08,7.53 5.34,6.43 6.84,5.66C10,4.04 14,4.03\n      17.15,5.65C18.65,6.42 19.91,7.5 20.9,8.9C21.06,9.12 21,9.44\n      20.78,9.6C20.55,9.76 20.24,9.71 20.08,9.5C19.18,8.22 18.04,7.23\n      16.69,6.54C13.82,5.07 10.15,5.07 7.29,6.55C5.93,7.25 4.79,8.25\n      3.89,9.5C3.81,9.65 3.66,9.72 3.5,9.72M9.75,21.79C9.62,21.79 9.5,21.74\n      9.4,21.64C8.53,20.77 8.06,20.21 7.39,19C6.7,17.77 6.34,16.27\n      6.34,14.66C6.34,11.69 8.88,9.27 12,9.27C15.12,9.27 17.66,11.69\n      17.66,14.66A0.5,0.5 0 0,1 17.16,15.16A0.5,0.5 0 0,1\n      16.66,14.66C16.66,12.24 14.57,10.27 12,10.27C9.43,10.27 7.34,12.24\n      7.34,14.66C7.34,16.1 7.66,17.43 8.27,18.5C8.91,19.66 9.35,20.15\n      10.12,20.93C10.31,21.13 10.31,21.44 10.12,21.64C10,21.74 9.88,21.79\n      9.75,21.79M16.92,19.94C15.73,19.94 14.68,19.64 13.82,19.05C12.33,18.04\n      11.44,16.4 11.44,14.66A0.5,0.5 0 0,1 11.94,14.16A0.5,0.5 0 0,1\n      12.44,14.66C12.44,16.07 13.16,17.4 14.38,18.22C15.09,18.7 15.92,18.93\n      16.92,18.93C17.16,18.93 17.56,18.9 17.96,18.83C18.23,18.78 18.5,18.96\n      18.54,19.24C18.59,19.5 18.41,19.77 18.13,19.82C17.56,19.93 17.06,19.94\n      16.92,19.94M14.91,22C14.87,22 14.82,22 14.78,22C13.19,21.54 12.15,20.95\n      11.06,19.88C9.66,18.5 8.89,16.64 8.89,14.66C8.89,13.04 10.27,11.72\n      11.97,11.72C13.67,11.72 15.05,13.04 15.05,14.66C15.05,15.73 16,16.6\n      17.13,16.6C18.28,16.6 19.21,15.73 19.21,14.66C19.21,10.89 15.96,7.83\n      11.96,7.83C9.12,7.83 6.5,9.41 5.35,11.86C4.96,12.67 4.76,13.62\n      4.76,14.66C4.76,15.44 4.83,16.67 5.43,18.27C5.53,18.53 5.4,18.82\n      5.14,18.91C4.88,19 4.59,18.87 4.5,18.62C4,17.31 3.77,16\n      3.77,14.66C3.77,13.46 4,12.37 4.45,11.42C5.78,8.63 8.73,6.82\n      11.96,6.82C16.5,6.82 20.21,10.33 20.21,14.65C20.21,16.27 18.83,17.59\n      17.13,17.59C15.43,17.59 14.05,16.27 14.05,14.65C14.05,13.58 13.12,12.71\n      11.97,12.71C10.82,12.71 9.89,13.58 9.89,14.65C9.89,16.36 10.55,17.96\n      11.76,19.16C12.71,20.1 13.62,20.62 15.03,21C15.3,21.08 15.45,21.36\n      15.38,21.62C15.33,21.85 15.12,22 14.91,22Z" })),
+    index.h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+};
 
 const url = 'https://eswat2.dev';
 const who = 'eswat2';
-let Eswat2Io = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("a", { href: url, "aria-label": who, title: who }, Paw({ hex: gray })));
-  }
+const Eswat2Io = _props => {
+  return (index.h("a", { class: "absolute top-8 right-8 text-clrs-gray hover:text-clrs-navy", href: url, "aria-label": who, title: who },
+    index.h(Fingerprint, { label: "eswat2" })));
 };
-Eswat2Io.style = eswat2IoCss;
 
-const funnelAppCss = "#app{--clrs-navy:#001f3f;--clrs-blue:#0074d9;--clrs-aqua:#7fdbff;--clrs-teal:#39cccc;--clrs-olive:#3d9970;--clrs-green:#2ecc40;--clrs-lime:#01ff70;--clrs-yellow:#ffdc00;--clrs-orange:#ff851b;--clrs-red:#ff4136;--clrs-maroon:#85144b;--clrs-fuchsia:#f012be;--clrs-purple:#b10dc9;--clrs-black:#111111;--clrs-gray:#aaaaaa;--clrs-silver:#dddddd;--clrs-bada55:#bada55;--clrs-slate:#708090;--clrs-slate4:#4e5964;--clrs-white:#ffffff;display:flex;flex-direction:column;padding:1em;color:var(--clrs-navy);font-family:'Roboto', Helvetica, sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}hr{margin-left:0;margin-right:0}";
+const funnelAppCss = ".transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-transform:translateX(var(--tw-translate-x))\n    translateY(var(--tw-translate-y)) rotate(var(--tw-rotate))\n    skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))\n    scaleY(var(--tw-scale-y))}.shadow{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.ds1-main{display:flex;flex-direction:column;padding:1rem;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,\n    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';color:var(--clrs-navy, #001f3f);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ds1-button{display:flex;align-items:center;color:var(--clrs-white, #ffffff)}.ds1-button:active{background-color:var(--clrs-gray, #aaaaaa);color:var(--clrs-navy, #001f3f)}.absolute{position:absolute}.top-8{top:2rem}.right-8{right:2rem}.mt-3{margin-top:0.75rem}.mb-10px{margin-bottom:10px}.mr-10px{margin-right:10px}.mt-5px{margin-top:5px}.mr-0{margin-right:0px}.ml-0{margin-left:0px}.flex{display:flex}.transform{transform:var(--tw-transform)}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.bg-clrs-blue{background-color:var(--clrs-blue, #0074d9)}.bg-clrs-red{background-color:var(--clrs-red, #ff4136)}.font-bold{font-weight:700}.italic{font-style:italic}.text-clrs-slate4{color:var(--clrs-slate4, #4e5964)}.text-clrs-gray{color:var(--clrs-gray, #aaaaaa)}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),\n    0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.data-button{border-radius:5px;border:1px solid var(--clrs-slate);padding:5px;margin:0px;margin-right:5px;cursor:pointer}.funnel{width:calc(100% - 20px);height:100%;padding:10px;background-color:var(--clrs-silver);border-radius:10px;border:1px solid var(--clrs-gray)}#app{--clrs-navy:#001f3f;--clrs-blue:#0074d9;--clrs-aqua:#7fdbff;--clrs-teal:#39cccc;--clrs-olive:#3d9970;--clrs-green:#2ecc40;--clrs-lime:#01ff70;--clrs-yellow:#ffdc00;--clrs-orange:#ff851b;--clrs-red:#ff4136;--clrs-maroon:#85144b;--clrs-fuchsia:#f012be;--clrs-purple:#b10dc9;--clrs-black:#111111;--clrs-gray:#aaaaaa;--clrs-silver:#dddddd;--clrs-bada55:#bada55;--clrs-slate:#708090;--clrs-slate4:#4e5964;--clrs-white:#ffffff}.hover\\:text-clrs-navy:hover{color:var(--clrs-navy, #001f3f)}";
 
 let FunnelApp = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.tag = 'funnel-app';
   }
-  render() {
-    return (index.h("div", { id: "app" }, index.h("eswat2-io", null), index.h("funnel-gfx", null), index.h("data-source", null), index.h("color-picker", null), index.h("hr", null), index.h("data-values", null)));
-  }
-};
-FunnelApp.style = funnelAppCss;
-
-var between = createCommonjsModule(function (module, exports) {
-/* Between.js v0.1.2-fix.2 */
-!function(t,n){module.exports=n();}(commonjsGlobal,function(){function O(t){return (O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,n){for(var e=0;e<n.length;e++){var r=n[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r);}}function n(t,n,e){return n&&r(t.prototype,n),e&&r(t,e),t}function M(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function I(t){return (I=Object.getPrototypeOf||function(t){return t.__proto__})(t)}function o(t,n){return (o=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function u(t,n,e){return (u="undefined"!=typeof Reflect&&Reflect.construct?Reflect.construct:function(t,n,e){var r=[null];r.push.apply(r,n);var u=new(t.bind.apply(t,r));return e&&o(u,e.prototype),u}).apply(null,arguments)}function _(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}var t=function(o){var a={},i=[];(o=o||this).on=function(t,n,e){return (a[t]=a[t]||[]).push([n,e]),o},o.off=function(t,n){t||(a={});for(var e=a[t]||i,r=e.length=n?e.length:0;r--;)n==e[r][0]&&e.splice(r,1);return o},o.emit=function(t){for(var n,e=a[t]||i,r=0<e.length?e.slice(0,e.length):e,u=0;n=r[u++];)n[0].apply(n[1],i.slice.call(arguments,1));return o};};var V=function(t,n,e){return t*(1-e)+n*e},e="undefined"!=typeof window?window:"undefined"!=typeof commonjsGlobal?commonjsGlobal:"undefined"!=typeof self?self:{};function a(t,n){return t(n={exports:{}},n.exports),n.exports}for(var i=a(function(t){var n=t.exports={Linear:{None:function(t){return t}},Quadratic:{In:function(t){return t*t},Out:function(t){return t*(2-t)},InOut:function(t){return (t*=2)<1?.5*t*t:-.5*(--t*(t-2)-1)}},Cubic:{In:function(t){return t*t*t},Out:function(t){return --t*t*t+1},InOut:function(t){return (t*=2)<1?.5*t*t*t:.5*((t-=2)*t*t+2)}},Quartic:{In:function(t){return t*t*t*t},Out:function(t){return 1- --t*t*t*t},InOut:function(t){return (t*=2)<1?.5*t*t*t*t:-.5*((t-=2)*t*t*t-2)}},Quintic:{In:function(t){return t*t*t*t*t},Out:function(t){return --t*t*t*t*t+1},InOut:function(t){return (t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)}},Sinusoidal:{In:function(t){return 1-Math.cos(t*Math.PI/2)},Out:function(t){return Math.sin(t*Math.PI/2)},InOut:function(t){return .5*(1-Math.cos(Math.PI*t))}},Exponential:{In:function(t){return 0===t?0:Math.pow(1024,t-1)},Out:function(t){return 1===t?1:1-Math.pow(2,-10*t)},InOut:function(t){return 0===t?0:1===t?1:(t*=2)<1?.5*Math.pow(1024,t-1):.5*(2-Math.pow(2,-10*(t-1)))}},Circular:{In:function(t){return 1-Math.sqrt(1-t*t)},Out:function(t){return Math.sqrt(1- --t*t)},InOut:function(t){return (t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)}},Elastic:{In:function(t){var n,e=.1;return 0===t?0:1===t?1:(!e||e<1?(e=1,n=.1):n=.4*Math.asin(1/e)/(2*Math.PI),-e*Math.pow(2,10*(t-=1))*Math.sin((t-n)*(2*Math.PI)/.4))},Out:function(t){var n,e=.1;return 0===t?0:1===t?1:(!e||e<1?(e=1,n=.1):n=.4*Math.asin(1/e)/(2*Math.PI),e*Math.pow(2,-10*t)*Math.sin((t-n)*(2*Math.PI)/.4)+1)},InOut:function(t){var n,e=.1;return 0===t?0:1===t?1:(!e||e<1?(e=1,n=.1):n=.4*Math.asin(1/e)/(2*Math.PI),(t*=2)<1?e*Math.pow(2,10*(t-=1))*Math.sin((t-n)*(2*Math.PI)/.4)*-.5:e*Math.pow(2,-10*(t-=1))*Math.sin((t-n)*(2*Math.PI)/.4)*.5+1)}},Back:{In:function(t){return t*t*(2.70158*t-1.70158)},Out:function(t){return --t*t*(2.70158*t+1.70158)+1},InOut:function(t){var n=2.5949095;return (t*=2)<1?t*t*((n+1)*t-n)*.5:.5*((t-=2)*t*((n+1)*t+n)+2)}},Bounce:{In:function(t){return 1-n.Bounce.Out(1-t)},Out:function(t){return t<1/2.75?7.5625*t*t:t<2/2.75?7.5625*(t-=1.5/2.75)*t+.75:t<2.5/2.75?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375},InOut:function(t){return t<.5?.5*n.Bounce.In(2*t):.5*n.Bounce.Out(2*t-1)+.5}}};}),c=(a(function(a){(function(){var t,n,e,r,u,o;"undefined"!=typeof performance&&null!==performance&&performance.now?a.exports=function(){return performance.now()}:"undefined"!=typeof process&&null!==process&&process.hrtime?(a.exports=function(){return (t()-u)/1e6},n=process.hrtime,r=(t=function(){var t;return 1e9*(t=n())[0]+t[1]})(),o=1e9*process.uptime(),u=r-o):Date.now?(a.exports=function(){return Date.now()-e},e=Date.now()):(a.exports=function(){return (new Date).getTime()-e},e=(new Date).getTime());}).call(e);})),l="undefined"==typeof window?e:window,f=["moz","webkit"],s="AnimationFrame",p=l["request"+s],h=l["cancel"+s]||l["cancelRequest"+s],m=0;!p&&m<f.length;m++)p=l[f[m]+"Request"+s],h=l[f[m]+"Cancel"+s]||l[f[m]+"CancelRequest"+s];if(!p||!h){var d=0,y=0,v=[];p=function(t){if(0===v.length){var n=c(),e=Math.max(0,1e3/60-(n-d));d=e+n,setTimeout(function(){for(var t=v.slice(0),n=v.length=0;n<t.length;n++)if(!t[n].cancelled)try{t[n].callback(d);}catch(t){setTimeout(function(){throw t},0);}},Math.round(e));}return v.push({handle:++y,callback:t,cancelled:!1}),y},h=function(t){for(var n=0;n<v.length;n++)v[n].handle===t&&(v[n].cancelled=!0);};}var b=function(t){return p.call(l,t)};b.cancel=function(){h.apply(l,arguments);},b.polyfill=function(t){t||(t=l),t.requestAnimationFrame=p,t.cancelAnimationFrame=h;};var w,k,P=[],T=Symbol("type"),j=Symbol("start_time"),x=Symbol("completed"),D=Symbol("paused"),g=requestAnimationFrame||b,A=Date.now();!function t(){g(t),w=Date.now(),k=w-A;for(var n=0;n<P.length;n++)P[n][x]||P[n](k,Date.now()-P[n][j]);A=w;}();var E=function(t){function g(e,t){var n,r,u,o;!function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}(this,g),u=this,o=I(g).call(this),M(_(_(r=!o||"object"!=typeof o&&"function"!=typeof o?_(u):o)),"update",function(){var e=_(_(r))._updateValue;return function(t,n){r[x]||r[D]||(0===r.localTime&&r.emit("start",r.value,_(_(r))),e(r.ease(r.loopFunction.progress(Math.min(1,(n||r.localTime)/r.duration)))),r.emit("update",r.value,_(_(r)),t),r.localTime>=r.duration&&r.loopFunction.complete(function(){r[x]=!0,r.emit("complete",r.value,_(_(r)));}),r.localTime+=t);}});var a=r.plugin=Object.values(g._plugins).reduce(function(t,n){return t||n&&n.test&&n.test(e)&&n},!1),i=a&&a.name||("object"===O(e)?Array.isArray(e)?"array":"object":"number");if(a){var c=a.initialize(e,t);e=c.startValue,t=c.destValue,r.data=c.data;}switch(Object.assign(_(_(r)),(M(n={duration:1e3,localTime:0,startValue:e,destValue:t,loopMode:"once",loopFunction:g.DEFAULT_LOOP,ease:function(t){return t},value:"array"===i?[].concat(e):"object"===i?Object.assign({},e):e},x,!1),M(n,T,i),M(n,j,Date.now()),M(n,D,!1),n)),r[T]){case"number":r._updateValue=function(t){r.value=V(r.startValue,r.destValue,t);};break;case"array":var l=r.value.length,f=_(_(r)),s=f.startValue,p=f.destValue,h=f.value;r._updateValue=function(t){for(var n=0;n<l;n++)h[n]=V(s[n],p[n],t);};break;case"object":var m=Object.keys(r.startValue),d=m.length,y=_(_(r)),v=y.startValue,b=y.destValue,w=y.value;r._updateValue=function(t){for(var n=0;n<d;n++){var e=m[n];w[e]=V(v[e],b[e],t);}};break;default:r.plugin?r._updateValue=function(t){r.value=r.plugin.interpolate(r.startValue,r.destValue,t,r.data);}:(console.warn("Between: startValue type was unrecognized."),r._updateValue=function(){return null});}return P.push(r.update()),r}return n(g,null,[{key:"between",value:function(){for(var t=arguments.length,n=new Array(t),e=0;e<t;e++)n[e]=arguments[e];return u(g,n)}}]),n(g,[{key:"pause",value:function(){return this[D]=!0,this.emit("pause",this.value,this,k),this}},{key:"play",value:function(){return this[D]=!1,this.emit("play",this.value,this,k),this}},{key:"easing",value:function(t){return this.ease=t,this}},{key:"time",value:function(t){return this.duration=t,this}},{key:"loop",value:function(){for(var t=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"once",n="__loop_".concat(t),e=arguments.length,r=new Array(1<e?e-1:0),u=1;u<e;u++)r[u-1]=arguments[u];return this.loopFunction=n in this?Object.assign({},g.DEFAULT_LOOP,this[n].apply(this,r)):g.DEFAULT_LOOP,this}},{key:"__loop_repeat",value:function(t){var n=this,e=t;return this.times=0,{complete:function(t){n.localTime=0,Number.isInteger(e)&&++n.times===e?t():Number.isInteger(e)||++n.times;}}}},{key:"__loop_bounce",value:function(t){var n=this,e=t,r=1;return this.times=0,{complete:function(t){n.localTime=0,r=-r,Number.isInteger(e)&&++n.times===e?t():Number.isInteger(e)||++n.times;},progress:function(t){return 0<r?t:1-t}}}},{key:"isPaused",get:function(){return this[D]}}]),function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");o(t.prototype,n&&n.prototype),n&&o(t,n);}(g,t),g}(t);return M(E,"DEFAULT_LOOP",{complete:function(t){return t()},progress:function(t){return t}}),E.Easing=i,E._plugins={},E});
-});
-
-const funnelGfxCss = ".funnel{width:calc(100% - 20px);height:100%;padding:10px;background-color:var(--clrs-silver);border-radius:10px;border:1px solid var(--clrs-gray)}";
-
-between._plugins.color = ColorPlugin;
-let FunnelGfx = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stroke = navy;
-    this.tag = 'funnel-gfx';
-    this.processColor = (next) => {
-      if (!this.barRefs)
-        return;
-      const hex1 = this.lastHex;
-      const hex2 = colorFor(next);
-      // IMPORTANT:  we are tweening between the hex values, not the names...
-      if (hex1 !== null && hex1 !== hex2) {
-        if (this.tween) {
-          this.tween.pause();
-        }
-        this.tween = new between(hex1, hex2)
-          .time(1000)
-          .easing(between.Easing.Cubic.InOut)
-          .on('update', (v) => {
-          this.barRefs.forEach(bar => {
-            bar.setAttribute('fill', `${v}`);
-          });
-          this.lastHex = v;
-        });
-      }
-    };
-    this.processValues = (next) => {
-      if (!this.barRefs)
-        return;
-      this.barRefs.forEach((bar, index) => {
-        const height = this.barHeight[index];
-        const last = this.lastVal[index];
-        const value = next[index];
-        if (last !== null && last !== value) {
-          if (this.tween2[index]) {
-            this.tween2[index].pause();
-          }
-          // NOTE:  next & last are values between 0-100 (aka. percentage)
-          this.tween2[index] = new between(last, value)
-            .time(1000)
-            .easing(between.Easing.Cubic.InOut)
-            .on('update', (v) => {
-            const y = height * ((100 - v) / 100);
-            bar.setAttribute('y', `${y}`);
-            this.lastVal[index] = v;
-          });
-        }
-      });
-    };
-    this.bgdFill = white;
-    this.xFill = colorFor('bada55');
-    this.barHeight = undefined;
-    this.barRefs = undefined;
-    this.lastHex = '#bada55';
-    this.tween = undefined;
-    this.lastVal = [0, 0, 0, 0, 0];
-    this.tween2 = [undefined, undefined, undefined, undefined, undefined];
-    this.createFunnel = ({ id, height, width, x, y, drop }) => {
-      const obj = {
-        id: id,
-        height,
-        width,
-        x,
-        y,
-        maskId: `mask-${id}`,
-        maskUri: `url('#mask-${id}')`,
-        mask: `0.5,0.5,0.5,${height - 0.5},${width - 0.5},${height - drop - 0.5},${width - 0.5},${drop + 0.5}`,
-        matrix: `matrix(1,0,0,1,${x},${y})`,
-        points: `0,0,0,${height},${width},${height - drop},${width},${drop}`,
-      };
-      return obj;
-    };
-    this.generateBars = () => {
-      return funnelDefs.map(item => {
-        return this.createFunnel(item);
-      });
-    };
-  }
   componentDidLoad() {
-    store.onChange('pick', this.processColor);
-    store.onChange('values', this.processValues);
+    store.onChange('pick', processColor);
+    store.onChange('values', processValues);
   }
   render() {
-    const bars = this.generateBars();
-    const { bgdFill, xFill, stroke } = this;
-    // IMPORTANT:  initialize these arrays when you render...
-    this.barHeight = Array(bars.length);
-    this.barRefs = Array(bars.length);
-    return (index.h("div", { class: "funnel" }, index.h("svg", { viewBox: "0 0 600 420" }, index.h("desc", null, "Created with Snap"), index.h("defs", null, bars.map(item => {
-      return (index.h("mask", { id: item.maskId }, index.h("polygon", { points: item.mask, fill: bgdFill })));
-    })), bars.map((item, index$1) => {
-      const { height, width, maskUri, matrix, points } = item;
-      this.barHeight[index$1] = height;
-      return (index.h("g", { transform: matrix }, index.h("polygon", { points: points, fill: bgdFill, stroke: stroke }), index.h("rect", { ref: el => (this.barRefs[index$1] = el), x: "0", y: height, width: width, height: height, mask: maskUri, fill: xFill, stroke: stroke })));
-    }))));
+    return (index.h("div", { id: "app", class: "ds1-main" }, index.h(Eswat2Io, null), index.h(FunnelGfx, null), index.h(DataSource, null), index.h(ColorPicker, null), index.h("hr", { class: "mr-0 ml-0" }), index.h(DataValues, null)));
   }
 };
-FunnelGfx.style = funnelGfxCss;
+FunnelApp.style = funnelAppCss;
 
-exports.color_picker = FunnelGfx$1;
-exports.data_source = DataSource;
-exports.data_values = DataValues;
-exports.eswat2_io = Eswat2Io;
 exports.funnel_app = FunnelApp;
-exports.funnel_gfx = FunnelGfx;

package/dist/cjs/funnel-gfx-wc.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-a44a40b7.js');
+const index = require('./index-53976b87.js');
 
 /*
  Stencil Client Patch Browser v2.11.0 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["color-picker_6.cjs",[[1,"funnel-app",{"tag":[1]}],[1,"color-picker",{"tag":[1]}],[1,"data-source",{"tag":[1]}],[1,"data-values",{"tag":[1]}],[1,"eswat2-io"],[1,"funnel-gfx",{"stroke":[1],"tag":[1]}]]]], options);
+  return index.bootstrapLazy([["funnel-app.cjs",[[1,"funnel-app",{"tag":[1]}]]]], options);
 });

package/dist/cjs/{index-a44a40b7.js → index-53976b87.js}

@@ -199,6 +199,10 @@ const h = (nodeName, vnodeData, ...children) => {
             }
         }
     }
+    if (typeof nodeName === 'function') {
+        // nodeName is a functional component
+        return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);
+    }
     const vnode = newVNode(nodeName, null);
     vnode.$attrs$ = vnodeData;
     if (vNodeChildren.length > 0) {
@@ -221,6 +225,36 @@ const newVNode = (tag, text) => {
 };
 const Host = {};
 const isHost = (node) => node && node.$tag$ === Host;
+const vdomFnUtils = {
+    forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
+    map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),
+};
+const convertToPublic = (node) => ({
+    vattrs: node.$attrs$,
+    vchildren: node.$children$,
+    vkey: node.$key$,
+    vname: node.$name$,
+    vtag: node.$tag$,
+    vtext: node.$text$,
+});
+const convertToPrivate = (node) => {
+    if (typeof node.vtag === 'function') {
+        const vnodeData = Object.assign({}, node.vattrs);
+        if (node.vkey) {
+            vnodeData.key = node.vkey;
+        }
+        if (node.vname) {
+            vnodeData.name = node.vname;
+        }
+        return h(node.vtag, vnodeData, ...(node.vchildren || []));
+    }
+    const vnode = newVNode(node.vtag, node.vtext);
+    vnode.$attrs$ = node.vattrs;
+    vnode.$children$ = node.vchildren;
+    vnode.$key$ = node.vkey;
+    vnode.$name$ = node.vname;
+    return vnode;
+};
 /**
  * Production setAccessor() function based on Preact by
  * Jason Miller (@developit)

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a44a40b7.js');
+const index = require('./index-53976b87.js');
 
 /*
  Stencil Client Patch Esm v2.11.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["color-picker_6.cjs",[[1,"funnel-app",{"tag":[1]}],[1,"color-picker",{"tag":[1]}],[1,"data-source",{"tag":[1]}],[1,"data-values",{"tag":[1]}],[1,"eswat2-io"],[1,"funnel-gfx",{"stroke":[1],"tag":[1]}]]]], options);
+  return index.bootstrapLazy([["funnel-app.cjs",[[1,"funnel-app",{"tag":[1]}]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -1,11 +1,6 @@
 {
   "entries": [
-    "./components/color-picker/color-picker.js",
-    "./components/data-source/data-source.js",
-    "./components/data-values/data-values.js",
-    "./components/eswat2-io/eswat2-io.js",
-    "./components/funnel-app/funnel-app.js",
-    "./components/funnel-gfx/funnel-gfx.js"
+    "./components/funnel-app/funnel-app.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/funnel-app/chevron-double-left.js

@@ -0,0 +1,14 @@
+import { h } from '@stencil/core';
+const ChevronDoubleLeft = props => {
+  const hex = props.hex || 'currentColor';
+  const klass = props.class;
+  const label = props.label || 'chevron-double-left';
+  const size = props.size || 24;
+  return (h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+    h("title", null, label),
+    h("g", { fill: hex },
+      h("path", { d: "M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z" })),
+    h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+};
+export { ChevronDoubleLeft };
+export default ChevronDoubleLeft;

package/dist/collection/components/funnel-app/close.js

@@ -0,0 +1,14 @@
+import { h } from '@stencil/core';
+const Close = props => {
+  const hex = props.hex || 'currentColor';
+  const klass = props.class;
+  const label = props.label || 'close';
+  const size = props.size || 24;
+  return (h("svg", { class: klass, width: size, height: size, viewBox: "0 0 24 24", role: "img", "aria-label": "title" },
+    h("title", null, label),
+    h("g", { fill: hex },
+      h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })),
+    h("path", { d: "M0 0h24v24H0z", fill: "none" })));
+};
+export { Close };
+export default Close;

package/dist/collection/components/funnel-app/color-picker.js

@@ -0,0 +1,16 @@
+import { h } from '@stencil/core';
+import { Radio } from './radio';
+import { colorKeys, colorFor, store, actions } from '../../utils';
+const ColorPicker = _props => {
+  const { pick } = store.state;
+  return (h("div", { id: "toolbar", class: "flex flex-wrap", role: "radiogroup" }, colorKeys.map((key) => {
+    const hex = colorFor(key);
+    const selected = pick == key;
+    return (h("div", { "aria-label": key, role: "radio", title: key, onClick: () => {
+        actions.updatePick(key);
+      } },
+      h(Radio, { hex: hex, selected: selected })));
+  })));
+};
+export { ColorPicker };
+export default ColorPicker;