@map-colonies/react-components 4.10.3 → 4.12.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.
Files changed (73) hide show
  1. package/dist/@map-colonies/react-components.es.js +3108 -2684
  2. package/dist/@map-colonies/react-components.umd.js +25 -20
  3. package/dist/animated/animated-values-provider.d.ts +13 -0
  4. package/dist/animated/index.d.ts +1 -0
  5. package/dist/autocomplete/autocomplete.css +1 -1
  6. package/dist/cesium-map/active-layers/active-layers-panel.css +35 -0
  7. package/dist/cesium-map/active-layers/active-layers-panel.d.ts +8 -0
  8. package/dist/cesium-map/active-layers/active-layers-widget.d.ts +8 -0
  9. package/dist/cesium-map/base-map/base-map-widget.d.ts +11 -0
  10. package/dist/cesium-map/base-map/base-maps-panel.d.ts +9 -0
  11. package/dist/cesium-map/base-map/cesium-item.d.ts +9 -0
  12. package/dist/cesium-map/base-map/terrains-panel.d.ts +8 -0
  13. package/dist/cesium-map/data-sources/drawings.data-source.d.ts +1 -1
  14. package/dist/cesium-map/debug/{debug-panel.d.ts → wfs-debug-widget.d.ts} +3 -4
  15. package/dist/cesium-map/debug/wfs.css +7 -7
  16. package/dist/cesium-map/debug/wfs.d.ts +1 -1
  17. package/dist/cesium-map/geocoder/geocoder-panel.css +93 -0
  18. package/dist/cesium-map/geocoder/geocoder-panel.d.ts +37 -0
  19. package/dist/cesium-map/geocoder/geocoder-widget.d.ts +10 -0
  20. package/dist/cesium-map/helpers/constants.d.ts +5 -0
  21. package/dist/cesium-map/{tools → helpers}/draw/drawHelper.css +1 -1
  22. package/dist/cesium-map/helpers/utils.d.ts +11 -2
  23. package/dist/cesium-map/layers/wfs.layer.d.ts +1 -0
  24. package/dist/cesium-map/layers-manager.d.ts +5 -3
  25. package/dist/cesium-map/legend/index.d.ts +3 -0
  26. package/dist/cesium-map/{map-legend/MapLegend.d.ts → legend/legend-item.d.ts} +2 -2
  27. package/dist/cesium-map/{map-legend/MapLegendList.d.ts → legend/legend-list.d.ts} +3 -3
  28. package/dist/cesium-map/{map-legend/MapLegendSidebar.d.ts → legend/legend-sidebar.d.ts} +3 -3
  29. package/dist/cesium-map/legend/legend-widget.d.ts +5 -0
  30. package/dist/cesium-map/{map-legend/MapLegend.css → legend/legend.css} +20 -26
  31. package/dist/cesium-map/map.css +248 -28
  32. package/dist/cesium-map/map.d.ts +27 -8
  33. package/dist/cesium-map/tools/cesium-compass.tool.css +7 -7
  34. package/dist/cesium-map/tools/cesium-compass.tool.d.ts +2 -2
  35. package/dist/cesium-map/tools/coordinates-tracker.tool.css +3 -5
  36. package/dist/cesium-map/tools/index.d.ts +3 -4
  37. package/dist/cesium-map/tools/inspector.tool.d.ts +1 -3
  38. package/dist/cesium-map/tools/scale-tracker.tool.css +6 -4
  39. package/dist/cesium-map/tools/zoom-buttons.css +31 -0
  40. package/dist/cesium-map/tools/{zoom_level-tracker.tool.css → zoom-level-tracker.tool.css} +6 -5
  41. package/dist/cesium-map/widget/cesium-button.d.ts +7 -0
  42. package/dist/cesium-map/widget/cesium-icon.d.ts +7 -0
  43. package/dist/cesium-map/widget/cesium-inspector.d.ts +9 -0
  44. package/dist/cesium-map/widget/cesium-title.d.ts +6 -0
  45. package/dist/cesium-map/widget/cesium-tool.d.ts +8 -0
  46. package/dist/circular-progress-bar/circular-progress-bar.d.ts +26 -0
  47. package/dist/circular-progress-bar/index.d.ts +1 -0
  48. package/dist/index.d.ts +3 -1
  49. package/dist/multi-selection/index.d.ts +1 -0
  50. package/dist/{multiSelection/multiSelection.d.ts → multi-selection/multi-selection.d.ts} +5 -5
  51. package/dist/theme/theme.d.ts +4 -1
  52. package/dist/utils/config.d.ts +1 -0
  53. package/package.json +7 -2
  54. package/dist/cesium-map/debug/debug-panel.css +0 -30
  55. package/dist/cesium-map/map-legend/MapLegendToggle.d.ts +0 -6
  56. package/dist/cesium-map/map-legend/index.d.ts +0 -3
  57. package/dist/cesium-map/settings/base-maps.css +0 -37
  58. package/dist/cesium-map/settings/base-maps.d.ts +0 -6
  59. package/dist/cesium-map/settings/scene-modes.css +0 -19
  60. package/dist/cesium-map/settings/scene-modes.d.ts +0 -6
  61. package/dist/cesium-map/settings/settings.css +0 -57
  62. package/dist/cesium-map/settings/settings.d.ts +0 -23
  63. package/dist/cesium-map/zoom/zoomButtons.css +0 -35
  64. package/dist/multiSelection/index.d.ts +0 -1
  65. /package/dist/cesium-map/{tools → helpers}/draw/drawHelper.d.ts +0 -0
  66. /package/dist/cesium-map/{tools/geojson/geojson-to-primitive.d.ts → helpers/geojson/geojsonToPrimitive.d.ts} +0 -0
  67. /package/dist/cesium-map/{tools → helpers}/geojson/index.d.ts +0 -0
  68. /package/dist/cesium-map/{tools → helpers}/geojson/point.geojson.d.ts +0 -0
  69. /package/dist/cesium-map/{tools → helpers}/geojson/polygon.geojson.d.ts +0 -0
  70. /package/dist/cesium-map/{tools → helpers}/geojson/rectangle.geojson.d.ts +0 -0
  71. /package/dist/cesium-map/{tools/cesium/primitives-conversions.cesium.d.ts → helpers/primitivesConversionsCesium.d.ts} +0 -0
  72. /package/dist/cesium-map/{zoom/zoomButtons.d.ts → tools/zoom-buttons.d.ts} +0 -0
  73. /package/dist/cesium-map/tools/{zoom_level-tracker.tool.d.ts → zoom-level-tracker.tool.d.ts} +0 -0
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ interface AnimatedValuesProviderProps {
3
+ values?: number[];
4
+ valueStart?: number;
5
+ valueEnd?: number;
6
+ duration?: number;
7
+ interval?: number;
8
+ easingFunction?: (t: number) => number;
9
+ repeat?: boolean;
10
+ children: (value: number) => React.ReactNode;
11
+ }
12
+ export declare const AnimatedValuesProvider: React.FC<AnimatedValuesProviderProps>;
13
+ export {};
@@ -0,0 +1 @@
1
+ export * from './animated-values-provider';
@@ -8,7 +8,7 @@
8
8
  list-style: none;
9
9
  padding: 1px;
10
10
  position: absolute;
11
- z-index: 20000;
11
+ z-index: 200;
12
12
  margin-block-start: unset;
13
13
  margin-block-end: unset;
14
14
  }
@@ -0,0 +1,35 @@
1
+ .cesium-viewer .activeLayersPanel .layer {
2
+ display: flex;
3
+ justify-content: space-between;
4
+ align-items: center;
5
+ width: 90%;
6
+ }
7
+
8
+ .cesium-viewer .activeLayersPanel .name {
9
+ white-space: nowrap;
10
+ overflow: hidden;
11
+ text-overflow: ellipsis;
12
+ }
13
+
14
+ .cesium-viewer .activeLayersPanel .name.disabled {
15
+ opacity: 0.5;
16
+ pointer-events: none;
17
+ }
18
+
19
+ .cesium-viewer .activeLayersPanel .icons {
20
+ display: flex;
21
+ justify-content: flex-end;
22
+ align-items: center;
23
+ }
24
+
25
+ .cesium-viewer .activeLayersPanel .icon {
26
+ width: 17px;
27
+ height: 17px;
28
+ margin-left: 8px;
29
+ cursor: pointer;
30
+ }
31
+
32
+ .cesium-viewer .activeLayersPanel .icon.disabled {
33
+ opacity: 0;
34
+ pointer-events: none;
35
+ }
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ interface IActiveLayersPanelProps {
3
+ locale?: {
4
+ [key: string]: string;
5
+ };
6
+ }
7
+ export declare const ActiveLayersPanel: React.FC<IActiveLayersPanelProps>;
8
+ export {};
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ interface IDebugProps {
3
+ locale?: {
4
+ [key: string]: string;
5
+ };
6
+ }
7
+ export declare const ActiveLayersWidget: React.FC<IDebugProps>;
8
+ export {};
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { IBaseMaps, ITerrain } from '../map';
3
+ interface IBaseMapWidgetProps {
4
+ baseMaps?: IBaseMaps;
5
+ terrains?: ITerrain[];
6
+ locale?: {
7
+ [key: string]: string;
8
+ };
9
+ }
10
+ export declare const BaseMapWidget: React.FC<IBaseMapWidgetProps>;
11
+ export {};
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { IBaseMap, IBaseMaps } from '../map';
3
+ interface BaseMapsPanelProps {
4
+ title: string;
5
+ baseMaps: IBaseMaps;
6
+ setCurrent: (map: IBaseMap) => void;
7
+ }
8
+ export declare const BaseMapsPanel: React.FC<BaseMapsPanelProps>;
9
+ export {};
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { IBaseMap, ITerrain } from '../map';
3
+ interface CesiumItemProps {
4
+ item: IBaseMap | ITerrain;
5
+ isSelected: boolean;
6
+ onClick: () => void;
7
+ }
8
+ export declare const CesiumItem: React.FC<CesiumItemProps>;
9
+ export {};
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ import { ITerrain } from '../map';
3
+ interface TerrainsPanelProps {
4
+ title: string;
5
+ terrains: ITerrain[];
6
+ }
7
+ export declare const TerrainsPanel: React.FC<TerrainsPanelProps>;
8
+ export {};
@@ -1,6 +1,6 @@
1
- import React from 'react';
2
1
  import { Cartesian3, Color as CesiumColor, Rectangle } from 'cesium';
3
2
  import { GeoJSON } from 'geojson';
3
+ import React from 'react';
4
4
  import { DrawType } from '../../models';
5
5
  import { RCesiumCustomDataSourceProps } from './custom.data-source';
6
6
  export type PrimitiveCoordinates = Cartesian3[] | Rectangle | undefined;
@@ -1,4 +1,4 @@
1
- import React, { ReactNode } from 'react';
1
+ import React from 'react';
2
2
  interface IFeatureTypeMetadata {
3
3
  id: string;
4
4
  items: number;
@@ -10,11 +10,10 @@ interface IFeatureTypeMetadata {
10
10
  export type IActiveFeatureTypes = IFeatureTypeMetadata & {
11
11
  zoomLevel: number;
12
12
  };
13
- export interface IDebugPanelProps {
14
- children: ReactNode;
13
+ export interface IWFSDebugWidgetProps {
15
14
  locale?: {
16
15
  [key: string]: string;
17
16
  };
18
17
  }
19
- export declare const DebugPanel: React.FC<IDebugPanelProps>;
18
+ export declare const WFSDebugWidget: React.FC<IWFSDebugWidgetProps>;
20
19
  export {};
@@ -1,21 +1,21 @@
1
- .wfsContainer .title {
1
+ .cesium-viewer .wfsContainer .title {
2
2
  text-align: center;
3
3
  font-weight: bold;
4
4
  margin-bottom: 12px;
5
5
  width: 260px;
6
6
  }
7
7
 
8
- .wfsContainer .featureType {
8
+ .cesium-viewer .wfsContainer .featureType {
9
9
  font-size: 12px;
10
10
  margin-bottom: 12px;
11
11
  direction: ltr;
12
12
  }
13
13
 
14
- body[dir='rtl'] .wfsContainer .featureType {
14
+ body[dir='rtl'] .cesium-viewer .wfsContainer .featureType {
15
15
  direction: rtl;
16
16
  }
17
17
 
18
- .wfsContainer .name {
18
+ .cesium-viewer .wfsContainer .name {
19
19
  color: #AEF;
20
20
  font-weight: bold;
21
21
  white-space: nowrap;
@@ -24,15 +24,15 @@ body[dir='rtl'] .wfsContainer .featureType {
24
24
  width: 260px;
25
25
  }
26
26
 
27
- .wfsContainer .info {
27
+ .cesium-viewer .wfsContainer .info {
28
28
  display: flex;
29
29
  }
30
30
 
31
- .wfsContainer .spacer {
31
+ .cesium-viewer .wfsContainer .spacer {
32
32
  margin: 0 20px;
33
33
  }
34
34
 
35
- .wfsContainer .blinking {
35
+ .cesium-viewer .wfsContainer .blinking {
36
36
  animation: blink 1s infinite;
37
37
  }
38
38
 
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { IActiveFeatureTypes } from './debug-panel';
2
+ import { IActiveFeatureTypes } from './wfs-debug-widget';
3
3
  interface IWFSProps {
4
4
  featureTypes: IActiveFeatureTypes[];
5
5
  locale?: {
@@ -0,0 +1,93 @@
1
+ .cesium-viewer .geocoderContainer {
2
+ display: flex;
3
+ flex-direction: row-reverse;
4
+ color: var(--mdc-theme-cesium-color);
5
+ }
6
+
7
+ .cesium-viewer .geocoderContainer .mdc-text-field__input {
8
+ width: 100%;
9
+ border-radius: 4px;
10
+ padding: 4px;
11
+ }
12
+
13
+ .cesium-viewer .geocoderContainer .listsContainer {
14
+ max-height: 348px;
15
+ overflow-y: auto;
16
+ overflow-x: hidden;
17
+ width: 100%;
18
+ }
19
+
20
+ .cesium-viewer .geocoderContainer .listContainer {
21
+ border: 1px solid var(--mdc-theme-cesium-color);
22
+ min-height: 56px;
23
+ width: 308px;
24
+ max-height: 56px;
25
+ overflow-y: auto;
26
+ overflow-x: hidden;
27
+ padding-top: 2px;
28
+ }
29
+
30
+ .cesium-viewer .geocoderContainer .listContainer .queryItemResult {
31
+ display: flex;
32
+ justify-content: space-between;
33
+ width: 100%;
34
+ }
35
+
36
+ .cesium-viewer .geocoderContainer .listContainer .queryNoResults {
37
+ justify-content: normal;
38
+ color: unset;
39
+ }
40
+
41
+ .cesium-viewer .geocoderContainer .listContainer .queryError {
42
+ color: var(--mdc-theme-cesium-error);
43
+ }
44
+
45
+ .cesium-viewer .geocoderContainer .listContainer .queryWarning {
46
+ color: var(--mdc-theme-cesium-warning);
47
+ }
48
+
49
+ .cesium-viewer .geocoderContainer .listContainer .generalListItem {
50
+ font-size: var(--mdc-theme-cesium-font-size);
51
+ text-wrap: wrap !important;
52
+ padding: unset;
53
+ padding-right: 4px;
54
+ padding-left: 4px;
55
+ }
56
+
57
+ body[dir='ltr'] .cesium-viewer .geocoderContainer .geocoderForm {
58
+ position: relative;
59
+ right: 8%;
60
+ }
61
+
62
+ body[dir='rtl'] .cesium-viewer .geocoderContainer .geocoderForm {
63
+ position: relative;
64
+ right: 0%;
65
+ }
66
+
67
+ .cesium-viewer .geocoderContainer .checkboxesContainer {
68
+ display: flex;
69
+ justify-content: space-between;
70
+ padding-bottom: 8px;
71
+ }
72
+
73
+ .cesium-viewer .geocoderContainer .checkboxElement {
74
+ font-size: var(--mdc-theme-cesium-font-size);
75
+ font-weight: bold;
76
+ flex: 1;
77
+ }
78
+
79
+ .cesium-viewer .geocoderContainer .bold {
80
+ font-weight: bold;
81
+ }
82
+
83
+ /* #region cesium classes */
84
+ .cesium-viewer .geocoderContainer .cesium-geocoder-searchButton {
85
+ position: relative !important;
86
+ }
87
+
88
+ .cesium-viewer .geocoderContainer .cesium-geocoder-input {
89
+ width: 100%;
90
+ background: transparent;
91
+ border-color: var(--mdc-theme-cesium-color);
92
+ }
93
+ /* #endregion cesium classes */
@@ -0,0 +1,37 @@
1
+ import React from 'react';
2
+ type Method = 'GET' | 'POST';
3
+ type UrlGroup = {
4
+ baseUrl: string;
5
+ endPoint: string;
6
+ url?: string;
7
+ } | {
8
+ baseUrl?: string;
9
+ endPoint?: string;
10
+ url: string;
11
+ };
12
+ type relatedParamsType = {
13
+ name: string;
14
+ relatedParams: [string, any][];
15
+ titles?: Array<string | undefined>;
16
+ };
17
+ export type GeocoderOptions = UrlGroup & {
18
+ title?: string;
19
+ method: Method;
20
+ headers?: Record<string, string>;
21
+ params: {
22
+ dynamic: {
23
+ queryText: string | relatedParamsType;
24
+ geoContext?: string | relatedParamsType;
25
+ };
26
+ static?: [string, any][];
27
+ };
28
+ };
29
+ type GeocoderPanelProps = {
30
+ options: GeocoderOptions[];
31
+ isOpen: boolean;
32
+ locale?: {
33
+ [key: string]: string;
34
+ };
35
+ };
36
+ export declare const GeocoderPanel: React.FC<GeocoderPanelProps>;
37
+ export {};
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { GeocoderOptions } from './geocoder-panel';
3
+ interface IGeocoderWidgetProps {
4
+ options: GeocoderOptions[];
5
+ locale?: {
6
+ [key: string]: string;
7
+ };
8
+ }
9
+ export declare const GeocoderWidget: React.FC<IGeocoderWidgetProps>;
10
+ export {};
@@ -0,0 +1,5 @@
1
+ import { IBaseMaps } from '../map';
2
+ export declare const DEFAULT_TERRAIN_PROVIDER_URL: string;
3
+ export declare const TERRAIN_SRTM100: string;
4
+ export declare const TERRAIN_COMBINED: string;
5
+ export declare const BASE_MAPS: IBaseMaps;
@@ -9,7 +9,7 @@
9
9
  min-width: 100px;
10
10
  padding: 5px;
11
11
  font-size: 11px;
12
- z-index: 1000;
12
+ z-index: 100;
13
13
  opacity: 0.8;
14
14
  -khtml-opacity: 0.8;
15
15
  -moz-opacity: 0.8;
@@ -1,6 +1,8 @@
1
- import { Rectangle } from 'cesium';
2
- import { BBox, Feature, Point } from 'geojson';
1
+ import { GeoJsonDataSource, Rectangle } from 'cesium';
2
+ import { BBox, Feature, Point, Polygon } from 'geojson';
3
+ import { ICesiumWFSLayerLabelingOptions } from '../layers';
3
4
  import { CesiumViewer } from '../map';
5
+ import { CesiumRectangle } from '../proxied.types';
4
6
  import { CustomImageryProvider } from './customImageryProviders';
5
7
  /**
6
8
  * An async function to detect images with transparency.
@@ -36,6 +38,7 @@ export declare const center: (bbox: Rectangle) => Feature<Point>;
36
38
  * @returns BBox array
37
39
  */
38
40
  export declare const rectangle2bbox: (bbox: Rectangle) => BBox;
41
+ export declare const customComputeViewRectangle: (mapViewer: CesiumViewer) => Rectangle;
39
42
  /**
40
43
  * Computes a limited view rectangle in case of 3D mode based on the camera position and max distance.
41
44
  * @param mapViewer Cesium Viewer instance
@@ -43,3 +46,9 @@ export declare const rectangle2bbox: (bbox: Rectangle) => BBox;
43
46
  * @returns View rectangle
44
47
  */
45
48
  export declare const computeLimitedViewRectangle: (mapViewer: CesiumViewer, maxDistanceMeters?: number) => Rectangle | undefined;
49
+ export declare const createRectangleAround: (centerCartographic: {
50
+ longitude: number;
51
+ latitude: number;
52
+ }, widthMeters: number, heightMeters: number) => Polygon;
53
+ export declare const defaultVisualizationHandler: (viewer: CesiumViewer, dataSource: GeoJsonDataSource, processEntityIds: string[], color: string, extent?: BBox, labeling?: ICesiumWFSLayerLabelingOptions) => void;
54
+ export declare const applyFactor: (rect: CesiumRectangle, factor?: number) => CesiumRectangle;
@@ -38,5 +38,6 @@ export interface ICesiumWFSLayer extends React.Attributes {
38
38
  options: ICesiumWFSLayerOptions;
39
39
  meta: Record<string, unknown>;
40
40
  visualizationHandler?: (mapViewer: CesiumViewer, wfsDataSource: GeoJsonDataSource, processEntityIds: string[], extent?: BBox) => void;
41
+ withGeometryValidation?: boolean;
41
42
  }
42
43
  export declare const CesiumWFSLayer: React.FC<ICesiumWFSLayer>;
@@ -1,8 +1,7 @@
1
1
  import { ImageryLayer, Event } from 'cesium';
2
2
  import { RCesiumOSMLayerOptions, RCesiumWMSLayerOptions, RCesiumWMTSLayerOptions, RCesiumXYZLayerOptions } from './layers';
3
- import { CesiumViewer } from './map';
4
- import { IBaseMap } from './settings/settings';
5
- import { IMapLegend } from './map-legend';
3
+ import { CesiumViewer, IBaseMap } from './map';
4
+ import { IMapLegend } from './legend';
6
5
  import { ICesiumWFSLayer } from './layers/wfs.layer';
7
6
  import { CesiumCartesian2 } from './proxied.types';
8
7
  export interface ICesiumImageryLayer extends InstanceType<typeof ImageryLayer> {
@@ -40,6 +39,7 @@ declare class LayerManager {
40
39
  constructor(mapViewer: CesiumViewer, legendsExtractor?: LegendExtractor, onLayersUpdate?: () => void, layerManagerFootprintMetaFieldPath?: string, shouldOptimizedTileRequests?: boolean);
41
40
  get layerList(): ICesiumImageryLayer[];
42
41
  get dataLayerList(): ICesiumWFSLayer[];
42
+ isBaseMapLayer(meta: any): boolean;
43
43
  addDataLayer(dataLayer: ICesiumWFSLayer): void;
44
44
  addMetaToLayer(meta: any, layerPredicate: (layer: ImageryLayer, idx: number) => boolean): void;
45
45
  addMetaToDataLayer(meta: any): void;
@@ -60,6 +60,8 @@ declare class LayerManager {
60
60
  pickImageryLayers(position: CesiumCartesian2): ICesiumImageryLayer[] | undefined;
61
61
  findLayerByPOI(x: number, y: number, onlyShown?: boolean): ICesiumImageryLayer[] | undefined;
62
62
  addTransparentImageryProvider(): void;
63
+ addLayerUpdatedListener(callback: (meta: any) => void): void;
64
+ removeLayerUpdatedListener(callback: (meta: any) => void): void;
63
65
  addDataLayerUpdatedListener(callback: (meta: any) => void): void;
64
66
  removeDataLayerUpdatedListener(callback: (meta: any) => void): void;
65
67
  findDataLayerById(dataLayerId: string): ICesiumWFSLayer | undefined;
@@ -0,0 +1,3 @@
1
+ export * from './legend-sidebar';
2
+ export * from './legend-widget';
3
+ export type { IMapLegend } from './legend-item';
@@ -5,10 +5,10 @@ export interface IMapLegend {
5
5
  legendImg?: string;
6
6
  legend?: Record<string, unknown>[];
7
7
  }
8
- interface MapLegendProps {
8
+ interface LegendItemProps {
9
9
  legend: IMapLegend;
10
10
  docText?: string;
11
11
  imgText?: string;
12
12
  }
13
- export declare const MapLegend: React.FC<MapLegendProps>;
13
+ export declare const LegendItem: React.FC<LegendItemProps>;
14
14
  export {};
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { IMapLegend } from './MapLegend';
3
- interface MapLegendListProps {
2
+ import { IMapLegend } from './legend-item';
3
+ interface LegendListProps {
4
4
  legends: IMapLegend[];
5
5
  actionsTexts: {
6
6
  docText: string;
@@ -8,5 +8,5 @@ interface MapLegendListProps {
8
8
  };
9
9
  noLegendsText: string;
10
10
  }
11
- export declare const MapLegendList: React.FC<MapLegendListProps>;
11
+ export declare const LegendList: React.FC<LegendListProps>;
12
12
  export {};
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { IMapLegend } from './MapLegend';
3
- interface MapLegendSidebarProps {
2
+ import { IMapLegend } from './legend-item';
3
+ interface LegendSidebarProps {
4
4
  isOpen: boolean;
5
5
  toggleSidebar: () => void;
6
6
  title?: string;
@@ -11,5 +11,5 @@ interface MapLegendSidebarProps {
11
11
  };
12
12
  legends?: IMapLegend[];
13
13
  }
14
- export declare const MapLegendSidebar: React.FC<MapLegendSidebarProps>;
14
+ export declare const LegendSidebar: React.FC<LegendSidebarProps>;
15
15
  export {};
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ export interface ILegendWidgetProps {
3
+ legendToggle: () => void;
4
+ }
5
+ export declare const LegendWidget: React.FC<ILegendWidgetProps>;
@@ -1,4 +1,4 @@
1
- .mapLegendSidebarContainer {
1
+ .viewer .mapLegendSidebarContainer {
2
2
  width: 340px;
3
3
  height: 100%;
4
4
  position: relative;
@@ -9,20 +9,20 @@
9
9
 
10
10
  /* Disable drawer animation */
11
11
 
12
- .mapLegendSidebarContainer.mdc-drawer--animate {
12
+ .viewer .mapLegendSidebarContainer.mdc-drawer--animate {
13
13
  transform: translateX(0) !important;
14
14
  transition: none !important;
15
15
  }
16
16
 
17
- .mapLegendSidebarContainer.mdc-drawer--dismissible {
17
+ .viewer .mapLegendSidebarContainer.mdc-drawer--dismissible {
18
18
  position: relative;
19
19
  }
20
20
 
21
- div.MuiPaper-root {
21
+ .viewer div.MuiPaper-root {
22
22
  transition: none !important;
23
23
  }
24
24
 
25
- .mapLegendCloseBtn {
25
+ .viewer .mapLegendCloseBtn {
26
26
  position: absolute;
27
27
  top: 0;
28
28
  right: 0;
@@ -33,34 +33,28 @@ div.MuiPaper-root {
33
33
  font-size: 24px;
34
34
  }
35
35
 
36
- body[dir='rtl'] .mapLegendCloseBtn {
36
+ body[dir='rtl'] .viewer .mapLegendCloseBtn {
37
37
  right: unset;
38
38
  left: 0;
39
39
  }
40
40
 
41
- .mapLegendToggleContainer {
42
- display: flex;
43
- align-items: center;
44
- justify-content: center;
45
- }
46
-
47
- .mapLegendIcon {
41
+ .viewer .mapLegendIcon {
48
42
  width: 2rem;
49
43
  height: 2rem;
50
44
  transform: translate(8%, 8%);
51
45
  }
52
46
 
53
- .sidebarHeaderContainer {
47
+ .viewer .sidebarHeaderContainer {
54
48
  text-align: center;
55
49
  margin-top: 40px;
56
50
  }
57
51
 
58
- .sidebarTitle {
52
+ .viewer .sidebarTitle {
59
53
  font-size: 1.5rem;
60
54
  font-weight: bold;
61
55
  }
62
56
 
63
- .mapLegend {
57
+ .viewer .mapLegend {
64
58
  display: flex;
65
59
  flex-direction: column;
66
60
  align-items: center;
@@ -69,20 +63,20 @@ body[dir='rtl'] .mapLegendCloseBtn {
69
63
  padding: 10px 14px;
70
64
  }
71
65
 
72
- .layerNameContainer {
66
+ .viewer .layerNameContainer {
73
67
  width: 90%;
74
68
  display: flex;
75
69
  justify-content: center;
76
70
  align-items: center;
77
71
  }
78
72
 
79
- .layerName {
73
+ .viewer .layerName {
80
74
  overflow: hidden;
81
75
  text-overflow: ellipsis;
82
76
  white-space: nowrap;
83
77
  }
84
78
 
85
- .legendImg {
79
+ .viewer .legendImg {
86
80
  width: 90%;
87
81
  height: 150px;
88
82
  border: 1px solid black;
@@ -91,18 +85,18 @@ body[dir='rtl'] .mapLegendCloseBtn {
91
85
  cursor: pointer;
92
86
  }
93
87
 
94
- .legendActionsContainer {
88
+ .viewer .legendActionsContainer {
95
89
  display: flex;
96
90
  flex-direction: row;
97
91
  align-self: center;
98
92
  }
99
93
 
100
- .legendAction:not(:last-child)::after {
94
+ .viewer .legendAction:not(:last-child)::after {
101
95
  content: '|';
102
96
  margin: 0px 4px;
103
97
  }
104
98
 
105
- .mapLegendsList {
99
+ .viewer .mapLegendsList {
106
100
  display: flex;
107
101
  flex-direction: column;
108
102
  padding: 20px 0px;
@@ -110,7 +104,7 @@ body[dir='rtl'] .mapLegendCloseBtn {
110
104
  height: 90%;
111
105
  }
112
106
 
113
- .legendAction {
107
+ .viewer .legendAction {
114
108
  text-decoration: underline;
115
109
  cursor: pointer;
116
110
  font-size: 1.1rem;
@@ -118,11 +112,11 @@ body[dir='rtl'] .mapLegendCloseBtn {
118
112
  width: max-content;
119
113
  }
120
114
 
121
- .legendAction:hover {
115
+ .viewer .legendAction:hover {
122
116
  filter: brightness(1.2);
123
117
  }
124
118
 
125
- .noLegendsContainer {
119
+ .viewer .noLegendsContainer {
126
120
  width: 100%;
127
121
  height: 100%;
128
122
  display: flex;
@@ -131,6 +125,6 @@ body[dir='rtl'] .mapLegendCloseBtn {
131
125
  align-items: center;
132
126
  }
133
127
 
134
- .noLegendsMsg {
128
+ .viewer .noLegendsMsg {
135
129
  text-align: center;
136
130
  }