@fieldia/map 0.14.0 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -7
- package/package.json +5 -4
- package/src/index.d.mts +3 -0
- package/src/index.d.ts +3 -0
- package/src/index.js +5 -1
- package/src/index.js.map +1 -1
- package/src/index.mjs +2 -0
- package/src/index.mjs.map +1 -1
- package/src/lib/area.js +29 -246
- package/src/lib/area.js.map +1 -1
- package/src/lib/area.mjs +29 -246
- package/src/lib/area.mjs.map +1 -1
- package/src/lib/card.d.mts +45 -0
- package/src/lib/card.d.ts +45 -0
- package/src/lib/card.js +89 -0
- package/src/lib/card.js.map +1 -0
- package/src/lib/card.mjs +85 -0
- package/src/lib/card.mjs.map +1 -0
- package/src/lib/cluster.d.mts +12 -0
- package/src/lib/cluster.d.ts +12 -0
- package/src/lib/cluster.js +60 -0
- package/src/lib/cluster.js.map +1 -0
- package/src/lib/cluster.mjs +57 -0
- package/src/lib/cluster.mjs.map +1 -0
- package/src/lib/drawing.d.mts +36 -0
- package/src/lib/drawing.d.ts +36 -0
- package/src/lib/drawing.js +267 -0
- package/src/lib/drawing.js.map +1 -0
- package/src/lib/drawing.mjs +263 -0
- package/src/lib/drawing.mjs.map +1 -0
- package/src/lib/kinds.js +9 -2
- package/src/lib/kinds.js.map +1 -1
- package/src/lib/kinds.mjs +9 -2
- package/src/lib/kinds.mjs.map +1 -1
- package/src/lib/labels.d.mts +32 -0
- package/src/lib/labels.d.ts +32 -0
- package/src/lib/labels.js +88 -1
- package/src/lib/labels.js.map +1 -1
- package/src/lib/labels.mjs +86 -0
- package/src/lib/labels.mjs.map +1 -1
- package/src/lib/list-view.d.mts +13 -0
- package/src/lib/list-view.d.ts +13 -0
- package/src/lib/list-view.js +481 -0
- package/src/lib/list-view.js.map +1 -0
- package/src/lib/list-view.mjs +478 -0
- package/src/lib/list-view.mjs.map +1 -0
- package/src/lib/map-core.d.mts +4 -2
- package/src/lib/map-core.d.ts +4 -2
- package/src/lib/map-core.js +19 -7
- package/src/lib/map-core.js.map +1 -1
- package/src/lib/map-core.mjs +18 -7
- package/src/lib/map-core.mjs.map +1 -1
- package/src/lib/map-icons.d.mts +8 -0
- package/src/lib/map-icons.d.ts +8 -0
- package/src/lib/map-icons.js +21 -0
- package/src/lib/map-icons.js.map +1 -0
- package/src/lib/map-icons.mjs +18 -0
- package/src/lib/map-icons.mjs.map +1 -0
- package/src/lib/pins.d.mts +56 -0
- package/src/lib/pins.d.ts +56 -0
- package/src/lib/pins.js +161 -0
- package/src/lib/pins.js.map +1 -0
- package/src/lib/pins.mjs +154 -0
- package/src/lib/pins.mjs.map +1 -0
- package/src/lib/place.d.mts +1 -1
- package/src/lib/place.d.ts +1 -1
- package/src/lib/place.js +46 -6
- package/src/lib/place.js.map +1 -1
- package/src/lib/place.mjs +48 -8
- package/src/lib/place.mjs.map +1 -1
- package/src/lib/providers.d.mts +29 -8
- package/src/lib/providers.d.ts +29 -8
- package/src/lib/providers.js +217 -33
- package/src/lib/providers.js.map +1 -1
- package/src/lib/providers.mjs +217 -33
- package/src/lib/providers.mjs.map +1 -1
- package/src/lib/search-box.d.mts +4 -2
- package/src/lib/search-box.d.ts +4 -2
- package/src/lib/search-box.js +20 -6
- package/src/lib/search-box.js.map +1 -1
- package/src/lib/search-box.mjs +20 -6
- package/src/lib/search-box.mjs.map +1 -1
- package/src/lib/settings.d.mts +5 -2
- package/src/lib/settings.d.ts +5 -2
- package/src/lib/styles.d.mts +9 -1
- package/src/lib/styles.d.ts +9 -1
- package/src/lib/styles.js +146 -2
- package/src/lib/styles.js.map +1 -1
- package/src/lib/styles.mjs +144 -1
- package/src/lib/styles.mjs.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-box.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/search-box.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"search-box.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/search-box.ts"],"names":[],"mappings":"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"}
|
package/src/lib/settings.d.mts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Locale } from '@fieldia/core';
|
|
2
2
|
import type { LatLng } from './geo.mjs';
|
|
3
|
-
import type { MapLabels } from './labels.mjs';
|
|
3
|
+
import type { ListMapLabels, MapLabels } from './labels.mjs';
|
|
4
|
+
import type { PinDrawer } from './pins.mjs';
|
|
4
5
|
import type { AddressSearch, MapProvider, ReverseSearch } from './providers.mjs';
|
|
5
6
|
/** What every map of an app shares: given once to `mapWidgets`. */
|
|
6
7
|
export interface MapSettings {
|
|
@@ -14,6 +15,8 @@ export interface MapSettings {
|
|
|
14
15
|
/** Where an empty map opens, and how close. */
|
|
15
16
|
center?: LatLng;
|
|
16
17
|
zoom?: number;
|
|
18
|
+
/** The app's own pins for a list's map, by the name a page's `pin.widget` gives. */
|
|
19
|
+
pins?: Record<string, PinDrawer>;
|
|
17
20
|
/** The app's own words over the maps', by language. */
|
|
18
|
-
labels?: Partial<Record<Locale, Partial<MapLabels>>>;
|
|
21
|
+
labels?: Partial<Record<Locale, Partial<MapLabels & ListMapLabels>>>;
|
|
19
22
|
}
|
package/src/lib/settings.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Locale } from '@fieldia/core';
|
|
2
2
|
import type { LatLng } from './geo';
|
|
3
|
-
import type { MapLabels } from './labels';
|
|
3
|
+
import type { ListMapLabels, MapLabels } from './labels';
|
|
4
|
+
import type { PinDrawer } from './pins';
|
|
4
5
|
import type { AddressSearch, MapProvider, ReverseSearch } from './providers';
|
|
5
6
|
/** What every map of an app shares: given once to `mapWidgets`. */
|
|
6
7
|
export interface MapSettings {
|
|
@@ -14,6 +15,8 @@ export interface MapSettings {
|
|
|
14
15
|
/** Where an empty map opens, and how close. */
|
|
15
16
|
center?: LatLng;
|
|
16
17
|
zoom?: number;
|
|
18
|
+
/** The app's own pins for a list's map, by the name a page's `pin.widget` gives. */
|
|
19
|
+
pins?: Record<string, PinDrawer>;
|
|
17
20
|
/** The app's own words over the maps', by language. */
|
|
18
|
-
labels?: Partial<Record<Locale, Partial<MapLabels>>>;
|
|
21
|
+
labels?: Partial<Record<Locale, Partial<MapLabels & ListMapLabels>>>;
|
|
19
22
|
}
|
package/src/lib/styles.d.mts
CHANGED
|
@@ -4,8 +4,16 @@
|
|
|
4
4
|
* grips. Fixed on purpose: the veil over the map that asks for two fingers
|
|
5
5
|
* or Ctrl (white words on a dark veil, as an image's caption has them).
|
|
6
6
|
*/
|
|
7
|
-
export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-width: 0; }\n.fd-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-map-tools .fd-button { min-height: 32px; padding-inline: 10px; }\n.fd-map-tools .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-tools .fd-button svg { width: 16px; height: 16px; flex: none; }\n.fd-map-search { position: relative; flex: 1 1 220px; min-width: 0; }\n.fd-map-results {\n position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1100; margin: 0; padding: 4px; list-style: none;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;\n}\n.fd-map-results [role=\"option\"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; }\n.fd-map-results [role=\"option\"][aria-selected=\"true\"], .fd-map-results [role=\"option\"]:hover { background: var(--fd-accent-soft); }\n.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }\n.fd-map-box {\n position: relative; height: var(--fd-map-height, 280px); min-height: 160px; overflow: hidden; isolation: isolate;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-fill);\n}\n.fd-map-box.leaflet-container:focus { outline: none; }\n.fd-map-box.leaflet-container[data-keys]:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-box.leaflet-container { font: inherit; background: var(--fd-fill); }\n.fd-map-zoom { position: absolute; top: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-zoom[data-side=\"right\"] { right: 8px; }\n.fd-map-zoom[data-side=\"left\"] { left: 8px; }\n.fd-map-zoom button {\n width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 18px/1 system-ui, sans-serif;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-credits {\n position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding: 1px 6px; font-size: 11px; line-height: 1.5;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text); border-top-left-radius: 4px;\n}\n.fd-map-credits a { color: inherit; }\n.fd-map-logo { position: absolute; left: 6px; bottom: 4px; z-index: 1000; display: inline-flex; align-items: center; text-decoration: none; }\n.fd-map-logo img { height: 18px; width: auto; display: block; }\n.fd-map-logo span {\n font: 700 12px/1.4 system-ui, sans-serif; padding: 0 5px; border-radius: 3px;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text);\n}\n.fd-map-veil {\n position: absolute; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; text-align: center;\n background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s;\n}\n.fd-map-veil[data-show] { opacity: 1; }\n.fd-map-crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 900; pointer-events: none; display: none; }\n.fd-map-crosshair::before, .fd-map-crosshair::after { content: \"\"; position: absolute; background: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-surface); }\n.fd-map-crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }\n.fd-map-crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }\n.fd-map-box[data-keys]:focus .fd-map-crosshair { display: block; }\n.fd-map-hint {\n position: absolute; top: 8px; left: 8px; right: 52px; z-index: 1000; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;\n padding: 6px 10px; font-size: 13px; line-height: 1.4; background: var(--fd-surface); color: var(--fd-text);\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 8px; }\n.fd-map-hint p { margin: 0; flex: 1 1 180px; min-width: 0; }\n.fd-map-hint .fd-button { min-height: 28px; padding: 2px 10px; }\n.fd-map-coords { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }\n.fd-map-coords label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fd-muted); }\n.fd-map-coords .fd-input { width: 12ch; font-variant-numeric: tabular-nums; }\n.fd-map-coords .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-map-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-map-note[data-tone=\"error\"] { color: var(--fd-error); }\n.fd-map-pin { width: 28px; height: 40px; }\n.fd-map-pin svg { display: block; width: 28px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-pin .fd-map-pin-body { fill: var(--fd-accent); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-pin .fd-map-pin-dot { fill: var(--fd-surface); }\n.fd-map-pin:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }\npath.fd-map-shape { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.16; }\npath.fd-map-shape.fd-map-movable { cursor: move; }\npath.fd-map-trace { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.08; stroke-dasharray: 6 5; pointer-events: none; }\n.fd-map-grip { width: 24px; height: 24px; display: grid; place-items: center; cursor: grab; }\n.fd-map-grip::after {\n content: \"\"; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;\n background: var(--fd-surface); border: 2px solid var(--fd-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n.fd-map-grip[data-closes]::after { width: 18px; height: 18px; background: var(--fd-accent); border-color: var(--fd-surface); }\n.fd-map-grip:focus-visible { outline: none; }\n.fd-map-grip:focus-visible::after { box-shadow: 0 0 0 3px var(--fd-focus); }\n.fd-map-field select.fd-input { width: auto; max-width: 100%; }\n/* One finger scrolls the page past a map, as on any page; two move it. While a shape is drawn, the map takes every touch. */\n.fd-map-box.leaflet-container, .fd-map-box.leaflet-touch-drag.leaflet-touch-zoom { touch-action: pan-x pan-y; }\n.fd-map-box.leaflet-container[data-drawing] { touch-action: none; }\n.fd-map-box .leaflet-marker-draggable { touch-action: none; }\n.fd-map-grip-add::after { width: 10px; height: 10px; opacity: 0.7; }\n/* Each image overlaps the next by a pixel (leaflet.ts): drawn plainly over it, not added to it as Leaflet's own seam fix adds light. */\n.fd-map-box.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }\n";
|
|
7
|
+
export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-width: 0; }\n.fd-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-map-tools .fd-button { min-height: 32px; padding-inline: 10px; }\n.fd-map-tools .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-tools .fd-button svg { width: 16px; height: 16px; flex: none; }\n.fd-map-search { position: relative; flex: 1 1 220px; min-width: 0; }\n.fd-map-results {\n position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1100; margin: 0; padding: 4px; list-style: none;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;\n}\n.fd-map-results [role=\"option\"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; display: grid; gap: 1px; }\n.fd-map-result-name { color: var(--fd-text); font-weight: 600; overflow-wrap: anywhere; }\n.fd-map-result-detail { color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }\n.fd-map-results [role=\"option\"][aria-selected=\"true\"], .fd-map-results [role=\"option\"]:hover { background: var(--fd-accent-soft); }\n.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }\n.fd-map-box {\n position: relative; height: var(--fd-map-height, 280px); min-height: 160px; overflow: hidden; isolation: isolate;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-fill);\n}\n.fd-map-box.leaflet-container:focus { outline: none; }\n.fd-map-box.leaflet-container[data-keys]:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-box.leaflet-container { font: inherit; background: var(--fd-fill); }\n.fd-map-zoom { position: absolute; top: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-zoom[data-side=\"right\"] { right: 8px; }\n.fd-map-zoom[data-side=\"left\"] { left: 8px; }\n.fd-map-zoom button {\n width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 18px/1 system-ui, sans-serif;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-credits {\n position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding: 1px 6px; font-size: 11px; line-height: 1.5;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text); border-top-left-radius: 4px;\n}\n.fd-map-credits a { color: inherit; }\n.fd-map-logo { position: absolute; left: 6px; bottom: 4px; z-index: 1000; display: inline-flex; align-items: center; text-decoration: none; }\n.fd-map-logo img { height: 18px; width: auto; display: block; }\n.fd-map-logo span {\n font: 700 12px/1.4 system-ui, sans-serif; padding: 0 5px; border-radius: 3px;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text);\n}\n.fd-map-veil {\n position: absolute; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; text-align: center;\n background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s;\n}\n.fd-map-veil[data-show] { opacity: 1; }\n.fd-map-crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 900; pointer-events: none; display: none; }\n.fd-map-crosshair::before, .fd-map-crosshair::after { content: \"\"; position: absolute; background: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-surface); }\n.fd-map-crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }\n.fd-map-crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }\n.fd-map-box[data-keys]:focus .fd-map-crosshair { display: block; }\n.fd-map-hint {\n position: absolute; top: 8px; left: 8px; right: 52px; z-index: 1000; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;\n padding: 6px 10px; font-size: 13px; line-height: 1.4; background: var(--fd-surface); color: var(--fd-text);\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 8px; }\n.fd-map-hint p { margin: 0; flex: 1 1 180px; min-width: 0; }\n.fd-map-hint .fd-button { min-height: 28px; padding: 2px 10px; }\n.fd-map-coords { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }\n.fd-map-coords label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fd-muted); }\n.fd-map-coords .fd-input { width: 12ch; font-variant-numeric: tabular-nums; }\n.fd-map-coords .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-map-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-map-note[data-tone=\"error\"] { color: var(--fd-error); }\n.fd-map-pin { width: 28px; height: 40px; }\n.fd-map-pin svg { display: block; width: 28px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-pin .fd-map-pin-body { fill: var(--fd-accent); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-pin .fd-map-pin-dot { fill: var(--fd-surface); }\n.fd-map-pin:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }\npath.fd-map-shape { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.16; }\npath.fd-map-shape.fd-map-movable { cursor: move; }\npath.fd-map-accuracy { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 1; fill-opacity: 0.08; stroke-dasharray: 4 4; pointer-events: none; }\npath.fd-map-trace { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.08; stroke-dasharray: 6 5; pointer-events: none; }\n.fd-map-grip { width: 24px; height: 24px; display: grid; place-items: center; cursor: grab; }\n.fd-map-grip::after {\n content: \"\"; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;\n background: var(--fd-surface); border: 2px solid var(--fd-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n.fd-map-grip[data-closes]::after { width: 18px; height: 18px; background: var(--fd-accent); border-color: var(--fd-surface); }\n.fd-map-grip:focus-visible { outline: none; }\n.fd-map-grip:focus-visible::after { box-shadow: 0 0 0 3px var(--fd-focus); }\n.fd-map-field select.fd-input { width: auto; max-width: 100%; }\n/* One finger scrolls the page past a map, as on any page; two move it. While a shape is drawn, the map takes every touch. */\n.fd-map-box.leaflet-container, .fd-map-box.leaflet-touch-drag.leaflet-touch-zoom { touch-action: pan-x pan-y; }\n.fd-map-box.leaflet-container[data-drawing] { touch-action: none; }\n.fd-map-box .leaflet-marker-draggable { touch-action: none; }\n.fd-map-grip-add::after { width: 10px; height: 10px; opacity: 0.7; }\n/* Each image overlaps the next by a pixel (leaflet.ts): drawn plainly over it, not added to it as Leaflet's own seam fix adds light. */\n.fd-map-box.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }\n";
|
|
8
8
|
/** The maps' own stylesheet, once per document: the tools, the search and the box are drawn before Leaflet has loaded. */
|
|
9
9
|
export declare function installMapStyles(doc: Document): void;
|
|
10
10
|
/** Leaflet's stylesheet, once per document, before the maps' own (which add to it): it comes with Leaflet. */
|
|
11
11
|
export declare function installLeafletStyles(doc: Document, css: string): void;
|
|
12
|
+
/**
|
|
13
|
+
* A list's map, on top of the maps' own: each record's pin in its look and
|
|
14
|
+
* tone, bubbles of pins that crowd, the card a pin opens, "Search this area".
|
|
15
|
+
* Its own stylesheet, so a form with only a place or an area never carries it.
|
|
16
|
+
*/
|
|
17
|
+
export declare const LIST_MAP_CSS = "\n.fd-map-list { min-width: 0; }\n.fd-map-mark { overflow: visible; }\n.fd-map-mark:focus { outline: none; }\n/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */\n.fd-map-mark.fd-map-foot { translate: -50% -100%; }\n.fd-map-mark.fd-map-middle { translate: -50% -50%; }\n.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }\n.fd-map-face {\n --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);\n position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;\n}\n.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }\n.fd-map-face[data-tone=\"info\"] { --fd-map-tone: var(--fd-info); }\n.fd-map-face[data-tone=\"success\"] { --fd-map-tone: var(--fd-success); }\n.fd-map-face[data-tone=\"warning\"] { --fd-map-tone: var(--fd-warning); }\n.fd-map-face[data-tone=\"danger\"] { --fd-map-tone: var(--fd-error); }\n.fd-map-face[data-tone=\"muted\"] { --fd-map-tone: var(--fd-muted); }\n.fd-map-face[data-stands=\"foot\"] { transform-origin: 50% 100%; }\n.fd-map-face[data-stands=\"middle\"] { transform-origin: 50% 50%; }\n.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }\n.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n.fd-map-face-icon { display: block; }\n.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }\n.fd-map-face[data-look=\"label\"] {\n padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;\n background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.fd-map-face[data-look=\"label\"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }\n.fd-map-face[data-look=\"label\"]::after {\n content: \"\"; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);\n background: inherit; border: inherit; border-top: 0; border-left: 0;\n}\n.fd-map-face[data-look=\"label\"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look=\"label\"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }\n.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-map-face[data-look=\"pin\"] { width: 30px; height: 40px; }\n.fd-map-face[data-look=\"pin\"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }\n.fd-map-face[data-look=\"icon\"] {\n width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;\n background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.fd-map-face[data-look=\"icon\"] .fd-map-face-icon { width: 20px; height: 20px; }\n.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }\n.fd-map-face-turn::before { content: \"\"; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }\n.fd-map-face-photo {\n display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;\n border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\nspan.fd-map-face-photo svg { width: 22px; height: 22px; }\n.fd-map-face[data-look=\"photo\"] .fd-map-face-text {\n position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;\n font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"dot\"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }\n.fd-map-face:is([data-look=\"icon\"], [data-look=\"dot\"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }\n.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {\n content: \"\u2713\"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;\n display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);\n}\n.fd-map-bubble {\n position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;\n background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;\n box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.fd-map-bubble[data-size=\"m\"] { width: 40px; height: 40px; }\n.fd-map-bubble[data-size=\"l\"] { width: 48px; height: 48px; }\n.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }\n.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }\n.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }\n.fd-map-card { display: grid; }\n.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }\n.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }\n.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }\n.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }\n.fd-map-card-close {\n flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;\n background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-map-card[dir=\"rtl\"] .fd-map-card-close { margin: -4px 0 -4px -6px; }\n.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }\n.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }\n.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }\n.fd-map-card-fields dt { color: var(--fd-muted); }\n.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }\n.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }\n.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }\n.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }\n.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }\n.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }\n.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\n.fd-map-here {\n position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;\n border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }\n.fd-map-ghost .fd-map-face { pointer-events: none; }\n/* The tools that draw an area to search in: at the map's start, the zoom at its end. */\n.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-box[data-side=\"left\"] .fd-map-draw { left: auto; right: 8px; }\n.fd-map-draw button {\n width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-draw button svg { width: 18px; height: 18px; }\n.fd-map-draw button:hover, .fd-map-draw button[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-draw button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* While an area is drawn, the pins let every press through to the map. */\n.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }\n/* The drawing's bar starts after the tools. */\n.fd-map-list .fd-map-hint { left: 48px; }\n.fd-map-list .fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 48px; }\n.fd-map-list-note {\n position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;\n background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);\n}\n";
|
|
18
|
+
/** The list map's stylesheet, once per document, after the maps' own. */
|
|
19
|
+
export declare function installListMapStyles(doc: Document): void;
|
package/src/lib/styles.d.ts
CHANGED
|
@@ -4,8 +4,16 @@
|
|
|
4
4
|
* grips. Fixed on purpose: the veil over the map that asks for two fingers
|
|
5
5
|
* or Ctrl (white words on a dark veil, as an image's caption has them).
|
|
6
6
|
*/
|
|
7
|
-
export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-width: 0; }\n.fd-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-map-tools .fd-button { min-height: 32px; padding-inline: 10px; }\n.fd-map-tools .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-tools .fd-button svg { width: 16px; height: 16px; flex: none; }\n.fd-map-search { position: relative; flex: 1 1 220px; min-width: 0; }\n.fd-map-results {\n position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1100; margin: 0; padding: 4px; list-style: none;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;\n}\n.fd-map-results [role=\"option\"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; }\n.fd-map-results [role=\"option\"][aria-selected=\"true\"], .fd-map-results [role=\"option\"]:hover { background: var(--fd-accent-soft); }\n.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }\n.fd-map-box {\n position: relative; height: var(--fd-map-height, 280px); min-height: 160px; overflow: hidden; isolation: isolate;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-fill);\n}\n.fd-map-box.leaflet-container:focus { outline: none; }\n.fd-map-box.leaflet-container[data-keys]:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-box.leaflet-container { font: inherit; background: var(--fd-fill); }\n.fd-map-zoom { position: absolute; top: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-zoom[data-side=\"right\"] { right: 8px; }\n.fd-map-zoom[data-side=\"left\"] { left: 8px; }\n.fd-map-zoom button {\n width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 18px/1 system-ui, sans-serif;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-credits {\n position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding: 1px 6px; font-size: 11px; line-height: 1.5;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text); border-top-left-radius: 4px;\n}\n.fd-map-credits a { color: inherit; }\n.fd-map-logo { position: absolute; left: 6px; bottom: 4px; z-index: 1000; display: inline-flex; align-items: center; text-decoration: none; }\n.fd-map-logo img { height: 18px; width: auto; display: block; }\n.fd-map-logo span {\n font: 700 12px/1.4 system-ui, sans-serif; padding: 0 5px; border-radius: 3px;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text);\n}\n.fd-map-veil {\n position: absolute; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; text-align: center;\n background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s;\n}\n.fd-map-veil[data-show] { opacity: 1; }\n.fd-map-crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 900; pointer-events: none; display: none; }\n.fd-map-crosshair::before, .fd-map-crosshair::after { content: \"\"; position: absolute; background: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-surface); }\n.fd-map-crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }\n.fd-map-crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }\n.fd-map-box[data-keys]:focus .fd-map-crosshair { display: block; }\n.fd-map-hint {\n position: absolute; top: 8px; left: 8px; right: 52px; z-index: 1000; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;\n padding: 6px 10px; font-size: 13px; line-height: 1.4; background: var(--fd-surface); color: var(--fd-text);\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 8px; }\n.fd-map-hint p { margin: 0; flex: 1 1 180px; min-width: 0; }\n.fd-map-hint .fd-button { min-height: 28px; padding: 2px 10px; }\n.fd-map-coords { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }\n.fd-map-coords label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fd-muted); }\n.fd-map-coords .fd-input { width: 12ch; font-variant-numeric: tabular-nums; }\n.fd-map-coords .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-map-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-map-note[data-tone=\"error\"] { color: var(--fd-error); }\n.fd-map-pin { width: 28px; height: 40px; }\n.fd-map-pin svg { display: block; width: 28px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-pin .fd-map-pin-body { fill: var(--fd-accent); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-pin .fd-map-pin-dot { fill: var(--fd-surface); }\n.fd-map-pin:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }\npath.fd-map-shape { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.16; }\npath.fd-map-shape.fd-map-movable { cursor: move; }\npath.fd-map-trace { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.08; stroke-dasharray: 6 5; pointer-events: none; }\n.fd-map-grip { width: 24px; height: 24px; display: grid; place-items: center; cursor: grab; }\n.fd-map-grip::after {\n content: \"\"; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;\n background: var(--fd-surface); border: 2px solid var(--fd-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n.fd-map-grip[data-closes]::after { width: 18px; height: 18px; background: var(--fd-accent); border-color: var(--fd-surface); }\n.fd-map-grip:focus-visible { outline: none; }\n.fd-map-grip:focus-visible::after { box-shadow: 0 0 0 3px var(--fd-focus); }\n.fd-map-field select.fd-input { width: auto; max-width: 100%; }\n/* One finger scrolls the page past a map, as on any page; two move it. While a shape is drawn, the map takes every touch. */\n.fd-map-box.leaflet-container, .fd-map-box.leaflet-touch-drag.leaflet-touch-zoom { touch-action: pan-x pan-y; }\n.fd-map-box.leaflet-container[data-drawing] { touch-action: none; }\n.fd-map-box .leaflet-marker-draggable { touch-action: none; }\n.fd-map-grip-add::after { width: 10px; height: 10px; opacity: 0.7; }\n/* Each image overlaps the next by a pixel (leaflet.ts): drawn plainly over it, not added to it as Leaflet's own seam fix adds light. */\n.fd-map-box.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }\n";
|
|
7
|
+
export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-width: 0; }\n.fd-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-map-tools .fd-button { min-height: 32px; padding-inline: 10px; }\n.fd-map-tools .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-tools .fd-button svg { width: 16px; height: 16px; flex: none; }\n.fd-map-search { position: relative; flex: 1 1 220px; min-width: 0; }\n.fd-map-results {\n position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1100; margin: 0; padding: 4px; list-style: none;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;\n}\n.fd-map-results [role=\"option\"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; display: grid; gap: 1px; }\n.fd-map-result-name { color: var(--fd-text); font-weight: 600; overflow-wrap: anywhere; }\n.fd-map-result-detail { color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }\n.fd-map-results [role=\"option\"][aria-selected=\"true\"], .fd-map-results [role=\"option\"]:hover { background: var(--fd-accent-soft); }\n.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }\n.fd-map-box {\n position: relative; height: var(--fd-map-height, 280px); min-height: 160px; overflow: hidden; isolation: isolate;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-fill);\n}\n.fd-map-box.leaflet-container:focus { outline: none; }\n.fd-map-box.leaflet-container[data-keys]:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-box.leaflet-container { font: inherit; background: var(--fd-fill); }\n.fd-map-zoom { position: absolute; top: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-zoom[data-side=\"right\"] { right: 8px; }\n.fd-map-zoom[data-side=\"left\"] { left: 8px; }\n.fd-map-zoom button {\n width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 18px/1 system-ui, sans-serif;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-credits {\n position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding: 1px 6px; font-size: 11px; line-height: 1.5;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text); border-top-left-radius: 4px;\n}\n.fd-map-credits a { color: inherit; }\n.fd-map-logo { position: absolute; left: 6px; bottom: 4px; z-index: 1000; display: inline-flex; align-items: center; text-decoration: none; }\n.fd-map-logo img { height: 18px; width: auto; display: block; }\n.fd-map-logo span {\n font: 700 12px/1.4 system-ui, sans-serif; padding: 0 5px; border-radius: 3px;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text);\n}\n.fd-map-veil {\n position: absolute; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; text-align: center;\n background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s;\n}\n.fd-map-veil[data-show] { opacity: 1; }\n.fd-map-crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 900; pointer-events: none; display: none; }\n.fd-map-crosshair::before, .fd-map-crosshair::after { content: \"\"; position: absolute; background: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-surface); }\n.fd-map-crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }\n.fd-map-crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }\n.fd-map-box[data-keys]:focus .fd-map-crosshair { display: block; }\n.fd-map-hint {\n position: absolute; top: 8px; left: 8px; right: 52px; z-index: 1000; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;\n padding: 6px 10px; font-size: 13px; line-height: 1.4; background: var(--fd-surface); color: var(--fd-text);\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 8px; }\n.fd-map-hint p { margin: 0; flex: 1 1 180px; min-width: 0; }\n.fd-map-hint .fd-button { min-height: 28px; padding: 2px 10px; }\n.fd-map-coords { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }\n.fd-map-coords label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fd-muted); }\n.fd-map-coords .fd-input { width: 12ch; font-variant-numeric: tabular-nums; }\n.fd-map-coords .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-map-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-map-note[data-tone=\"error\"] { color: var(--fd-error); }\n.fd-map-pin { width: 28px; height: 40px; }\n.fd-map-pin svg { display: block; width: 28px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-pin .fd-map-pin-body { fill: var(--fd-accent); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-pin .fd-map-pin-dot { fill: var(--fd-surface); }\n.fd-map-pin:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }\npath.fd-map-shape { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.16; }\npath.fd-map-shape.fd-map-movable { cursor: move; }\npath.fd-map-accuracy { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 1; fill-opacity: 0.08; stroke-dasharray: 4 4; pointer-events: none; }\npath.fd-map-trace { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.08; stroke-dasharray: 6 5; pointer-events: none; }\n.fd-map-grip { width: 24px; height: 24px; display: grid; place-items: center; cursor: grab; }\n.fd-map-grip::after {\n content: \"\"; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;\n background: var(--fd-surface); border: 2px solid var(--fd-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n.fd-map-grip[data-closes]::after { width: 18px; height: 18px; background: var(--fd-accent); border-color: var(--fd-surface); }\n.fd-map-grip:focus-visible { outline: none; }\n.fd-map-grip:focus-visible::after { box-shadow: 0 0 0 3px var(--fd-focus); }\n.fd-map-field select.fd-input { width: auto; max-width: 100%; }\n/* One finger scrolls the page past a map, as on any page; two move it. While a shape is drawn, the map takes every touch. */\n.fd-map-box.leaflet-container, .fd-map-box.leaflet-touch-drag.leaflet-touch-zoom { touch-action: pan-x pan-y; }\n.fd-map-box.leaflet-container[data-drawing] { touch-action: none; }\n.fd-map-box .leaflet-marker-draggable { touch-action: none; }\n.fd-map-grip-add::after { width: 10px; height: 10px; opacity: 0.7; }\n/* Each image overlaps the next by a pixel (leaflet.ts): drawn plainly over it, not added to it as Leaflet's own seam fix adds light. */\n.fd-map-box.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }\n";
|
|
8
8
|
/** The maps' own stylesheet, once per document: the tools, the search and the box are drawn before Leaflet has loaded. */
|
|
9
9
|
export declare function installMapStyles(doc: Document): void;
|
|
10
10
|
/** Leaflet's stylesheet, once per document, before the maps' own (which add to it): it comes with Leaflet. */
|
|
11
11
|
export declare function installLeafletStyles(doc: Document, css: string): void;
|
|
12
|
+
/**
|
|
13
|
+
* A list's map, on top of the maps' own: each record's pin in its look and
|
|
14
|
+
* tone, bubbles of pins that crowd, the card a pin opens, "Search this area".
|
|
15
|
+
* Its own stylesheet, so a form with only a place or an area never carries it.
|
|
16
|
+
*/
|
|
17
|
+
export declare const LIST_MAP_CSS = "\n.fd-map-list { min-width: 0; }\n.fd-map-mark { overflow: visible; }\n.fd-map-mark:focus { outline: none; }\n/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */\n.fd-map-mark.fd-map-foot { translate: -50% -100%; }\n.fd-map-mark.fd-map-middle { translate: -50% -50%; }\n.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }\n.fd-map-face {\n --fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);\n position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;\n}\n.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }\n.fd-map-face[data-tone=\"info\"] { --fd-map-tone: var(--fd-info); }\n.fd-map-face[data-tone=\"success\"] { --fd-map-tone: var(--fd-success); }\n.fd-map-face[data-tone=\"warning\"] { --fd-map-tone: var(--fd-warning); }\n.fd-map-face[data-tone=\"danger\"] { --fd-map-tone: var(--fd-error); }\n.fd-map-face[data-tone=\"muted\"] { --fd-map-tone: var(--fd-muted); }\n.fd-map-face[data-stands=\"foot\"] { transform-origin: 50% 100%; }\n.fd-map-face[data-stands=\"middle\"] { transform-origin: 50% 50%; }\n.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }\n.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }\n.fd-map-face-icon { display: block; }\n.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }\n.fd-map-face[data-look=\"label\"] {\n padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;\n background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.fd-map-face[data-look=\"label\"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }\n.fd-map-face[data-look=\"label\"]::after {\n content: \"\"; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);\n background: inherit; border: inherit; border-top: 0; border-left: 0;\n}\n.fd-map-face[data-look=\"label\"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look=\"label\"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }\n.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.fd-map-face[data-look=\"pin\"] { width: 30px; height: 40px; }\n.fd-map-face[data-look=\"pin\"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }\n.fd-map-face[data-look=\"pin\"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }\n.fd-map-face[data-look=\"icon\"] {\n width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;\n background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\n.fd-map-face[data-look=\"icon\"] .fd-map-face-icon { width: 20px; height: 20px; }\n.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }\n.fd-map-face-turn::before { content: \"\"; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }\n.fd-map-face-photo {\n display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;\n border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n}\nspan.fd-map-face-photo svg { width: 22px; height: 22px; }\n.fd-map-face[data-look=\"photo\"] .fd-map-face-text {\n position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;\n font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n.fd-map-face[data-look=\"dot\"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }\n.fd-map-face:is([data-look=\"icon\"], [data-look=\"dot\"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }\n.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {\n content: \"\u2713\"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;\n display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);\n}\n.fd-map-bubble {\n position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;\n background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;\n box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.fd-map-bubble[data-size=\"m\"] { width: 40px; height: 40px; }\n.fd-map-bubble[data-size=\"l\"] { width: 48px; height: 48px; }\n.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }\n.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }\n.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }\n.fd-map-card { display: grid; }\n.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }\n.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }\n.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }\n.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }\n.fd-map-card-close {\n flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;\n background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;\n}\n.fd-map-card[dir=\"rtl\"] .fd-map-card-close { margin: -4px 0 -4px -6px; }\n.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }\n.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }\n.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }\n.fd-map-card-fields dt { color: var(--fd-muted); }\n.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }\n.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }\n.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }\n.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }\n.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }\n.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }\n.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }\n.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }\n.fd-map-here {\n position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;\n border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n}\n.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }\n/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */\n@container fd-list (max-width: 860px) { .fd-list[data-view=\"both\"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }\n.fd-map-ghost .fd-map-face { pointer-events: none; }\n/* The tools that draw an area to search in: at the map's start, the zoom at its end. */\n.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-box[data-side=\"left\"] .fd-map-draw { left: auto; right: 8px; }\n.fd-map-draw button {\n width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-draw button svg { width: 18px; height: 18px; }\n.fd-map-draw button:hover, .fd-map-draw button[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-draw button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); }\n.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n/* While an area is drawn, the pins let every press through to the map. */\n.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }\n/* The drawing's bar starts after the tools. */\n.fd-map-list .fd-map-hint { left: 48px; }\n.fd-map-list .fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 48px; }\n.fd-map-list-note {\n position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;\n background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);\n}\n";
|
|
18
|
+
/** The list map's stylesheet, once per document, after the maps' own. */
|
|
19
|
+
export declare function installListMapStyles(doc: Document): void;
|
package/src/lib/styles.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.MAP_CSS = void 0;
|
|
3
|
+
exports.LIST_MAP_CSS = exports.MAP_CSS = void 0;
|
|
4
4
|
exports.installMapStyles = installMapStyles;
|
|
5
5
|
exports.installLeafletStyles = installLeafletStyles;
|
|
6
|
+
exports.installListMapStyles = installListMapStyles;
|
|
6
7
|
/**
|
|
7
8
|
* The maps in Fieldia's colours: every colour a token, so a theme, a host's
|
|
8
9
|
* tokens and the dark scheme reach the map's buttons, search, shapes and
|
|
@@ -21,7 +22,9 @@ exports.MAP_CSS = `
|
|
|
21
22
|
background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);
|
|
22
23
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;
|
|
23
24
|
}
|
|
24
|
-
.fd-map-results [role="option"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; }
|
|
25
|
+
.fd-map-results [role="option"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; display: grid; gap: 1px; }
|
|
26
|
+
.fd-map-result-name { color: var(--fd-text); font-weight: 600; overflow-wrap: anywhere; }
|
|
27
|
+
.fd-map-result-detail { color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }
|
|
25
28
|
.fd-map-results [role="option"][aria-selected="true"], .fd-map-results [role="option"]:hover { background: var(--fd-accent-soft); }
|
|
26
29
|
.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }
|
|
27
30
|
.fd-map-box {
|
|
@@ -83,6 +86,7 @@ exports.MAP_CSS = `
|
|
|
83
86
|
.fd-map-pin:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }
|
|
84
87
|
path.fd-map-shape { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.16; }
|
|
85
88
|
path.fd-map-shape.fd-map-movable { cursor: move; }
|
|
89
|
+
path.fd-map-accuracy { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 1; fill-opacity: 0.08; stroke-dasharray: 4 4; pointer-events: none; }
|
|
86
90
|
path.fd-map-trace { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.08; stroke-dasharray: 6 5; pointer-events: none; }
|
|
87
91
|
.fd-map-grip { width: 24px; height: 24px; display: grid; place-items: center; cursor: grab; }
|
|
88
92
|
.fd-map-grip::after {
|
|
@@ -124,4 +128,144 @@ function installLeafletStyles(doc, css) {
|
|
|
124
128
|
else
|
|
125
129
|
doc.head.prepend(leaflet);
|
|
126
130
|
}
|
|
131
|
+
/**
|
|
132
|
+
* A list's map, on top of the maps' own: each record's pin in its look and
|
|
133
|
+
* tone, bubbles of pins that crowd, the card a pin opens, "Search this area".
|
|
134
|
+
* Its own stylesheet, so a form with only a place or an area never carries it.
|
|
135
|
+
*/
|
|
136
|
+
exports.LIST_MAP_CSS = `
|
|
137
|
+
.fd-map-list { min-width: 0; }
|
|
138
|
+
.fd-map-mark { overflow: visible; }
|
|
139
|
+
.fd-map-mark:focus { outline: none; }
|
|
140
|
+
/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */
|
|
141
|
+
.fd-map-mark.fd-map-foot { translate: -50% -100%; }
|
|
142
|
+
.fd-map-mark.fd-map-middle { translate: -50% -50%; }
|
|
143
|
+
.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }
|
|
144
|
+
.fd-map-face {
|
|
145
|
+
--fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);
|
|
146
|
+
position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;
|
|
147
|
+
}
|
|
148
|
+
.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }
|
|
149
|
+
.fd-map-face[data-tone="info"] { --fd-map-tone: var(--fd-info); }
|
|
150
|
+
.fd-map-face[data-tone="success"] { --fd-map-tone: var(--fd-success); }
|
|
151
|
+
.fd-map-face[data-tone="warning"] { --fd-map-tone: var(--fd-warning); }
|
|
152
|
+
.fd-map-face[data-tone="danger"] { --fd-map-tone: var(--fd-error); }
|
|
153
|
+
.fd-map-face[data-tone="muted"] { --fd-map-tone: var(--fd-muted); }
|
|
154
|
+
.fd-map-face[data-stands="foot"] { transform-origin: 50% 100%; }
|
|
155
|
+
.fd-map-face[data-stands="middle"] { transform-origin: 50% 50%; }
|
|
156
|
+
.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }
|
|
157
|
+
.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }
|
|
158
|
+
.fd-map-face-icon { display: block; }
|
|
159
|
+
.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }
|
|
160
|
+
.fd-map-face[data-look="label"] {
|
|
161
|
+
padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;
|
|
162
|
+
background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
|
|
163
|
+
}
|
|
164
|
+
.fd-map-face[data-look="label"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }
|
|
165
|
+
.fd-map-face[data-look="label"]::after {
|
|
166
|
+
content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
|
|
167
|
+
background: inherit; border: inherit; border-top: 0; border-left: 0;
|
|
168
|
+
}
|
|
169
|
+
.fd-map-face[data-look="label"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look="label"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }
|
|
170
|
+
.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
171
|
+
.fd-map-face[data-look="pin"] { width: 30px; height: 40px; }
|
|
172
|
+
.fd-map-face[data-look="pin"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
|
|
173
|
+
.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }
|
|
174
|
+
.fd-map-face[data-look="pin"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }
|
|
175
|
+
.fd-map-face[data-look="pin"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }
|
|
176
|
+
.fd-map-face[data-look="icon"] {
|
|
177
|
+
width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
|
|
178
|
+
background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
|
|
179
|
+
}
|
|
180
|
+
.fd-map-face[data-look="icon"] .fd-map-face-icon { width: 20px; height: 20px; }
|
|
181
|
+
.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }
|
|
182
|
+
.fd-map-face-turn::before { content: ""; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }
|
|
183
|
+
.fd-map-face-photo {
|
|
184
|
+
display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;
|
|
185
|
+
border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
|
|
186
|
+
}
|
|
187
|
+
span.fd-map-face-photo svg { width: 22px; height: 22px; }
|
|
188
|
+
.fd-map-face[data-look="photo"] .fd-map-face-text {
|
|
189
|
+
position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;
|
|
190
|
+
font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
191
|
+
}
|
|
192
|
+
.fd-map-face[data-look="dot"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
|
|
193
|
+
.fd-map-face:is([data-look="icon"], [data-look="dot"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }
|
|
194
|
+
.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {
|
|
195
|
+
content: "✓"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
|
|
196
|
+
display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);
|
|
197
|
+
}
|
|
198
|
+
.fd-map-bubble {
|
|
199
|
+
position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
|
|
200
|
+
background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;
|
|
201
|
+
box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);
|
|
202
|
+
}
|
|
203
|
+
.fd-map-bubble[data-size="m"] { width: 40px; height: 40px; }
|
|
204
|
+
.fd-map-bubble[data-size="l"] { width: 48px; height: 48px; }
|
|
205
|
+
.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }
|
|
206
|
+
.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }
|
|
207
|
+
.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }
|
|
208
|
+
.fd-map-card { display: grid; }
|
|
209
|
+
.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }
|
|
210
|
+
.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }
|
|
211
|
+
.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
212
|
+
.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
|
|
213
|
+
.fd-map-card-close {
|
|
214
|
+
flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
|
|
215
|
+
background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;
|
|
216
|
+
}
|
|
217
|
+
.fd-map-card[dir="rtl"] .fd-map-card-close { margin: -4px 0 -4px -6px; }
|
|
218
|
+
.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }
|
|
219
|
+
.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }
|
|
220
|
+
.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }
|
|
221
|
+
.fd-map-card-fields dt { color: var(--fd-muted); }
|
|
222
|
+
.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
|
|
223
|
+
.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
|
|
224
|
+
.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
|
|
225
|
+
.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }
|
|
226
|
+
.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }
|
|
227
|
+
.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
|
|
228
|
+
.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }
|
|
229
|
+
.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }
|
|
230
|
+
.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }
|
|
231
|
+
.fd-map-here {
|
|
232
|
+
position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
|
|
233
|
+
border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
234
|
+
}
|
|
235
|
+
.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }
|
|
236
|
+
.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
|
|
237
|
+
/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */
|
|
238
|
+
@container fd-list (max-width: 860px) { .fd-list[data-view="both"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }
|
|
239
|
+
.fd-map-ghost .fd-map-face { pointer-events: none; }
|
|
240
|
+
/* The tools that draw an area to search in: at the map's start, the zoom at its end. */
|
|
241
|
+
.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }
|
|
242
|
+
.fd-map-box[data-side="left"] .fd-map-draw { left: auto; right: 8px; }
|
|
243
|
+
.fd-map-draw button {
|
|
244
|
+
width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;
|
|
245
|
+
background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
|
246
|
+
}
|
|
247
|
+
.fd-map-draw button svg { width: 18px; height: 18px; }
|
|
248
|
+
.fd-map-draw button:hover, .fd-map-draw button[aria-pressed="true"] { color: var(--fd-accent); border-color: var(--fd-accent); }
|
|
249
|
+
.fd-map-draw button[aria-pressed="true"] { background: var(--fd-accent-soft); }
|
|
250
|
+
.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
|
|
251
|
+
/* While an area is drawn, the pins let every press through to the map. */
|
|
252
|
+
.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }
|
|
253
|
+
/* The drawing's bar starts after the tools. */
|
|
254
|
+
.fd-map-list .fd-map-hint { left: 48px; }
|
|
255
|
+
.fd-map-list .fd-map-box[data-side="left"] .fd-map-hint { left: 52px; right: 48px; }
|
|
256
|
+
.fd-map-list-note {
|
|
257
|
+
position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;
|
|
258
|
+
background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
|
|
259
|
+
}
|
|
260
|
+
`;
|
|
261
|
+
/** The list map's stylesheet, once per document, after the maps' own. */
|
|
262
|
+
function installListMapStyles(doc) {
|
|
263
|
+
installMapStyles(doc);
|
|
264
|
+
if (doc.getElementById('fieldia-list-map-styles'))
|
|
265
|
+
return;
|
|
266
|
+
const own = doc.createElement('style');
|
|
267
|
+
own.id = 'fieldia-list-map-styles';
|
|
268
|
+
own.textContent = exports.LIST_MAP_CSS;
|
|
269
|
+
doc.getElementById('fieldia-map-styles')?.after(own);
|
|
270
|
+
}
|
|
127
271
|
//# sourceMappingURL=styles.js.map
|
package/src/lib/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":";;;AAuGA,4CAOC;AAGD,oDAQC;AAsID,oDAOC;AAtQD;;;;;GAKG;AACU,QAAA,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FtB,CAAC;AAEF,0HAA0H;AAC1H,SAAgB,gBAAgB,CAAC,GAAa;IAC5C,IAAI,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC;QAAE,OAAO;IACrD,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,oBAAoB,CAAC;IAC9B,GAAG,CAAC,WAAW,GAAG,eAAO,CAAC;IAC1B,4EAA4E;IAC5E,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AACxB,CAAC;AAED,8GAA8G;AAC9G,SAAgB,oBAAoB,CAAC,GAAa,EAAE,GAAW;IAC7D,IAAI,GAAG,CAAC,cAAc,CAAC,wBAAwB,CAAC;QAAE,OAAO;IACzD,MAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,GAAG,wBAAwB,CAAC;IACtC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC;IAC1B,MAAM,GAAG,GAAG,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACrD,IAAI,GAAG;QAAE,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;;QACxB,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AAED;;;;GAIG;AACU,QAAA,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4H3B,CAAC;AAEF,yEAAyE;AACzE,SAAgB,oBAAoB,CAAC,GAAa;IAChD,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACtB,IAAI,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC;QAAE,OAAO;IAC1D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,yBAAyB,CAAC;IACnC,GAAG,CAAC,WAAW,GAAG,oBAAY,CAAC;IAC/B,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AACvD,CAAC"}
|
package/src/lib/styles.mjs
CHANGED
|
@@ -16,7 +16,9 @@ export const MAP_CSS = `
|
|
|
16
16
|
background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);
|
|
17
17
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;
|
|
18
18
|
}
|
|
19
|
-
.fd-map-results [role="option"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; }
|
|
19
|
+
.fd-map-results [role="option"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; display: grid; gap: 1px; }
|
|
20
|
+
.fd-map-result-name { color: var(--fd-text); font-weight: 600; overflow-wrap: anywhere; }
|
|
21
|
+
.fd-map-result-detail { color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }
|
|
20
22
|
.fd-map-results [role="option"][aria-selected="true"], .fd-map-results [role="option"]:hover { background: var(--fd-accent-soft); }
|
|
21
23
|
.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }
|
|
22
24
|
.fd-map-box {
|
|
@@ -78,6 +80,7 @@ export const MAP_CSS = `
|
|
|
78
80
|
.fd-map-pin:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }
|
|
79
81
|
path.fd-map-shape { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.16; }
|
|
80
82
|
path.fd-map-shape.fd-map-movable { cursor: move; }
|
|
83
|
+
path.fd-map-accuracy { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 1; fill-opacity: 0.08; stroke-dasharray: 4 4; pointer-events: none; }
|
|
81
84
|
path.fd-map-trace { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.08; stroke-dasharray: 6 5; pointer-events: none; }
|
|
82
85
|
.fd-map-grip { width: 24px; height: 24px; display: grid; place-items: center; cursor: grab; }
|
|
83
86
|
.fd-map-grip::after {
|
|
@@ -119,4 +122,144 @@ export function installLeafletStyles(doc, css) {
|
|
|
119
122
|
else
|
|
120
123
|
doc.head.prepend(leaflet);
|
|
121
124
|
}
|
|
125
|
+
/**
|
|
126
|
+
* A list's map, on top of the maps' own: each record's pin in its look and
|
|
127
|
+
* tone, bubbles of pins that crowd, the card a pin opens, "Search this area".
|
|
128
|
+
* Its own stylesheet, so a form with only a place or an area never carries it.
|
|
129
|
+
*/
|
|
130
|
+
export const LIST_MAP_CSS = `
|
|
131
|
+
.fd-map-list { min-width: 0; }
|
|
132
|
+
.fd-map-mark { overflow: visible; }
|
|
133
|
+
.fd-map-mark:focus { outline: none; }
|
|
134
|
+
/* Each mark is as large as its face, stood on its point by its foot, its middle, or the tip of a label's tail. */
|
|
135
|
+
.fd-map-mark.fd-map-foot { translate: -50% -100%; }
|
|
136
|
+
.fd-map-mark.fd-map-middle { translate: -50% -50%; }
|
|
137
|
+
.fd-map-mark.fd-map-tail { translate: -50% calc(-100% - 6px); }
|
|
138
|
+
.fd-map-face {
|
|
139
|
+
--fd-map-tone: var(--fd-accent); --fd-map-on: var(--fd-accent-text);
|
|
140
|
+
position: relative; box-sizing: border-box; cursor: pointer; transition: scale 0.12s;
|
|
141
|
+
}
|
|
142
|
+
.fd-map-face[data-tone] { --fd-map-on: var(--fd-surface); }
|
|
143
|
+
.fd-map-face[data-tone="info"] { --fd-map-tone: var(--fd-info); }
|
|
144
|
+
.fd-map-face[data-tone="success"] { --fd-map-tone: var(--fd-success); }
|
|
145
|
+
.fd-map-face[data-tone="warning"] { --fd-map-tone: var(--fd-warning); }
|
|
146
|
+
.fd-map-face[data-tone="danger"] { --fd-map-tone: var(--fd-error); }
|
|
147
|
+
.fd-map-face[data-tone="muted"] { --fd-map-tone: var(--fd-muted); }
|
|
148
|
+
.fd-map-face[data-stands="foot"] { transform-origin: 50% 100%; }
|
|
149
|
+
.fd-map-face[data-stands="middle"] { transform-origin: 50% 50%; }
|
|
150
|
+
.fd-map-face[data-hot], .fd-map-mark:hover .fd-map-face, .fd-map-bubble[data-hot], .fd-map-mark:hover .fd-map-bubble { scale: 1.12; }
|
|
151
|
+
.fd-map-mark:focus-visible .fd-map-face, .fd-map-mark:focus-visible .fd-map-bubble { outline: 2px solid var(--fd-focus); outline-offset: 3px; }
|
|
152
|
+
.fd-map-face-icon { display: block; }
|
|
153
|
+
.fd-map-face-icon svg { display: block; width: 100%; height: 100%; }
|
|
154
|
+
.fd-map-face[data-look="label"] {
|
|
155
|
+
padding: 4px 9px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums;
|
|
156
|
+
background: var(--fd-surface); color: var(--fd-text); border: 1.5px solid color-mix(in srgb, var(--fd-text) 20%, transparent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
|
|
157
|
+
}
|
|
158
|
+
.fd-map-face[data-look="label"][data-tone] { color: var(--fd-map-tone); border-color: var(--fd-map-tone); }
|
|
159
|
+
.fd-map-face[data-look="label"]::after {
|
|
160
|
+
content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
|
|
161
|
+
background: inherit; border: inherit; border-top: 0; border-left: 0;
|
|
162
|
+
}
|
|
163
|
+
.fd-map-face[data-look="label"]:is([data-hot], [data-chosen]), .fd-map-mark:hover .fd-map-face[data-look="label"] { background: var(--fd-map-tone); color: var(--fd-map-on); border-color: var(--fd-map-tone); }
|
|
164
|
+
.fd-map-face-text { display: block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
165
|
+
.fd-map-face[data-look="pin"] { width: 30px; height: 40px; }
|
|
166
|
+
.fd-map-face[data-look="pin"] > svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
|
|
167
|
+
.fd-map-face-body { fill: var(--fd-map-tone); stroke: var(--fd-surface); stroke-width: 1.5; }
|
|
168
|
+
.fd-map-face[data-look="pin"] .fd-map-face-icon { position: absolute; left: 7px; top: 6px; width: 16px; height: 16px; color: var(--fd-map-on); }
|
|
169
|
+
.fd-map-face[data-look="pin"] .fd-map-face-icon:empty { left: 10px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--fd-map-on); }
|
|
170
|
+
.fd-map-face[data-look="icon"] {
|
|
171
|
+
width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
|
|
172
|
+
background: var(--fd-map-tone); color: var(--fd-map-on); border: 2px solid var(--fd-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
|
|
173
|
+
}
|
|
174
|
+
.fd-map-face[data-look="icon"] .fd-map-face-icon { width: 20px; height: 20px; }
|
|
175
|
+
.fd-map-face-turn { position: absolute; inset: -9px; pointer-events: none; }
|
|
176
|
+
.fd-map-face-turn::before { content: ""; position: absolute; left: 50%; top: 0; margin-left: -5px; border: 5px solid transparent; border-top: 0; border-bottom: 7px solid var(--fd-map-tone); }
|
|
177
|
+
.fd-map-face-photo {
|
|
178
|
+
display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; object-fit: cover;
|
|
179
|
+
border: 3px solid var(--fd-map-tone); background: var(--fd-fill); color: var(--fd-muted); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
|
|
180
|
+
}
|
|
181
|
+
span.fd-map-face-photo svg { width: 22px; height: 22px; }
|
|
182
|
+
.fd-map-face[data-look="photo"] .fd-map-face-text {
|
|
183
|
+
position: absolute; top: calc(100% + 2px); left: 50%; translate: -50% 0; max-width: 14ch; padding: 1px 6px; border-radius: 999px;
|
|
184
|
+
font-size: 12px; font-weight: 600; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
185
|
+
}
|
|
186
|
+
.fd-map-face[data-look="dot"] { width: 16px; height: 16px; border-radius: 50%; background: var(--fd-map-tone); border: 2px solid var(--fd-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
|
|
187
|
+
.fd-map-face:is([data-look="icon"], [data-look="dot"])[data-chosen], .fd-map-face[data-chosen] .fd-map-face-photo { box-shadow: 0 0 0 2px var(--fd-surface), 0 0 0 4px var(--fd-map-tone); }
|
|
188
|
+
.fd-map-face[data-chosen]::before, .fd-map-bubble[data-chosen]::before {
|
|
189
|
+
content: "✓"; position: absolute; top: -7px; right: -7px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
|
|
190
|
+
display: grid; place-items: center; font: 700 10px/1 system-ui, sans-serif; background: var(--fd-accent); color: var(--fd-accent-text); border: 1.5px solid var(--fd-surface);
|
|
191
|
+
}
|
|
192
|
+
.fd-map-bubble {
|
|
193
|
+
position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
|
|
194
|
+
background: var(--fd-accent); color: var(--fd-accent-text); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; transition: scale 0.12s;
|
|
195
|
+
box-shadow: 0 0 0 5px color-mix(in srgb, var(--fd-accent) 30%, transparent), 0 1px 4px rgba(0, 0, 0, 0.3);
|
|
196
|
+
}
|
|
197
|
+
.fd-map-bubble[data-size="m"] { width: 40px; height: 40px; }
|
|
198
|
+
.fd-map-bubble[data-size="l"] { width: 48px; height: 48px; }
|
|
199
|
+
.fd-map-card-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 10px; overflow: hidden; background: var(--fd-surface); color: var(--fd-text); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24); }
|
|
200
|
+
.fd-map-card-popup .leaflet-popup-content { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; }
|
|
201
|
+
.fd-map-card-popup .leaflet-popup-tip { background: var(--fd-surface); }
|
|
202
|
+
.fd-map-card { display: grid; }
|
|
203
|
+
.fd-map-card-image { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--fd-fill); }
|
|
204
|
+
.fd-map-card-body { display: grid; gap: 8px; padding: 10px 12px 12px; }
|
|
205
|
+
.fd-map-card-head { display: flex; align-items: flex-start; gap: 8px; }
|
|
206
|
+
.fd-map-card-title { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
|
|
207
|
+
.fd-map-card-close {
|
|
208
|
+
flex: none; width: 28px; height: 28px; margin: -4px -6px -4px 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
|
|
209
|
+
background: transparent; color: var(--fd-muted); font: 400 20px/1 system-ui, sans-serif; cursor: pointer;
|
|
210
|
+
}
|
|
211
|
+
.fd-map-card[dir="rtl"] .fd-map-card-close { margin: -4px 0 -4px -6px; }
|
|
212
|
+
.fd-map-card-close:hover { background: var(--fd-fill); color: var(--fd-text); }
|
|
213
|
+
.fd-map-card-fields { margin: 0; display: grid; gap: 3px; font-size: 13px; }
|
|
214
|
+
.fd-map-card-fields div { display: flex; justify-content: space-between; gap: 10px; }
|
|
215
|
+
.fd-map-card-fields dt { color: var(--fd-muted); }
|
|
216
|
+
.fd-map-card-fields dd { margin: 0; text-align: end; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
|
|
217
|
+
.fd-map-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
|
|
218
|
+
.fd-map-card-choose { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
|
|
219
|
+
.fd-map-card-choose input { width: 16px; height: 16px; margin: 0; accent-color: var(--fd-accent); }
|
|
220
|
+
.fd-map-card .fd-button { min-height: 30px; padding-inline: 14px; }
|
|
221
|
+
.fd-map-card :focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
|
|
222
|
+
.fd-map-crowd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 220px; overflow: auto; }
|
|
223
|
+
.fd-map-crowd-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; text-align: start; background: transparent; color: var(--fd-text); font: inherit; font-size: 13px; cursor: pointer; }
|
|
224
|
+
.fd-map-crowd-item:hover { background: var(--fd-accent-soft); }
|
|
225
|
+
.fd-map-here {
|
|
226
|
+
position: absolute; top: 10px; left: 50%; translate: -50% 0; z-index: 1000; padding: 7px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
|
|
227
|
+
border: 1px solid var(--fd-border); background: var(--fd-surface); color: var(--fd-text); font: inherit; font-size: 13.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
228
|
+
}
|
|
229
|
+
.fd-map-here:hover { color: var(--fd-accent); border-color: var(--fd-accent); }
|
|
230
|
+
.fd-map-here:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
|
|
231
|
+
/* The map over the table when the list is too narrow for both side by side: shorter, so the table is in reach. */
|
|
232
|
+
@container fd-list (max-width: 860px) { .fd-list[data-view="both"] .fd-map-list .fd-map-box { height: clamp(260px, 46vh, 420px); } }
|
|
233
|
+
.fd-map-ghost .fd-map-face { pointer-events: none; }
|
|
234
|
+
/* The tools that draw an area to search in: at the map's start, the zoom at its end. */
|
|
235
|
+
.fd-map-draw { position: absolute; top: 8px; left: 8px; z-index: 1000; display: grid; gap: 4px; }
|
|
236
|
+
.fd-map-box[data-side="left"] .fd-map-draw { left: auto; right: 8px; }
|
|
237
|
+
.fd-map-draw button {
|
|
238
|
+
width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer;
|
|
239
|
+
background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
|
240
|
+
}
|
|
241
|
+
.fd-map-draw button svg { width: 18px; height: 18px; }
|
|
242
|
+
.fd-map-draw button:hover, .fd-map-draw button[aria-pressed="true"] { color: var(--fd-accent); border-color: var(--fd-accent); }
|
|
243
|
+
.fd-map-draw button[aria-pressed="true"] { background: var(--fd-accent-soft); }
|
|
244
|
+
.fd-map-draw button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
|
|
245
|
+
/* While an area is drawn, the pins let every press through to the map. */
|
|
246
|
+
.fd-map-box[data-drawing] .fd-map-mark { pointer-events: none; }
|
|
247
|
+
/* The drawing's bar starts after the tools. */
|
|
248
|
+
.fd-map-list .fd-map-hint { left: 48px; }
|
|
249
|
+
.fd-map-list .fd-map-box[data-side="left"] .fd-map-hint { left: 52px; right: 48px; }
|
|
250
|
+
.fd-map-list-note {
|
|
251
|
+
position: absolute; left: 8px; bottom: 28px; z-index: 1000; max-width: calc(100% - 64px); margin: 0; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.4;
|
|
252
|
+
background: color-mix(in srgb, var(--fd-surface) 92%, transparent); color: var(--fd-text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
|
|
253
|
+
}
|
|
254
|
+
`;
|
|
255
|
+
/** The list map's stylesheet, once per document, after the maps' own. */
|
|
256
|
+
export function installListMapStyles(doc) {
|
|
257
|
+
installMapStyles(doc);
|
|
258
|
+
if (doc.getElementById('fieldia-list-map-styles'))
|
|
259
|
+
return;
|
|
260
|
+
const own = doc.createElement('style');
|
|
261
|
+
own.id = 'fieldia-list-map-styles';
|
|
262
|
+
own.textContent = LIST_MAP_CSS;
|
|
263
|
+
doc.getElementById('fieldia-map-styles')?.after(own);
|
|
264
|
+
}
|
|
122
265
|
//# sourceMappingURL=styles.mjs.map
|
package/src/lib/styles.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG
|
|
1
|
+
{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FtB,CAAC;AAEF,0HAA0H;AAC1H,MAAM,UAAU,gBAAgB,CAAC,GAAa;IAC5C,IAAI,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC;QAAE,OAAO;IACrD,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,oBAAoB,CAAC;IAC9B,GAAG,CAAC,WAAW,GAAG,OAAO,CAAC;IAC1B,4EAA4E;IAC5E,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AACxB,CAAC;AAED,8GAA8G;AAC9G,MAAM,UAAU,oBAAoB,CAAC,GAAa,EAAE,GAAW;IAC7D,IAAI,GAAG,CAAC,cAAc,CAAC,wBAAwB,CAAC;QAAE,OAAO;IACzD,MAAM,OAAO,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,GAAG,wBAAwB,CAAC;IACtC,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC;IAC1B,MAAM,GAAG,GAAG,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC;IACrD,IAAI,GAAG;QAAE,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;;QACxB,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4H3B,CAAC;AAEF,yEAAyE;AACzE,MAAM,UAAU,oBAAoB,CAAC,GAAa;IAChD,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACtB,IAAI,GAAG,CAAC,cAAc,CAAC,yBAAyB,CAAC;QAAE,OAAO;IAC1D,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,yBAAyB,CAAC;IACnC,GAAG,CAAC,WAAW,GAAG,YAAY,CAAC;IAC/B,GAAG,CAAC,cAAc,CAAC,oBAAoB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;AACvD,CAAC"}
|