funnel-gfx-wc 0.1.128 → 0.1.133

package/dist/cjs/funnel-app.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C7bIxnD-.js');
+var index = require('./index-BFBRUSYG.js');
 
 const Radio = props => {
     const hex = props.hex || 'currentColor';
@@ -71,12 +71,13 @@ const colorFor = (key) => _namedColors[key] || _altColors[key];
 const colorKeys = Object.keys(_namedColors);
 
 const appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
+    let refs = map.get(propName);
+    if (!refs) {
+        refs = [];
+        map.set(propName, refs);
     }
-    else if (!items.includes(value)) {
-        items.push(value);
+    if (!refs.some((ref) => ref.deref() === value)) {
+        refs.push(new WeakRef(value));
     }
 };
 const debounce = (fn, ms) => {
@@ -104,33 +105,54 @@ const debounce = (fn, ms) => {
 const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
 const cleanupElements = debounce((map) => {
     for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
+        const refs = map.get(key).filter((ref) => {
+            const elm = ref.deref();
+            return elm && isConnected(elm);
+        });
+        map.set(key, refs);
     }
 }, 2_000);
+const core = index.StencilCore;
+const forceUpdate = core.forceUpdate;
+const getRenderingRef = core.getRenderingRef;
 const stencilSubscription = () => {
-    if (typeof index.getRenderingRef !== 'function') {
+    if (typeof getRenderingRef !== 'function' || typeof forceUpdate !== 'function') {
         // If we are not in a stencil project, we do nothing.
         // This function is not really exported by @stencil/core.
         return {};
     }
+    const ensureForceUpdate = forceUpdate;
+    const ensureGetRenderingRef = getRenderingRef;
     const elmsToUpdate = new Map();
     return {
         dispose: () => elmsToUpdate.clear(),
         get: (propName) => {
-            const elm = index.getRenderingRef();
+            const elm = ensureGetRenderingRef();
             if (elm) {
                 appendToMap(elmsToUpdate, propName, elm);
             }
         },
         set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(index.forceUpdate));
+            const refs = elmsToUpdate.get(propName);
+            if (refs) {
+                const nextRefs = refs.filter((ref) => {
+                    const elm = ref.deref();
+                    if (!elm)
+                        return false;
+                    return ensureForceUpdate(elm);
+                });
+                elmsToUpdate.set(propName, nextRefs);
             }
             cleanupElements(elmsToUpdate);
         },
         reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(index.forceUpdate));
+            elmsToUpdate.forEach((refs) => {
+                refs.forEach((ref) => {
+                    const elm = ref.deref();
+                    if (elm)
+                        ensureForceUpdate(elm);
+                });
+            });
             cleanupElements(elmsToUpdate);
         },
     };
@@ -138,8 +160,11 @@ const stencilSubscription = () => {
 
 const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState ?? {}));
+    const resolveDefaultState = () => (unwrap(defaultState) ?? {});
+    const initialState = resolveDefaultState();
+    let states = new Map(Object.entries(initialState));
+    const proxyAvailable = typeof Proxy !== 'undefined';
+    const plainState = proxyAvailable ? null : {};
     const handlers = {
         dispose: [],
         get: [],
@@ -151,7 +176,10 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
     const reset = () => {
         // When resetting the state, the default state may be a function - unwrap it to invoke it.
         // otherwise, the state won't be properly reset
-        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
+        states = new Map(Object.entries(resolveDefaultState()));
+        if (!proxyAvailable) {
+            syncPlainStateKeys();
+        }
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {
@@ -168,12 +196,14 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(propName);
         if (shouldUpdate(value, oldValue, propName)) {
             states.set(propName, value);
+            if (!proxyAvailable) {
+                ensurePlainProperty(propName);
+            }
             handlers.set.forEach((cb) => cb(propName, value, oldValue));
         }
     };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(unwrappedState, {
+    const state = (proxyAvailable
+        ? new Proxy(initialState, {
             get(_, propName) {
                 return get(propName);
             },
@@ -193,7 +223,11 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 set(propName, value);
                 return true;
             },
-        }));
+        })
+        : (() => {
+            syncPlainStateKeys();
+            return plainState;
+        })());
     const on = (eventName, callback) => {
         handlers[eventName].push(callback);
         return () => {
@@ -206,7 +240,10 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 cb(newValue);
             }
         };
-        const resetHandler = () => cb(unwrap(defaultState)[propName]);
+        const resetHandler = () => {
+            const snapshot = resolveDefaultState();
+            cb(snapshot[propName]);
+        };
         // Register the handlers
         const unSet = on('set', setHandler);
         const unReset = on('reset', resetHandler);
@@ -249,6 +286,38 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
             changeListeners.delete(listener);
         }
     };
+    function ensurePlainProperty(key) {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        if (Object.prototype.hasOwnProperty.call(plainState, key)) {
+            return;
+        }
+        Object.defineProperty(plainState, key, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return get(key);
+            },
+            set(value) {
+                set(key, value);
+            },
+        });
+    }
+    function syncPlainStateKeys() {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        const knownKeys = new Set(states.keys());
+        for (const key of Object.keys(plainState)) {
+            if (!knownKeys.has(key)) {
+                delete plainState[key];
+            }
+        }
+        for (const key of knownKeys) {
+            ensurePlainProperty(key);
+        }
+    }
     return {
         state,
         get,
@@ -10314,7 +10383,197 @@ const Eswat2Io = _props => {
     return (index.h("a", { class: "absolute right-8 top-8 text-clrs-gray hover:text-clrs-navy", href: url, "aria-label": who, target: "blank", title: who }, index.h(Fingerprint, { label: "eswat2" })));
 };
 
-const shadowCss = "/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root,\n  :host {\n    --font-sans:\n      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',\n      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n    --spacing: 0.25rem;\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --font-weight-bold: 700;\n  }\n}\n@layer utilities {\n  .absolute {\n    position: absolute;\n  }\n  .relative {\n    position: relative;\n  }\n  .top-8 {\n    top: calc(var(--spacing) * 8);\n  }\n  .right-8 {\n    right: calc(var(--spacing) * 8);\n  }\n  .mt-3 {\n    margin-top: calc(var(--spacing) * 3);\n  }\n  .mt-5px {\n    margin-top: 5px;\n  }\n  .mr-0 {\n    margin-right: calc(var(--spacing) * 0);\n  }\n  .mr-10px {\n    margin-right: 10px;\n  }\n  .mb-10px {\n    margin-bottom: 10px;\n  }\n  .ml-0 {\n    margin-left: calc(var(--spacing) * 0);\n  }\n  .ml-auto {\n    margin-left: auto;\n  }\n  .flex {\n    display: flex;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)\n      var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .flex-wrap {\n    flex-wrap: wrap;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .border-solid {\n    --tw-border-style: solid;\n    border-style: solid;\n  }\n  .border-clrs-gray {\n    border-color: var(--clrs-gray, #aaaaaa);\n  }\n  .border-clrs-slate {\n    border-color: var(--clrs-slate, #708090);\n  }\n  .bg-clrs-blue {\n    background-color: var(--clrs-blue, #0074d9);\n  }\n  .bg-clrs-red {\n    background-color: var(--clrs-red, #ff4136);\n  }\n  .bg-clrs-silver {\n    background-color: var(--clrs-silver, #dddddd);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .align-top {\n    vertical-align: top;\n  }\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .text-clrs-gray {\n    color: var(--clrs-gray, #aaaaaa);\n  }\n  .text-clrs-navy {\n    color: var(--clrs-navy, #001f3f);\n  }\n  .text-clrs-slate4 {\n    color: var(--clrs-slate4, #4e5964);\n  }\n  .text-clrs-white {\n    color: var(--clrs-white, #ffffff);\n  }\n  .italic {\n    font-style: italic;\n  }\n  .shadow {\n    --tw-shadow:\n      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),\n      0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow:\n      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),\n      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .hover\\:text-clrs-navy {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--clrs-navy, #001f3f);\n      }\n    }\n  }\n  .active\\:bg-clrs-gray {\n    &:active {\n      background-color: var(--clrs-gray, #aaaaaa);\n    }\n  }\n  .active\\:text-clrs-navy {\n    &:active {\n      color: var(--clrs-navy, #001f3f);\n    }\n  }\n}\n@layer components {\n  .ds1-main {\n    display: flex;\n    flex-direction: column;\n    padding: calc(var(--spacing) * 4);\n    font-family: var(--font-sans);\n    color: var(--clrs-navy, #001f3f);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .ds1-button {\n    display: flex;\n    align-items: center;\n    --tw-border-style: solid;\n    border-style: solid;\n    border-color: var(--clrs-slate, #708090);\n    color: var(--clrs-white, #ffffff);\n    &:active {\n      background-color: var(--clrs-gray, #aaaaaa);\n    }\n    &:active {\n      color: var(--clrs-navy, #001f3f);\n    }\n  }\n  .funnel-gfx {\n    --tw-border-style: solid;\n    border-style: solid;\n    border-color: var(--clrs-gray, #aaaaaa);\n    background-color: var(--clrs-silver, #dddddd);\n    stroke-width: 1;\n  }\n}\n.data-button {\n  border-radius: 5px;\n  border-width: 1px;\n  padding: 5px;\n  margin: 0px;\n  margin-right: 5px;\n  cursor: pointer;\n}\n.funnel-gfx {\n  width: calc(100% - 20px);\n  height: 100%;\n  padding: 10px;\n  padding-bottom: 7px;\n  border-radius: 10px;\n  border-width: 1px;\n}\n";
+const shadowCss = () => `/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root,
+  :host {
+    --font-sans:
+      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --font-weight-bold: 700;
+  }
+}
+@layer utilities {
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .top-8 {
+    top: calc(var(--spacing) * 8);
+  }
+  .right-8 {
+    right: calc(var(--spacing) * 8);
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mt-5px {
+    margin-top: 5px;
+  }
+  .mr-0 {
+    margin-right: calc(var(--spacing) * 0);
+  }
+  .mr-10px {
+    margin-right: 10px;
+  }
+  .mb-10px {
+    margin-bottom: 10px;
+  }
+  .ml-0 {
+    margin-left: calc(var(--spacing) * 0);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .flex {
+    display: flex;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
+      var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .border-clrs-gray {
+    border-color: var(--clrs-gray, #aaaaaa);
+  }
+  .border-clrs-slate {
+    border-color: var(--clrs-slate, #708090);
+  }
+  .bg-clrs-blue {
+    background-color: var(--clrs-blue, #0074d9);
+  }
+  .bg-clrs-red {
+    background-color: var(--clrs-red, #ff4136);
+  }
+  .bg-clrs-silver {
+    background-color: var(--clrs-silver, #dddddd);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .align-top {
+    vertical-align: top;
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .text-clrs-gray {
+    color: var(--clrs-gray, #aaaaaa);
+  }
+  .text-clrs-navy {
+    color: var(--clrs-navy, #001f3f);
+  }
+  .text-clrs-slate4 {
+    color: var(--clrs-slate4, #4e5964);
+  }
+  .text-clrs-white {
+    color: var(--clrs-white, #ffffff);
+  }
+  .italic {
+    font-style: italic;
+  }
+  .shadow {
+    --tw-shadow:
+      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
+      0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .hover\:text-clrs-navy {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--clrs-navy, #001f3f);
+      }
+    }
+  }
+  .active\:bg-clrs-gray {
+    &:active {
+      background-color: var(--clrs-gray, #aaaaaa);
+    }
+  }
+  .active\:text-clrs-navy {
+    &:active {
+      color: var(--clrs-navy, #001f3f);
+    }
+  }
+}
+@layer components {
+  .ds1-main {
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--spacing) * 4);
+    font-family: var(--font-sans);
+    color: var(--clrs-navy, #001f3f);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .ds1-button {
+    display: flex;
+    align-items: center;
+    --tw-border-style: solid;
+    border-style: solid;
+    border-color: var(--clrs-slate, #708090);
+    color: var(--clrs-white, #ffffff);
+    &:active {
+      background-color: var(--clrs-gray, #aaaaaa);
+    }
+    &:active {
+      color: var(--clrs-navy, #001f3f);
+    }
+  }
+  .funnel-gfx {
+    --tw-border-style: solid;
+    border-style: solid;
+    border-color: var(--clrs-gray, #aaaaaa);
+    background-color: var(--clrs-silver, #dddddd);
+    stroke-width: 1;
+  }
+}
+.data-button {
+  border-radius: 5px;
+  border-width: 1px;
+  padding: 5px;
+  margin: 0px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+.funnel-gfx {
+  width: calc(100% - 20px);
+  height: 100%;
+  padding: 10px;
+  padding-bottom: 7px;
+  border-radius: 10px;
+  border-width: 1px;
+}
+`;
 
 const FunnelApp = class {
     constructor(hostRef) {
@@ -10330,6 +10589,6 @@ const FunnelApp = class {
         return (index.h("div", { key: '7998626a3f01e8bb4b2ed4b2b80d8b8de4a11206', id: "app", class: "ds1-main relative" }, index.h(Eswat2Io, { key: '44437debf47c76557ac6a115eec78b43a0aa2648' }), index.h(FunnelGfx, { key: 'f0806a91f365823850ab6ccebbc1339c18dd46b1' }), index.h(DataSource, { key: 'bfe9dc2f232eac7142d416c2dff3e7d8522930b7', actions: actions, state: state }), index.h(ColorPicker, { key: '23836d760ccb38b898857abd205ae186d8f05242', actions: actions, state: state }), index.h("hr", { key: '33eae1954a6b50e6a7b8c3124e92895114a8412d', class: "ml-0 mr-0" }), index.h(DataValues, { key: '4d449b22dedd37ce95356c98b00d5137008b5345', state: state })));
     }
 };
-FunnelApp.style = shadowCss;
+FunnelApp.style = shadowCss();
 
 exports.funnel_app = FunnelApp;

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

@@ -1,21 +1,48 @@
 'use strict';
 
-var index = require('./index-C7bIxnD-.js');
+var index = require('./index-BFBRUSYG.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.38.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.39.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
+  if (index.BUILD.isDev && !index.BUILD.isTesting) {
+    index.consoleDevInfo("Running in development mode.");
+  }
+  if (index.BUILD.cloneNodeFix) {
+    patchCloneNodeFix(index.H.prototype);
+  }
+  const scriptElm = index.BUILD.scriptDataOpts ? index.win.document && Array.from(index.win.document.querySelectorAll("script")).find(
+    (s) => new RegExp(`/${index.NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute("data-stencil-namespace") === index.NAMESPACE
+  ) : null;
   const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('funnel-gfx-wc.cjs.js', document.baseURI).href));
-  const opts = {};
+  const opts = index.BUILD.scriptDataOpts ? (scriptElm || {})["data-opts"] || {} : {};
   if (importMeta !== "") {
     opts.resourcesUrl = new URL(".", importMeta).href;
   }
   return index.promiseResolve(opts);
 };
+var patchCloneNodeFix = (HTMLElementPrototype) => {
+  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+  HTMLElementPrototype.cloneNode = function(deep) {
+    if (this.nodeName === "TEMPLATE") {
+      return nativeCloneNodeFn.call(this, deep);
+    }
+    const clonedNode = nativeCloneNodeFn.call(this, false);
+    const srcChildNodes = this.childNodes;
+    if (deep) {
+      for (let i = 0; i < srcChildNodes.length; i++) {
+        if (srcChildNodes[i].nodeType !== 2) {
+          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+        }
+      }
+    }
+    return clonedNode;
+  };
+};
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();