@fusion.dev/helix-headless 0.104.1 → 0.105.0

package/dist/map/root/map-root.js

@@ -4,13 +4,114 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, HelixMapPanEvent, HelixMapZoomEvent, hostAria, MixinViewport, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { customElement, HelixActivateEvent, HelixElement, HelixMapClusterEvent, HelixMapPanEvent, HelixMapPartChangeEvent, HelixMapZoomEvent, hostAria, KeyboardNavigationController, MixinViewport, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
 let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
+        this.cluster = false;
         this.label = '';
+        this.layersLabel = 'Routes, areas, and points';
+        this.handlePartChange = (event) => {
+            if (event.detail.kind !== 'place') {
+                this.requestUpdate();
+            }
+        };
+        this.stop = 0;
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.markers.map((marker, at) => ({
+                contains: (node) => node !== null && (marker.contains(node) || marker.shadowRoot?.contains(node) === true),
+                disabled: marker.gatheredBy !== undefined,
+                focusItem: () => {
+                    this.stop = at;
+                    marker.focus();
+                },
+                select: () => { },
+                selected: false,
+            })),
+            origin: 'focus',
+            selects: () => false,
+        });
+        this.handleFocusIn = (event) => {
+            const marker = this.markerOf(event);
+            const at = marker ? this.markers.indexOf(marker) : -1;
+            if (at !== -1) {
+                this.stop = at;
+            }
+        };
+        this.handleClick = (event) => {
+            const marker = this.markerOf(event);
+            if (marker) {
+                this.activate(marker);
+            }
+        };
+        this.handleMarkerKeydown = (event) => {
+            const marker = this.markerOf(event);
+            if (!marker || (event.key !== 'Enter' && event.key !== ' ')) {
+                return;
+            }
+            event.preventDefault();
+            if (event.key === 'Enter' && !event.repeat) {
+                this.activate(marker);
+            }
+        };
+        this.handleMarkerKeyup = (event) => {
+            const marker = this.markerOf(event);
+            if (marker && event.key === ' ') {
+                event.preventDefault();
+                this.activate(marker);
+            }
+        };
+        this.handleSlotChange = () => {
+            this.requestUpdate();
+        };
+    }
+    get layers() {
+        return this.knownChildren.filter((child) => child.isMapLayer === true);
+    }
+    get markers() {
+        return this.knownChildren.filter((child) => child.isMapMarker === true);
+    }
+    markerOf(event) {
+        return event
+            .composedPath()
+            .find((one) => one.isMapMarker === true);
+    }
+    activate(marker) {
+        if (marker.gathered.length > 1) {
+            marker.dispatchEvent(new HelixMapClusterEvent({ labels: [...marker.gathered] }));
+            return;
+        }
+        this.dispatchEvent(new HelixActivateEvent({ value: marker.name || marker.label || '' }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(HelixMapPartChangeEvent.eventName, this.handlePartChange);
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('keydown', this.handleMarkerKeydown);
+        this.addEventListener('keyup', this.handleMarkerKeyup);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener(HelixMapPartChangeEvent.eventName, this.handlePartChange);
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('keydown', this.handleMarkerKeydown);
+        this.removeEventListener('keyup', this.handleMarkerKeyup);
+    }
+    updated(changed) {
+        super.updated(changed);
+        const markers = this.markers;
+        const on = markers[Math.min(this.stop, markers.length - 1)];
+        const stop = on?.gatheredBy ?? on;
+        for (const marker of markers) {
+            marker.current = marker === stop;
+        }
+        if (changed.has('cluster')) {
+            this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'place' }));
+        }
     }
     panEvent(detail) {
         return new HelixMapPanEvent(detail);
@@ -27,6 +128,15 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
     }
+    renderLayers() {
+        const layers = this.layers;
+        if (layers.length === 0) {
+            return nothing;
+        }
+        return html `<ul part="layers" aria-label=${this.layersLabel}>
+      ${layers.map((layer) => html `<li part="layer">${layer.label ?? ''}${layer.description ? `, ${layer.description}` : ''}</li>`)}
+    </ul>`;
+    }
     render() {
         return html `<div
       part="region"
@@ -43,8 +153,9 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         <slot name="header"></slot>
       </div>
       <div part="viewport">
-        <slot></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
+      ${this.renderLayers()}
       ${this.renderControls()}
       <div part="footer">
         <slot name="footer"></slot>
@@ -55,9 +166,18 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     </div>`;
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessMap.prototype, "cluster", void 0);
 __decorate([
     property()
 ], HelixHeadlessMap.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'layers-label' })
+], HelixHeadlessMap.prototype, "layersLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessMap.prototype, "stop", void 0);
 HelixHeadlessMap = __decorate([
     customElement('helix-headless-map')
 ], HelixHeadlessMap);

package/dist/map/route/map-route.d.ts

@@ -0,0 +1,67 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues } from 'lit';
+/** A place a line passes through or a shape is drawn around, in degrees. */
+export interface MapPoint {
+    lat: number;
+    lng: number;
+}
+/**
+ * `points` as it is written: `lat,lng` pairs separated by spaces, the order a
+ * marker's own `lat` and `lng` read in. A pair that is not two numbers is
+ * dropped rather than drawn at the origin, **an empty side included**:
+ * `Number('')` is 0, so `30.1,` from a record with no longitude was a vertex
+ * off West Africa.
+ */
+export declare const pointsOf: (value: string | null) => MapPoint[];
+/** `points` read from its attribute, which is written and never reflected. */
+export declare const pointsConverter: {
+    fromAttribute: typeof pointsOf;
+};
+/**
+ * @summary A line on a map, such as a route between stops.
+ *
+ * @description
+ * `connectMap` draws the route as a layer of the map, under its place names,
+ * and redraws it when its points, progress, or color change. The frame lists
+ * each route by its `label` and `description` for screen readers.
+ *
+ * @since 0.105.0
+ * @status experimental
+ * @category media
+ * @aliases Map line, Path, Polyline
+ * @documentation https://fusion.dev/helix/components/map
+ *
+ * @event {HelixMapPartChangeEvent} helix-map-part-change - The route's points, progress, name, or color changed. Used by `connectMap`; pages do not need to listen for it.
+ */
+export declare class HelixHeadlessMapRoute extends HelixElement {
+    /**
+     * More about the route, such as its distance or time. Read after its label
+     * in the frame's list.
+     */
+    description?: string;
+    /** Marks this as a layer for the frame and the connector, whatever its tag. */
+    readonly isMapLayer = true;
+    /** @internal Which kind of layer, which is how the connector draws it. */
+    readonly layerKind: 'area' | 'route';
+    /** The route's name, used in the frame's list. */
+    label?: string;
+    /**
+     * The points the line passes through, in order. Write the attribute as
+     * `lat,lng` pairs separated by spaces, or set the property to an array of `{
+     * lat, lng }`.
+     */
+    points?: MapPoint[];
+    /**
+     * How much of the route has been traveled, from 0 to 1. The traveled part is
+     * drawn in a lighter color.
+     */
+    progress?: number;
+    /** Tells the frame and the connector the line moved, was renamed or was retoned. */
+    protected updated(changed: PropertyValues): void;
+    protected render(): typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-map-route': HelixHeadlessMapRoute;
+    }
+}

package/dist/map/route/map-route.js

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, HelixElement, HelixMapPartChangeEvent } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+export const pointsOf = (value) => (value ?? '')
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((pair) => pair.split(','))
+    .filter((pair) => pair.length === 2 && pair.every((one) => one.trim() !== ''))
+    .map((pair) => pair.map(Number))
+    .filter((pair) => pair.every((one) => Number.isFinite(one)))
+    .map(([lat, lng]) => ({ lat: lat, lng: lng }));
+export const pointsConverter = { fromAttribute: pointsOf };
+let HelixHeadlessMapRoute = class HelixHeadlessMapRoute extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.isMapLayer = true;
+        this.layerKind = 'route';
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
+    }
+    render() {
+        return nothing;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessMapRoute.prototype, "description", void 0);
+__decorate([
+    property()
+], HelixHeadlessMapRoute.prototype, "label", void 0);
+__decorate([
+    property({ converter: pointsConverter })
+], HelixHeadlessMapRoute.prototype, "points", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessMapRoute.prototype, "progress", void 0);
+HelixHeadlessMapRoute = __decorate([
+    customElement('helix-headless-map-route')
+], HelixHeadlessMapRoute);
+export { HelixHeadlessMapRoute };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.104.1",
+  "version": "0.105.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.104.1",
-    "@fusion.dev/helix-icons": "0.104.1",
+    "@fusion.dev/helix-core": "0.105.0",
+    "@fusion.dev/helix-icons": "0.105.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.104.1",
-    "@fusion.dev/helix-testing": "0.104.1",
+    "@fusion.dev/helix-cem": "0.105.0",
+    "@fusion.dev/helix-testing": "0.105.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",