@expressivecss/expressive 0.12.0 → 0.14.1

package/dist/js/chunks/chunk-TBM3FT7G.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/mapView.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\nimport { Component, BaseOptions, InitElements, InitElement } from '../core/component';\n\n/** `[longitude, latitude]`, MapLibre's order. */\nexport type LngLat = [number, number];\n\n/**\n * The parts of the `maplibre-gl` module this component uses. Declared here so\n * the published types do not depend on MapLibre.\n */\nexport interface MapLibre {\n  Map: new (options: object) => any;\n  Marker: new (options: object) => any;\n  Popup: new (options: object) => any;\n}\n\n/** A style for each color scheme. The map follows the page's theme. */\nexport interface MapThemedStyle {\n  light: string | object;\n  dark: string | object;\n}\n\nexport interface MapViewOptions extends BaseOptions {\n  /**\n   * The `maplibre-gl` module. ExpressiveCSS does not bundle MapLibre, so the\n   * page imports it and passes it in.\n   * @default null\n   */\n  maplibregl: MapLibre | null;\n  /**\n   * A MapLibre style URL or object, or `{ light, dark }` to follow the theme.\n   * @default OpenFreeMap Positron and Dark\n   */\n  style: string | object | MapThemedStyle;\n  /**\n   * Starting `[longitude, latitude]`.\n   * @default [0, 20]\n   */\n  center: LngLat;\n  /**\n   * Starting zoom level.\n   * @default 1\n   */\n  zoom: number;\n  /**\n   * More MapLibre `Map` options, such as `maxZoom` or `bearing`.\n   * @default {}\n   */\n  mapOptions: object;\n}\n\nexport interface MapLineOptions {\n  /** CSS color. Defaults to the route or arc color token. */\n  color?: string;\n  /** Width in pixels. Routes default to 4, arcs to 2. */\n  width?: number;\n  /** 0 to 1. */\n  opacity?: number;\n  /** Dash and gap lengths in line widths, such as `[2, 2]`. */\n  dashArray?: number[];\n}\n\nexport interface MapArc {\n  from: LngLat;\n  to: LngLat;\n}\n\nexport interface MapClusterOptions {\n  /** CSS color. Defaults to the cluster color token. */\n  color?: string;\n  /**\n   * Pixels within which points join a cluster.\n   * @default 50\n   */\n  radius?: number;\n  /**\n   * Last zoom level that clusters points.\n   * @default 14\n   */\n  maxZoom?: number;\n}\n\nconst OPENFREEMAP = 'https://tiles.openfreemap.org/styles/';\n\nconst _defaults: MapViewOptions = {\n  maplibregl: null,\n  style: { light: `${OPENFREEMAP}positron`, dark: `${OPENFREEMAP}dark` },\n  center: [0, 20],\n  zoom: 1,\n  mapOptions: {}\n};\n\ntype Overlay = { draw: () => void; off?: () => void };\n\nconst lngLat = (el: HTMLElement) => el.dataset.lngLat.split(',').map(Number) as LngLat;\n\n// A quadratic B\u00E9zier from `from` to `to`, bowed north of an eastward line.\n// ponytail: drawn in degrees, so an arc across the antimeridian goes the long\n// way round; split it at \u00B1180 if that matters.\nfunction arc([x0, y0]: LngLat, [x2, y2]: LngLat, steps = 32): LngLat[] {\n  const bow = x2 >= x0 ? 0.25 : -0.25;\n  const x1 = (x0 + x2) / 2 - (y2 - y0) * bow;\n  const y1 = (y0 + y2) / 2 + (x2 - x0) * bow;\n  return Array.from({ length: steps + 1 }, (_, i) => {\n    const t = i / steps, u = 1 - t;\n    return [u * u * x0 + 2 * u * t * x1 + t * t * x2, u * u * y0 + 2 * u * t * y1 + t * t * y2];\n  });\n}\n\n/**\n * An interactive map built on MapLibre: a `.map` holding `.map-marker`,\n * `.map-popup` and `.map-controls` children.\n *\n * Each marker sits at its `data-lng-lat`. A marker button with\n * `aria-controls` opens the `.map-popup` it names; a popup with its own\n * `data-lng-lat` and no marker opens at init. Buttons in `.map-controls`\n * run their `data-action`: `zoom-in`, `zoom-out`, `compass`, `locate` or\n * `fullscreen`. Routes, arcs and clusters are data, so they are added from\n * script. The default style follows the page's light or dark theme, and\n * line and cluster colors come from the theme.\n *\n * The class is `MapView` rather than `Map` so importing it does not shadow\n * JavaScript's `Map`.\n */\nexport class MapView extends Component<MapViewOptions> {\n  /** The MapLibre map. */\n  map: any = null;\n  /** The MapLibre markers made from `.map-marker` children, in order. */\n  markers: any[] = [];\n  private _children: Element[] = [];\n  private _popups: any[] = [];\n  private _markerPopups = new Map<HTMLElement, any>();\n  private _overlays = new Map<string, Overlay>();\n  private _styleReady = false;\n  private _dark = false;\n  private _location: any = null;\n  private _media: MediaQueryList | null = null;\n  private _observer: MutationObserver | null = null;\n  // Looked up once: `move` fires every frame of a pan or zoom.\n  private _zoomIn: HTMLButtonElement[] = [];\n  private _zoomOut: HTMLButtonElement[] = [];\n\n  constructor(el: HTMLElement, options: Partial<MapViewOptions>) {\n    super(el, options, MapView);\n    this.el['Expressive_MapView'] = this;\n    this.options = {\n      ...MapView.defaults,\n      ...options\n    };\n    const lib = this.options.maplibregl;\n    if (!lib) {\n      console.error('MapView needs the maplibre-gl module in options.maplibregl.');\n      return;\n    }\n\n    this._children = [...el.children];\n    this._zoomIn = [...this._buttons('zoom-in')];\n    this._zoomOut = [...this._buttons('zoom-out')];\n    this._dark = this._isDark();\n    this.map = new lib.Map({\n      ...this.options.mapOptions,\n      container: el,\n      style: this._style(),\n      center: this.options.center,\n      zoom: this.options.zoom\n    });\n    this.map.on('style.load', this._handleStyleLoad);\n    this.map.on('move', this._sync);\n    this.map.on('click', this._handleMapClick);\n\n    const children = this._children.filter((child): child is HTMLElement => child instanceof HTMLElement);\n    const claimed = new Set<Element>();\n    for (const marker of children.filter((child) => child.matches('.map-marker[data-lng-lat]'))) {\n      const target = marker.hasAttribute('aria-controls') ? Utils.getElementById(marker, marker.getAttribute('aria-controls')) : null;\n      const popup = target?.parentElement === el && target.matches('.map-popup') ? target : null;\n      if (popup) claimed.add(popup);\n      this._addMarker(marker, popup);\n    }\n    for (const popup of children.filter((child) => child.matches('.map-popup[data-lng-lat]') && !claimed.has(child))) {\n      this._popup(popup, 0).setLngLat(lngLat(popup)).addTo(this.map);\n    }\n\n    if (this._themed()) {\n      this._media = matchMedia('(prefers-color-scheme: dark)');\n      this._media.addEventListener('change', this._handleScheme);\n      this._observer = new MutationObserver(this._handleScheme);\n      this._observer.observe(document.documentElement, { attributes: true, attributeFilter: ['theme'], subtree: true });\n    }\n    for (const button of this._buttons('fullscreen')) button.hidden = !document.fullscreenEnabled;\n    document.addEventListener('fullscreenchange', this._handleFullscreen);\n    el.addEventListener('click', this._handleClick);\n    el.addEventListener('keydown', this._handleKeydown);\n    this._sync();\n  }\n\n  static get defaults(): MapViewOptions {\n    return _defaults;\n  }\n\n  /**\n   * Initializes instance of MapView.\n   * @param el HTML element.\n   * @param options Component options.\n   */\n  static init(el: HTMLElement, options?: Partial<MapViewOptions>): MapView;\n  /**\n   * Initializes instances of MapView.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(els: InitElements<InitElement>, options?: Partial<MapViewOptions>): MapView[];\n  /**\n   * Initializes instances of MapView.\n   * @param els HTML elements.\n   * @param options Component options.\n   */\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<MapViewOptions> = {}\n  ): MapView | MapView[] {\n    return super.init(els, options, MapView);\n  }\n\n  static getInstance(el: HTMLElement): MapView {\n    return el['Expressive_MapView'];\n  }\n\n  destroy() {\n    this.el['Expressive_MapView'] = undefined;\n    if (!this.map) return;\n    this.el.removeEventListener('click', this._handleClick);\n    this.el.removeEventListener('keydown', this._handleKeydown);\n    document.removeEventListener('fullscreenchange', this._handleFullscreen);\n    this._media?.removeEventListener('change', this._handleScheme);\n    this._observer?.disconnect();\n    for (const overlay of this._overlays.values()) overlay.off?.();\n    for (const popup of this._popups) popup.remove();\n    for (const marker of this.markers) {\n      marker.remove();\n      const element: HTMLElement = marker.getElement();\n      element.classList.remove(...[...element.classList].filter((name) => name.startsWith('maplibregl-')));\n      element.style.removeProperty('transform');\n      element.style.removeProperty('opacity');\n      if (element.hasAttribute('aria-controls')) element.removeAttribute('aria-expanded');\n    }\n    this._location?.remove();\n    this._location = null;\n    this.map.remove();\n    this.map = null;\n    this.markers = [];\n    this._popups = [];\n    this._markerPopups.clear();\n    this._overlays.clear();\n    this.el.style.removeProperty('--md-comp-map-bearing');\n    for (const button of this.el.querySelectorAll<HTMLButtonElement>('.map-controls [data-action]')) {\n      button.disabled = false;\n      button.hidden = false;\n      button.removeAttribute('aria-pressed');\n    }\n    this.el.append(...this._children);\n  }\n\n  /** Draws a line through `[longitude, latitude]` points. Replaces an overlay with the same id. */\n  addRoute(id: string, coordinates: LngLat[], options: MapLineOptions = {}) {\n    this._line(id, { type: 'LineString', coordinates }, 'route', { width: 4, ...options });\n  }\n\n  /** Draws a curved line for each `{ from, to }`. Replaces an overlay with the same id. */\n  addArcs(id: string, arcs: MapArc[], options: MapLineOptions = {}) {\n    this._line(id, { type: 'MultiLineString', coordinates: arcs.map(({ from, to }) => arc(from, to)) }, 'arc', { width: 2, ...options });\n  }\n\n  /**\n   * Draws GeoJSON points, or the URL of a GeoJSON file, as clusters that\n   * show their count and zoom in when clicked. The layers are\n   * `${id}-clusters`, `${id}-count` and `${id}-points`.\n   */\n  addClusters(id: string, data: object | string, options: MapClusterOptions = {}) {\n    const clusters = `${id}-clusters`, points = `${id}-points`;\n    const zoomIn = async (e: any) => {\n      const [feature] = e.features;\n      const zoom = await this.map.getSource(id).getClusterExpansionZoom(feature.properties.cluster_id);\n      this.map.easeTo({ center: feature.geometry.coordinates, zoom });\n    };\n    const pointer = () => { this.map.getCanvas().style.cursor = 'pointer'; };\n    const reset = () => { this.map.getCanvas().style.cursor = ''; };\n    this._draw(id, {\n      draw: () => {\n        const color = options.color ?? this._color('var(--md-comp-map-cluster-color)');\n        const surface = this._color('var(--md-comp-map-marker-ring-color)');\n        this.map.addSource(id, {\n          type: 'geojson',\n          data,\n          cluster: true,\n          clusterRadius: options.radius ?? 50,\n          clusterMaxZoom: options.maxZoom ?? 14\n        });\n        this.map.addLayer({\n          id: clusters,\n          type: 'circle',\n          source: id,\n          filter: ['has', 'point_count'],\n          paint: {\n            'circle-color': color,\n            'circle-radius': ['step', ['get', 'point_count'], 16, 10, 20, 100, 26],\n            'circle-stroke-width': 6,\n            'circle-stroke-color': color,\n            'circle-stroke-opacity': 0.3\n          }\n        });\n        // A symbol layer needs the style's glyphs and one of its fonts.\n        const style = this.map.getStyle();\n        const font = style.glyphs && style.layers.find((layer: any) => layer.layout?.['text-font'])?.layout['text-font'];\n        if (font) {\n          this.map.addLayer({\n            id: `${id}-count`,\n            type: 'symbol',\n            source: id,\n            filter: ['has', 'point_count'],\n            layout: { 'text-field': ['get', 'point_count_abbreviated'], 'text-font': font, 'text-size': 12 },\n            paint: { 'text-color': this._color('var(--md-comp-map-cluster-label-color)') }\n          });\n        }\n        this.map.addLayer({\n          id: points,\n          type: 'circle',\n          source: id,\n          filter: ['!', ['has', 'point_count']],\n          paint: { 'circle-color': color, 'circle-radius': 6, 'circle-stroke-width': 2, 'circle-stroke-color': surface }\n        });\n      },\n      off: () => {\n        this.map.off('click', clusters, zoomIn);\n        for (const layer of [clusters, points]) {\n          this.map.off('mouseenter', layer, pointer);\n          this.map.off('mouseleave', layer, reset);\n        }\n      }\n    });\n    this.map.on('click', clusters, zoomIn);\n    for (const layer of [clusters, points]) {\n      this.map.on('mouseenter', layer, pointer);\n      this.map.on('mouseleave', layer, reset);\n    }\n  }\n\n  /** Removes a route, arcs or clusters added with this id. */\n  removeOverlay(id: string) {\n    const overlay = this._overlays.get(id);\n    if (!overlay) return;\n    this._overlays.delete(id);\n    overlay.off?.();\n    if (!this._styleReady || !this.map.getSource(id)) return;\n    for (const layer of this.map.getStyle().layers) if (layer.source === id) this.map.removeLayer(layer.id);\n    this.map.removeSource(id);\n  }\n\n  private _line(id: string, geometry: object, token: string, options: MapLineOptions) {\n    this._draw(id, {\n      draw: () => {\n        this.map.addSource(id, { type: 'geojson', data: { type: 'Feature', properties: {}, geometry } });\n        this.map.addLayer({\n          id,\n          type: 'line',\n          source: id,\n          layout: { 'line-cap': 'round', 'line-join': 'round' },\n          paint: {\n            'line-color': options.color ?? this._color(`var(--md-comp-map-${token}-color)`),\n            'line-width': options.width,\n            'line-opacity': options.opacity ?? 1,\n            ...(options.dashArray && { 'line-dasharray': options.dashArray })\n          }\n        });\n      }\n    });\n  }\n\n  // Sources and layers go with the style, so every overlay is drawn again\n  // when a theme change swaps it.\n  private _draw(id: string, overlay: Overlay) {\n    this.removeOverlay(id);\n    this._overlays.set(id, overlay);\n    if (this._styleReady) overlay.draw();\n  }\n\n  private _addMarker(element: HTMLElement, content: HTMLElement | null) {\n    const marker = new this.options.maplibregl.Marker({\n      element,\n      draggable: element.hasAttribute('data-draggable')\n    }).setLngLat(lngLat(element)).addTo(this.map);\n    marker.on('dragend', () => {\n      const { lng, lat } = marker.getLngLat();\n      element.dataset.lngLat = `${lng},${lat}`;\n      element.dispatchEvent(new Event('change', { bubbles: true }));\n    });\n    this.markers.push(marker);\n    if (!content) return;\n    element.setAttribute('aria-expanded', 'false');\n    const popup = this._popup(content, 16);\n    popup.on('open', () => element.setAttribute('aria-expanded', 'true'));\n    popup.on('close', () => {\n      element.setAttribute('aria-expanded', 'false');\n      if (!document.activeElement || document.activeElement === document.body) element.focus();\n    });\n    this._markerPopups.set(element, popup);\n  }\n\n  private _popup(content: HTMLElement, offset: number) {\n    const popup = new this.options.maplibregl.Popup({ closeOnClick: false, maxWidth: 'none', offset }).setDOMContent(content);\n    this._popups.push(popup);\n    return popup;\n  }\n\n  private _toggle(marker: HTMLElement) {\n    const popup = this._markerPopups.get(marker);\n    if (popup.isOpen()) popup.remove();\n    else popup.setLngLat(this.markers.find((m) => m.getElement() === marker).getLngLat()).addTo(this.map);\n  }\n\n  private _buttons(action: string) {\n    return this.el.querySelectorAll<HTMLButtonElement>(`.map-controls [data-action=\"${action}\"]`);\n  }\n\n  private _locate(button: HTMLButtonElement) {\n    navigator.geolocation?.getCurrentPosition(\n      ({ coords }) => {\n        if (!this.map) return;\n        const center = [coords.longitude, coords.latitude];\n        if (!this._location) {\n          const dot = document.createElement('span');\n          dot.className = 'map-marker location';\n          dot.setAttribute('aria-hidden', 'true');\n          this._location = new this.options.maplibregl.Marker({ element: dot });\n        }\n        this._location.setLngLat(center).addTo(this.map);\n        this.map.flyTo({ center, zoom: Math.max(this.map.getZoom(), 14) });\n      },\n      (error) => { if (this.map && error.code === error.PERMISSION_DENIED) button.disabled = true; }\n    );\n  }\n\n  // Resolves a CSS color where the map is, so light-dark() and scoped\n  // themes apply, then paints it on a canvas to read back the sRGB value.\n  // MapLibre does not parse the oklch() the theme tokens compute to.\n  private _color(value: string) {\n    const probe = document.createElement('span');\n    probe.hidden = true;\n    probe.style.color = value;\n    this.el.append(probe);\n    const context = document.createElement('canvas').getContext('2d', { willReadFrequently: true });\n    context.fillStyle = getComputedStyle(probe).color;\n    probe.remove();\n    context.fillRect(0, 0, 1, 1);\n    const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;\n    return `rgba(${r}, ${g}, ${b}, ${Math.round((a / 255) * 100) / 100})`;\n  }\n\n  private _isDark() {\n    return this._color('light-dark(black, white)') === 'rgba(255, 255, 255, 1)';\n  }\n\n  private _themed() {\n    const style = this.options.style;\n    return typeof style === 'object' && 'light' in style && 'dark' in style;\n  }\n\n  private _style() {\n    return this._themed() ? this.options.style[this._dark ? 'dark' : 'light'] : this.options.style;\n  }\n\n  private _handleStyleLoad = () => {\n    this._styleReady = true;\n    for (const overlay of this._overlays.values()) overlay.draw();\n  };\n\n  private _handleScheme = () => {\n    const dark = this._isDark();\n    if (dark === this._dark) return;\n    this._dark = dark;\n    this._styleReady = false;\n    this.map.setStyle(this._style(), { diff: false });\n  };\n\n  private _sync = () => {\n    const zoom = this.map.getZoom();\n    for (const button of this._zoomIn) button.disabled = zoom >= this.map.getMaxZoom();\n    for (const button of this._zoomOut) button.disabled = zoom <= this.map.getMinZoom();\n    this.el.style.setProperty('--md-comp-map-bearing', `${-this.map.getBearing()}deg`);\n  };\n\n  private _handleFullscreen = () => {\n    for (const button of this._buttons('fullscreen')) {\n      button.setAttribute('aria-pressed', String(document.fullscreenElement === this.el));\n    }\n  };\n\n  private _handleClick = (e: MouseEvent) => {\n    const target = e.target as Element;\n    const button = target.closest<HTMLButtonElement>('.map-controls [data-action]');\n    const action = button?.dataset.action;\n    if (action === 'zoom-in') this.map.zoomIn();\n    else if (action === 'zoom-out') this.map.zoomOut();\n    else if (action === 'compass') this.map.resetNorthPitch();\n    else if (action === 'locate') this._locate(button);\n    else if (action === 'fullscreen') {\n      if (document.fullscreenElement === this.el) document.exitFullscreen();\n      else this.el.requestFullscreen();\n    } else {\n      const marker = target.closest<HTMLElement>('.map-marker');\n      if (this._markerPopups.has(marker)) this._toggle(marker);\n    }\n  };\n\n  // A click on the map closes marker popups, but not the one being toggled.\n  private _handleMapClick = (e: any) => {\n    const target = e.originalEvent.target as Node;\n    for (const [marker, popup] of this._markerPopups) {\n      if (!marker.contains(target) && !popup.getElement()?.contains(target)) popup.remove();\n    }\n  };\n\n  private _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key !== 'Escape') return;\n    for (const popup of this._popups) {\n      if (popup.getElement()?.contains(e.target as Node)) {\n        e.preventDefault();\n        popup.remove();\n      }\n    }\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-UEXCIMJZ.mjs

@@ -0,0 +1,214 @@
+import {
+  Component
+} from "./chunk-LTWPGFBR.mjs";
+
+// src/ts/components/confetti.ts
+var _defaults = {
+  particleCount: 50,
+  angle: 90,
+  spread: 45,
+  startVelocity: 45,
+  decay: 0.9,
+  gravity: 1,
+  drift: 0,
+  ticks: 200,
+  origin: { x: 0.5, y: 0.5 },
+  colors: [],
+  shapes: ["square", "circle"],
+  scalar: 1,
+  manualStart: false
+};
+var THEME_COLORS = ["primary", "secondary", "tertiary", "primary-container", "secondary-container", "tertiary-container"];
+var FALLBACK_COLORS = ["#26ccff", "#a25afd", "#ff5e7e", "#88ff5a", "#fcff42", "#ffa62d", "#ff36ff"];
+var RAD = Math.PI / 180;
+var scenes = /* @__PURE__ */ new Map();
+var overlay = null;
+var Confetti = class _Confetti extends Component {
+  constructor(el, options) {
+    super(el, options, _Confetti);
+    this._onClick = () => {
+      this.fire();
+    };
+    this.el["Expressive_Confetti"] = this;
+    this.options = { ..._Confetti.defaults, ...options };
+    if (!(el instanceof HTMLCanvasElement)) el.addEventListener("click", this._onClick);
+    else if (!this.options.manualStart) this.fire();
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options, _Confetti);
+  }
+  static getInstance(el) {
+    return el["Expressive_Confetti"];
+  }
+  /**
+   * Bursts over the whole viewport. Resolves when the last piece is gone.
+   */
+  static fire(options = {}) {
+    return burst(viewportCanvas, document.body, { ..._Confetti.defaults, ...options });
+  }
+  /**
+   * Bursts on this canvas, or from this element's center over the viewport.
+   * Resolves when the last piece is gone.
+   */
+  fire(options = {}) {
+    const merged = { ...this.options, ...options };
+    if (this.el instanceof HTMLCanvasElement) {
+      const canvas = this.el;
+      return burst(() => canvas, canvas.parentElement ?? document.body, merged);
+    }
+    const r = this.el.getBoundingClientRect();
+    merged.origin = { x: (r.left + r.width / 2) / innerWidth, y: (r.top + r.height / 2) / innerHeight };
+    return burst(viewportCanvas, this.el.parentElement ?? document.body, merged);
+  }
+  destroy() {
+    this.el.removeEventListener("click", this._onClick);
+    if (this.el instanceof HTMLCanvasElement) stop(this.el);
+    this.el["Expressive_Confetti"] = void 0;
+  }
+};
+function burst(getCanvas, themed, o) {
+  if (typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches) return Promise.resolve();
+  const canvas = getCanvas();
+  let scene = scenes.get(canvas);
+  if (!scene) {
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return Promise.resolve();
+    scene = { ctx, pieces: [], frame: 0, last: 0, done: [], overlay: canvas === overlay };
+    scenes.set(canvas, scene);
+  }
+  const { width, height } = fit(canvas);
+  const colors = o.colors.length ? o.colors : themeColors(themed);
+  const x = (o.origin.x ?? 0.5) * width;
+  const y = (o.origin.y ?? 0.5) * height;
+  for (let i = 0; i < o.particleCount; i++) {
+    scene.pieces.push({
+      x,
+      y,
+      velocity: o.startVelocity * (0.5 + Math.random()),
+      angle: -o.angle * RAD + (0.5 - Math.random()) * o.spread * RAD,
+      wobble: Math.random() * 10,
+      wobbleSpeed: 0.05 + Math.random() * 0.05,
+      tilt: (0.25 + Math.random() / 2) * Math.PI,
+      tick: 0,
+      color: colors[i % colors.length],
+      shape: o.shapes[Math.floor(Math.random() * o.shapes.length)] ?? "square",
+      options: o
+    });
+  }
+  const s = scene;
+  if (!s.frame) s.frame = requestAnimationFrame((now) => {
+    s.last = now;
+    draw(canvas, s, now);
+  });
+  return new Promise((resolve) => s.done.push(resolve));
+}
+function draw(canvas, scene, now) {
+  const step = Math.min((now - scene.last) / (1e3 / 60), 4);
+  scene.last = now;
+  const { width, height } = fit(canvas);
+  const { ctx } = scene;
+  const dpr = canvas.width / (width || 1);
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  scene.pieces = scene.pieces.filter((p) => {
+    const o = p.options;
+    p.x += (Math.cos(p.angle) * p.velocity + o.drift) * step;
+    p.y += (Math.sin(p.angle) * p.velocity + o.gravity * 3) * step;
+    p.velocity *= o.decay ** step;
+    p.wobble += p.wobbleSpeed * step;
+    p.tilt += 0.1 * step;
+    p.tick += step;
+    if (p.tick >= o.ticks) return false;
+    const size = 8 * o.scalar;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.translate(p.x + 10 * o.scalar * Math.cos(p.wobble), p.y + 10 * o.scalar * Math.sin(p.wobble));
+    ctx.rotate(p.tilt);
+    ctx.scale(1, Math.cos(p.wobble));
+    ctx.globalAlpha = 1 - p.tick / o.ticks;
+    ctx.fillStyle = p.color;
+    ctx.beginPath();
+    if (p.shape === "circle") ctx.arc(0, 0, size / 2, 0, 2 * Math.PI);
+    else if (p.shape === "star") star(ctx, size * 0.75);
+    else ctx.rect(-size / 2, -size / 2, size, size);
+    ctx.fill();
+    return true;
+  });
+  if (scene.pieces.length) scene.frame = requestAnimationFrame((t) => draw(canvas, scene, t));
+  else stop(canvas);
+}
+function stop(canvas) {
+  const scene = scenes.get(canvas);
+  if (!scene) return;
+  cancelAnimationFrame(scene.frame);
+  scenes.delete(canvas);
+  scene.ctx.setTransform(1, 0, 0, 1, 0, 0);
+  scene.ctx.clearRect(0, 0, canvas.width, canvas.height);
+  if (scene.overlay) {
+    canvas.remove();
+    overlay = null;
+  }
+  for (const resolve of scene.done) resolve();
+}
+function star(ctx, r) {
+  for (let i = 0; i < 10; i++) {
+    const a = i * Math.PI / 5 - Math.PI / 2;
+    const d = i % 2 ? r / 2 : r;
+    ctx.lineTo(Math.cos(a) * d, Math.sin(a) * d);
+  }
+  ctx.closePath();
+}
+function fit(canvas) {
+  const width = canvas.clientWidth;
+  const height = canvas.clientHeight;
+  const w = Math.round(width * devicePixelRatio);
+  const h = Math.round(height * devicePixelRatio);
+  if (canvas.width !== w || canvas.height !== h) {
+    canvas.width = w;
+    canvas.height = h;
+  }
+  return { width, height };
+}
+function viewportCanvas() {
+  if (overlay?.isConnected) return overlay;
+  overlay = document.createElement("canvas");
+  overlay.className = "confetti-overlay";
+  overlay.setAttribute("aria-hidden", "true");
+  Object.assign(overlay.style, {
+    position: "fixed",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    margin: "0",
+    padding: "0",
+    border: "0",
+    background: "transparent",
+    pointerEvents: "none",
+    zIndex: "10001"
+  });
+  document.body.append(overlay);
+  if (typeof overlay.showPopover === "function") {
+    overlay.popover = "manual";
+    overlay.showPopover();
+  }
+  return overlay;
+}
+function themeColors(themed) {
+  const probe = document.createElement("span");
+  probe.hidden = true;
+  themed.append(probe);
+  const style = getComputedStyle(probe);
+  const colors = THEME_COLORS.filter((role) => style.getPropertyValue(`--md-sys-color-${role}`).trim()).map((role) => {
+    probe.style.color = `var(--md-sys-color-${role})`;
+    return getComputedStyle(probe).color;
+  });
+  probe.remove();
+  return colors.length ? colors : FALLBACK_COLORS;
+}
+
+export {
+  Confetti
+};
+//# sourceMappingURL=chunk-UEXCIMJZ.mjs.map

package/dist/js/chunks/chunk-UEXCIMJZ.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/confetti.ts"],
+  "sourcesContent": ["import { Component, BaseOptions, InitElements, InitElement } from '../core/component';\n\nexport type ConfettiShape = 'square' | 'circle' | 'star';\n\nexport interface ConfettiOptions extends BaseOptions {\n  /**\n   * Pieces per burst.\n   * @default 50\n   */\n  particleCount: number;\n  /**\n   * Launch direction in degrees. 90 is straight up, 0 is right.\n   * @default 90\n   */\n  angle: number;\n  /**\n   * How far the pieces fan out from the angle, in degrees.\n   * @default 45\n   */\n  spread: number;\n  /**\n   * Launch speed in pixels per frame.\n   * @default 45\n   */\n  startVelocity: number;\n  /**\n   * Share of its speed a piece keeps each frame.\n   * @default 0.9\n   */\n  decay: number;\n  /**\n   * Pull toward the bottom. 0 floats, 1 is normal.\n   * @default 1\n   */\n  gravity: number;\n  /**\n   * Sideways push per frame. Negative drifts left.\n   * @default 0\n   */\n  drift: number;\n  /**\n   * Frames a piece lives while it fades out.\n   * @default 200\n   */\n  ticks: number;\n  /**\n   * Launch point as fractions of the canvas, 0 to 1. A missing side is\n   * 0.5. A trigger element ignores it and launches from its own center.\n   * @default { x: 0.5, y: 0.5 }\n   */\n  origin: { x?: number; y?: number };\n  /**\n   * CSS colors. Empty uses the theme's primary, secondary and tertiary\n   * colors and their containers.\n   * @default []\n   */\n  colors: string[];\n  /**\n   * @default ['square', 'circle']\n   */\n  shapes: ConfettiShape[];\n  /**\n   * Piece size multiplier.\n   * @default 1\n   */\n  scalar: number;\n  /**\n   * On a canvas, wait for `fire()` instead of bursting once at init.\n   * @default false\n   */\n  manualStart: boolean;\n}\n\nconst _defaults: ConfettiOptions = {\n  particleCount: 50,\n  angle: 90,\n  spread: 45,\n  startVelocity: 45,\n  decay: 0.9,\n  gravity: 1,\n  drift: 0,\n  ticks: 200,\n  origin: { x: 0.5, y: 0.5 },\n  colors: [],\n  shapes: ['square', 'circle'],\n  scalar: 1,\n  manualStart: false\n};\n\nconst THEME_COLORS = ['primary', 'secondary', 'tertiary', 'primary-container', 'secondary-container', 'tertiary-container'];\n// Used when the page has no theme tokens.\nconst FALLBACK_COLORS = ['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff'];\nconst RAD = Math.PI / 180;\n\ninterface Piece {\n  x: number;\n  y: number;\n  velocity: number;\n  angle: number;\n  wobble: number;\n  wobbleSpeed: number;\n  tilt: number;\n  tick: number;\n  color: string;\n  shape: ConfettiShape;\n  options: ConfettiOptions;\n}\n\ninterface Scene {\n  ctx: CanvasRenderingContext2D;\n  pieces: Piece[];\n  frame: number;\n  last: number;\n  done: (() => void)[];\n  overlay: boolean;\n}\n\nconst scenes = new Map<HTMLCanvasElement, Scene>();\nlet overlay: HTMLCanvasElement | null = null;\n\n/**\n * Confetti. Bursts of theme-colored pieces drawn on a canvas.\n *\n * - `Confetti.fire(options)` bursts over the whole viewport.\n * - Any other `.confetti` element bursts from its center when clicked.\n * - A `<canvas class=\"confetti\">` bursts inside its own box, once at init\n *   unless `manualStart`, and again on each `fire()`.\n *\n * The viewport canvas is a manual popover, so it draws above an open modal\n * dialog, and it ignores the pointer. Nothing is drawn when the reader\n * prefers reduced motion.\n */\nexport class Confetti extends Component<ConfettiOptions> {\n  private _onClick = () => { this.fire(); };\n\n  constructor(el: HTMLElement, options: Partial<ConfettiOptions>) {\n    super(el, options, Confetti);\n    this.el['Expressive_Confetti'] = this;\n    this.options = { ...Confetti.defaults, ...options };\n    if (!(el instanceof HTMLCanvasElement)) el.addEventListener('click', this._onClick);\n    else if (!this.options.manualStart) this.fire();\n  }\n\n  static get defaults(): ConfettiOptions {\n    return _defaults;\n  }\n\n  static init(el: HTMLElement, options?: Partial<ConfettiOptions>): Confetti;\n  static init(els: InitElements<InitElement>, options?: Partial<ConfettiOptions>): Confetti[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<ConfettiOptions> = {}\n  ): Confetti | Confetti[] {\n    return super.init(els, options, Confetti);\n  }\n\n  static getInstance(el: HTMLElement): Confetti {\n    return el['Expressive_Confetti'];\n  }\n\n  /**\n   * Bursts over the whole viewport. Resolves when the last piece is gone.\n   */\n  static fire(options: Partial<ConfettiOptions> = {}): Promise<void> {\n    return burst(viewportCanvas, document.body, { ...Confetti.defaults, ...options });\n  }\n\n  /**\n   * Bursts on this canvas, or from this element's center over the viewport.\n   * Resolves when the last piece is gone.\n   */\n  fire(options: Partial<ConfettiOptions> = {}): Promise<void> {\n    const merged = { ...this.options, ...options };\n    if (this.el instanceof HTMLCanvasElement) {\n      const canvas = this.el;\n      return burst(() => canvas, canvas.parentElement ?? document.body, merged);\n    }\n    const r = this.el.getBoundingClientRect();\n    merged.origin = { x: (r.left + r.width / 2) / innerWidth, y: (r.top + r.height / 2) / innerHeight };\n    return burst(viewportCanvas, this.el.parentElement ?? document.body, merged);\n  }\n\n  destroy() {\n    this.el.removeEventListener('click', this._onClick);\n    if (this.el instanceof HTMLCanvasElement) stop(this.el);\n    this.el['Expressive_Confetti'] = undefined;\n  }\n}\n\n// `themed` is where the theme colors are read, so a scoped theme applies.\nfunction burst(getCanvas: () => HTMLCanvasElement, themed: Element, o: ConfettiOptions): Promise<void> {\n  if (typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches) return Promise.resolve();\n  const canvas = getCanvas();\n  let scene = scenes.get(canvas);\n  if (!scene) {\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return Promise.resolve();\n    scene = { ctx, pieces: [], frame: 0, last: 0, done: [], overlay: canvas === overlay };\n    scenes.set(canvas, scene);\n  }\n  const { width, height } = fit(canvas);\n  const colors = o.colors.length ? o.colors : themeColors(themed);\n  const x = (o.origin.x ?? 0.5) * width;\n  const y = (o.origin.y ?? 0.5) * height;\n  for (let i = 0; i < o.particleCount; i++) {\n    scene.pieces.push({\n      x, y,\n      velocity: o.startVelocity * (0.5 + Math.random()),\n      angle: -o.angle * RAD + (0.5 - Math.random()) * o.spread * RAD,\n      wobble: Math.random() * 10,\n      wobbleSpeed: 0.05 + Math.random() * 0.05,\n      tilt: (0.25 + Math.random() / 2) * Math.PI,\n      tick: 0,\n      color: colors[i % colors.length],\n      shape: o.shapes[Math.floor(Math.random() * o.shapes.length)] ?? 'square',\n      options: o\n    });\n  }\n  const s = scene;\n  if (!s.frame) s.frame = requestAnimationFrame((now) => { s.last = now; draw(canvas, s, now); });\n  return new Promise((resolve) => s.done.push(resolve));\n}\n\nfunction draw(canvas: HTMLCanvasElement, scene: Scene, now: number) {\n  // Frames are counted at 60 per second whatever the display rate.\n  const step = Math.min((now - scene.last) / (1000 / 60), 4);\n  scene.last = now;\n  const { width, height } = fit(canvas);\n  const { ctx } = scene;\n  const dpr = canvas.width / (width || 1);\n  ctx.setTransform(1, 0, 0, 1, 0, 0);\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  scene.pieces = scene.pieces.filter((p) => {\n    const o = p.options;\n    p.x += (Math.cos(p.angle) * p.velocity + o.drift) * step;\n    p.y += (Math.sin(p.angle) * p.velocity + o.gravity * 3) * step;\n    p.velocity *= o.decay ** step;\n    p.wobble += p.wobbleSpeed * step;\n    p.tilt += 0.1 * step;\n    p.tick += step;\n    if (p.tick >= o.ticks) return false;\n    const size = 8 * o.scalar;\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    ctx.translate(p.x + 10 * o.scalar * Math.cos(p.wobble), p.y + 10 * o.scalar * Math.sin(p.wobble));\n    ctx.rotate(p.tilt);\n    ctx.scale(1, Math.cos(p.wobble));\n    ctx.globalAlpha = 1 - p.tick / o.ticks;\n    ctx.fillStyle = p.color;\n    ctx.beginPath();\n    if (p.shape === 'circle') ctx.arc(0, 0, size / 2, 0, 2 * Math.PI);\n    else if (p.shape === 'star') star(ctx, size * 0.75);\n    else ctx.rect(-size / 2, -size / 2, size, size);\n    ctx.fill();\n    return true;\n  });\n  if (scene.pieces.length) scene.frame = requestAnimationFrame((t) => draw(canvas, scene, t));\n  else stop(canvas);\n}\n\nfunction stop(canvas: HTMLCanvasElement) {\n  const scene = scenes.get(canvas);\n  if (!scene) return;\n  cancelAnimationFrame(scene.frame);\n  scenes.delete(canvas);\n  scene.ctx.setTransform(1, 0, 0, 1, 0, 0);\n  scene.ctx.clearRect(0, 0, canvas.width, canvas.height);\n  if (scene.overlay) {\n    canvas.remove();\n    overlay = null;\n  }\n  for (const resolve of scene.done) resolve();\n}\n\nfunction star(ctx: CanvasRenderingContext2D, r: number) {\n  for (let i = 0; i < 10; i++) {\n    const a = (i * Math.PI) / 5 - Math.PI / 2;\n    const d = i % 2 ? r / 2 : r;\n    ctx.lineTo(Math.cos(a) * d, Math.sin(a) * d);\n  }\n  ctx.closePath();\n}\n\n// Matches the canvas's pixel buffer to its box and the screen's pixel ratio.\nfunction fit(canvas: HTMLCanvasElement) {\n  const width = canvas.clientWidth;\n  const height = canvas.clientHeight;\n  const w = Math.round(width * devicePixelRatio);\n  const h = Math.round(height * devicePixelRatio);\n  if (canvas.width !== w || canvas.height !== h) {\n    canvas.width = w;\n    canvas.height = h;\n  }\n  return { width, height };\n}\n\nfunction viewportCanvas(): HTMLCanvasElement {\n  if (overlay?.isConnected) return overlay;\n  overlay = document.createElement('canvas');\n  overlay.className = 'confetti-overlay';\n  overlay.setAttribute('aria-hidden', 'true');\n  // Inline, so the overlay works even where the stylesheet does not reach.\n  Object.assign(overlay.style, {\n    position: 'fixed', inset: '0', width: '100%', height: '100%', margin: '0', padding: '0',\n    border: '0', background: 'transparent', pointerEvents: 'none', zIndex: '10001'\n  });\n  document.body.append(overlay);\n  if (typeof overlay.showPopover === 'function') {\n    overlay.popover = 'manual';\n    overlay.showPopover();\n  }\n  return overlay;\n}\n\n// Resolves each theme color token through `color`, so light-dark() and\n// relative colors reach the canvas as plain colors.\nfunction themeColors(themed: Element): string[] {\n  const probe = document.createElement('span');\n  probe.hidden = true;\n  themed.append(probe);\n  const style = getComputedStyle(probe);\n  const colors = THEME_COLORS.filter((role) => style.getPropertyValue(`--md-sys-color-${role}`).trim()).map((role) => {\n    probe.style.color = `var(--md-sys-color-${role})`;\n    return getComputedStyle(probe).color;\n  });\n  probe.remove();\n  return colors.length ? colors : FALLBACK_COLORS;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-VGZSAFTX.mjs

@@ -0,0 +1,173 @@
+import {
+  LineChart,
+  svgNode
+} from "./chunk-O5XPWXIQ.mjs";
+
+// src/ts/components/pieChart.ts
+var COLORS = 6;
+var RADIUS = 46;
+var GROWN = 1.06;
+var LABEL_SHARE = 0.05;
+var _maskId = 0;
+var PieChart = class extends LineChart {
+  get _type() {
+    return "pie-chart";
+  }
+  get _key() {
+    return "Expressive_PieChart";
+  }
+  get _points() {
+    return false;
+  }
+  get _circular() {
+    return true;
+  }
+  static init(els, options = {}) {
+    return super.init(els, options);
+  }
+  static getInstance(el) {
+    return el["Expressive_PieChart"];
+  }
+  show(index) {
+    if (!this._tooltip || index === this.activeIndex) return;
+    super.show(index);
+    this._slices.forEach((slice, i) => slice?.classList.toggle("active", i === index));
+    if (this._tooltip.hidden) return;
+    const color = this._colors[index];
+    this._tooltip.querySelectorAll("[data-series]").forEach((span) => {
+      if (color) span.dataset.series = color;
+      else delete span.dataset.series;
+    });
+    const share = this._share(index);
+    const value = this._tooltip.querySelector("span:nth-of-type(2)");
+    if (share && value) value.textContent += ` (${share})`;
+  }
+  /** CSS places the tooltip on the slice's middle from --turn. */
+  _place(index) {
+    const middle = (this._turns[index][0] + this._turns[index][1]) / 2;
+    this._tooltip.style.setProperty("--turn", String(middle));
+    this._tooltip.classList.toggle("end", middle < 0.5);
+  }
+  /** The row's share of the whole as a percentage, or '' for none. */
+  _share(index) {
+    var _a;
+    const [start, end] = this._turns[index];
+    if (end <= start) return "";
+    const share = end - start;
+    const digits = share < 0.1 ? 1 : 0;
+    (_a = this._percents ?? (this._percents = []))[digits] ?? (_a[digits] = this._percent(digits));
+    return this._percents[digits].format(share);
+  }
+  _percent(digits) {
+    const options = { style: "percent", maximumFractionDigits: digits };
+    try {
+      return new Intl.NumberFormat(this.el.closest("[lang]")?.lang || void 0, options);
+    } catch {
+      return new Intl.NumberFormat(void 0, options);
+    }
+  }
+  /** The legend: every row with its color, its cell and its share. */
+  _guides() {
+    this._percents = [];
+    const legend = document.createElement("ul");
+    legend.className = "pie-chart-legend";
+    legend.setAttribute("aria-hidden", "true");
+    const text = this.series[0].text;
+    legend.append(...this.labels.map((label, i) => {
+      const li = document.createElement("li");
+      if (this._colors[i]) li.dataset.series = this._colors[i];
+      const [name, value, share] = [label, text[i], this._share(i)].map((content) => {
+        const span = document.createElement("span");
+        span.textContent = content;
+        return span;
+      });
+      li.append(name, value, share);
+      return li;
+    }));
+    return [legend];
+  }
+  /** The row under the pointer by its angle from the middle, or -1 off the slices. */
+  _indexAt(e) {
+    const [turn, share] = this._polarAt(e);
+    const distance = share * 100;
+    const hole = this.el.classList.contains("donut") ? parseFloat(getComputedStyle(this.el).getPropertyValue("--md-comp-pie-chart-hole")) || 0 : 0;
+    if (distance < RADIUS * hole) return -1;
+    const index = this._turns.findIndex(([start, end]) => start <= turn && turn < end);
+    return distance > RADIUS * (index === this.activeIndex ? GROWN : 1) ? -1 : index;
+  }
+  /**
+   * An SVG of slices in a -50 to 50 box, under a mask that cuts the gaps
+   * between them and the donut's hole, which CSS sizes. The values and the
+   * total are HTML over it.
+   */
+  _draw() {
+    const values = this.series[0].values.map((value) => Math.max(0, value ?? 0));
+    const total = values.reduce((sum, value) => sum + value, 0);
+    let turn = 0;
+    this._turns = values.map((value) => [turn, turn += total ? value / total : 0]);
+    const drawn = this._turns.filter(([start, end]) => end > start).length;
+    let slice = 0;
+    this._colors = this._turns.map(([start, end]) => {
+      if (end <= start) return void 0;
+      const index = slice++;
+      return String(index === drawn - 1 && index > 0 && index % COLORS === 0 ? 2 : index % COLORS + 1);
+    });
+    const at = (t, r = RADIUS) => {
+      const angle = t * 2 * Math.PI;
+      return `${(r * Math.sin(angle)).toFixed(3)},${(-r * Math.cos(angle)).toFixed(3)}`;
+    };
+    const pie = document.createElement("div");
+    pie.className = "pie-chart-pie";
+    pie.setAttribute("aria-hidden", "true");
+    const svg = svgNode("svg", { viewBox: "-50 -50 100 100", focusable: "false" });
+    const id = `pie-chart-mask-${++_maskId}`;
+    const area = { x: "-50", y: "-50", width: "100", height: "100" };
+    const mask = svgNode("mask", { id, maskUnits: "userSpaceOnUse", ...area });
+    const edges = this._turns.filter(([start, end]) => end > start);
+    mask.append(
+      svgNode("rect", { ...area, fill: "white" }),
+      svgNode("path", {
+        class: "pie-chart-gaps",
+        stroke: "black",
+        d: edges.length > 1 ? edges.map(([start]) => `M0,0L${at(start, 50)}`).join("") : ""
+      }),
+      svgNode("circle", { class: "pie-chart-hole", r: String(RADIUS), fill: "black" })
+    );
+    const slices = svgNode("g", { mask: `url(#${id})` });
+    const arc = `A${RADIUS},${RADIUS} 0`;
+    this._slices = this._turns.map(([start, end], i) => {
+      if (end <= start) return null;
+      const slice2 = svgNode("path", {
+        class: "pie-chart-slice",
+        "data-series": this._colors[i],
+        // A whole circle is two half arcs; one arc cannot end where it starts.
+        d: end - start >= 1 ? `M0,${-RADIUS}${arc} 1 1 0,${RADIUS}${arc} 1 1 0,${-RADIUS}Z` : `M0,0L${at(start)}${arc} ${end - start > 0.5 ? 1 : 0} 1 ${at(end)}Z`
+      });
+      slices.append(slice2);
+      return slice2;
+    });
+    svg.append(mask, slices);
+    pie.append(svg);
+    if (this.el.classList.contains("values")) {
+      const labels = document.createElement("div");
+      labels.className = "pie-chart-values";
+      this._turns.forEach(([start, end], i) => {
+        if (end - start < LABEL_SHARE) return;
+        const label = document.createElement("span");
+        label.dataset.series = this._colors[i];
+        label.style.setProperty("--turn", String((start + end) / 2));
+        label.textContent = this._share(i);
+        labels.append(label);
+      });
+      pie.append(labels);
+    }
+    const middle = this._total("pie-chart-total");
+    if (middle) pie.append(middle);
+    return pie;
+  }
+};
+
+export {
+  PieChart
+};
+//# sourceMappingURL=chunk-VGZSAFTX.mjs.map

package/dist/js/chunks/chunk-VGZSAFTX.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/pieChart.ts"],
+  "sourcesContent": ["import { InitElements, InitElement } from '../core/component';\nimport { LineChart, LineChartOptions, svgNode as node } from './lineChart';\n\nexport type PieChartOptions = LineChartOptions;\n\n// ponytail: rows past six repeat the colors; group small parts as \"Other\".\nconst COLORS = 6;\n/** The pie's radius in a 100-unit box, leaving room for the active slice to grow. */\nconst RADIUS = 46;\n/** The active slice's scale, as in _pie-chart.scss. */\nconst GROWN = 1.06;\n/** Slices smaller than this share get no .values label. */\nconst LABEL_SHARE = 0.05;\nlet _maskId = 0;\n\n/**\n * Pie chart. It reads its <table> like LineChart, but draws each row of the\n * first value column as a slice of the whole, clockwise from the top, with\n * a legend of every row and its share. With `.donut`, a <tfoot> row is the\n * total in the middle. Further columns show in the tooltip.\n *\n * Re-run `PieChart.init(el)` after changing the table.\n */\nexport class PieChart extends LineChart {\n  // No initializers: LineChart's constructor draws before they would run.\n  /** Each row's start and end, as fractions of a turn clockwise from the top. */\n  private _turns: [number, number][];\n  /** Each row's color, or undefined for a row with no slice. */\n  private _colors: (string | undefined)[];\n  private _slices: (SVGPathElement | null)[];\n  /** Percent formatters by fraction digits, rebuilt once per legend. */\n  private _percents: Intl.NumberFormat[];\n\n  protected get _type() {\n    return 'pie-chart';\n  }\n\n  protected get _key() {\n    return 'Expressive_PieChart';\n  }\n\n  protected get _points() {\n    return false;\n  }\n\n  protected get _circular() {\n    return true;\n  }\n\n  static init(el: HTMLElement, options?: Partial<PieChartOptions>): PieChart;\n  static init(els: InitElements<InitElement>, options?: Partial<PieChartOptions>): PieChart[];\n  static init(\n    els: HTMLElement | InitElements<InitElement>,\n    options: Partial<PieChartOptions> = {}\n  ): PieChart | PieChart[] {\n    return super.init(els as HTMLElement, options) as PieChart | PieChart[];\n  }\n\n  static getInstance(el: HTMLElement): PieChart {\n    return el['Expressive_PieChart'];\n  }\n\n  show(index: number) {\n    if (!this._tooltip || index === this.activeIndex) return;\n    super.show(index);\n    this._slices.forEach((slice, i) => slice?.classList.toggle('active', i === index));\n    // LineChart hides the tooltip for -1 and for an index past the last row.\n    if (this._tooltip.hidden) return;\n\n    const color = this._colors[index];\n    this._tooltip.querySelectorAll<HTMLElement>('[data-series]').forEach((span) => {\n      if (color) span.dataset.series = color;\n      else delete span.dataset.series;\n    });\n    const share = this._share(index);\n    const value = this._tooltip.querySelector('span:nth-of-type(2)');\n    if (share && value) value.textContent += ` (${share})`;\n  }\n\n  /** CSS places the tooltip on the slice's middle from --turn. */\n  protected _place(index: number) {\n    const middle = (this._turns[index][0] + this._turns[index][1]) / 2;\n    this._tooltip.style.setProperty('--turn', String(middle));\n    // On the right half it opens leftwards, over the pie.\n    this._tooltip.classList.toggle('end', middle < 0.5);\n  }\n\n  /** The row's share of the whole as a percentage, or '' for none. */\n  private _share(index: number) {\n    const [start, end] = this._turns[index];\n    if (end <= start) return '';\n    const share = end - start;\n    // Whole percentages, with a tenth below 10% so a small part is not 0%.\n    const digits = share < 0.1 ? 1 : 0;\n    (this._percents ??= [])[digits] ??= this._percent(digits);\n    return this._percents[digits].format(share);\n  }\n\n  private _percent(digits: number) {\n    const options = { style: 'percent', maximumFractionDigits: digits } as const;\n    try {\n      return new Intl.NumberFormat(this.el.closest<HTMLElement>('[lang]')?.lang || undefined, options);\n    } catch {\n      // An invalid lang attribute.\n      return new Intl.NumberFormat(undefined, options);\n    }\n  }\n\n  /** The legend: every row with its color, its cell and its share. */\n  protected _guides(): Element[] {\n    // A redraw picks up a changed lang attribute.\n    this._percents = [];\n    const legend = document.createElement('ul');\n    legend.className = 'pie-chart-legend';\n    legend.setAttribute('aria-hidden', 'true');\n    const text = this.series[0].text;\n    legend.append(...this.labels.map((label, i) => {\n      const li = document.createElement('li');\n      if (this._colors[i]) li.dataset.series = this._colors[i];\n      const [name, value, share] = [label, text[i], this._share(i)].map((content) => {\n        const span = document.createElement('span');\n        span.textContent = content;\n        return span;\n      });\n      li.append(name, value, share);\n      return li;\n    }));\n    return [legend];\n  }\n\n  /** The row under the pointer by its angle from the middle, or -1 off the slices. */\n  protected _indexAt(e: PointerEvent) {\n    const [turn, share] = this._polarAt(e);\n    // The distance in the SVG's 100-unit box.\n    const distance = share * 100;\n    const hole = this.el.classList.contains('donut')\n      ? parseFloat(getComputedStyle(this.el).getPropertyValue('--md-comp-pie-chart-hole')) || 0\n      : 0;\n    if (distance < RADIUS * hole) return -1;\n    const index = this._turns.findIndex(([start, end]) => start <= turn && turn < end);\n    // The active slice is drawn larger, so the pointer stays on it to its edge.\n    return distance > RADIUS * (index === this.activeIndex ? GROWN : 1) ? -1 : index;\n  }\n\n  /**\n   * An SVG of slices in a -50 to 50 box, under a mask that cuts the gaps\n   * between them and the donut's hole, which CSS sizes. The values and the\n   * total are HTML over it.\n   */\n  protected _draw(): Element {\n    const values = this.series[0].values.map((value) => Math.max(0, value ?? 0));\n    const total = values.reduce((sum, value) => sum + value, 0);\n    let turn = 0;\n    this._turns = values.map((value) => [turn, (turn += total ? value / total : 0)]);\n    // Colors go round the drawn slices; the last skips the first's color beside it.\n    const drawn = this._turns.filter(([start, end]) => end > start).length;\n    let slice = 0;\n    this._colors = this._turns.map(([start, end]) => {\n      if (end <= start) return undefined;\n      const index = slice++;\n      return String(index === drawn - 1 && index > 0 && index % COLORS === 0 ? 2 : (index % COLORS) + 1);\n    });\n    const at = (t: number, r = RADIUS) => {\n      const angle = t * 2 * Math.PI;\n      return `${(r * Math.sin(angle)).toFixed(3)},${(-r * Math.cos(angle)).toFixed(3)}`;\n    };\n\n    const pie = document.createElement('div');\n    pie.className = 'pie-chart-pie';\n    pie.setAttribute('aria-hidden', 'true');\n    const svg = node('svg', { viewBox: '-50 -50 100 100', focusable: 'false' });\n    const id = `pie-chart-mask-${++_maskId}`;\n    const area = { x: '-50', y: '-50', width: '100', height: '100' };\n    const mask = node('mask', { id, maskUnits: 'userSpaceOnUse', ...area });\n    const edges = this._turns.filter(([start, end]) => end > start);\n    mask.append(\n      node('rect', { ...area, fill: 'white' }),\n      node('path', {\n        class: 'pie-chart-gaps',\n        stroke: 'black',\n        d: edges.length > 1 ? edges.map(([start]) => `M0,0L${at(start, 50)}`).join('') : ''\n      }),\n      node('circle', { class: 'pie-chart-hole', r: String(RADIUS), fill: 'black' })\n    );\n\n    const slices = node('g', { mask: `url(#${id})` });\n    const arc = `A${RADIUS},${RADIUS} 0`;\n    this._slices = this._turns.map(([start, end], i) => {\n      if (end <= start) return null;\n      const slice = node('path', {\n        class: 'pie-chart-slice',\n        'data-series': this._colors[i],\n        // A whole circle is two half arcs; one arc cannot end where it starts.\n        d: end - start >= 1\n          ? `M0,${-RADIUS}${arc} 1 1 0,${RADIUS}${arc} 1 1 0,${-RADIUS}Z`\n          : `M0,0L${at(start)}${arc} ${end - start > 0.5 ? 1 : 0} 1 ${at(end)}Z`\n      }) as SVGPathElement;\n      slices.append(slice);\n      return slice;\n    });\n    svg.append(mask, slices);\n    pie.append(svg);\n\n    if (this.el.classList.contains('values')) {\n      const labels = document.createElement('div');\n      labels.className = 'pie-chart-values';\n      this._turns.forEach(([start, end], i) => {\n        if (end - start < LABEL_SHARE) return;\n        const label = document.createElement('span');\n        label.dataset.series = this._colors[i];\n        label.style.setProperty('--turn', String((start + end) / 2));\n        label.textContent = this._share(i);\n        labels.append(label);\n      });\n      pie.append(labels);\n    }\n\n    const middle = this._total('pie-chart-total');\n    if (middle) pie.append(middle);\n    return pie;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["slice"]
+}

package/dist/js/chunks/{chunk-UAEAQBRC.mjs → chunk-X7OCHZVF.mjs}

@@ -1,6 +1,6 @@
 import {
   Utils
-} from "./chunk-6OMRGML6.mjs";
+} from "./chunk-MNPROCZF.mjs";
 
 // src/ts/behaviors/dialogs.ts
 var _Dialogs = class _Dialogs {
@@ -73,4 +73,4 @@ var Dialogs = _Dialogs;
 export {
   Dialogs
 };
-//# sourceMappingURL=chunk-UAEAQBRC.mjs.map
+//# sourceMappingURL=chunk-X7OCHZVF.mjs.map

package/dist/js/chunks/{chunk-EC63CHXU.mjs → chunk-YMSXJON6.mjs}

@@ -1,6 +1,6 @@
 import {
   Utils
-} from "./chunk-6OMRGML6.mjs";
+} from "./chunk-MNPROCZF.mjs";
 
 // src/ts/plugins/dockedDisplayPlugin.ts
 var _defaults = {
@@ -17,9 +17,9 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
       }
     };
     /**
-     * Tears the plugin down. The document listener holds a reference to this
-     * instance - and through it the whole picker subtree - so the owning
-     * component must call this from its own destroy().
+     * Tears the plugin down. While shown, the document listener holds a
+     * reference to this instance - and through it the whole picker subtree - so
+     * the owning component must call this from its own destroy().
      */
     this.destroy = () => {
       document.removeEventListener("click", this._handleDocumentClick);
@@ -28,6 +28,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     this.show = () => {
       if (this.visible) return;
       this.visible = true;
+      document.addEventListener("click", this._handleDocumentClick);
       const coordinates = Utils._setAbsolutePosition(this.el, this.container, "bottom", this.options.margin, this.options.transition, this.options.align);
       this.container.style.visibility = "visible";
       this.container.style.transition = `
@@ -41,6 +42,7 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     this.hide = () => {
       if (!this.visible) return;
       this.visible = false;
+      document.removeEventListener("click", this._handleDocumentClick);
       this.container.removeAttribute("style");
       this.container.style.transition = `
       transform ${this.options.duration}ms ease-out,
@@ -59,7 +61,6 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
     this.container.classList.add("display-docked");
     this.container.append(container);
     el.parentElement.append(this.container);
-    document.addEventListener("click", this._handleDocumentClick);
   }
   /**
    * Initializes instance of DockedDisplayPlugin
@@ -75,4 +76,4 @@ var DockedDisplayPlugin = class _DockedDisplayPlugin {
 export {
   DockedDisplayPlugin
 };
-//# sourceMappingURL=chunk-EC63CHXU.mjs.map
+//# sourceMappingURL=chunk-YMSXJON6.mjs.map

package/dist/js/chunks/chunk-YMSXJON6.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/plugins/dockedDisplayPlugin.ts"],
+  "sourcesContent": ["import { Utils } from '../core/utils';\n\nexport interface DockedDisplayPluginOptions {\n  /**\n   * Margin between element and docked container\n   */\n  margin: number,\n  /**\n   * Transition movement\n   */\n  transition: number,\n  /**\n   * Transition duration\n   */\n  duration: number,\n  /**\n   * The alignment of the docked container\n   */\n  align: string\n}\n\nconst _defaults: DockedDisplayPluginOptions = {\n  margin: 5,\n  transition: 10,\n  duration: 250,\n  align: 'left'\n}\n\nexport class DockedDisplayPlugin {\n  private readonly el: HTMLElement;\n  private readonly container: HTMLDivElement;\n  private options: Partial<DockedDisplayPluginOptions>;\n  private visible: boolean;\n\n  constructor(el: HTMLElement, container: HTMLElement, options: Partial<DockedDisplayPluginOptions>) {\n    this.el = el;\n    this.options = {\n      ..._defaults,\n      ...options\n    };\n\n    this.container = document.createElement('div');\n    this.container.classList.add('display-docked');\n    this.container.append(container);\n    el.parentElement.append(this.container);\n  }\n\n  private _handleDocumentClick = (e: MouseEvent) => {\n    if (this.visible && !e.composedPath().includes(this.el) && !e.composedPath().includes(this.container)) {\n      this.hide();\n    }\n  };\n\n  /**\n   * Tears the plugin down. While shown, the document listener holds a\n   * reference to this instance - and through it the whole picker subtree - so\n   * the owning component must call this from its own destroy().\n   */\n  destroy = () => {\n    document.removeEventListener('click', this._handleDocumentClick);\n    this.container.remove();\n  };\n\n  /**\n   * Initializes instance of DockedDisplayPlugin\n   * @param el HTMLElement to position to\n   * @param container HTMLElement to be positioned\n   * @param options Plugin options\n   */\n  static init(el: HTMLElement, container: HTMLElement, options?: Partial<DockedDisplayPluginOptions>): DockedDisplayPlugin {\n    return new DockedDisplayPlugin(el, container, options);\n  }\n\n  show = () => {\n    if (this.visible) return;\n    this.visible = true;\n    document.addEventListener('click', this._handleDocumentClick);\n    const coordinates = Utils._setAbsolutePosition(this.el, this.container, 'bottom', this.options.margin, this.options.transition, this.options.align);\n\n    // @todo move to Util? -> duplicate code fragment with tooltip\n    // easeOutCubic\n    this.container.style.visibility = 'visible';\n    this.container.style.transition = `\n      transform ${this.options.duration}ms ease-out,\n      opacity ${this.options.duration}ms ease-out`;\n    setTimeout(() => {\n      this.container.style.transform = `translateX(${coordinates.x}px) translateY(${coordinates.y}px)`;\n      this.container.style.opacity = (1).toString();\n    }, 1);\n  };\n\n  hide = () => {\n    if (!this.visible) return;\n    this.visible = false;\n    document.removeEventListener('click', this._handleDocumentClick);\n    // @todo move to Util? -> duplicate code fragment with tooltip\n    this.container.removeAttribute('style');\n    this.container.style.transition = `\n      transform ${this.options.duration}ms ease-out,\n      opacity ${this.options.duration}ms ease-out`;\n    setTimeout(() => {\n      this.container.style.transform = `translateX(0px) translateY(0px)`;\n      this.container.style.opacity = '0';\n    }, 1);\n  };\n}\n"],
+  "mappings": ";;;;;AAqBA,IAAM,YAAwC;AAAA,EAC5C,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AACT;AAEO,IAAM,sBAAN,MAAM,qBAAoB;AAAA,EAM/B,YAAY,IAAiB,WAAwB,SAA8C;AAanG,SAAQ,uBAAuB,CAAC,MAAkB;AAChD,UAAI,KAAK,WAAW,CAAC,EAAE,aAAa,EAAE,SAAS,KAAK,EAAE,KAAK,CAAC,EAAE,aAAa,EAAE,SAAS,KAAK,SAAS,GAAG;AACrG,aAAK,KAAK;AAAA,MACZ;AAAA,IACF;AAOA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAU,MAAM;AACd,eAAS,oBAAoB,SAAS,KAAK,oBAAoB;AAC/D,WAAK,UAAU,OAAO;AAAA,IACxB;AAYA,gBAAO,MAAM;AACX,UAAI,KAAK,QAAS;AAClB,WAAK,UAAU;AACf,eAAS,iBAAiB,SAAS,KAAK,oBAAoB;AAC5D,YAAM,cAAc,MAAM,qBAAqB,KAAK,IAAI,KAAK,WAAW,UAAU,KAAK,QAAQ,QAAQ,KAAK,QAAQ,YAAY,KAAK,QAAQ,KAAK;AAIlJ,WAAK,UAAU,MAAM,aAAa;AAClC,WAAK,UAAU,MAAM,aAAa;AAAA,kBACpB,KAAK,QAAQ,QAAQ;AAAA,gBACvB,KAAK,QAAQ,QAAQ;AACjC,iBAAW,MAAM;AACf,aAAK,UAAU,MAAM,YAAY,cAAc,YAAY,CAAC,kBAAkB,YAAY,CAAC;AAC3F,aAAK,UAAU,MAAM,UAAW,GAAG,SAAS;AAAA,MAC9C,GAAG,CAAC;AAAA,IACN;AAEA,gBAAO,MAAM;AACX,UAAI,CAAC,KAAK,QAAS;AACnB,WAAK,UAAU;AACf,eAAS,oBAAoB,SAAS,KAAK,oBAAoB;AAE/D,WAAK,UAAU,gBAAgB,OAAO;AACtC,WAAK,UAAU,MAAM,aAAa;AAAA,kBACpB,KAAK,QAAQ,QAAQ;AAAA,gBACvB,KAAK,QAAQ,QAAQ;AACjC,iBAAW,MAAM;AACf,aAAK,UAAU,MAAM,YAAY;AACjC,aAAK,UAAU,MAAM,UAAU;AAAA,MACjC,GAAG,CAAC;AAAA,IACN;AArEE,SAAK,KAAK;AACV,SAAK,UAAU;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAEA,SAAK,YAAY,SAAS,cAAc,KAAK;AAC7C,SAAK,UAAU,UAAU,IAAI,gBAAgB;AAC7C,SAAK,UAAU,OAAO,SAAS;AAC/B,OAAG,cAAc,OAAO,KAAK,SAAS;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwBA,OAAO,KAAK,IAAiB,WAAwB,SAAoE;AACvH,WAAO,IAAI,qBAAoB,IAAI,WAAW,OAAO;AAAA,EACvD;AAkCF;",
+  "names": []
+}

package/dist/js/chunks/{chunk-QVVEWBOF.mjs → chunk-Z2NRKI7R.mjs}

@@ -1,6 +1,6 @@
 import {
   Utils
-} from "./chunk-6OMRGML6.mjs";
+} from "./chunk-MNPROCZF.mjs";
 import {
   Component
 } from "./chunk-LTWPGFBR.mjs";
@@ -172,4 +172,4 @@ export {
   EXPANDING_CARD_SELECTOR,
   ExpandingCard
 };
-//# sourceMappingURL=chunk-QVVEWBOF.mjs.map
+//# sourceMappingURL=chunk-Z2NRKI7R.mjs.map