funnel-gfx-wc 0.1.103 → 0.1.105
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/funnel-app.cjs.entry.js +2 -2
- package/dist/collection/styles/shadow.css +1 -1
- package/dist/collection/tokens.css +1 -1
- package/dist/collection/utils/tw-version.js +1 -1
- package/dist/esm/funnel-app.entry.js +2 -2
- package/dist/funnel-gfx-wc/funnel-gfx-wc.esm.js +1 -1
- package/dist/funnel-gfx-wc/{p-d5fe39fb.entry.js → p-1cd6c24c.entry.js} +2 -2
- package/dist/funnel-gfx-wc/tokens.css +1 -1
- package/dist/types/utils/tw-version.d.ts +1 -1
- package/package.json +3 -3
|
@@ -331,7 +331,7 @@ const actions = {
|
|
|
331
331
|
};
|
|
332
332
|
|
|
333
333
|
// WARNING: generated file...
|
|
334
|
-
const TW_VERSION = '4.1.
|
|
334
|
+
const TW_VERSION = '4.1.14';
|
|
335
335
|
|
|
336
336
|
const ColorPicker = props => {
|
|
337
337
|
const { actions, state } = props;
|
|
@@ -10262,7 +10262,7 @@ const Eswat2Io = _props => {
|
|
|
10262
10262
|
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" })));
|
|
10263
10263
|
};
|
|
10264
10264
|
|
|
10265
|
-
const shadowCss = "/*! tailwindcss v4.1.
|
|
10265
|
+
const shadowCss = "/*! tailwindcss v4.1.14 | 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";
|
|
10266
10266
|
|
|
10267
10267
|
const FunnelApp = class {
|
|
10268
10268
|
constructor(hostRef) {
|
|
@@ -329,7 +329,7 @@ const actions = {
|
|
|
329
329
|
};
|
|
330
330
|
|
|
331
331
|
// WARNING: generated file...
|
|
332
|
-
const TW_VERSION = '4.1.
|
|
332
|
+
const TW_VERSION = '4.1.14';
|
|
333
333
|
|
|
334
334
|
const ColorPicker = props => {
|
|
335
335
|
const { actions, state } = props;
|
|
@@ -10260,7 +10260,7 @@ const Eswat2Io = _props => {
|
|
|
10260
10260
|
return (h("a", { class: "absolute right-8 top-8 text-clrs-gray hover:text-clrs-navy", href: url, "aria-label": who, target: "blank", title: who }, h(Fingerprint, { label: "eswat2" })));
|
|
10261
10261
|
};
|
|
10262
10262
|
|
|
10263
|
-
const shadowCss = "/*! tailwindcss v4.1.
|
|
10263
|
+
const shadowCss = "/*! tailwindcss v4.1.14 | 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";
|
|
10264
10264
|
|
|
10265
10265
|
const FunnelApp = class {
|
|
10266
10266
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p,b as a}from"./p-Adpf2ZzO.js";export{s as setNonce}from"./p-Adpf2ZzO.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const s=import.meta.url,a={};return""!==s&&(a.resourcesUrl=new URL(".",s).href),p(a)})().then((async p=>(await t(),a([["p-
|
|
1
|
+
import{p,b as a}from"./p-Adpf2ZzO.js";export{s as setNonce}from"./p-Adpf2ZzO.js";import{g as t}from"./p-DQuL1Twl.js";(()=>{const s=import.meta.url,a={};return""!==s&&(a.resourcesUrl=new URL(".",s).href),p(a)})().then((async p=>(await t(),a([["p-1cd6c24c",[[257,"funnel-app",{tag:[1]}]]]],p))));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{h as t,g as s,f as i,r as e}from"./p-Adpf2ZzO.js";const n=s=>{const i=s.hex||"currentColor",e=s.selected||!1,n=s.size||24;return t("svg",{class:s.class,width:n,height:n,viewBox:"0 0 24 24",role:"img","aria-label":"title"},t("title",null,s.label||"radio")," ",t("g",{fill:i},t("path",e?{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"}:{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"})),t("path",{d:"M0 0h24v24H0z",fill:"none"}))},h=[{id:1,height:400,width:100,x:10,y:10,drop:20},{id:2,height:356,width:100,x:120,y:32,drop:20},{id:3,height:312,width:100,x:230,y:54,drop:20},{id:4,height:268,width:100,x:340,y:76,drop:20},{id:5,height:224,width:100,x:450,y:98,drop:20}],r=h.map((()=>0)),o={bada55:"#bada55",navy:"#001f3f",blue:"#0074d9",aqua:"#7fdbff",teal:"#39cccc",olive:"#3d9970",green:"#2ecc40",lime:"#01ff70",yellow:"#ffdc00",orange:"#ff851b",red:"#ff4136",maroon:"#85144b",fuchsia:"#f012be",purple:"#b10dc9",black:"#111111",gray:"#aaaaaa",silver:"#dddddd"},l={slate:"#708090",slate4:"#4e5964",white:"#ffffff"},a=t=>o[t]||l[t],c=Object.keys(o),u=t=>!("isConnected"in t)||t.isConnected,f=(()=>{let t;return(...s)=>{t&&clearTimeout(t),t=setTimeout((()=>{t=0,(t=>{for(let s of t.keys())t.set(s,t.get(s).filter(u))})(...s)}),2e3)}})(),d=t=>"function"==typeof t?t():t,p=(t,s)=>{const i=t.indexOf(s);i>=0&&(t[i]=t[t.length-1],t.length--)},g="funnel-gfx-wc::app-data",v=(()=>{const t=((t,s=(t,s)=>t!==s)=>{const i=d(t);let e=new Map(Object.entries(i??{}));const n={dispose:[],get:[],set:[],reset:[]},h=new Map,r=()=>{e=new Map(Object.entries(d(t)??{})),n.reset.forEach((t=>t()))},o=t=>(n.get.forEach((s=>s(t))),e.get(t)),l=(t,i)=>{const h=e.get(t);s(i,h,t)&&(e.set(t,i),n.set.forEach((s=>s(t,i,h))))},a="undefined"==typeof Proxy?{}:new Proxy(i,{get:(t,s)=>o(s),ownKeys:()=>Array.from(e.keys()),getOwnPropertyDescriptor:()=>({enumerable:!0,configurable:!0}),has:(t,s)=>e.has(s),set:(t,s,i)=>(l(s,i),!0)}),c=(t,s)=>(n[t].push(s),()=>{p(n[t],s)});return{state:a,get:o,set:l,on:c,onChange:(s,i)=>{const e=(t,e)=>{t===s&&i(e)},n=()=>i(d(t)[s]),r=c("set",e),o=c("reset",n);return h.set(i,{setHandler:e,resetHandler:n,propName:s}),()=>{r(),o(),h.delete(i)}},use:(...t)=>{const s=t.reduce(((t,s)=>(s.set&&t.push(c("set",s.set)),s.get&&t.push(c("get",s.get)),s.reset&&t.push(c("reset",s.reset)),s.dispose&&t.push(c("dispose",s.dispose)),t)),[]);return()=>s.forEach((t=>t()))},dispose:()=>{n.dispose.forEach((t=>t())),r()},reset:r,forceUpdate:t=>{const s=e.get(t);n.set.forEach((i=>i(t,s,s)))},removeListener:(t,s)=>{const i=h.get(s);i&&i.propName===t&&(p(n.set,i.setHandler),p(n.reset,i.resetHandler),h.delete(s))}}})({count:0,pick:"bada55",values:[...r]},void 0);return t.use((()=>{if("function"!=typeof s)return{};const t=new Map;return{dispose:()=>t.clear(),get:i=>{const e=s();e&&((t,s,i)=>{const e=t.get(s);e?e.includes(i)||e.push(i):t.set(s,[i])})(t,i,e)},set:s=>{const e=t.get(s);e&&t.set(s,e.filter(i)),f(t)},reset:()=>{t.forEach((t=>t.forEach(i))),f(t)}}})()),t})(),{state:m,onChange:b}=v,x=()=>{const{count:t,pick:s,values:i}=m;(t=>{const s=JSON.stringify(t);localStorage.setItem(g,s)})({count:t,pick:s,values:i})},w={initApp:()=>{const t=(()=>{const t=localStorage.getItem(g);return t?JSON.parse(t):void 0})();if(t){const{count:s,pick:i,values:e}=t;m.count=s,m.pick=i,m.values=e}},refresh:()=>{const t=r.map((()=>Math.floor(100*Math.random())));m.count=m.count+1,m.values=t,x()},reset:()=>{m.count=0,m.values=[...r],x()},updatePick:t=>{m.pick=t,x()}},y=s=>{const{actions:i,state:e}=s,{pick:h}=e;return t("div",{id:"toolbar",class:"flex flex-wrap",role:"radiogroup"},c.map((s=>{const e=a(s),r=h==s;return t("div",{"aria-label":s,"aria-checked":r?"true":"false",role:"radio",onClick:()=>{i.updatePick(s)}},t(n,{hex:e,selected:r,label:s}))})))},$=s=>{const i=s.hex||"currentColor",e=s.size||24;return t("svg",{class:s.class,width:e,height:e,viewBox:"0 0 24 24",role:"img","aria-label":"title"},t("title",null,s.label||"chevron-double-left"),t("g",{fill:i},t("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"})),t("path",{d:"M0 0h24v24H0z",fill:"none"}))},C=s=>{const i=s.hex||"currentColor",e=s.size||24;return t("svg",{class:s.class,width:e,height:e,viewBox:"0 0 24 24",role:"img","aria-label":"title"},t("title",null,s.label||"close"),t("g",{fill:i},t("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"})),t("path",{d:"M0 0h24v24H0z",fill:"none"}))},k=s=>{const i=s.hex||"currentColor",e=s.size||24;return t("svg",{class:s.class,width:e,height:e,viewBox:"0 0 24 24",role:"img","aria-label":"title"},t("title",null,s.label||"refresh"),t("g",{fill:i},t("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"})),t("path",{d:"M0 0h24v24H0z",fill:"none"}))},M=s=>{const{actions:i,state:e}=s,{count:n}=e;return t("div",{class:"mb-10px mt-3 flex items-center"},t("button",{"aria-label":"Refresh",class:"ds1-button data-button bg-clrs-blue",onClick:()=>{i.refresh()}},t(k,{label:"Refresh"})),t("button",{"aria-label":"Reset",class:"ds1-button data-button bg-clrs-red",onClick:()=>{i.reset()}},t(C,{label:"Reset"})),t("span",{class:"flex items-center"},t($,{size:28}),t("span",{class:"italic"},"click a button... ",t("sup",null,n))))},_=()=>t("label",{class:"ml-auto align-top text-xs italic text-clrs-slate4"},"Tailwind ","4.1.
|
|
1
|
+
import{h as t,g as s,f as i,r as e}from"./p-Adpf2ZzO.js";const n=s=>{const i=s.hex||"currentColor",e=s.selected||!1,n=s.size||24;return t("svg",{class:s.class,width:n,height:n,viewBox:"0 0 24 24",role:"img","aria-label":"title"},t("title",null,s.label||"radio")," ",t("g",{fill:i},t("path",e?{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"}:{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"})),t("path",{d:"M0 0h24v24H0z",fill:"none"}))},h=[{id:1,height:400,width:100,x:10,y:10,drop:20},{id:2,height:356,width:100,x:120,y:32,drop:20},{id:3,height:312,width:100,x:230,y:54,drop:20},{id:4,height:268,width:100,x:340,y:76,drop:20},{id:5,height:224,width:100,x:450,y:98,drop:20}],r=h.map((()=>0)),o={bada55:"#bada55",navy:"#001f3f",blue:"#0074d9",aqua:"#7fdbff",teal:"#39cccc",olive:"#3d9970",green:"#2ecc40",lime:"#01ff70",yellow:"#ffdc00",orange:"#ff851b",red:"#ff4136",maroon:"#85144b",fuchsia:"#f012be",purple:"#b10dc9",black:"#111111",gray:"#aaaaaa",silver:"#dddddd"},l={slate:"#708090",slate4:"#4e5964",white:"#ffffff"},a=t=>o[t]||l[t],c=Object.keys(o),u=t=>!("isConnected"in t)||t.isConnected,f=(()=>{let t;return(...s)=>{t&&clearTimeout(t),t=setTimeout((()=>{t=0,(t=>{for(let s of t.keys())t.set(s,t.get(s).filter(u))})(...s)}),2e3)}})(),d=t=>"function"==typeof t?t():t,p=(t,s)=>{const i=t.indexOf(s);i>=0&&(t[i]=t[t.length-1],t.length--)},g="funnel-gfx-wc::app-data",v=(()=>{const t=((t,s=(t,s)=>t!==s)=>{const i=d(t);let e=new Map(Object.entries(i??{}));const n={dispose:[],get:[],set:[],reset:[]},h=new Map,r=()=>{e=new Map(Object.entries(d(t)??{})),n.reset.forEach((t=>t()))},o=t=>(n.get.forEach((s=>s(t))),e.get(t)),l=(t,i)=>{const h=e.get(t);s(i,h,t)&&(e.set(t,i),n.set.forEach((s=>s(t,i,h))))},a="undefined"==typeof Proxy?{}:new Proxy(i,{get:(t,s)=>o(s),ownKeys:()=>Array.from(e.keys()),getOwnPropertyDescriptor:()=>({enumerable:!0,configurable:!0}),has:(t,s)=>e.has(s),set:(t,s,i)=>(l(s,i),!0)}),c=(t,s)=>(n[t].push(s),()=>{p(n[t],s)});return{state:a,get:o,set:l,on:c,onChange:(s,i)=>{const e=(t,e)=>{t===s&&i(e)},n=()=>i(d(t)[s]),r=c("set",e),o=c("reset",n);return h.set(i,{setHandler:e,resetHandler:n,propName:s}),()=>{r(),o(),h.delete(i)}},use:(...t)=>{const s=t.reduce(((t,s)=>(s.set&&t.push(c("set",s.set)),s.get&&t.push(c("get",s.get)),s.reset&&t.push(c("reset",s.reset)),s.dispose&&t.push(c("dispose",s.dispose)),t)),[]);return()=>s.forEach((t=>t()))},dispose:()=>{n.dispose.forEach((t=>t())),r()},reset:r,forceUpdate:t=>{const s=e.get(t);n.set.forEach((i=>i(t,s,s)))},removeListener:(t,s)=>{const i=h.get(s);i&&i.propName===t&&(p(n.set,i.setHandler),p(n.reset,i.resetHandler),h.delete(s))}}})({count:0,pick:"bada55",values:[...r]},void 0);return t.use((()=>{if("function"!=typeof s)return{};const t=new Map;return{dispose:()=>t.clear(),get:i=>{const e=s();e&&((t,s,i)=>{const e=t.get(s);e?e.includes(i)||e.push(i):t.set(s,[i])})(t,i,e)},set:s=>{const e=t.get(s);e&&t.set(s,e.filter(i)),f(t)},reset:()=>{t.forEach((t=>t.forEach(i))),f(t)}}})()),t})(),{state:m,onChange:b}=v,x=()=>{const{count:t,pick:s,values:i}=m;(t=>{const s=JSON.stringify(t);localStorage.setItem(g,s)})({count:t,pick:s,values:i})},w={initApp:()=>{const t=(()=>{const t=localStorage.getItem(g);return t?JSON.parse(t):void 0})();if(t){const{count:s,pick:i,values:e}=t;m.count=s,m.pick=i,m.values=e}},refresh:()=>{const t=r.map((()=>Math.floor(100*Math.random())));m.count=m.count+1,m.values=t,x()},reset:()=>{m.count=0,m.values=[...r],x()},updatePick:t=>{m.pick=t,x()}},y=s=>{const{actions:i,state:e}=s,{pick:h}=e;return t("div",{id:"toolbar",class:"flex flex-wrap",role:"radiogroup"},c.map((s=>{const e=a(s),r=h==s;return t("div",{"aria-label":s,"aria-checked":r?"true":"false",role:"radio",onClick:()=>{i.updatePick(s)}},t(n,{hex:e,selected:r,label:s}))})))},$=s=>{const i=s.hex||"currentColor",e=s.size||24;return t("svg",{class:s.class,width:e,height:e,viewBox:"0 0 24 24",role:"img","aria-label":"title"},t("title",null,s.label||"chevron-double-left"),t("g",{fill:i},t("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"})),t("path",{d:"M0 0h24v24H0z",fill:"none"}))},C=s=>{const i=s.hex||"currentColor",e=s.size||24;return t("svg",{class:s.class,width:e,height:e,viewBox:"0 0 24 24",role:"img","aria-label":"title"},t("title",null,s.label||"close"),t("g",{fill:i},t("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"})),t("path",{d:"M0 0h24v24H0z",fill:"none"}))},k=s=>{const i=s.hex||"currentColor",e=s.size||24;return t("svg",{class:s.class,width:e,height:e,viewBox:"0 0 24 24",role:"img","aria-label":"title"},t("title",null,s.label||"refresh"),t("g",{fill:i},t("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"})),t("path",{d:"M0 0h24v24H0z",fill:"none"}))},M=s=>{const{actions:i,state:e}=s,{count:n}=e;return t("div",{class:"mb-10px mt-3 flex items-center"},t("button",{"aria-label":"Refresh",class:"ds1-button data-button bg-clrs-blue",onClick:()=>{i.refresh()}},t(k,{label:"Refresh"})),t("button",{"aria-label":"Reset",class:"ds1-button data-button bg-clrs-red",onClick:()=>{i.reset()}},t(C,{label:"Reset"})),t("span",{class:"flex items-center"},t($,{size:28}),t("span",{class:"italic"},"click a button... ",t("sup",null,n))))},_=()=>t("label",{class:"ml-auto align-top text-xs italic text-clrs-slate4"},"Tailwind ","4.1.14"),S=s=>{const{state:i}=s,{values:e,pick:n,count:h}=i;return t("div",{class:"flex"},t("div",{class:"flex flex-col"},t("div",{class:"flex"},t("span",{class:"mr-10px font-bold"},"color:"),t("span",{class:"italic text-clrs-slate4"},n)),t("div",{class:"mt-5px flex"},t("span",{class:"mr-10px font-bold"},"sample:"),t("span",{class:"italic text-clrs-slate4"},`${h>0?e:"..."}`))),t(_,null))};var F,N={},T={},B={};function O(){if(F)return B;F=1;const t="undefined"!=typeof window,s=t?window:null,i=t?document:null,e=Symbol(),n=Symbol(),h=Symbol(),r=Symbol(),o=Symbol(),l=Symbol(),a=(()=>{const t=new Map;return t.set("x","translateX"),t.set("y","translateY"),t.set("z","translateZ"),t})(),c=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","matrix","matrix3d","perspective"],u=c.reduce(((t,s)=>({...t,[s]:s+"("})),{});return B.K=1e3,B.compositionTypes={replace:0,none:1,blend:2},B.cssVarPrefix="var(",B.cssVariableMatchRgx=/var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/,B.digitWithExponentRgx=/[-+]?\d*\.?\d+(?:e[-+]?\d)?/gi,B.doc=i,B.emptyString="",B.hexTestRgx=/(^#([\da-f]{3}){1,2}$)|(^#([\da-f]{4}){1,2}$)/i,B.hslExecRgx=/hsl\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*\)/i,B.hslaExecRgx=/hsla\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)\s*\)/i,B.isBrowser=t,B.isDomSymbol=n,B.isRegisteredTargetSymbol=e,B.isSvgSymbol=h,B.lowerCaseRgx=/([a-z])([A-Z])/g,B.maxFps=120,B.maxValue=1e12,B.minValue=1e-11,B.morphPointsSymbol=o,B.noop=()=>{},B.proxyTargetSymbol=l,B.relativeValuesExecRgx=/(\*=|\+=|-=)/,B.rgbExecRgx=/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i,B.rgbaExecRgx=/rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(-?\d+|-?\d*.\d+)\s*\)/i,B.shortTransforms=a,B.tickModes={NONE:0,AUTO:1,FORCE:2},B.transformsExecRgx=/(\w+)(\([^)]+\)+)/g,B.transformsFragmentStrings=u,B.transformsSymbol=r,B.tweenTypes={OBJECT:0,ATTRIBUTE:1,CSS:2,TRANSFORM:3,CSS_VAR:4},B.unitsExecRgx=/^([-+]?\d*\.?\d+(?:e[-+]?\d+)?)([a-z]+|%)$/i,B.validTransforms=c,B.valueTypes={NUMBER:0,UNIT:1,COLOR:2,COMPLEX:3},B.win=s,B}var R,A,z={},E={};function L(){if(R)return E;R=1;var t=O();const s={id:null,keyframes:null,playbackEase:null,playbackRate:1,frameRate:t.maxFps,loop:0,reversed:!1,alternate:!1,autoplay:!0,persist:!1,duration:t.K,delay:0,loopDelay:0,ease:"out(2)",composition:t.compositionTypes.replace,modifier:t=>t,onBegin:t.noop,onBeforeUpdate:t.noop,onUpdate:t.noop,onLoop:t.noop,onPause:t.noop,onComplete:t.noop,onRender:t.noop},i={current:null,root:t.doc},e={defaults:s,precision:4,timeScale:1,tickThreshold:200},n={version:"4.2.0",engine:null};return t.isBrowser&&(t.win.AnimeJS||(t.win.AnimeJS=[]),t.win.AnimeJS.push(n)),E.defaults=s,E.globalVersions=n,E.globals=e,E.scope=i,E}
|
|
2
2
|
/**
|
|
3
3
|
* Anime.js - core - CJS
|
|
4
4
|
* @version v4.2.0
|
|
@@ -190,4 +190,4 @@ import{h as t,g as s,f as i,r as e}from"./p-Adpf2ZzO.js";const n=s=>{const i=s.h
|
|
|
190
190
|
* @version v4.2.0
|
|
191
191
|
* @license MIT
|
|
192
192
|
* @copyright 2025 - Julian Garnier
|
|
193
|
-
*/function ri(){if(ei)return N;ei=1;var t=dt(),s=Ft(),i=At(),e=Lt(),n=Qt(),h=ns(),r=os(),o=ut(),l=$s(),a=As(),c=Ws(),u=si(),f=hi(),d=us(),p=ps(),g=ms(),v=ys(),m=Xt(),b=St(),x=_s(),w=Ns(),y=es(),$=tt(),C=mt(),k=Jt(),M=Rs(),_=Ps(),S=Xs(),F=Gs(),T=ti();return N.Timer=t.Timer,N.createTimer=t.createTimer,N.JSAnimation=s.JSAnimation,N.animate=s.animate,N.Timeline=i.Timeline,N.createTimeline=i.createTimeline,N.Animatable=e.Animatable,N.createAnimatable=e.createAnimatable,N.Draggable=n.Draggable,N.createDraggable=n.createDraggable,N.Scope=h.Scope,N.createScope=h.createScope,N.ScrollObserver=r.ScrollObserver,N.onScroll=r.onScroll,N.scrollContainers=r.scrollContainers,N.engine=o.engine,N.easings=l,N.utils=a,N.svg=c,N.text=u,N.WAAPIAnimation=f.WAAPIAnimation,N.waapi=f.waapi,N.cubicBezier=d.cubicBezier,N.steps=p.steps,N.linear=g.linear,N.irregular=v.irregular,N.Spring=m.Spring,N.createSpring=m.createSpring,N.spring=m.spring,N.eases=b.eases,N.clamp=x.clamp,N.damp=x.damp,N.degToRad=x.degToRad,N.lerp=x.lerp,N.mapRange=x.mapRange,N.padEnd=x.padEnd,N.padStart=x.padStart,N.radToDeg=x.radToDeg,N.round=x.round,N.roundPad=x.roundPad,N.snap=x.snap,N.wrap=x.wrap,N.createSeededRandom=w.createSeededRandom,N.random=w.random,N.randomPick=w.randomPick,N.shuffle=w.shuffle,N.keepTime=y.keepTime,N.sync=y.sync,N.cleanInlineStyles=$.cleanInlineStyles,N.$=C.registerTargets,N.get=k.get,N.remove=k.remove,N.set=k.set,N.stagger=M.stagger,N.createMotionPath=_.createMotionPath,N.createDrawable=S.createDrawable,N.morphTo=F.morphTo,N.TextSplitter=T.TextSplitter,N.split=T.split,N.splitText=T.splitText,N}var oi=ri();let li,ai=[];const ci=a("white"),ui=a("bada55");let fi,di;const pi=t=>{li&&(fi&&fi.pause(),fi=oi.animate(li,{fill:a(t),ease:"inOutCubic"}))},gi=t=>{li&&(di&&di.pause(),di=oi.animate(li,{y:(s,i)=>ai[i]*((100-t[i])/100),ease:"inOutCubic"}))},vi=()=>{const s=h.map((t=>(({id:t,height:s,width:i,x:e,y:n,drop:h})=>({id:t,height:s,width:i,x:e,y:n,maskId:`mask-${t}`,maskUri:`url('#mask-${t}')`,mask:`0.5,0.5,0.5,${s-.5},${i-.5},${s-h-.5},${i-.5},${h+.5}`,matrix:`matrix(1,0,0,1,${e},${n})`,points:`0,0,0,${s},${i},${s-h},${i},${h}`}))(t))),i="currentColor";return ai=Array(s.length),li=Array(s.length),t("div",{class:"funnel-gfx"},t("svg",{viewBox:"0 0 600 420"},t("desc",null,"Created with Snap"),t("defs",null,s.map((s=>t("mask",{id:s.maskId},t("polygon",{points:s.mask,fill:ci}))))),s.map(((s,e)=>{const{height:n,width:h,maskUri:r,matrix:o,points:l}=s;return ai[e]=n,t("g",{transform:o},t("polygon",{points:l,fill:ci,stroke:i}),t("rect",{ref:t=>li[e]=t,x:"0",y:n,width:h,height:n,mask:r,fill:ui,stroke:i}))}))))},mi=s=>{const i=s.hex||"currentColor",e=s.size||24;return t("svg",{class:s.class,width:e,height:e,viewBox:"0 0 24 24",role:"img","aria-label":"title"},t("title",null,s.label||"fingerprint"),t("g",{fill:i},t("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"})),t("path",{d:"M0 0h24v24H0z",fill:"none"}))},bi="eswat2",xi=()=>t("a",{class:"absolute right-8 top-8 text-clrs-gray hover:text-clrs-navy",href:"https://eswat2.dev","aria-label":bi,target:"blank",title:bi},t(mi,{label:"eswat2"})),wi=class{constructor(t){e(this,t),this.tag="funnel-app"}componentDidLoad(){b("pick",pi),b("values",gi),w.initApp()}render(){return t("div",{key:"7998626a3f01e8bb4b2ed4b2b80d8b8de4a11206",id:"app",class:"ds1-main relative"},t(xi,{key:"44437debf47c76557ac6a115eec78b43a0aa2648"}),t(vi,{key:"f0806a91f365823850ab6ccebbc1339c18dd46b1"}),t(M,{key:"bfe9dc2f232eac7142d416c2dff3e7d8522930b7",actions:w,state:m}),t(y,{key:"23836d760ccb38b898857abd205ae186d8f05242",actions:w,state:m}),t("hr",{key:"33eae1954a6b50e6a7b8c3124e92895114a8412d",class:"ml-0 mr-0"}),t(S,{key:"4d449b22dedd37ce95356c98b00d5137008b5345",state:m}))}};wi.style="/*! tailwindcss v4.1.13 | 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";export{wi as funnel_app}
|
|
193
|
+
*/function ri(){if(ei)return N;ei=1;var t=dt(),s=Ft(),i=At(),e=Lt(),n=Qt(),h=ns(),r=os(),o=ut(),l=$s(),a=As(),c=Ws(),u=si(),f=hi(),d=us(),p=ps(),g=ms(),v=ys(),m=Xt(),b=St(),x=_s(),w=Ns(),y=es(),$=tt(),C=mt(),k=Jt(),M=Rs(),_=Ps(),S=Xs(),F=Gs(),T=ti();return N.Timer=t.Timer,N.createTimer=t.createTimer,N.JSAnimation=s.JSAnimation,N.animate=s.animate,N.Timeline=i.Timeline,N.createTimeline=i.createTimeline,N.Animatable=e.Animatable,N.createAnimatable=e.createAnimatable,N.Draggable=n.Draggable,N.createDraggable=n.createDraggable,N.Scope=h.Scope,N.createScope=h.createScope,N.ScrollObserver=r.ScrollObserver,N.onScroll=r.onScroll,N.scrollContainers=r.scrollContainers,N.engine=o.engine,N.easings=l,N.utils=a,N.svg=c,N.text=u,N.WAAPIAnimation=f.WAAPIAnimation,N.waapi=f.waapi,N.cubicBezier=d.cubicBezier,N.steps=p.steps,N.linear=g.linear,N.irregular=v.irregular,N.Spring=m.Spring,N.createSpring=m.createSpring,N.spring=m.spring,N.eases=b.eases,N.clamp=x.clamp,N.damp=x.damp,N.degToRad=x.degToRad,N.lerp=x.lerp,N.mapRange=x.mapRange,N.padEnd=x.padEnd,N.padStart=x.padStart,N.radToDeg=x.radToDeg,N.round=x.round,N.roundPad=x.roundPad,N.snap=x.snap,N.wrap=x.wrap,N.createSeededRandom=w.createSeededRandom,N.random=w.random,N.randomPick=w.randomPick,N.shuffle=w.shuffle,N.keepTime=y.keepTime,N.sync=y.sync,N.cleanInlineStyles=$.cleanInlineStyles,N.$=C.registerTargets,N.get=k.get,N.remove=k.remove,N.set=k.set,N.stagger=M.stagger,N.createMotionPath=_.createMotionPath,N.createDrawable=S.createDrawable,N.morphTo=F.morphTo,N.TextSplitter=T.TextSplitter,N.split=T.split,N.splitText=T.splitText,N}var oi=ri();let li,ai=[];const ci=a("white"),ui=a("bada55");let fi,di;const pi=t=>{li&&(fi&&fi.pause(),fi=oi.animate(li,{fill:a(t),ease:"inOutCubic"}))},gi=t=>{li&&(di&&di.pause(),di=oi.animate(li,{y:(s,i)=>ai[i]*((100-t[i])/100),ease:"inOutCubic"}))},vi=()=>{const s=h.map((t=>(({id:t,height:s,width:i,x:e,y:n,drop:h})=>({id:t,height:s,width:i,x:e,y:n,maskId:`mask-${t}`,maskUri:`url('#mask-${t}')`,mask:`0.5,0.5,0.5,${s-.5},${i-.5},${s-h-.5},${i-.5},${h+.5}`,matrix:`matrix(1,0,0,1,${e},${n})`,points:`0,0,0,${s},${i},${s-h},${i},${h}`}))(t))),i="currentColor";return ai=Array(s.length),li=Array(s.length),t("div",{class:"funnel-gfx"},t("svg",{viewBox:"0 0 600 420"},t("desc",null,"Created with Snap"),t("defs",null,s.map((s=>t("mask",{id:s.maskId},t("polygon",{points:s.mask,fill:ci}))))),s.map(((s,e)=>{const{height:n,width:h,maskUri:r,matrix:o,points:l}=s;return ai[e]=n,t("g",{transform:o},t("polygon",{points:l,fill:ci,stroke:i}),t("rect",{ref:t=>li[e]=t,x:"0",y:n,width:h,height:n,mask:r,fill:ui,stroke:i}))}))))},mi=s=>{const i=s.hex||"currentColor",e=s.size||24;return t("svg",{class:s.class,width:e,height:e,viewBox:"0 0 24 24",role:"img","aria-label":"title"},t("title",null,s.label||"fingerprint"),t("g",{fill:i},t("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"})),t("path",{d:"M0 0h24v24H0z",fill:"none"}))},bi="eswat2",xi=()=>t("a",{class:"absolute right-8 top-8 text-clrs-gray hover:text-clrs-navy",href:"https://eswat2.dev","aria-label":bi,target:"blank",title:bi},t(mi,{label:"eswat2"})),wi=class{constructor(t){e(this,t),this.tag="funnel-app"}componentDidLoad(){b("pick",pi),b("values",gi),w.initApp()}render(){return t("div",{key:"7998626a3f01e8bb4b2ed4b2b80d8b8de4a11206",id:"app",class:"ds1-main relative"},t(xi,{key:"44437debf47c76557ac6a115eec78b43a0aa2648"}),t(vi,{key:"f0806a91f365823850ab6ccebbc1339c18dd46b1"}),t(M,{key:"bfe9dc2f232eac7142d416c2dff3e7d8522930b7",actions:w,state:m}),t(y,{key:"23836d760ccb38b898857abd205ae186d8f05242",actions:w,state:m}),t("hr",{key:"33eae1954a6b50e6a7b8c3124e92895114a8412d",class:"ml-0 mr-0"}),t(S,{key:"4d449b22dedd37ce95356c98b00d5137008b5345",state:m}))}};wi.style="/*! tailwindcss v4.1.14 | 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";export{wi as funnel_app}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "funnel-gfx-wc",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.105",
|
|
4
4
|
"description": "prototype -- a simple SVG demo built with Stencil and Tailwind",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"prettier": "3.6.2",
|
|
41
41
|
"prettier-plugin-tailwindcss": "0.6.14",
|
|
42
42
|
"proto-tailwindcss-clrs": "0.0.446",
|
|
43
|
-
"tailwindcss": "4.1.
|
|
44
|
-
"typescript": "5.9.
|
|
43
|
+
"tailwindcss": "4.1.14",
|
|
44
|
+
"typescript": "5.9.3",
|
|
45
45
|
"workbox-build": "7.3.0"
|
|
46
46
|
},
|
|
47
47
|
"license": "MIT",
|