@fusion.dev/helix-headless 0.104.1 → 0.106.0

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

@@ -4,13 +4,423 @@ 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, HelixMapRotateEvent, HelixMapTiltEvent, HelixMapZoomEvent, hostAria, KeyboardNavigationController, MixinViewport, } from '@fusion.dev/helix-core';
+import { buildings, cloudRain, dotsNine, leaf, mountains, path, polygon, stack, target, } from '@fusion.dev/helix-icons';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+const MAP_TYPES = ['standard', 'hybrid', 'satellite'];
+const iconOf = (layer) => {
+    switch (layer?.layerKind) {
+        case 'route':
+            return path;
+        case 'area':
+            return polygon;
+        case 'points':
+            return dotsNine;
+        case 'buildings':
+            return buildings;
+        case 'terrain':
+            return mountains;
+        case 'contours':
+            return target;
+        case 'landcover':
+            return leaf;
+        case 'raster':
+            return cloudRain;
+        default:
+            return stack;
+    }
+};
+const ROTATE_STEP = 15;
+const TILT_STEP = 10;
+const TILTED = 50;
 let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement) {
     constructor() {
         super(...arguments);
+        this.bearing = 0;
+        this.cluster = false;
+        this.faceNorthLabel = 'Face north';
+        this.hybridLabel = 'Hybrid';
         this.label = '';
+        this.layersLabel = 'Map layers';
+        this.mapPreviews = {};
+        this.mapTypeLabel = 'Map type';
+        this.pitch = 0;
+        this.rotateLeftLabel = 'Rotate left';
+        this.rotateRightLabel = 'Rotate right';
+        this.satelliteLabel = 'Satellite';
+        this.standardLabel = 'Standard';
+        this.tiltLabel = 'Show in 3D';
+        this.layersOpen = false;
+        this.handleOutside = (event) => {
+            if (!event.composedPath().includes(this)) {
+                this.layersOpen = false;
+            }
+        };
+        this.handleMenuKeydown = (event) => {
+            event.stopPropagation();
+            if (event.key === 'Escape' && this.layersOpen) {
+                this.layersOpen = false;
+                this.renderRoot.querySelector('[part="layers-toggle"]')?.focus();
+            }
+        };
+        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 imagery() {
+        return this.layers.filter((layer) => layer.layerKind === 'raster' && layer.ground === true);
+    }
+    nameOf(type) {
+        return type === 'hybrid'
+            ? this.hybridLabel
+            : type === 'satellite'
+                ? this.satelliteLabel
+                : this.standardLabel;
+    }
+    showLayers(layers, shown) {
+        for (const layer of layers) {
+            layer.hidden = !shown;
+        }
+        this.requestUpdate();
+    }
+    get layerEntries() {
+        const entries = [];
+        const groups = new Map();
+        const imagery = this.imagery;
+        for (const layer of this.layers.filter((one) => !imagery.includes(one))) {
+            const had = layer.group ? groups.get(layer.group) : undefined;
+            if (had) {
+                had.push(layer);
+                continue;
+            }
+            const entry = [layer];
+            entries.push(entry);
+            if (layer.group) {
+                groups.set(layer.group, entry);
+            }
+        }
+        return entries;
+    }
+    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);
+        this.hiding = new MutationObserver(() => this.requestUpdate());
+        this.hiding.observe(this, { attributeFilter: ['hidden'], attributes: true, subtree: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.hiding?.disconnect();
+        document.removeEventListener('pointerdown', this.handleOutside);
+        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 photographed = this.mapType !== undefined;
+        for (const layer of this.imagery) {
+            if (layer.hidden === photographed) {
+                layer.hidden = !photographed;
+            }
+        }
+        if (changed.has('mapType')) {
+            this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'layer' }));
+        }
+        if (changed.has('layersOpen')) {
+            if (this.layersOpen) {
+                document.addEventListener('pointerdown', this.handleOutside);
+            }
+            else {
+                document.removeEventListener('pointerdown', this.handleOutside);
+            }
+        }
+        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' }));
+        }
+    }
+    rotate(by) {
+        this.dispatchEvent(new HelixMapRotateEvent({ by }));
+    }
+    faceNorth() {
+        this.dispatchEvent(new HelixMapRotateEvent({ to: 0 }));
+    }
+    tilt(by) {
+        this.dispatchEvent(new HelixMapTiltEvent({ by }));
+    }
+    tiltTo(to) {
+        this.dispatchEvent(new HelixMapTiltEvent({ to }));
+    }
+    renderLayersMenu() {
+        const layers = this.layers;
+        if (!this.drawsControls('layers') || layers.length === 0) {
+            return nothing;
+        }
+        const entries = this.layerEntries;
+        return html `<button
+        part="layers-toggle"
+        aria-controls="layers-menu"
+        aria-expanded=${this.layersOpen ? 'true' : 'false'}
+        aria-label=${this.layersLabel}
+        type="button"
+        @click=${() => {
+            this.layersOpen = !this.layersOpen;
+            if (this.layersOpen) {
+                this.dispatchEvent(new HelixMapPartChangeEvent({ kind: 'menu' }));
+            }
+        }}
+        @keydown=${this.handleMenuKeydown}
+      >
+        <svg aria-hidden="true" fill="currentColor" height="16" viewBox=${stack.viewBox} width="16">
+          ${unsafeSVG(stack.content)}
+        </svg>
+      </button>
+      <div
+        part="layers-menu"
+        id="layers-menu"
+        role="group"
+        aria-label=${this.layersLabel}
+        ?hidden=${!this.layersOpen}
+        @keydown=${this.handleMenuKeydown}
+      >
+        ${this.imagery.length > 0 ? this.renderMapTypes() : nothing}
+        ${entries.length > 0
+            ? html `<div part="layer-choices">
+                ${entries.map((entry) => {
+                const shown = entry.some((layer) => !layer.hidden);
+                return html `<button
+                    part="layer-choice"
+                    aria-pressed=${shown ? 'true' : 'false'}
+                    type="button"
+                    @click=${() => this.showLayers(entry, !shown)}
+                  >
+                    <svg part="layer-icon" aria-hidden="true" fill="currentColor" viewBox=${iconOf(entry[0]).viewBox}>
+                      ${unsafeSVG(iconOf(entry[0]).content)}
+                    </svg>
+                    <span part="layer-name">${entry[0]?.label ?? ''}</span>
+                  </button>`;
+            })}
+              </div>`
+            : nothing}
+      </div>`;
+    }
+    renderMapTypes() {
+        const chosen = this.mapType ?? 'standard';
+        return html `<div part="map-types" role="radiogroup" aria-label=${this.mapTypeLabel}>
+      ${MAP_TYPES.map((type) => {
+            const preview = this.mapPreviews[type];
+            return html `<label part="map-type">
+          <input
+            type="radio"
+            name="map-type"
+            .checked=${chosen === type}
+            @change=${() => {
+                this.mapType = type === 'standard' ? undefined : type;
+            }}
+          />
+          ${preview
+                ? html `<img part="map-type-preview" alt="" src=${preview} />`
+                : html `<span part="map-type-preview"></span>`}
+          <span part="map-type-name">${this.nameOf(type)}</span>
+        </label>`;
+        })}
+    </div>`;
+    }
+    renderCompass(pan, rotate) {
+        return html `<div part="compass">
+      ${rotate
+            ? html `<button part="rotate-left" aria-label=${this.rotateLeftLabel} type="button" @click=${() => this.rotate(-ROTATE_STEP)}>
+              ↺
+            </button>`
+            : nothing}
+      ${pan
+            ? html `<button part="pan-up" aria-label=${this.panLabel('up')} type="button" @click=${() => this.pan('up')}>
+              ${this.panGlyph('up')}
+            </button>`
+            : nothing}
+      ${rotate
+            ? html `<button part="rotate-right" aria-label=${this.rotateRightLabel} type="button" @click=${() => this.rotate(ROTATE_STEP)}>
+              ↻
+            </button>`
+            : nothing}
+      ${pan
+            ? html `<button part="pan-start" aria-label=${this.panLabel('start')} type="button" @click=${() => this.pan('start')}>
+              ${this.panGlyph('start')}
+            </button>`
+            : nothing}
+      <button part="face-north" aria-label=${this.faceNorthLabel} type="button" style=${`--map-needle-turn: ${-this.bearing}deg`} @click=${() => this.faceNorth()}>
+        <svg part="needle" aria-hidden="true" viewBox="0 0 16 16">
+          <path data-end="north" d="M8 1.5 10.5 8h-5Z" />
+          <path data-end="south" d="M8 14.5 5.5 8h5Z" />
+        </svg>
+      </button>
+      ${pan
+            ? html `<button part="pan-end" aria-label=${this.panLabel('end')} type="button" @click=${() => this.pan('end')}>
+              ${this.panGlyph('end')}
+            </button>`
+            : nothing}
+      ${pan
+            ? html `<button part="pan-down" aria-label=${this.panLabel('down')} type="button" @click=${() => this.pan('down')}>
+              ${this.panGlyph('down')}
+            </button>`
+            : nothing}
+    </div>`;
+    }
+    renderControls() {
+        const pan = this.drawsControls('pan');
+        const zoom = this.drawsControls('zoom');
+        const rotate = this.drawsControls('rotate');
+        const tilt = this.drawsControls('tilt');
+        const fullscreen = this.drawsControls('fullscreen');
+        const menu = this.renderLayersMenu();
+        if (!pan && !zoom && !rotate && !tilt && !fullscreen && menu === nothing) {
+            return nothing;
+        }
+        return html `<div part="controls" role="group" aria-label=${this.controlsLabel ?? this.restingControlsLabel}>
+      ${fullscreen
+            ? html `<button
+              part="fullscreen"
+              aria-label=${this.fullscreenLabel}
+              aria-pressed=${this.filled ? 'true' : 'false'}
+              type="button"
+              @click=${this.toggleFullscreen}
+            >
+              ⤢
+            </button>`
+            : nothing}
+      ${menu}
+      ${tilt
+            ? html `<button
+              part="tilt"
+              aria-label=${this.tiltLabel}
+              aria-pressed=${this.pitch > 0 ? 'true' : 'false'}
+              type="button"
+              @click=${() => this.tiltTo(this.pitch > 0 ? 0 : TILTED)}
+            >
+              3D
+            </button>`
+            : nothing}
+      ${zoom
+            ? html `<button part="zoom-in" aria-label=${this.zoomInLabel} type="button" @click=${() => this.zoom(1)}>
+                +
+              </button>
+              <button part="zoom-out" aria-label=${this.zoomOutLabel} type="button" @click=${() => this.zoom(-1)}>
+                −
+              </button>`
+            : nothing}
+      ${this.drawsCompass ? this.renderCompass(pan, rotate) : nothing}
+    </div>`;
+    }
+    get restingControls() {
+        return 'zoom compass fullscreen';
+    }
+    get drawsCompass() {
+        return ['compass', 'pan', 'rotate'].some((group) => this.drawsControls(group));
+    }
+    get keyShortcuts() {
+        const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Plus', 'Minus'];
+        if (this.drawsCompass) {
+            keys.push('Shift+ArrowLeft', 'Shift+ArrowRight');
+        }
+        if (this.drawsControls('tilt')) {
+            keys.push('Shift+ArrowUp', 'Shift+ArrowDown');
+        }
+        return keys.join(' ');
+    }
+    handleMoreKeys(event) {
+        if (!event.shiftKey) {
+            return false;
+        }
+        if (this.drawsCompass && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+            this.rotate(event.key === 'ArrowLeft' ? -ROTATE_STEP : ROTATE_STEP);
+            return true;
+        }
+        if (this.drawsControls('tilt') && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+            this.tilt(event.key === 'ArrowUp' ? TILT_STEP : -TILT_STEP);
+            return true;
+        }
+        return false;
     }
     panEvent(detail) {
         return new HelixMapPanEvent(detail);
@@ -27,12 +437,21 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
     }
+    renderLayers() {
+        const layers = this.layers.filter((layer) => !layer.hidden);
+        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"
       role="group"
       aria-label=${this.label || 'Map'}
-      aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight Plus Minus"
+      aria-keyshortcuts=${this.keyShortcuts}
       tabindex="0"
       @focusin=${this.idle.stir}
       @keydown=${this.handleKeydown}
@@ -43,8 +462,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 +475,57 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     </div>`;
     }
 };
+__decorate([
+    property({ type: Number })
+], HelixHeadlessMap.prototype, "bearing", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessMap.prototype, "cluster", void 0);
+__decorate([
+    property({ attribute: 'face-north-label' })
+], HelixHeadlessMap.prototype, "faceNorthLabel", void 0);
+__decorate([
+    property({ attribute: 'hybrid-label' })
+], HelixHeadlessMap.prototype, "hybridLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessMap.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'layers-label' })
+], HelixHeadlessMap.prototype, "layersLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessMap.prototype, "mapPreviews", void 0);
+__decorate([
+    property({ attribute: 'map-type', reflect: true })
+], HelixHeadlessMap.prototype, "mapType", void 0);
+__decorate([
+    property({ attribute: 'map-type-label' })
+], HelixHeadlessMap.prototype, "mapTypeLabel", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessMap.prototype, "pitch", void 0);
+__decorate([
+    property({ attribute: 'rotate-left-label' })
+], HelixHeadlessMap.prototype, "rotateLeftLabel", void 0);
+__decorate([
+    property({ attribute: 'rotate-right-label' })
+], HelixHeadlessMap.prototype, "rotateRightLabel", void 0);
+__decorate([
+    property({ attribute: 'satellite-label' })
+], HelixHeadlessMap.prototype, "satelliteLabel", void 0);
+__decorate([
+    property({ attribute: 'standard-label' })
+], HelixHeadlessMap.prototype, "standardLabel", void 0);
+__decorate([
+    property({ attribute: 'tilt-label' })
+], HelixHeadlessMap.prototype, "tiltLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessMap.prototype, "layersOpen", 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,73 @@
+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;
+    /**
+     * A name this layer shares with other layers, such as a route and its
+     * dotted legs. The layers menu shows layers in the same group as one entry,
+     * named by the first of them, and its checkbox shows or hides them all.
+     */
+    group?: 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,52 @@
+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, "group", 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 };