azure-maps-control 2.1.6 → 2.1.8

package/dist/atlas.css

@@ -987,6 +987,81 @@ a.azure-map-copyright[href]:hover {
   overflow: hidden;
   z-index: 100;
 }
+.azure-maps-control-dropdown {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.14);
+  overflow: hidden;
+  padding-block: 8px;
+  background-color: white;
+  transform: scale(0.1, 0.1);
+  transition-timing-function: ease-out;
+  transition-duration: 250ms;
+  position: absolute;
+  z-index: 1001;
+  outline: 0;
+}
+.azure-maps-control-dropdown.top-left {
+  transform-origin: top left;
+  left: 0;
+}
+.azure-maps-control-dropdown.top-right {
+  transform-origin: top right;
+  right: 0;
+}
+.azure-maps-control-dropdown.bottom-left {
+  transform-origin: bottom left;
+  left: 0;
+  bottom: 0;
+}
+.azure-maps-control-dropdown.bottom-right {
+  transform-origin: bottom right;
+  right: 0;
+  bottom: 0;
+}
+.azure-maps-control-container.in-use .azure-maps-control-dropdown {
+  transform: scale(1, 1);
+  transition-timing-function: ease-out;
+  transition-duration: 250ms;
+  opacity: 1;
+  visibility: visible;
+}
+.azure-maps-control-list-button {
+  display: flex;
+  align-items: center;
+  background-color: white;
+  box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.14);
+  border-radius: 0px;
+  border: none;
+  line-height: 32px;
+  padding-inline-end: 16px;
+  white-space: nowrap;
+}
+.azure-maps-control-list-button.curr-style {
+  border-radius: 4px;
+}
+.azure-maps-control-list-button:hover,
+.azure-maps-control-list-button[aria-current="true"] {
+  background-color: #f0f0f0;
+}
+.azure-maps-control-list-button:disabled {
+  pointer-events: none;
+}
+.azure-maps-control-list-button img {
+  margin: 8px;
+  width: 16px;
+  height: 16px;
+  border: 1px solid lightgrey;
+  border-radius: 2px;
+}
+.azure-maps-control-list-button.expanded {
+  padding-inline-end: 64px;
+  box-shadow: none;
+}
+.azure-maps-control-list-button.expanded img {
+  margin-inline-end: 16px;
+}
 .tooltiptext.dark {
   background-color: #555;
   color: #fff;
@@ -1408,14 +1483,65 @@ a.azure-map-copyright[href]:hover {
   color: #000;
 }
 .atlas-map.high-contrast-dark .azure-maps-control-container > .style-options.list button,
+.atlas-map.high-contrast-dark .azure-maps-control-container > .azure-maps-control-dropdown,
 .azure-maps-control-container.dark > .style-options.list button {
   background-color: #011C2C;
   color: #CCC;
 }
 .atlas-map.high-contrast-dark .azure-maps-control-container > .style-options.list button :disabled,
+.atlas-map.high-contrast-dark .azure-maps-control-container > .azure-maps-control-dropdown :disabled,
 .azure-maps-control-container.dark > .style-options.list button :disabled {
   color: rgba(255, 255, 255, 0.3);
 }
+.azure-maps-control-container.dark > .azure-maps-control-dropdown,
+.azure-maps-control-container.dark .azure-maps-control-list-button {
+  background-color: #011c2c;
+}
+.atlas-map.high-contrast-dark .azure-maps-control-container > .azure-maps-control-dropdown {
+  border-radius: 0;
+  border: 3px solid #ffffff;
+}
+.atlas-map.high-contrast-light .azure-maps-control-container > .azure-maps-control-dropdown {
+  border-radius: 0;
+  border: 3px solid #000000;
+}
+.azure-maps-control-container.dark .azure-maps-control-list-button {
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 4px;
+  color: white;
+}
+.atlas-map.high-contrast-dark .azure-maps-control-container .azure-maps-control-list-button {
+  background-color: #011C2C;
+  color: #fff;
+}
+.atlas-map.high-contrast-dark .azure-maps-control-container .azure-maps-control-list-button :disabled {
+  color: rgba(255, 255, 255, 0.3);
+}
+.atlas-map.high-contrast-light .azure-maps-control-container .azure-maps-control-list-button {
+  background-color: #FFF;
+  color: #000;
+}
+.atlas-map.high-contrast-dark .azure-maps-control-container .azure-maps-control-list-button.curr-style {
+  border-radius: 0;
+  border: 3px solid #ffffff;
+}
+.atlas-map.high-contrast-light .azure-maps-control-container .azure-maps-control-list-button.curr-style {
+  border-radius: 0;
+  border: 3px solid #000000;
+}
+.azure-maps-control-container.dark .azure-maps-control-list-button:hover,
+.azure-maps-control-container.dark .azure-maps-control-list-button[aria-current="true"] {
+  background-color: #31acce;
+}
+.atlas-map.high-contrast-dark .azure-maps-control-container .azure-maps-control-list-button:hover,
+.atlas-map.high-contrast-dark .azure-maps-control-container .azure-maps-control-list-button[aria-current="true"] {
+  background-color: #FFF;
+  color: #000;
+}
+.atlas-map.high-contrast-light .azure-maps-control-container .azure-maps-control-list-button:hover,
+.atlas-map.high-contrast-light .azure-maps-control-container .azure-maps-control-list-button[aria-current="true"] {
+  background-color: #011C2C;
+  color: #fff;
+}
 .azure-maps-control-container > .style-options.list button:hover,
 .azure-maps-control-container > .style-options.list button:focus {
   color: #31ACCE;

package/dist/atlas.js

@@ -43487,7 +43487,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    return Url;
 	}());
 
-	var version = "2.1.6";
+	var version = "2.1.8";
 
 	/**
 	 * A helper class that provides methods for getting various forms of the map controls current version.
@@ -43532,7 +43532,8 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
 	        tooltipContent.classList.add('dark');
 	    }
-	    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
+	    var themeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+	    var onThemeChange = function (e) {
 	        var isDark = e.matches;
 	        if (isDark && !tooltipContent.classList.contains('dark')) {
 	            tooltipContent.classList.add('dark');
@@ -43540,7 +43541,14 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        else if (!isDark && tooltipContent.classList.contains('dark')) {
 	            tooltipContent.classList.remove('dark');
 	        }
-	    });
+	    };
+	    // compensate for browsers where MediaQueryList is not derived from EventTarget (pre iOS13 Safari)
+	    if (typeof themeQuery.addEventListener === 'function') {
+	        themeQuery.addEventListener('change', function (e) { return onThemeChange(e); });
+	    }
+	    else if (typeof themeQuery.addListener === 'function') {
+	        themeQuery.addListener(function (e) { return onThemeChange(e); });
+	    }
 	    return tooltipContent;
 	};
 	/**
@@ -46839,6 +46847,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var styleOpsGrid = this.buildStyleOpsGrid(container);
 	        var currStyleButton = this.buildCurrStyleBtn(container, styleOpsGrid);
 	        var tooltip = buildAccessibleTooltip("Select Style");
+	        styleOpsGrid.classList.add(options ? options.position || 'top-right' : 'top-right');
 	        container.addEventListener("mouseover", function () {
 	            _this.hasMouse = true;
 	            container.classList.add(StyleControl.Css.inUse);
@@ -46904,6 +46913,9 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	            if (image.alt !== newAlt) {
 	                image.alt = newAlt;
 	            }
+	            if (image.parentElement.lastChild instanceof Text) {
+	                image.parentElement.lastChild.textContent = newAlt;
+	            }
 	        }
 	    };
 	    /**
@@ -46934,12 +46946,16 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        styleOptionButton.setAttribute("type", "button");
 	        var styleIconImage = new Image();
 	        styleIconImage.src = icon;
-	        styleIconImage.alt = friendlyName;
+	        if (this.options.layout === "icons") {
+	            styleIconImage.alt = friendlyName;
+	        }
 	        styleOptionButton.appendChild(styleIconImage);
 	        if (this.options.layout === "icons") {
 	            styleOptionButton.classList.add(StyleControl.Css.button);
 	        }
 	        else {
+	            styleOptionButton.classList.add(StyleControl.Css.listButton);
+	            styleOptionButton.classList.add(StyleControl.Css.expanded);
 	            styleOptionButton.appendChild(document.createTextNode(friendlyName));
 	        }
 	        styleOptionButton.addEventListener("click", function () {
@@ -46962,7 +46978,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    };
 	    StyleControl.prototype.buildCurrStyleBtn = function (container, opsGrid) {
 	        var selectCurrButton = document.createElement("button");
-	        selectCurrButton.classList.add(StyleControl.Css.button);
+	        if (this.options.layout == 'icons') {
+	            selectCurrButton.classList.add(StyleControl.Css.button);
+	        }
+	        else {
+	            selectCurrButton.classList.add(StyleControl.Css.listButton);
+	        }
 	        selectCurrButton.classList.add(StyleControl.Css.currentStyle);
 	        selectCurrButton.setAttribute("aria-label", "Select Style");
 	        selectCurrButton.setAttribute("alt", "Select Style");
@@ -46978,7 +46999,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	        var _this = this;
 	        var styleOpsGrid = document.createElement("div");
 	        styleOpsGrid.classList.add(StyleControl.Css.styleOptions);
-	        styleOpsGrid.classList.add(this.options.layout);
+	        if (this.options.layout === 'icons') {
+	            styleOpsGrid.classList.add(this.options.layout);
+	        }
+	        else {
+	            styleOpsGrid.classList.add(StyleControl.Css.dropdown);
+	        }
 	        styleOpsGrid.setAttribute("aria-label", "Style Options");
 	        styleOpsGrid.classList.add("hidden-accessible-element");
 	        // Once the map's style definition is initialized create a map between style names and icons.
@@ -47012,6 +47038,7 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                    if (style.name === currStyle) {
 	                        _this.currStyleImage.src = iconUrl;
 	                        _this.currStyleImage.alt = _this.mapToFriendlyStyleName(style.name);
+	                        _this.currStyleImage.parentElement.appendChild(document.createTextNode(_this.mapToFriendlyStyleName(style.name)));
 	                    }
 	                }
 	            }
@@ -47027,9 +47054,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                    var styleOptionButton = _this.buildSelectStyleBtn(styleName, iconUrl);
 	                    styleOpsGrid.appendChild(styleOptionButton);
 	                    _this.styleButtons[styleName] = styleOptionButton;
-	                    var tooltip = buildAccessibleTooltip(_this.mapToFriendlyStyleName(styleName));
-	                    styleOpsGrid.appendChild(tooltip);
-	                    positionTooltip(tooltip, styleOptionButton);
+	                    if (_this.options.layout === "icons") {
+	                        var tooltip = buildAccessibleTooltip(_this.mapToFriendlyStyleName(styleName));
+	                        styleOpsGrid.appendChild(tooltip);
+	                        positionTooltip(tooltip, styleOptionButton);
+	                    }
 	                });
 	            }
 	            else {
@@ -47038,9 +47067,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	                    var styleOptionButton = _this.buildSelectStyleBtn(styleName, iconUrl);
 	                    styleOpsGrid.appendChild(styleOptionButton);
 	                    _this.styleButtons[styleName] = styleOptionButton;
-	                    var tooltip = buildAccessibleTooltip(_this.mapToFriendlyStyleName(styleName));
-	                    styleOpsGrid.appendChild(tooltip);
-	                    positionTooltip(tooltip, styleOptionButton);
+	                    if (_this.options.layout === "icons") {
+	                        var tooltip = buildAccessibleTooltip(_this.mapToFriendlyStyleName(styleName));
+	                        styleOpsGrid.appendChild(tooltip);
+	                        positionTooltip(tooltip, styleOptionButton);
+	                    }
 	                });
 	            }
 	            Object.entries(_this.styleButtons).forEach(function (_a) {
@@ -47062,9 +47093,12 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    StyleControl.InvertOrderPositions = [exports.ControlPosition.TopRight, exports.ControlPosition.BottomRight];
 	    StyleControl.Css = {
 	        button: "azure-maps-control-button",
+	        listButton: "azure-maps-control-list-button",
+	        expanded: 'expanded',
 	        currentStyle: "curr-style",
 	        inUse: "in-use",
-	        styleOptions: "style-options"
+	        styleOptions: "style-options",
+	        dropdown: "azure-maps-control-dropdown"
 	    };
 	    StyleControl.StyleNamesMap = {
 	        road: "Road",
@@ -78212,6 +78246,14 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	         * @default 'sans-serif'
 	         */
 	        _this.localIdeographFontFamily = 'sans-serif';
+	        /**
+	         * True to validate styles before it's getting applied.
+	         * Validation takes significant(few hundred ms) time to process styles during initial load.
+	         * Can be set to false for production environment to improve performance.
+	         * @internal
+	         * @default 'true'
+	         */
+	        _this.validateStyle = true;
 	        return _this;
 	    }
 	    /**
@@ -78411,7 +78453,11 @@ EFFET JURIDIQUE. Le présent contrat décrit certains droits juridiques. Vous po
 	    StyleManager.prototype.setStyleUrl = function (styleOptions) {
 	        var styleUrl = this.getStyleUrl(styleOptions);
 	        try {
-	            this.map._getMap().setStyle(styleUrl, { diff: true, stylePatch: this._stylePatch.bind(this) });
+	            this.map._getMap().setStyle(styleUrl, {
+	                diff: true,
+	                stylePatch: this._stylePatch.bind(this),
+	                validate: this.serviceOptions.validateStyle
+	            });
 	        }
 	        catch (e) {
 	            throw e;