@syncfusion/ej2-maps 19.2.60 → 19.3.53

package/src/maps/maps.d.ts

@@ -233,56 +233,48 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * Triggers when the map is on load.
      *
      * @event load
-     * @blazorProperty 'OnLoad'
      */
     load: EmitType<ILoadEventArgs>;
     /**
      * Triggers before the print gets started.
      *
      * @event beforePrint
-     * @blazorProperty 'OnPrint'
      */
     beforePrint: EmitType<IPrintEventArgs>;
     /**
      * Triggers after the maps gets rendered.
      *
      * @event loaded
-     * @blazorProperty 'Loaded'
      */
     loaded: EmitType<ILoadedEventArgs>;
     /**
      * Triggers when clicking an element in maps.
      *
      * @event click
-     * @blazorProperty 'OnClick'
      */
     click: EmitType<IMouseEventArgs>;
     /**
      * Triggers when performing the double click operation on an element in maps.
      *
      * @event doubleClick
-     * @blazorProperty 'OnDoubleClick'
      */
     doubleClick: EmitType<IMouseEventArgs>;
     /**
      * Triggers when performing the right click operation on an element in maps.
      *
      * @event rightClick
-     * @blazorProperty 'OnRightClick'
      */
     rightClick: EmitType<IMouseEventArgs>;
     /**
      * Triggers when resizing the maps.
      *
      * @event resize
-     * @blazorProperty 'Resizing'
      */
     resize: EmitType<IResizeEventArgs>;
     /**
      * Triggers before the maps tooltip gets rendered.
      *
      * @event tooltipRender
-     * @blazorProperty 'TooltipRendering'
      */
     tooltipRender: EmitType<ITooltipRenderEventArgs>;
     /**
@@ -290,7 +282,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      *
      * @event legendRendering
 
-     * @blazorProperty 'LegendRendering'
      */
     legendRendering: EmitType<ILegendRenderingEventArgs>;
     /**
@@ -298,56 +289,48 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      *
 
      * @event tooltipRenderComplete
-     * @blazorProperty 'TooltipRenderComplete'
      */
     tooltipRenderComplete: EmitType<ITooltipRenderCompleteEventArgs>;
     /**
      * Triggers when clicking a shape in maps.
      *
      * @event shapeSelected
-     * @blazorProperty 'ShapeSelected'
      */
     shapeSelected: EmitType<IShapeSelectedEventArgs>;
     /**
      * Triggers when clicking the shape on maps and before the selection is applied.
      *
      * @event itemSelection
-     * @blazorProperty 'OnItemSelect'
      */
     itemSelection: EmitType<ISelectionEventArgs>;
     /**
      * Trigger when mouse move on the shape in maps and before the shape gets highlighted.
      *
      * @event itemHighlight
-     * @blazorProperty 'OnItemHighlight'
      */
     itemHighlight: EmitType<ISelectionEventArgs>;
     /**
      * Triggers when mouse move on the shape in maps and before the shape gets highlighted.
      *
      * @event shapeHighlight
-     * @blazorProperty 'ShapeHighlighted'
      */
     shapeHighlight: EmitType<IShapeSelectedEventArgs>;
     /**
      * Triggers before the maps layer gets rendered.
      *
      * @event layerRendering
-     * @blazorProperty 'LayerRendering'
      */
     layerRendering: EmitType<ILayerRenderingEventArgs>;
     /**
      * Triggers before the maps shape gets rendered.
      *
      * @event shapeRendering
-     * @blazorProperty 'ShapeRendering'
      */
     shapeRendering: EmitType<IShapeRenderingEventArgs>;
     /**
      * Triggers before the maps marker gets rendered.
      *
      * @event markerRendering
-     * @blazorProperty 'MarkerRendering'
      */
     markerRendering: EmitType<IMarkerRenderingEventArgs>;
     /**
@@ -360,7 +343,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * Triggers when clicking on the maps marker element.
      *
      * @event markerClick
-     * @blazorProperty 'OnMarkerClick'
      */
     markerClick: EmitType<IMarkerClickEventArgs>;
     /**
@@ -379,63 +361,54 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * Triggers when moving the mouse over the marker element in maps.
      *
      * @event markerMouseMove
-     * @blazorProperty 'OnMarkerMouseMove'
      */
     markerMouseMove: EmitType<IMarkerMoveEventArgs>;
     /**
      * Triggers before the data-label gets rendered.
      *
      * @event dataLabelRendering
-     * @blazorProperty 'DataLabelRendering'
      */
     dataLabelRendering: EmitType<ILabelRenderingEventArgs>;
     /**
      * Triggers before the bubble element gets rendered on the map.
      *
      * @event bubbleRendering
-     * @blazorProperty 'BubbleRendering'
      */
     bubbleRendering: EmitType<IBubbleRenderingEventArgs>;
     /**
      * Triggers when performing the click operation on the bubble element in maps.
      *
      * @event bubbleClick
-     * @blazorProperty 'OnBubbleClick'
      */
     bubbleClick: EmitType<IBubbleClickEventArgs>;
     /**
      * Triggers when hovering the mouse on the bubble element in maps.
      *
      * @event bubbleMouseMove
-     * @blazorProperty 'OnBubbleMouseMove'
      */
     bubbleMouseMove: EmitType<IBubbleMoveEventArgs>;
     /**
      * Triggers after the animation completed in the maps component.
      *
      * @event animationComplete
-     * @blazorProperty 'AnimationCompleted'
      */
     animationComplete: EmitType<IAnimationCompleteEventArgs>;
     /**
      * Triggers before rendering the annotation in maps.
      *
      * @event annotationRendering
-     * @blazorProperty 'AnnotationRendering'
      */
     annotationRendering: EmitType<IAnnotationRenderingEventArgs>;
     /**
      * Triggers before the zoom operations in the maps such as zoom in and zoom out.
      *
      * @event zoom
-     * @blazorProperty 'OnZoom'
      */
     zoom: EmitType<IMapZoomEventArgs>;
     /**
      * Triggers before performing the panning operation.
      *
      * @event pan
-     * @blazorProperty 'OnPan'
      */
     pan: EmitType<IMapPanEventArgs>;
     /**
@@ -628,8 +601,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
     mouseDownEvent: Object;
     mouseClickEvent: Object;
     /** @private */
-    isBlazor: boolean;
-    /** @private */
     shapeSelectionClass: Element;
     /** @private */
     selectedElementId: string[];
@@ -711,6 +682,7 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @returns {void}
      */
     protected preRender(): void;
+    private renderElements;
     /**
      * To Initialize the control rendering.
      *
@@ -753,13 +725,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * @private
      */
     markerInitialSelection(layerIndex: number, markerIndex: number, markerSettings: MarkerSettingsModel, latitude: number, longitude: number): void;
-    /**
-     * To append blazor templates
-     *
-     * @returns {void}
-     * @private
-     */
-    blazorTemplates(): void;
     /**
      * Render the map area border
      *
@@ -848,7 +813,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * This method is used to perform the operations when a click operation is performed on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
-     * @blazorProperty 'PerformClick'
      */
     mapsOnClick(e: PointerEvent): void;
     private getClickLocation;
@@ -877,7 +841,6 @@ export declare class Maps extends Component<HTMLElement> implements INotifyPrope
      * This method is used to perform operations when performing the double click operation on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event.
-     * @blazorProperty 'PerformDoubleClick'
      */
     mapsOnDoubleClick(e: PointerEvent): void;
     /**

package/src/maps/maps.js

@@ -27,8 +27,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  */
 import { Component, NotifyPropertyChanges, Property, Ajax } from '@syncfusion/ej2-base';
 import { EventHandler, Browser, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';
-import { Event, remove, L10n, Collection, Internationalization, Complex, isBlazor } from '@syncfusion/ej2-base';
-import { updateBlazorTemplate, resetBlazorTemplate } from '@syncfusion/ej2-base';
+import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';
 import { SvgRenderer } from '@syncfusion/ej2-svg-base';
 import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, getMousePosition } from './utils/helper';
 import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle } from './utils/helper';
@@ -215,20 +214,14 @@ var Maps = /** @class */ (function (_super) {
      */
     Maps.prototype.preRender = function () {
         this.isDevice = Browser.isDevice;
-        this.isBlazor = isBlazor();
         this.initPrivateVariable();
         this.allowServerDataBinding = false;
         this.unWireEVents();
         this.wireEVents();
         this.setCulture();
     };
-    /**
-     * To Initialize the control rendering.
-     *
-     * @returns {void}
-     */
-    Maps.prototype.render = function () {
-        this.trigger(load, this.isBlazor ? {} : { maps: this });
+    Maps.prototype.renderElements = function () {
+        this.trigger(load, { maps: this });
         this.createSVG();
         this.findBaseAndSubLayers();
         this.createSecondaryElement();
@@ -240,6 +233,14 @@ var Maps = /** @class */ (function (_super) {
         this.processRequestJsonData();
         this.renderComplete();
     };
+    /**
+     * To Initialize the control rendering.
+     *
+     * @returns {void}
+     */
+    Maps.prototype.render = function () {
+        this.renderElements();
+    };
     Maps.prototype.processRequestJsonData = function () {
         var _this = this;
         var length = this.layersCollection.length - 1;
@@ -252,7 +253,7 @@ var Maps = /** @class */ (function (_super) {
             if (layer.shapeData instanceof DataManager) {
                 _this.serverProcess['request']++;
                 dataModule = layer.shapeData;
-                queryModule = layer.query instanceof Query ? layer.query : _this.isBlazor ? (new Query().requiresCount()) : new Query();
+                queryModule = layer.query instanceof Query ? layer.query : new Query();
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var dataManager = dataModule.executeQuery(queryModule);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -268,7 +269,7 @@ var Maps = /** @class */ (function (_super) {
             if (layer.dataSource instanceof DataManager) {
                 _this.serverProcess['request']++;
                 dataModule = layer.dataSource;
-                queryModule = layer.query instanceof Query ? layer.query : _this.isBlazor ? (new Query().requiresCount()) : new Query();
+                queryModule = layer.query instanceof Query ? layer.query : new Query();
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var dataManager = dataModule.executeQuery(queryModule);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -282,8 +283,7 @@ var Maps = /** @class */ (function (_super) {
                     if (layer.markerSettings[i].dataSource instanceof DataManager) {
                         _this.serverProcess['request']++;
                         dataModule = layer.markerSettings[i].dataSource;
-                        queryModule = layer.markerSettings[i].query instanceof Query ? layer.markerSettings[i].query : _this.isBlazor ?
-                            (new Query().requiresCount()) : new Query();
+                        queryModule = layer.markerSettings[i].query instanceof Query ? layer.markerSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -302,8 +302,7 @@ var Maps = /** @class */ (function (_super) {
                     if (layer.bubbleSettings[i].dataSource instanceof DataManager) {
                         _this.serverProcess['request']++;
                         dataModule = layer.bubbleSettings[i].dataSource;
-                        queryModule = layer.bubbleSettings[i].query instanceof Query ? layer.bubbleSettings[i].query : _this.isBlazor ?
-                            (new Query().requiresCount()) : new Query();
+                        queryModule = layer.bubbleSettings[i].query instanceof Query ? layer.bubbleSettings[i].query : new Query();
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         var dataManager = dataModule.executeQuery(queryModule);
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -465,7 +464,6 @@ var Maps = /** @class */ (function (_super) {
             tileElement1.style.left = left + 'px';
         }
         this.arrangeTemplate();
-        var blazor = this.isBlazor ? this.blazorTemplates() : null;
         if (this.annotationsModule) {
             if (this.width !== '0px' && this.height !== '0px' && this.width !== '0%' && this.height !== '0%') {
                 this.annotationsModule.renderAnnotationElements();
@@ -478,7 +476,7 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         this.zoomingChange();
-        this.trigger(loaded, this.isBlazor ? { isResized: this.isResize } : { maps: this, isResized: this.isResize });
+        this.trigger(loaded, { maps: this, isResized: this.isResize });
         this.isResize = false;
     };
     /**
@@ -544,37 +542,6 @@ var Maps = /** @class */ (function (_super) {
             }
         }
     };
-    /**
-     * To append blazor templates
-     *
-     * @returns {void}
-     * @private
-     */
-    Maps.prototype.blazorTemplates = function () {
-        var _this = this;
-        for (var i = 0; i < this.layers.length; i++) {
-            var markerLength = this.layers[i].markerSettings.length - 1;
-            if (markerLength >= 0) {
-                if (this.layers[i].dataLabelSettings.visible || this.layers[i].markerSettings[markerLength].template) {
-                    updateBlazorTemplate(this.element.id + '_LabelTemplate', 'LabelTemplate', this.layers[i].dataLabelSettings);
-                    for (var j = 0; j < this.layers[i].markerSettings.length; j++) {
-                        var markerRendered = function () {
-                            for (var x = 0; x < _this.layers.length; x++) {
-                                var markerTemplateEle = document.getElementById(_this.element.id + '_LayerIndex_' + x + '_Markers_Template_Group');
-                                if (!isNullOrUndefined(markerTemplateEle)) {
-                                    for (var z = 0; z < markerTemplateEle.childElementCount; z++) {
-                                        var markerTemplate = markerTemplateEle.childNodes[z];
-                                        markerTemplate['style']['transform'] = 'translate(-50%, -50%)';
-                                    }
-                                }
-                            }
-                        };
-                        updateBlazorTemplate(this.element.id + '_MarkerTemplate' + j, 'MarkerTemplate', this.layers[i].markerSettings[j], undefined, markerRendered);
-                    }
-                }
-            }
-        }
-    };
     /**
      * Render the map area border
      *
@@ -851,12 +818,6 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.createSVG = function () {
-        resetBlazorTemplate(this.element.id + '_LabelTemplate', 'LabelTemplate');
-        for (var i = 0; i < this.layers.length; i++) {
-            for (var j = 0; j < this.layers[i].markerSettings.length; j++) {
-                resetBlazorTemplate(this.element.id + '_MarkerTemplate' + j, 'MarkerTemplate');
-            }
-        }
         this.removeSvg();
         createSvg(this);
     };
@@ -866,9 +827,6 @@ var Maps = /** @class */ (function (_super) {
      * @returns {void}
      */
     Maps.prototype.removeSvg = function () {
-        for (var i = 0; i < this.annotations.length; i++) {
-            resetBlazorTemplate(this.element.id + '_ContentTemplate_' + i, 'ContentTemplate');
-        }
         removeElement(this.element.id + '_Secondary_Element');
         removeElement(this.element.id + '_tile_parent');
         removeElement(this.element.id + '_tiles');
@@ -946,7 +904,6 @@ var Maps = /** @class */ (function (_super) {
      * This method is used to perform the operations when a click operation is performed on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event on maps.
-     * @blazorProperty 'PerformClick'
      */
     Maps.prototype.mapsOnClick = function (e) {
         var _this = this;
@@ -1098,7 +1055,9 @@ var Maps = /** @class */ (function (_super) {
             }
         }
         this.notify(Browser.touchEndEvent, e);
-        e.preventDefault();
+        if (e.cancelable) {
+            e.preventDefault();
+        }
         return false;
     };
     /**
@@ -1150,7 +1109,6 @@ var Maps = /** @class */ (function (_super) {
      * This method is used to perform operations when performing the double click operation on maps.
      *
      * @param {PointerEvent} e - Specifies the pointer event.
-     * @blazorProperty 'PerformDoubleClick'
      */
     Maps.prototype.mapsOnDoubleClick = function (e) {
         this.notify('dblclick', e);
@@ -1176,9 +1134,7 @@ var Maps = /** @class */ (function (_super) {
             }
             var doubleClickArgs = { cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
                 target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null };
-            var doubleClickBlazorArgs = { cancel: false, name: doubleClick, x: e.clientX, y: e.clientY,
-                target: targetId, latitude: latitude, longitude: longitude, isShapeSelected: null };
-            this.trigger('doubleClick', this.isBlazor ? doubleClickBlazorArgs : doubleClickArgs);
+            this.trigger('doubleClick', doubleClickArgs);
         }
     };
     /**
@@ -1282,7 +1238,7 @@ var Maps = /** @class */ (function (_super) {
             name: resize,
             previousSize: this.availableSize,
             currentSize: new Size(0, 0),
-            maps: !this.isBlazor ? this : null
+            maps: this
         };
         if (this.resizeTo) {
             clearTimeout(this.resizeTo);
@@ -1556,7 +1512,7 @@ var Maps = /** @class */ (function (_super) {
         this.zoomNotApplied = true;
         this.scaleOfGivenLocation = calculateZoomLevel(minLatitude, maxLatitude, minLongitude, maxLongitude, this.mapAreaRect.width, this.mapAreaRect.height, this);
         var zoomArgs = {
-            cancel: false, name: 'zoom', type: zoomIn, maps: !this.isBlazor ? this : null,
+            cancel: false, name: 'zoom', type: zoomIn, maps: this,
             tileTranslatePoint: {}, translatePoint: {},
             tileZoomLevel: this.isTileMap ? { previous: this.tileZoomLevel, current: this.scaleOfGivenLocation } : {},
             scale: !this.isTileMap ? { previous: this.scale, current: this.scaleOfGivenLocation } :
@@ -1706,19 +1662,21 @@ var Maps = /** @class */ (function (_super) {
                     render = true;
                     break;
                 case 'zoomSettings':
-                    if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor) {
-                        render = false;
-                    }
-                    else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
-                        this.zoomSettings.zoomFactor = 1;
-                        render = true;
-                    }
-                    else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
-                        this.zoomSettings.zoomFactor = 1;
-                        render = true;
-                    }
-                    else {
-                        render = true;
+                    if (!isNullOrUndefined(oldProp.zoomSettings)) {
+                        if (newProp.zoomSettings.zoomFactor !== oldProp.zoomSettings.zoomFactor) {
+                            render = false;
+                        }
+                        else if (newProp.zoomSettings.shouldZoomInitially !== oldProp.zoomSettings.shouldZoomInitially) {
+                            this.zoomSettings.zoomFactor = 1;
+                            render = true;
+                        }
+                        else if (newProp.zoomSettings.enable !== oldProp.zoomSettings.enable) {
+                            this.zoomSettings.zoomFactor = 1;
+                            render = true;
+                        }
+                        else {
+                            render = true;
+                        }
                     }
                     break;
                 case 'locale':
@@ -1731,12 +1689,7 @@ var Maps = /** @class */ (function (_super) {
             if (newProp.layers && isMarker) {
                 removeElement(this.element.id + '_Markers_Group');
                 if (this.isTileMap) {
-                    if (this.isBlazor) {
-                        this.render();
-                    }
-                    else {
-                        this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
-                    }
+                    this.mapLayerPanel.renderTileLayer(this.mapLayerPanel, this.layers['currentFactor'], (this.layers.length - 1));
                 }
                 else {
                     this.render();
@@ -1747,7 +1700,7 @@ var Maps = /** @class */ (function (_super) {
             }
             else {
                 this.createSVG();
-                this.render();
+                this.renderElements();
             }
         }
     };

package/src/maps/model/base-model.d.ts

@@ -375,7 +375,6 @@ export interface ColorMappingSettingsModel {
      *
      * @aspDefaultValueIgnore
      * @default null
-     * @isBlazorNullableType true
      */
     from?: number;
 
@@ -384,7 +383,6 @@ export interface ColorMappingSettingsModel {
      *
      * @aspDefaultValueIgnore
      * @default null
-     * @isBlazorNullableType true
      */
     to?: number;
 
@@ -834,7 +832,6 @@ export interface ZoomSettingsModel {
      * Sets and gets the orientation of the zoom toolbar.
      *
      * @default Horizontal
-     * @blazorProperty 'ToolbarOrientation'
      */
     toolBarOrientation?: Orientation;
 
@@ -883,7 +880,6 @@ export interface ZoomSettingsModel {
      * Enables or disables the double click zooming in maps.
      *
      * @default false
-     * @blazorProperty 'ZoomOnDoubleClick'
      */
     doubleClickZoom?: boolean;
 
@@ -1142,7 +1138,6 @@ export interface LegendSettingsModel {
      * Sets and gets the path for the legend from the data source to be shown.
      *
      * @default null
-     * @blazorProperty 'LegendPath'
      */
     showLegendPath?: string;
 

package/src/maps/model/base.d.ts

@@ -348,7 +348,6 @@ export declare class ColorMappingSettings extends ChildProperty<ColorMappingSett
      *
      * @aspDefaultValueIgnore
      * @default null
-     * @isBlazorNullableType true
      */
     from: number;
     /**
@@ -356,7 +355,6 @@ export declare class ColorMappingSettings extends ChildProperty<ColorMappingSett
      *
      * @aspDefaultValueIgnore
      * @default null
-     * @isBlazorNullableType true
      */
     to: number;
     /**
@@ -729,7 +727,6 @@ export declare class ZoomSettings extends ChildProperty<ZoomSettings> {
      * Sets and gets the orientation of the zoom toolbar.
      *
      * @default Horizontal
-     * @blazorProperty 'ToolbarOrientation'
      */
     toolBarOrientation: Orientation;
     /**
@@ -770,7 +767,6 @@ export declare class ZoomSettings extends ChildProperty<ZoomSettings> {
      * Enables or disables the double click zooming in maps.
      *
      * @default false
-     * @blazorProperty 'ZoomOnDoubleClick'
      */
     doubleClickZoom: boolean;
     /**
@@ -987,7 +983,6 @@ export declare class LegendSettings extends ChildProperty<LegendSettings> {
      * Sets and gets the path for the legend from the data source to be shown.
      *
      * @default null
-     * @blazorProperty 'LegendPath'
      */
     showLegendPath: string;
     /**

package/src/maps/model/export-pdf.js

@@ -42,7 +42,7 @@ var PdfExport = /** @class */ (function () {
             var exportElement = _this.control.svgObject.cloneNode(true);
             var backgroundElement = exportElement.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'TailwindDark')
+            if ((_this.control.theme === 'Tailwind' || _this.control.theme === 'TailwindDark' || _this.control.theme === 'Bootstrap5' || _this.control.theme === 'Bootstrap5Dark')
                 && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }

package/src/maps/model/theme.js

@@ -164,7 +164,6 @@ export var BootstrapTheme;
  * @param {MapsTheme} theme Specifies the theme of the maps
  * @returns {string[]} Returns the shape color
  */
-// eslint-disable-next-line @typescript-eslint/no-namespace
 export function getShapeColor(theme) {
     var themePalette;
     switch (theme.toLowerCase()) {
@@ -176,6 +175,14 @@ export function getShapeColor(theme) {
             themePalette = ['#10B981', '#22D3EE', '#2DD4BF', '#4ADE80', '#8B5CF6',
                 '#E879F9', '#F472B6', '#F87171', '#F97316', '#FCD34D'];
             break;
+        case 'bootstrap5':
+            themePalette = ['#262E0B', '#668E1F', '#AF6E10', '#862C0B', '#1F2D50',
+                '#64680B', '#311508', '#4C4C81', '#0C7DA0', '#862C0B'];
+            break;
+        case 'bootstrap5dark':
+            themePalette = ['#5ECB9B', '#A860F1', '#EBA844', '#557EF7', '#E9599B',
+                '#BFC529', '#3BC6CF', '#7A68EC', '#74B706', '#EA6266'];
+            break;
         default:
             themePalette = ['#B5E485', '#7BC1E8', '#DF819C', '#EC9B79', '#78D0D3',
                 '#D6D572', '#9178E3', '#A1E5B4', '#87A4B4', '#E4C16C'];
@@ -413,6 +420,52 @@ export function getThemeStyle(theme) {
                 shapeFill: '#374151'
             };
             break;
+        case 'bootstrap5':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#212529',
+                subTitleFontColor: '#212529',
+                legendTitleFontColor: '#212529',
+                legendTextColor: '#212529',
+                dataLabelFontColor: '#212529',
+                tooltipFontColor: '#F9FAFB',
+                tooltipFillColor: '#212529',
+                zoomFillColor: '#6C757D',
+                fontFamily: 'Helvetica Neue',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Helvetica Neue',
+                titleFontWeight: 'normal',
+                zoomSelectionColor: '#343A40',
+                shapeFill: '#E9ECEF'
+            };
+            break;
+        case 'bootstrap5dark':
+            style = {
+                backgroundColor: 'rgba(255,255,255, 0.0)',
+                areaBackgroundColor: 'rgba(255,255,255, 0.0)',
+                titleFontColor: '#FFFFFF',
+                subTitleFontColor: '#FFFFFF',
+                legendTitleFontColor: '#FFFFFF',
+                legendTextColor: '#FFFFFF',
+                dataLabelFontColor: '#FFFFFF',
+                tooltipFontColor: '#212529',
+                tooltipFillColor: '#E9ECEF',
+                zoomFillColor: '#B5BABE',
+                fontFamily: 'Helvetica Neue',
+                titleFontSize: '14px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Helvetica Neue',
+                titleFontWeight: 'normal',
+                zoomSelectionColor: '#DEE2E6',
+                shapeFill: '#495057'
+            };
+            break;
         default:
             style = {
                 backgroundColor: '#FFFFFF',