@circutor/charts 0.1.0 → 0.2.0

package/readme.md

@@ -13,7 +13,10 @@ This repository aims to make the charts used by the Cloud team in their web appl
 To use the chart as a Web Component, simply import it from the CDN in your HTML code.
 
 ```html
-<script type="module" src="https://unpkg.com/@circutor/charts/dist/charts/charts.esm.js"></script>
+<script
+  type="module"
+  src="https://unpkg.com/@circutor/charts@0.2.0/dist/charts/charts.esm.js"
+></script>
 ```
 
 Then, you can directly insert the chart into your HTML:
@@ -24,6 +27,8 @@ Then, you can directly insert the chart into your HTML:
 ></itic-chart>
 ```
 
+The CDN files include ECharts, so there is nothing else to load. Charts on the same page share a single copy.
+
 <details>
 <summary>Complete example</summary>
 
@@ -35,7 +40,10 @@ Then, you can directly insert the chart into your HTML:
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Charts</title>
 
-    <script type="module" src="https://unpkg.com/@circutor/charts/dist/charts/charts.esm.js"></script>
+    <script
+      type="module"
+      src="https://unpkg.com/@circutor/charts@0.2.0/dist/charts/charts.esm.js"
+    ></script>
 
     <style>
       body {
@@ -59,13 +67,56 @@ Then, you can directly insert the chart into your HTML:
 
 </details>
 
+#### Loading only the charts you need
+
+There are two ways to load the Web Components from a CDN. Both download only the code of the charts your page uses.
+
+| Script | What it loads | Use it when |
+|---|---|---|
+| `dist/charts/charts.esm.js` | A small loader that registers every chart tag. Each chart's code is downloaded the first time its tag appears in the page. | You want a single URL for all charts. |
+| `dist/components/<tag>.js` | Only that chart, registered as soon as the script loads. | You want to load specific charts explicitly. |
+
+For example, to load only the ITIC chart:
+
+```html
+<script
+  type="module"
+  src="https://unpkg.com/@circutor/charts@0.2.0/dist/components/itic-chart.js"
+></script>
+```
+
+- Pin the version in the URL (`@circutor/charts@0.2.0`). Without it, the CDN serves the latest release, which may include breaking changes.
+- Use one method per page. If a tag is loaded both ways, the first script to register it wins and the other is downloaded for nothing.
+
+#### With a bundler (without React)
+
+Install the package and **ECharts 6**, which is a peer dependency: the charts use your application's copy, so it isn't bundled twice when your app also uses ECharts.
+
+```
+npm install @circutor/charts echarts
+```
+
+Import each chart from `@circutor/charts/components/<tag>`; importing it registers the tag:
+
+```js
+import '@circutor/charts/components/itic-chart';
+```
+
+Function props (`tooltipFormatter`) and events (`pointClick`) are set from JavaScript:
+
+```js
+const chart = document.querySelector('itic-chart');
+chart.tooltipFormatter = (point, group) => `${escapeHtml(group.groupName)}: ${point.duration} ms`;
+chart.addEventListener('pointClick', event => openWaveforms(event.detail.point));
+```
+
 #### From a React Application
 
 1. **Install the package**  
-   First, you need to install the `@circutor/charts-react` package in your project:
+   Install `@circutor/charts-react` and **ECharts 6** (a peer dependency of `@circutor/charts`, which is installed automatically):
 
 ```
-npm install @circutor/charts-react
+npm install @circutor/charts-react echarts
 ```
 
 2. **Import the component**  
@@ -75,6 +126,8 @@ npm install @circutor/charts-react
 import { IticChart } from '@circutor/charts-react';
 ```
 
+Each wrapper imports only its own Web Component, so your bundler only includes the charts you import. ECharts comes from your application, shared with any other ECharts chart.
+
 3. **Use the component**  
    Now, you can use the chart in your application like any other React component. Just pass the necessary data and configurations:
 
@@ -107,10 +160,128 @@ import { IticChart } from '@circutor/charts-react';
       ></IticChart>
 ```
 
-Remember to consult the documentation for each component for more details and configuration options.
+`@circutor/charts-react` expects `react` and `react-dom` 18 or 19 to be installed in your application.
+
+### ITIC chart options
+
+| Property (React prop) | Attribute | Type | Default | Description |
+|---|---|---|---|---|
+| `groups` | `groups` | `ITICChartMarks[] \| string` | – | Point groups: `groupName` (legend label), `color` and `points` (`duration` in ms, `voltage` in % of nominal, `ts` timestamp, optional `clickable`). As an attribute, a JSON string. |
+| `xAxisName` | `x-axis-name` | `string` | `Duration (ms)` | Name of the duration axis. |
+| `yAxisName` | `y-axis-name` | `string` | `Voltage (% of nominal voltage)` | Name of the voltage axis. |
+| `tooltipFormatter` | – | `(point, group) => string` | English tooltip | HTML of a point's tooltip. JS/React property only. |
+
+| Event (React prop) | `detail` | Description |
+|---|---|---|
+| `pointClick` (`onPointClick`) | `{ point, group }` | A clickable point was clicked. `point` and `group` are the objects you passed in `groups`, with all their fields. |
+
+| CSS custom property | Default | Description |
+|---|---|---|
+| `--itic-chart-background` | `transparent` | Background behind the whole chart. |
+
+#### Clickable points
+
+Every point is clickable by default: it shows a pointer cursor and emits `pointClick`. Set `clickable: false` on a point to turn both off, e.g. for events without waveforms. Clicks on the ITIC curve or on non-clickable points emit nothing.
+
+#### Your own data in points and groups
+
+Points and groups accept any extra field (e.g. `eventType`, `waveforms`, `assetName`). The chart doesn't read or validate them; it passes them back in `pointClick` and `tooltipFormatter`. Cast them to your own types there:
+
+```tsx
+import { IticChart, type ITICChartMarks, type ITICPoint } from '@circutor/charts-react';
+
+// Use `extends` (or `&`) so your types are assignable to the chart's
+interface EventPoint extends ITICPoint {
+  eventType: string;
+  waveforms: Waveform[];
+}
+interface AssetGroup extends ITICChartMarks {
+  assetName: string;
+  points: EventPoint[];
+}
+
+<IticChart
+  groups={groups}
+  onPointClick={({ detail }) => openWaveforms(detail.point as EventPoint, detail.group as AssetGroup)}
+/>;
+```
+
+#### Translations and custom tooltips
+
+The axis names and the default tooltip are in English. Pass `xAxisName`, `yAxisName` and a `tooltipFormatter` to translate them or to show other fields, formatting dates with your user's locale and time zone:
+
+```tsx
+const formatDate = new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'medium', timeZone }).format;
+
+// Define it outside the component (or with useCallback): a new function redraws the chart
+const tooltipFormatter: ITICTooltipFormatter = (point, group) =>
+  [
+    `<strong>${t('asset')}</strong>: ${escapeHtml((group as AssetGroup).assetName)}`,
+    `<strong>${t('timestamp')}</strong>: ${formatDate(new Date(point.ts))}`,
+    `<strong>${t('duration')}</strong>: ${point.duration} ms`,
+  ].join('<br/>');
+
+<IticChart groups={groups} xAxisName={t('duration')} yAxisName={t('voltage')} tooltipFormatter={tooltipFormatter} />;
+```
+
+> **The HTML returned by `tooltipFormatter` is inserted as is.** Escape any value that may contain HTML (names, free text) yourself. The default tooltip escapes every value.
+
+The tooltip is added to `document.body`, not inside the chart, so containers with `overflow: hidden` don't clip it. Its styles are inline, so it looks the same.
 
 ### Size and data updates
 
-- The chart takes the full width of its container and is `400px` high by default. Override the height with CSS, e.g. `itic-chart { height: 300px; }`, and it resizes automatically when its container changes size.
+- The chart takes the full width of its container and is `400px` high by default. Any CSS rule on `itic-chart` in your page wins over that default, e.g. `itic-chart { height: 300px; }`, or, to grow with a flex container:
+  ```css
+  .card { display: flex; flex-direction: column; }
+  .card itic-chart { flex: 1; min-height: 400px; }
+  ```
+  The chart redraws automatically whenever its size changes.
 - Updating `groups` (a new array from JS/React or a new JSON string in the attribute) redraws the chart; groups that are no longer present are removed.
-- `@circutor/charts-react` expects `react` and `react-dom` 18 or 19 to be installed in your application.
+
+### Accessibility
+
+The chart is drawn on a canvas, so the element gets `role="img"` (unless you set another `role`). Describe it with `aria-label`, which the React wrapper passes to the element:
+
+```tsx
+<IticChart groups={groups} aria-label="ITIC curve of the voltage events of Main panel" />
+```
+
+### Next.js (App Router)
+
+- The React wrappers are client components (`'use client'`). A Server Component can render `<IticChart>` with serializable props (`groups`, axis names, `aria-label`), but `onPointClick` and `tooltipFormatter` are functions: pass them from your own `'use client'` component.
+- Server-side rendering works without `next/dynamic` or `ssr: false`: importing the wrappers doesn't touch the DOM, the server renders an empty `<itic-chart>` and the chart draws in the browser after hydration, without hydration warnings.
+
+### Testing with Vitest and jsdom
+
+jsdom has no canvas, so ECharts can't draw there and logs `getContext()` errors. Mock the wrappers in a setup file (`setupFiles` in your Vitest config), so every test gets a plain element instead:
+
+```tsx
+// vitest.setup.tsx
+import { vi } from 'vitest';
+import type { ITICChartMarks, ITICPointClickDetail } from '@circutor/charts-react';
+
+vi.mock('@circutor/charts-react', () => ({
+  // One button per point, so tests can find points and click them
+  IticChart: ({ groups = [], onPointClick, 'aria-label': ariaLabel }: {
+    groups?: ITICChartMarks[];
+    onPointClick?: (event: CustomEvent<ITICPointClickDetail>) => void;
+    'aria-label'?: string;
+  }) => (
+    <div role="img" aria-label={ariaLabel} data-testid="itic-chart">
+      {groups.flatMap(group =>
+        group.points.map((point, index) => (
+          <button
+            key={`${group.groupName}-${index}`}
+            disabled={point.clickable === false}
+            onClick={() => onPointClick?.(new CustomEvent('pointClick', { detail: { point, group } }))}
+          >
+            {group.groupName} {point.ts}
+          </button>
+        )),
+      )}
+    </div>
+  ),
+}));
+```
+
+Then `fireEvent.click(screen.getByText('L1 2024-06-26T20:23:45.220000+02:00'))` calls your `onPointClick` with the original point.

package/dist/charts/p--cwjvYaF.js

@@ -1,3 +0,0 @@
-function t(t,e,n){const o="undefined"!=typeof HTMLElement?HTMLElement.prototype:null;for(;t&&t!==o;){const o=Object.getOwnPropertyDescriptor(t,e);if(o&&(!n||o.get))return o;t=Object.getPrototypeOf(t)}}var e,n=(e,n)=>{var o;Object.entries(null!=(o=n.o.t)?o:{}).map((([o,[l]])=>{if(31&l||32&l){const l=e[o],i=t(Object.getPrototypeOf(e),o,!0)||Object.getOwnPropertyDescriptor(e,o);i&&Object.defineProperty(e,o,{get(){return i.get.call(this)},set(t){i.set.call(this,t)},configurable:!0,enumerable:!0}),n.l.has(o)?e[o]=n.l.get(o):void 0!==l&&(e[o]=l)}}))},o=t=>{if(t.__stencil__getHostRef)return t.__stencil__getHostRef()},l=(t,e)=>{e&&(t.__stencil__getHostRef=()=>e,e.i=t,512&e.o.u&&n(t,e))},i=(t,e)=>(0,console.error)(t,e),s=new Map,r=new Map,c=new Map,u="undefined"!=typeof window?window:{},f={u:0,h:"",jmp:t=>t(),raf:t=>requestAnimationFrame(t),ael:(t,e,n,o)=>t.addEventListener(e,n,o),rel:(t,e,n,o)=>t.removeEventListener(e,n,o),ce:(t,e)=>new CustomEvent(t,e)},a=t=>Promise.resolve(t),d=(()=>{try{return!!u.document.adoptedStyleSheets&&(new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync)}catch(t){}return!1})(),h=!!d&&(()=>!!u.document&&Object.getOwnPropertyDescriptor(u.document.adoptedStyleSheets,"length").writable)(),p=!1,m=[],v=[],y=()=>{var t;return(null==(t=u.document)?void 0:t.hidden)?setTimeout(w,16):f.raf(w)},b=(t,e)=>n=>{t.push(n),p||(p=!0,e&&4&f.u?j(w):y())},$=t=>{for(let e=0;e<t.length;e++)try{t[e](performance.now())}catch(t){i(t)}t.length=0},w=()=>{$(m),$(v),(p=m.length>0)&&y()},j=t=>a().then(t),g=b(v,!0);function O(){const t=this.attachShadow({mode:"open"});void 0===e&&(e=null),e&&(h?t.adoptedStyleSheets.push(e):t.adoptedStyleSheets=[...t.adoptedStyleSheets,e])}function S(t){var e,n,o;return null!=(o=null==(n=null==(e=t.head)?void 0:e.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?o:void 0}var k,M=new WeakMap,E=t=>"sc-"+t.p,C=t=>"object"==(t=typeof t)||"function"===t,T=(t,e,...n)=>{let o=null,l=null,s=!1,r=!1;const c=[],u=e=>{for(let n=0;n<e.length;n++)if(o=e[n],Array.isArray(o))u(o);else if(null!=o&&"boolean"!=typeof o){if(s="function"!=typeof t&&!C(o))o+="";else if("function"!=typeof t&&void 0===o.u){i("Invalid vNode child");continue}s&&r?c[c.length-1].m+=o:c.push(s?L(null,o):o),r=s}};if(u(n),e){e.key&&(l=e.key);{const t=e.className||e.class;t&&(e.class="object"!=typeof t?t:Object.keys(t).filter((e=>t[e])).join(" "))}}const f=L(t,null);return f.v=e,c.length>0&&(f.$=c),f.j=l,f},L=(t,e)=>({u:0,O:t,m:null!=e?e:null,S:null,$:null,v:null,j:null}),x={},D=t=>{if(!t)return;const e=Object.keys(t);if(0===e.length)return;let n=!1;for(const o of e){if(n)break;for(const e of t[o])if("string"==typeof e){n=!0;break}}if(!n)return t;const o={};for(const n of e)o[n]=t[n].map((t=>"string"==typeof t?{[t]:0}:t));return o},N=(t,e)=>null==t||C(t)?t:1&e?t+"":t,P=(t,e,n,o)=>{if(n!==o)if(e.toLowerCase(),"class"===e){const e=t.classList,l=H(n);let i=H(o);{let t=l.filter((t=>t&&!i.includes(t)));e.remove(...t),e.add(...i.filter((t=>t&&!l.includes(t))))}}else"key"===e||"ref"===e&&o&&Y(o,t)},R=/\s/,H=t=>("object"==typeof t&&t&&"baseVal"in t&&(t=t.baseVal),t&&"string"==typeof t?t.split(R):[]),U=(t,e)=>{const n=11===e.S.nodeType&&e.S.host?e.S.host:e.S,o=t&&t.v||{},l=e.v||{};for(const t of A(Object.keys(o)))t in l||P(n,t,o[t],void 0);for(const t of A(Object.keys(l)))P(n,t,o[t],l[t])};function A(t){return t.includes("ref")?[...t.filter((t=>"ref"!==t)),"ref"]:t}var W=[],V=[],q=(t,e,n)=>{const o=e.$[n];let l,i,s=0;if(!u.document)throw Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");if(l=o.S=u.document.createElement(o.O),U(null,o),o.$){const e="template"===o.O?l.content:l;for(s=0;s<o.$.length;++s)i=q(t,o,s),i&&e.appendChild(i)}return l["s-hn"]=k,l},z=(t,e,n,o,l,i)=>{let s,r=t;for(r.shadowRoot&&r.tagName===k&&(r=r.shadowRoot),"template"===n.O&&(r=r.content);l<=i;++l)o[l]&&(s=q(null,n,l),s&&(o[l].S=s,_(r,s,e)))},F=(t,e,n)=>{for(let o=e;o<=n;++o){const e=t[o];if(e){const t=e.S;I(e),t&&t.remove()}}},B=(t,e,n=!1)=>t.O===e.O&&(n?(n&&!t.j&&e.j&&(t.j=e.j),!0):t.j===e.j),G=(t,e,n=!1)=>{const o=e.S=t.S,l=t.$,i=e.$;U(t,e),null!==l&&null!==i?((t,e,n,o,l=!1)=>{let i,s,r=0,c=0,u=0,f=0,a=e.length-1,d=e[0],h=e[a],p=o.length-1,m=o[0],v=o[p];const y="template"===n.O?t.content:t;for(;r<=a&&c<=p;)if(null==d)d=e[++r];else if(null==h)h=e[--a];else if(null==m)m=o[++c];else if(null==v)v=o[--p];else if(B(d,m,l))G(d,m,l),d=e[++r],m=o[++c];else if(B(h,v,l))G(h,v,l),h=e[--a],v=o[--p];else if(B(d,v,l))G(d,v,l),_(y,d.S,h.S.nextSibling),d=e[++r],v=o[--p];else if(B(h,m,l))G(h,m,l),_(y,h.S,d.S),h=e[--a],m=o[++c];else{for(u=-1,f=r;f<=a;++f)if(e[f]&&null!==e[f].j&&e[f].j===m.j){u=f;break}u>=0?(s=e[u],s.O!==m.O?i=q(e&&e[c],n,c):(G(s,m,l),e[u]=void 0,i=s.S),m=o[++c]):(i=q(e&&e[c],n,c),m=o[++c]),i&&_(d.S.parentNode,i,d.S)}r>a?z(t,null==o[p+1]?null:o[p+1].S,n,o,c,p):c>p&&F(e,r,a)})(o,l,e,i,n):null!==i?z(o,null,e,i,0,i.length-1):!n&&null!==l&&F(l,0,l.length-1)},I=t=>{t.v&&t.v.ref&&W.push((()=>t.v.ref(null))),t.$&&t.$.map(I)},Y=(t,e)=>{V.push((()=>t(e)))},_=(t,e,n)=>null==t?void 0:t.insertBefore(e,n),J=(t,e)=>{if(e&&!t.k&&e["s-p"]){const n=e["s-p"].push(new Promise((o=>t.k=()=>{e["s-p"].splice(n-1,1),o()})))}},K=(t,e)=>{if(t.u|=16,4&t.u)return void(t.u|=512);J(t,t.M);const n=()=>Q(t,e);if(!e)return g(n);queueMicrotask((()=>{n()}))},Q=(t,e)=>{const n=t.$hostElement$,o=t.i;if(!o)throw Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return e?(t.C.length&&t.C.forEach((t=>t(n))),l=lt(o,"componentWillLoad",void 0,n)):l=lt(o,"componentWillUpdate",void 0,n),l=X(l,(()=>lt(o,"componentWillRender",void 0,n))),X(l,(()=>tt(t,o,e)))},X=(t,e)=>Z(t)?t.then(e).catch((t=>{console.error(t),e()})):e(),Z=t=>t instanceof Promise||t&&t.then&&"function"==typeof t.then,tt=async(t,e,n)=>{var o;const l=t.$hostElement$,i=l["s-rc"];n&&(t=>{const e=t.o,n=t.$hostElement$,o=e.u,l=((t,e)=>{var n,o,l;const i=E(e),s=c.get(i);if(!u.document)return i;if(t=11===t.nodeType?t:u.document,s)if("string"==typeof s){let l,r=M.get(t=t.head||t);if(r||M.set(t,r=new Set),!r.has(i)){l=u.document.createElement("style"),l.textContent=s;const c=null!=(n=f.T)?n:S(u.document);if(null!=c&&l.setAttribute("nonce",c),!(1&e.u))if("HEAD"===t.nodeName){const e=t.querySelectorAll("link[rel=preconnect]"),n=e.length>0?e[e.length-1].nextSibling:t.querySelector("style");t.insertBefore(l,(null==n?void 0:n.parentNode)===t?n:null)}else if("host"in t)if(d){const e=new(null!=(o=t.defaultView)?o:t.ownerDocument.defaultView).CSSStyleSheet;e.replaceSync(s),h?t.adoptedStyleSheets.unshift(e):t.adoptedStyleSheets=[e,...t.adoptedStyleSheets]}else{const e=t.querySelector("style");e?e.textContent=s+e.textContent:t.prepend(l)}else t.append(l);1&e.u&&t.insertBefore(l,null),4&e.u&&(l.textContent+="slot-fb{display:contents}slot-fb[hidden]{display:none}"),r&&r.add(i)}}else{let e=M.get(t);if(e||M.set(t,e=new Set),!e.has(i)){const n=null!=(l=t.defaultView)?l:t.ownerDocument.defaultView;let o;if(s.constructor===n.CSSStyleSheet)o=s;else{o=new n.CSSStyleSheet;for(let t=0;t<s.cssRules.length;t++)o.insertRule(s.cssRules[t].cssText,t)}h?t.adoptedStyleSheets.push(o):t.adoptedStyleSheets=[...t.adoptedStyleSheets,o],e.add(i)}}return i})(n.shadowRoot?n.shadowRoot:n.getRootNode(),e);10&o&&(n["s-sc"]=l,n.classList.add(l+"-h"))})(t);et(t,e,l,n),i&&(i.map((t=>t())),l["s-rc"]=void 0);{const e=null!=(o=l["s-p"])?o:[],n=()=>nt(t);0===e.length?n():(Promise.all(e).then(n).catch(n),t.u|=4,e.length=0)}},et=(t,e,n,o)=>{try{e=e.render(),t.u&=-17,t.u|=2,((t,e,n=!1)=>{const o=t.$hostElement$,l=t.L||L(null,null),i=(t=>t&&t.O===x)(e)?e:T(null,null,e);if(k=o.tagName,n&&i.v)for(const t of Object.keys(i.v))o.hasAttribute(t)&&!["key","ref","style","class"].includes(t)&&(i.v[t]=o[t]);i.O=null,i.u|=4,t.L=i,i.S=l.S=o.shadowRoot||o,G(l,i,n),W.forEach((t=>t())),W.length=0,V.forEach((t=>t())),V.length=0})(t,e,o)}catch(e){i(e,t.$hostElement$)}return null},nt=t=>{const e=t.$hostElement$,n=t.i,o=t.M;lt(n,"componentDidRender",void 0,e),64&t.u?lt(n,"componentDidUpdate",void 0,e):(t.u|=64,it(e),lt(n,"componentDidLoad",void 0,e),t.D(e),o||ot()),t.k&&(t.k(),t.k=void 0),512&t.u&&j((()=>K(t,!1))),t.u&=-517},ot=()=>{j((()=>(t=>{const e=f.ce("appload",{detail:{namespace:"charts"}});return t.dispatchEvent(e),e})(u)))},lt=(t,e,n,o)=>{if(t&&t[e])try{return t[e](n)}catch(t){i(t,o)}},it=t=>t.classList.add("hydrated"),st=(t,e)=>o(t).l.get(e),rt=(t,e,n,l)=>{const s=o(t);if(!s)return;if(!s)throw Error(`Couldn't find host element for "${l.p}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`);const r=s.$hostElement$,c=s.l.get(e),u=s.u,f=s.i;if(n=N(n,l.t[e][0]),!(8&u&&void 0!==c||n===c||Number.isNaN(c)&&Number.isNaN(n))){if(s.l.set(e,n),l.N){const t=l.N[e];t&&t.map((t=>{try{const[[o,l]]=Object.entries(t);(128&u||1&l)&&(f?f[o](n,c,e):s.C.push((()=>{s.i[o](n,c,e)})))}catch(t){i(t,r)}}))}if(2&u){if(f.componentShouldUpdate&&!1===f.componentShouldUpdate(n,c,e)&&!(16&u))return;16&u||K(s,!1)}}},ct=(e,n,l)=>{var i,s;const r=e.prototype;{e.watchers&&!n.N&&(n.N=D(e.watchers)),e.deserializers&&!n.P&&(n.P=e.deserializers),e.serializers&&!n.R&&(n.R=e.serializers);const c=Object.entries(null!=(i=n.t)?i:{});if(c.map((([e,[i]])=>{if(31&i||2&l&&32&i){const{get:s,set:c}=t(r,e)||{};s&&(n.t[e][0]|=2048),c&&(n.t[e][0]|=4096),(1&l||!s)&&Object.defineProperty(r,e,{get(){{if(!(2048&n.t[e][0]))return st(this,e);const t=o(this);return t?t.i?t.i[e]:st(this,e):r[e]}},configurable:!0,enumerable:!0}),Object.defineProperty(r,e,{set(t){const s=o(this);if(s){if(c)return void 0===(32&i?this[e]:s.$hostElement$[e])&&s.l.get(e)&&(t=s.l.get(e)),c.call(this,N(t,i)),void rt(this,e,t=32&i?this[e]:s.$hostElement$[e],n);{if(!(1&l&&4096&n.t[e][0]))return void rt(this,e,t,n);const o=N(t,i);if(s.i){const t=s.i[e];!s.l.get(e)&&t&&s.l.set(e,t),s.i[e]=o,rt(this,e,s.i[e],n)}else s.l.set(e,o)}}}})}})),1&l){const t=new Map;r.attributeChangedCallback=function(e,l,i){f.jmp((()=>{var s;const u=t.get(e),f=o(this);if(this.hasOwnProperty(u)&&(i=this[u],delete this[u]),r.hasOwnProperty(u)&&"number"==typeof this[u]&&this[u]==i)return;if(null==u){const t=null==f?void 0:f.u;if(f&&t&&!(8&t)&&i!==l){const o=f.i,r=null==(s=n.N)?void 0:s[e];null==r||r.forEach((n=>{const[[s,r]]=Object.entries(n);null!=o[s]&&(128&t||1&r)&&o[s].call(o,i,l,e)}))}return}const a=c.find((([t])=>t===u)),d=4&(a?a[1][0]:0),h=d&&null===i&&void 0===this[u];d&&(i=null!==i&&"false"!==i);const p=Object.getOwnPropertyDescriptor(r,u);h||i==this[u]||p.get&&!p.set||(this[u]=i)}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(s=n.N)?s:{}),...c.filter((([t,e])=>31&e[0])).map((([e,n])=>{const o=n[1]||e;return t.set(o,e),o}))]))}}return e},ut=async(t,e,n)=>{var o;let l;try{if(!(32&e.u)){if(e.u|=32,e.u&=-1025,n.H){const c=((t,e)=>{var n;const o=t.p.replace(/-/g,"_"),l=t.H;if(!l)return;const c=s.get(l);if(c)return c[o];const u=null!=(n=r.get(l))?n:0,f=[u>0?"s-retry="+u:"",""].filter(Boolean).join("&");
-/*!__STENCIL_STATIC_IMPORT_SWITCH__*/
-return import(`./${l}.entry.js${f?"?"+f:""}`).then((t=>(r.delete(l),s.set(l,t),t[o])),(t=>{r.set(l,u+1),i(t,e.$hostElement$)}))})(n,e);if(c&&"then"in c){const t=()=>{};l=await c,t()}else l=c;if(!l)throw e.u&=-33,e.U=(null!=(o=e.U)?o:0)+1,e.U<3&&(e.u|=1024),Error(`Constructor for "${n.p}#${e.A}" was not found`);l.isProxied||(n.N=D(l.watchers),n.R=l.serializers,n.P=l.deserializers,ct(l,n,2),l.isProxied=!0);const u=()=>{};e.u|=8;try{new l(e)}catch(e){i(e,t)}e.u&=-9,((t,e)=>{var n;const o=t.i;if(o)for(const[l,[i]]of Object.entries(null!=(n=e.t)?n:{}))if(4096&i&&t.l.has(l)){const e=t.l.get(l);o[l]!==e&&(o[l]=e)}})(e,n),e.u|=128,u(),ft(e.i,t)}else l=t.constructor,customElements.whenDefined(t.localName).then((()=>e.u|=128));if(l&&l.style){let t;"string"==typeof l.style&&(t=l.style);const e=E(n);if(!c.has(e)){const o=()=>{};((t,e,n)=>{let o=c.get(t);d&&n?(o=o||new CSSStyleSheet,"string"==typeof o?o=e:o.replaceSync(e)):o=e,c.set(t,o)})(e,t,!!(1&n.u)),o()}}}const u=e.M,f=()=>K(e,!0);u&&u["s-rc"]?u["s-rc"].push(f):f()}catch(n){i(n,t),e.k&&(e.k(),e.k=void 0),!e.D||1024&e.u||e.D(t)}},ft=(t,e)=>{lt(t,"connectedCallback",void 0,e)},at=(t,e)=>{lt(t,"disconnectedCallback",void 0,e||t)},dt=(t,e={})=>{var n;if(!u.document)return void console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");const l=[],i=e.exclude||[],s=u.customElements,r=u.document.head,c=r.querySelector("meta[charset]"),a=u.document.createElement("style"),d=[];let h,p=!0;if(Object.assign(f,e),f.h=new URL(e.resourcesUrl||"./",u.document.baseURI).href,t.map((t=>{t[1].map((e=>{var n,r;const c={u:e[0],p:e[1],t:e[2],W:e[3]};c.t=e[2],c.N=D(e[4]),c.R=null!=(n=e[5])?n:{},c.P=null!=(r=e[6])?r:{};const u=c.p,a=class extends HTMLElement{"s-p";"s-rc";hasRegisteredEventListeners=!1;constructor(t){if(super(t),((t,e)=>{const n={u:0,$hostElement$:t,o:e,l:new Map,V:new Map};n.q=new Promise((t=>n.D=t)),t["s-p"]=[],t["s-rc"]=[],n.C=[];const o=n;t.__stencil__getHostRef=()=>o})(t=this,c),1&c.u)if(t.shadowRoot){if("open"!==t.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.p}! Mode is set to ${t.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else O.call(t,c)}connectedCallback(){o(this)&&(this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),h&&(clearTimeout(h),h=null),p?d.push(this):f.jmp((()=>(t=>{if(!(1&f.u)){const e=o(t);if(!e)return;const n=e.o,l=()=>{};if(1&e.u)(null==e?void 0:e.i)?ft(e.i,t):1024&e.u?setTimeout((()=>ut(t,e,n)),1e3):(null==e?void 0:e.q)&&e.q.then((()=>ft(e.i,t)));else{e.u|=1;{let n=t;for(;n=n.parentNode||n.host;)if(n["s-p"]){J(e,e.M=n);break}}n.t&&Object.entries(n.t).map((([e,[n]])=>{if(31&n&&Object.prototype.hasOwnProperty.call(t,e)){const n=t[e];delete t[e],t[e]=n}})),ut(t,e,n)}l()}})(this))))}disconnectedCallback(){f.jmp((()=>(async t=>{if(!(1&f.u)){const e=o(t);(null==e?void 0:e.i)?at(e.i,t):(null==e?void 0:e.q)&&e.q.then((()=>at(e.i,t)))}M.has(t)&&M.delete(t),t.shadowRoot&&M.has(t.shadowRoot)&&M.delete(t.shadowRoot)})(this))),j((()=>{var t;const e=o(this);if(!e)return;const n=d.findIndex((t=>t===this));n>-1&&d.splice(n,1),(null==(t=null==e?void 0:e.L)?void 0:t.S)instanceof Node&&!e.L.S.isConnected&&delete e.L.S}))}componentOnReady(){var t;return null==(t=o(this))?void 0:t.q}};c.H=t[0],i.includes(u)||s.get(u)||(l.push(u),s.define(u,ct(a,c,1)))}))})),l.length>0&&(a.textContent+=l.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",a.innerHTML.length)){a.setAttribute("data-styles","");const t=null!=(n=f.T)?n:S(u.document);null!=t&&a.setAttribute("nonce",t),r.insertBefore(a,c?c.nextSibling:r.firstChild)}p=!1,d.length?d.map((t=>t.connectedCallback())):f.jmp((()=>h=setTimeout(ot,30)))},ht=t=>f.T=t;export{dt as b,T as h,a as p,l as r,ht as s}