@igo2/geo 1.14.2 → 1.14.4

package/fesm2020/igo2-geo.mjs

@@ -19,7 +19,7 @@ import { IgoLanguageModule, ConfigService, Media, StorageScope, IgoMessageModule
 import * as i3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i7 from '@ngx-translate/core';
-import { BehaviorSubject, combineLatest, of, Observable, forkJoin, Subject, interval, skipWhile as skipWhile$1, zip, EMPTY, ReplaySubject, timer, fromEvent, Subscription, throwError, take as take$1 } from 'rxjs';
+import { BehaviorSubject, combineLatest, of, Observable, forkJoin, Subject, interval, pairwise, skipWhile as skipWhile$1, zip, EMPTY, ReplaySubject, timer, fromEvent, Subscription, throwError, take as take$1 } from 'rxjs';
 import { map, concatMap, first, catchError, skipWhile, debounceTime, skip, distinctUntilChanged, switchMap, take, mergeMap, debounce, takeUntil, startWith } from 'rxjs/operators';
 import { Watcher, uuid, SubjectStatus, NumberUtils, ObjectUtils, userAgent, Clipboard, downloadContent, strEnum, ChangeUtils } from '@igo2/utils';
 import olMap from 'ol/Map';
@@ -300,7 +300,7 @@ MetadataAbstractComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: M
     } }, dependencies: [i1.NgIf, i3$1.MatButton, i3.MatDialogClose, i3.MatDialogTitle, i3.MatDialogContent], styles: [".close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}mat-dialog-container{position:relative}\n"], encapsulation: 2 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MetadataAbstractComponent, [{
         type: Component,
-        args: [{ selector: 'igo-metadata-abstract', encapsulation: ViewEncapsulation.None, template: "<h2 mat-dialog-title>{{ data.layerTitle }}</h2>\n<button class=\"close-button\" mat-button mat-dialog-close>X</button>\n<mat-dialog-content *ngIf=\"data.type !== 'arcgisrest'\" class=\"mat-typography\">\n  <h3>{{ data.abstract }}</h3>\n</mat-dialog-content>\n<mat-dialog-content *ngIf=\"data.type === 'arcgisrest'\" class=\"mat-typography\">\n  <h3 [innerHTML]=\"data.abstract\"></h3>\n</mat-dialog-content>\n", styles: [".close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}mat-dialog-container{position:relative}\n"] }]
+        args: [{ selector: 'igo-metadata-abstract', encapsulation: ViewEncapsulation.None, template: "<h2 mat-dialog-title>{{ data.layerTitle }}</h2>\r\n<button class=\"close-button\" mat-button mat-dialog-close>X</button>\r\n<mat-dialog-content *ngIf=\"data.type !== 'arcgisrest'\" class=\"mat-typography\">\r\n  <h3>{{ data.abstract }}</h3>\r\n</mat-dialog-content>\r\n<mat-dialog-content *ngIf=\"data.type === 'arcgisrest'\" class=\"mat-typography\">\r\n  <h3 [innerHTML]=\"data.abstract\"></h3>\r\n</mat-dialog-content>\r\n", styles: [".close-button{top:5px;right:5px;padding:7px;line-height:10px;position:absolute!important;min-width:auto}mat-dialog-container{position:relative}\n"] }]
     }], function () { return [{ type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -7978,11 +7978,16 @@ class IgoMap {
             if (this.geolocationController) {
                 this.geolocationController.updateGeolocationOptions(this.mapViewOptions);
             }
-            this.layers$.subscribe((layers) => {
+            this.layers$.pipe(pairwise()).subscribe(([prevLayers, currentLayers]) => {
+                let prevLayersId;
+                if (prevLayers) {
+                    prevLayersId = prevLayers.map((l) => l.id);
+                }
+                const layers = currentLayers.filter((l) => !prevLayersId.includes(l.id));
                 for (const layer of layers) {
                     if (layer.options.linkedLayers) {
                         layer.ol.once('postrender', () => {
-                            initLayerSyncFromRootParentLayers(this, this.layers);
+                            initLayerSyncFromRootParentLayers(this, layers);
                         });
                     }
                 }
@@ -9237,10 +9242,10 @@ MenuButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuBut
         i0.ɵɵelementEnd();
     } if (rf & 2) {
         i0.ɵɵproperty("ngClass", ctx.menuButtonClass)("matTooltip", i0.ɵɵpipeBind1(1, 2, ctx.sidenavOpened ? "menu.close" : "menu.open"));
-    } }, dependencies: [i1.NgClass, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: ["#menu-button[_ngcontent-%COMP%]{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color[_ngcontent-%COMP%]{height:40px;border-radius:0;height:45px;width:48px;left:0px;top:3px}#menu-button.menu-button-reverse-color-close[_ngcontent-%COMP%]{border-radius:0;left:5px;top:5px}mat-icon.disabled[_ngcontent-%COMP%]{color:#00000061}#menu-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}"] });
+    } }, dependencies: [i1.NgClass, i2.MatIcon, i3$1.MatButton, i4.MatTooltip, i7.TranslatePipe], styles: ["#menu-button[_ngcontent-%COMP%]{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color[_ngcontent-%COMP%]{height:40px;border-radius:0;height:45px;width:48px;left:0;top:3px}#menu-button.menu-button-reverse-color-close[_ngcontent-%COMP%]{border-radius:0;left:5px;top:5px}mat-icon.disabled[_ngcontent-%COMP%]{color:#00000061}#menu-button[_ngcontent-%COMP%]     div.mat-button-ripple-round{border-radius:0}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuButtonComponent, [{
         type: Component,
-        args: [{ selector: 'igo-menu-button', template: "<button\n    mat-icon-button\n    id= \"menu-button\"\n    [ngClass]=\"menuButtonClass\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"(sidenavOpened ? 'menu.close' : 'menu.open') | translate\"\n    (click)=\"onToggleSidenavClick()\">\n    <mat-icon svgIcon=\"menu\"></mat-icon>\n</button>\n", styles: ["#menu-button{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color{height:40px;border-radius:0;height:45px;width:48px;left:0px;top:3px}#menu-button.menu-button-reverse-color-close{border-radius:0;left:5px;top:5px}mat-icon.disabled{color:#00000061}#menu-button ::ng-deep div.mat-button-ripple-round{border-radius:0}\n"] }]
+        args: [{ selector: 'igo-menu-button', template: "<button\n    mat-icon-button\n    id= \"menu-button\"\n    [ngClass]=\"menuButtonClass\"\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"(sidenavOpened ? 'menu.close' : 'menu.open') | translate\"\n    (click)=\"onToggleSidenavClick()\">\n    <mat-icon svgIcon=\"menu\"></mat-icon>\n</button>\n", styles: ["#menu-button{background-color:#fff;border-radius:0;left:5px;top:5px}#menu-button.menu-button-reverse-color{height:40px;border-radius:0;height:45px;width:48px;left:0;top:3px}#menu-button.menu-button-reverse-color-close{border-radius:0;left:5px;top:5px}mat-icon.disabled{color:#00000061}#menu-button ::ng-deep div.mat-button-ripple-round{border-radius:0}\n"] }]
     }], function () { return [{ type: i2$1.ConfigService }]; }, { sidenavOpened: [{
             type: Input
         }], openSidenav: [{
@@ -10139,19 +10144,18 @@ class MiniBaseMapComponent {
         if (!linkedLayers) {
             return;
         }
-        const currentLinkedId = linkedLayers.linkId;
-        const currentLinks = linkedLayers.links;
-        const isParentLayer = currentLinks ? true : false;
-        if (isParentLayer && currentLinkedId === baselayer.options.linkedLayers.linkId) {
+        const links = linkedLayers.links;
+        const isParentLayer = links ? true : false;
+        if (isParentLayer) {
             // search for child layers
-            currentLinks.map(link => {
-                link.linkedIds.map(linkedId => {
-                    const layerToApply = this.map.layers.find(l => l.options.linkedLayers?.linkId === linkedId);
+            links.map((link) => {
+                link.linkedIds.map((linkedId) => {
+                    const layerToApply = this.map.layers.find((layer) => layer.options.linkedLayers?.linkId === linkedId);
                     if (layerToApply) {
                         const linkedLayerOptions = Object.assign(Object.create(layerToApply.options), layerToApply.options, {
                             zIndex: 9000,
-                            visible: true,
-                            baseLayer: false,
+                            visible: layerToApply.options.linkedLayers?.showInMiniBaseMap ?? true,
+                            baseLayer: false
                         });
                         this.basemap.addLayer(this.layerService.createLayer(linkedLayerOptions));
                     }
@@ -10427,10 +10431,10 @@ SwipeControlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Swipe
         i0.ɵɵelementStart(2, "div", 2);
         i0.ɵɵelement(3, "div", 3)(4, "div", 4);
         i0.ɵɵelementEnd()();
-    } }, styles: [".igo-swipe-control-container[_ngcontent-%COMP%]{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:-webkit-grab;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container[_ngcontent-%COMP%]:active{cursor:-webkit-grabbing;cursor:grabbing}.igo-swipe-control-line[_ngcontent-%COMP%]{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows[_ngcontent-%COMP%]{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows[_ngcontent-%COMP%]   .igo-arrow-right[_ngcontent-%COMP%]{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows[_ngcontent-%COMP%]   .igo-arrow-left[_ngcontent-%COMP%]{border-right:10px solid white}.igo-swipe-control-arrows[_ngcontent-%COMP%]:active{display:none}"] });
+    } }, styles: [".igo-swipe-control-container[_ngcontent-%COMP%]{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container[_ngcontent-%COMP%]:active{cursor:grabbing}.igo-swipe-control-line[_ngcontent-%COMP%]{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows[_ngcontent-%COMP%]{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows[_ngcontent-%COMP%]   .igo-arrow-right[_ngcontent-%COMP%]{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows[_ngcontent-%COMP%]   .igo-arrow-left[_ngcontent-%COMP%]{border-right:10px solid white}.igo-swipe-control-arrows[_ngcontent-%COMP%]:active{display:none}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SwipeControlComponent, [{
         type: Component,
-        args: [{ selector: 'igo-swipe-control', template: "<div class=\"igo-swipe-control-container\"  id=\"igo-layer-swipe\"\n  (mousedown)=\"dragDown($event)\"\n  (mouseup)=\"closeDragMouseElement()\"\n  (touchstart)=\"dragDown($event)\"\n  (touchend)=\"closeDragTouchElement()\">\n  <div class=\"igo-swipe-control-line\" ></div>\n  \n  <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\n    <div class=\"igo-arrow-left\"></div>\n    <div class=\"igo-arrow-right\"></div>\n  </div>\n</div>\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:-webkit-grab;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:-webkit-grabbing;cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] }]
+        args: [{ selector: 'igo-swipe-control', template: "<div class=\"igo-swipe-control-container\"  id=\"igo-layer-swipe\"\n  (mousedown)=\"dragDown($event)\"\n  (mouseup)=\"closeDragMouseElement()\"\n  (touchstart)=\"dragDown($event)\"\n  (touchend)=\"closeDragTouchElement()\">\n  <div class=\"igo-swipe-control-line\" ></div>\n  \n  <div class=\"igo-swipe-control-arrows\" id=\"arrows\">\n    <div class=\"igo-arrow-left\"></div>\n    <div class=\"igo-arrow-right\"></div>\n  </div>\n</div>\n", styles: [".igo-swipe-control-container{position:absolute;width:80px;height:100%;top:0%;left:50%;cursor:grab;z-index:1;transform:translate(-40px)}.igo-swipe-control-container:active{cursor:grabbing}.igo-swipe-control-line{position:absolute;width:4px;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#5e5a5a}.igo-swipe-control-arrows{position:absolute;width:32px;height:32px;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;padding:5px 4px;background-color:#5e5a5a;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0)}.igo-swipe-control-arrows div{display:inline-block;width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.igo-swipe-control-arrows .igo-arrow-right{margin-left:4px;border-left:10px solid white}.igo-swipe-control-arrows .igo-arrow-left{border-right:10px solid white}.igo-swipe-control-arrows:active{display:none}\n"] }]
     }], function () { return []; }, { map: [{
             type: Input
         }] }); })();
@@ -13114,10 +13118,10 @@ LayerLegendComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayerL
         i0.ɵɵpipe(1, "async");
     } if (rf & 2) {
         i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 1, ctx.legendItems$));
-    } }, dependencies: [i13.MatFormField, i2$2.NgControlStatus, i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2$2.NgModel, i2.MatIcon, i15.MatSelect, i9.MatOption, i4.MatTooltip, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i5$1.CollapseDirective, i5$1.ImageErrorDirective, i1.AsyncPipe, i7.TranslatePipe, i5$1.SanitizeHtmlPipe], styles: [".igo-layer-legend.with-title[_ngcontent-%COMP%]{padding-left:18px}img[_ngcontent-%COMP%]:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"], changeDetection: 0 });
+    } }, dependencies: [i13.MatFormField, i2$2.NgControlStatus, i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i2$2.NgModel, i2.MatIcon, i15.MatSelect, i9.MatOption, i4.MatTooltip, i5.MatListItem, i5.MatListAvatarCssMatStyler, i9.MatLine, i5$1.CollapseDirective, i5$1.ImageErrorDirective, i1.AsyncPipe, i7.TranslatePipe, i5$1.SanitizeHtmlPipe], styles: [".igo-layer-legend.with-title[_ngcontent-%COMP%]{padding-left:18px}img[_ngcontent-%COMP%]:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayerLegendComponent, [{
         type: Component,
-        args: [{ selector: 'igo-layer-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"legendItems$ | async as items\">\n  <ng-container *ngIf=\"items.length; else noItems\">\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\n      <div *ngIf=\"getLegend; else noItems\">\n        <mat-list-item *ngIf=\"item.title\">\n          <mat-icon\n            id=\"legend-toggle\"\n            class=\"igo-chevron\"\n            mat-list-avatar\n            igoCollapse\n            [target]=\"legend\"\n            [collapsed]=\"(item.collapsed)\"\n            (toggle)=\"toggleLegendItem($event, item)\"\n            svgIcon=\"chevron-up\">\n          </mat-icon>\n          <h4 matLine>{{computeItemTitle(item) | async}} </h4>\n        </mat-list-item>\n        <div #legend class=\"igo-layer-legend\" [ngClass]=\"{'with-title': item.title}\">\n          <div *ngIf=\"currentStyle !== undefined\">\n              <mat-form-field>\n                <mat-select tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n                  [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" [(ngModel)]=\"currentStyle\"\n                  (selectionChange)=\"onChangeStyle()\">\n                  <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{style.title}}</mat-option>\n                </mat-select>\n            </mat-form-field>\n          </div>\n          <div *ngIf=\"!(item.collapsed)\">\n            <div *ngIf=\"item.url\">\n              <img igoImageError *ngIf=\"item.imgGraphValue\" hideError=\"true\" #renderedLegend id=\"{{item.title}}\" (load)=\"onLoadImage(item.title)\"\n                [src]=\"item.imgGraphValue\"\n                alt=\"{{'igo.geo.layer.legend.loadingLegendText' | translate}}\">\n              <small *ngIf=\"imagesHeight[item.title]<16\">\n                  {{'igo.geo.layer.legend.noLegendScale' | translate}}\n              </small>\n            </div>\n            <div\n              [ngStyle]=\"item.style\"\n              [innerHTML]=\"item.html | sanitizeHtml\"\n              *ngIf=\"item.html\">\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #noItems>\n    <small>\n      {{'igo.geo.layer.legend.noLegendText' | translate}}\n    </small>\n  </ng-template>\n\n</ng-container>\n", styles: [".igo-layer-legend.with-title{padding-left:18px}img:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;-webkit-animation:2s linear infinite spin;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@-webkit-keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        args: [{ selector: 'igo-layer-legend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"legendItems$ | async as items\">\n  <ng-container *ngIf=\"items.length; else noItems\">\n    <ng-container *ngFor=\"let item of items.slice().reverse()\" #renderedLegends>\n      <div *ngIf=\"getLegend; else noItems\">\n        <mat-list-item *ngIf=\"item.title\">\n          <mat-icon\n            id=\"legend-toggle\"\n            class=\"igo-chevron\"\n            mat-list-avatar\n            igoCollapse\n            [target]=\"legend\"\n            [collapsed]=\"(item.collapsed)\"\n            (toggle)=\"toggleLegendItem($event, item)\"\n            svgIcon=\"chevron-up\">\n          </mat-icon>\n          <h4 matLine>{{computeItemTitle(item) | async}} </h4>\n        </mat-list-item>\n        <div #legend class=\"igo-layer-legend\" [ngClass]=\"{'with-title': item.title}\">\n          <div *ngIf=\"currentStyle !== undefined\">\n              <mat-form-field>\n                <mat-select tooltip-position=\"below\" matTooltipShowDelay=\"500\"\n                  [matTooltip]=\"'igo.geo.layer.legend.selectStyle' | translate\" [(ngModel)]=\"currentStyle\"\n                  (selectionChange)=\"onChangeStyle()\">\n                  <mat-option *ngFor=\"let style of styles\" [value]=\"style.name\">{{style.title}}</mat-option>\n                </mat-select>\n            </mat-form-field>\n          </div>\n          <div *ngIf=\"!(item.collapsed)\">\n            <div *ngIf=\"item.url\">\n              <img igoImageError *ngIf=\"item.imgGraphValue\" hideError=\"true\" #renderedLegend id=\"{{item.title}}\" (load)=\"onLoadImage(item.title)\"\n                [src]=\"item.imgGraphValue\"\n                alt=\"{{'igo.geo.layer.legend.loadingLegendText' | translate}}\">\n              <small *ngIf=\"imagesHeight[item.title]<16\">\n                  {{'igo.geo.layer.legend.noLegendScale' | translate}}\n              </small>\n            </div>\n            <div\n              [ngStyle]=\"item.style\"\n              [innerHTML]=\"item.html | sanitizeHtml\"\n              *ngIf=\"item.html\">\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n\n  <ng-template #noItems>\n    <small>\n      {{'igo.geo.layer.legend.noLegendText' | translate}}\n    </small>\n  </ng-template>\n\n</ng-container>\n", styles: [".igo-layer-legend.with-title{padding-left:18px}img:after{content:\" \";position:relative;height:17px;float:left;width:17px;top:-3px;right:19px;background-color:#fff;border:3px solid #f3f3f3;border-radius:50%;animation:2s linear infinite spin}@-moz-document url-prefix(){img:after{margin-left:19px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
     }], function () { return [{ type: CapabilitiesService }, { type: i2$1.LanguageService }, { type: i2$1.ConfigService }, { type: i1$1.HttpClient }, { type: i0.ChangeDetectorRef }]; }, { updateLegendOnResolutionChange: [{
             type: Input
         }], renderedLegends: [{
@@ -17965,10 +17969,10 @@ DrawPopupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DrawPopu
         i0.ɵɵproperty("ngIf", ctx.labelFlag !== ctx.labelType.Custom);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.labelFlag === ctx.labelType.Custom);
-    } }, dependencies: [i1.NgForOf, i1.NgIf, i3$1.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i14.MatInput, i15.MatSelect, i9.MatOption, i3.MatDialogTitle, i3.MatDialogActions, i17.MatRadioGroup, i17.MatRadioButton, i12.MatCheckbox, i7.TranslatePipe], styles: [".mat-radio-button[_ngcontent-%COMP%] ~ .mat-radio-button[_ngcontent-%COMP%]{margin-left:16px}.readOnly-Input[_ngcontent-%COMP%]{width:200px!important}.unit-field[_ngcontent-%COMP%]{width:50px;margin-left:10px;margin-top:10px}.mat-form-field[_ngcontent-%COMP%]{position:-webkit-sticky!important;position:sticky!important}.coordinatesInputView[_ngcontent-%COMP%]{top:5em!important}  .mat-form-field-wrapper{margin-bottom:-1.25em;margin-top:.25em}.geometry-type-toggle[_ngcontent-%COMP%], .mat-dialog-actions[_ngcontent-%COMP%]{display:flex!important;justify-content:center}.input[_ngcontent-%COMP%]{width:auto!important}.mat-button-toggle-group[_ngcontent-%COMP%], .mat-button-toggle[_ngcontent-%COMP%]{width:100%}mat-checkbox[_ngcontent-%COMP%]{margin-right:10px}"] });
+    } }, dependencies: [i1.NgForOf, i1.NgIf, i3$1.MatButton, i18.MatButtonToggleGroup, i18.MatButtonToggle, i13.MatFormField, i14.MatInput, i15.MatSelect, i9.MatOption, i3.MatDialogTitle, i3.MatDialogActions, i17.MatRadioGroup, i17.MatRadioButton, i12.MatCheckbox, i7.TranslatePipe], styles: [".mat-radio-button[_ngcontent-%COMP%] ~ .mat-radio-button[_ngcontent-%COMP%]{margin-left:16px}.readOnly-Input[_ngcontent-%COMP%]{width:200px!important}.unit-field[_ngcontent-%COMP%]{width:50px;margin-left:10px;margin-top:10px}.mat-form-field[_ngcontent-%COMP%]{position:sticky!important}.coordinatesInputView[_ngcontent-%COMP%]{top:5em!important}  .mat-form-field-wrapper{margin-bottom:-1.25em;margin-top:.25em}.geometry-type-toggle[_ngcontent-%COMP%], .mat-dialog-actions[_ngcontent-%COMP%]{display:flex!important;justify-content:center}.input[_ngcontent-%COMP%]{width:auto!important}.mat-button-toggle-group[_ngcontent-%COMP%], .mat-button-toggle[_ngcontent-%COMP%]{width:100%}mat-checkbox[_ngcontent-%COMP%]{margin-right:10px}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrawPopupComponent, [{
         type: Component,
-        args: [{ selector: 'igo-draw-popup-component', template: "<div>\n  <h2 mat-dialog-title>\n    {{ 'igo.geo.draw.popupTitle' | translate }}\n  </h2>\n</div>\n\n\n<div class=\"geometry-type-toggle mat-typography\">\n  <mat-button-toggle-group\n    (change)=\"onLabelTypeChange($event.value)\" [value]=\"customOrPredefined\">\n    <mat-button-toggle [value]=\"labelType.Custom\" >\n      {{ 'igo.geo.draw.labelType.custom' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle [value]=\"labelType.Predefined\">\n      {{ 'igo.geo.draw.labelType.predefined' | translate }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<div *ngIf=\"labelFlag !== labelType.Custom\">\n  <div>\n    <p class=\"mat-typography\">{{ 'igo.geo.draw.builtInInstructions' | translate }}</p>\n    <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\" class=\"mat-typography\">\n      <mat-radio-button *ngFor=\"let option of arrayBuiltInType\" [value]=\"option.value\" [disabled]=\"optionAvailable(option.value)\" \n      (change)=\"onLabelTypeChange($event.value)\" [checked]=\"option.checked\">\n        {{getProperLengthLabel(option.value)}}\n      </mat-radio-button>\n    </mat-radio-group>\n    <ng-container class=\"mat-typography\" *ngIf=\"olGeometryType === 'Polygon'\">\n      <mat-checkbox\n        *ngFor=\"let option of arrayBuiltInType\"\n        class=\"mat-typography\"\n        [value]=\"option.value\"\n        [disabled]=\"optionAvailable(option.value)\"\n        (change)=\"onLabelTypeChange($event.source.value, $event.checked)\"\n        [checked]=\"option.checked\">\n        {{getProperLengthLabel(option.value)}}\n      </mat-checkbox>\n    </ng-container>\n    <div *ngIf=\"labelFlag === labelType.Coordinates\">\n      <mat-form-field class=\"readOnly-Input\">\n        <input\n          #input\n          matInput\n          placeholder=\"(Latitude, Longitude)\"\n          value=\"{{currentCoordinates}}\" readonly>\n      </mat-form-field>\n      <mat-form-field class=\"unit-field\">\n        <mat-select [value]=\"coordinatesMeasureUnit\" (selectionChange)=\"onChangeCoordinateUnit($event.value)\">\n          <mat-option *ngFor=\"let unit of allCoordinatesUnits\" [value]=\"unit\">\n            {{unit}}\n          </mat-option>\n        </mat-select>  \n      </mat-form-field>\n    </div>\n    <div *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\">\n      <mat-form-field class=\"readOnly-Input\">\n        <input\n          #input\n          matInput\n          placeholder={{lengthLabelT}}\n          value=\"{{currentLength}}\" readonly>\n      </mat-form-field>\n      <mat-form-field class=\"unit-field\">\n        <mat-select [value]=\"lengthMeasureUnit\" (selectionChange)=\"onChangeLengthUnit($event.value)\">\n          <mat-option *ngFor=\"let unit of allLengthUnits\" [value]=\"unit\">\n            {{getLengthUnitEnum(unit)}}\n          </mat-option>\n        </mat-select>  \n      </mat-form-field>\n    </div>\n    <div *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\">\n      <mat-form-field class=\"readOnly-Input\">\n        <input\n          #input\n          matInput\n          placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\n          value=\"{{currentArea}}\" readonly>\n      </mat-form-field>\n      <mat-form-field class=\"unit-field\">\n        <mat-select [value]=\"areaMeasureUnit\" (selectionChange)=\"onChangeAreaUnit($event.value)\">\n          <mat-option *ngFor=\"let unit of allAreaUnits\" [value]=\"unit\">\n            {{getAreaUnitEnum(unit)}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n\n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\" >\n      {{'igo.geo.draw.cancel' | translate}}\n    </button>\n    <button \n      mat-raised-button \n      color=\"primary\" \n      (click)=\"confirm()\"> \n      {{noLabelButton()}} \n    </button>\n  </div>\n</div>\n\n<div *ngIf=\"labelFlag === labelType.Custom\">\n  <div>\n    <p class=\"mat-typography\">{{ 'igo.geo.draw.dialogInstruction' | translate }}</p>\n    <mat-form-field class=\"input\">\n      <input\n        #input\n        matInput\n        (select)=\"true\"\n        (input)=\"getLabelLength($event.target.value)\"\n        placeholder=\"{{'igo.geo.draw.dialogTitle' | translate}}\"\n        value=\"{{ currentLabel }}\"\n        cdkFocusInitial/>\n    </mat-form-field>\n  </div>\n  \n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\" >\n      {{'igo.geo.draw.cancel' | translate}}\n    </button>\n    <button \n      mat-raised-button \n      color=\"primary\" \n      (click)=\"confirm(input.value)\">\n      {{noLabelButton()}}\n    </button>\n  </div>\n</div>\n", styles: [".mat-radio-button~.mat-radio-button{margin-left:16px}.readOnly-Input{width:200px!important}.unit-field{width:50px;margin-left:10px;margin-top:10px}.mat-form-field{position:-webkit-sticky!important;position:sticky!important}.coordinatesInputView{top:5em!important}::ng-deep .mat-form-field-wrapper{margin-bottom:-1.25em;margin-top:.25em}.geometry-type-toggle,.mat-dialog-actions{display:flex!important;justify-content:center}.input{width:auto!important}.mat-button-toggle-group,.mat-button-toggle{width:100%}mat-checkbox{margin-right:10px}\n"] }]
+        args: [{ selector: 'igo-draw-popup-component', template: "<div>\n  <h2 mat-dialog-title>\n    {{ 'igo.geo.draw.popupTitle' | translate }}\n  </h2>\n</div>\n\n\n<div class=\"geometry-type-toggle mat-typography\">\n  <mat-button-toggle-group\n    (change)=\"onLabelTypeChange($event.value)\" [value]=\"customOrPredefined\">\n    <mat-button-toggle [value]=\"labelType.Custom\" >\n      {{ 'igo.geo.draw.labelType.custom' | translate }}\n    </mat-button-toggle>\n    <mat-button-toggle [value]=\"labelType.Predefined\">\n      {{ 'igo.geo.draw.labelType.predefined' | translate }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n\n<div *ngIf=\"labelFlag !== labelType.Custom\">\n  <div>\n    <p class=\"mat-typography\">{{ 'igo.geo.draw.builtInInstructions' | translate }}</p>\n    <mat-radio-group *ngIf=\"olGeometryType !== 'Polygon'\" class=\"mat-typography\">\n      <mat-radio-button *ngFor=\"let option of arrayBuiltInType\" [value]=\"option.value\" [disabled]=\"optionAvailable(option.value)\" \n      (change)=\"onLabelTypeChange($event.value)\" [checked]=\"option.checked\">\n        {{getProperLengthLabel(option.value)}}\n      </mat-radio-button>\n    </mat-radio-group>\n    <ng-container class=\"mat-typography\" *ngIf=\"olGeometryType === 'Polygon'\">\n      <mat-checkbox\n        *ngFor=\"let option of arrayBuiltInType\"\n        class=\"mat-typography\"\n        [value]=\"option.value\"\n        [disabled]=\"optionAvailable(option.value)\"\n        (change)=\"onLabelTypeChange($event.source.value, $event.checked)\"\n        [checked]=\"option.checked\">\n        {{getProperLengthLabel(option.value)}}\n      </mat-checkbox>\n    </ng-container>\n    <div *ngIf=\"labelFlag === labelType.Coordinates\">\n      <mat-form-field class=\"readOnly-Input\">\n        <input\n          #input\n          matInput\n          placeholder=\"(Latitude, Longitude)\"\n          value=\"{{currentCoordinates}}\" readonly>\n      </mat-form-field>\n      <mat-form-field class=\"unit-field\">\n        <mat-select [value]=\"coordinatesMeasureUnit\" (selectionChange)=\"onChangeCoordinateUnit($event.value)\">\n          <mat-option *ngFor=\"let unit of allCoordinatesUnits\" [value]=\"unit\">\n            {{unit}}\n          </mat-option>\n        </mat-select>  \n      </mat-form-field>\n    </div>\n    <div *ngIf=\"labelFlag === labelType.Length || polygonCheck === 2\">\n      <mat-form-field class=\"readOnly-Input\">\n        <input\n          #input\n          matInput\n          placeholder={{lengthLabelT}}\n          value=\"{{currentLength}}\" readonly>\n      </mat-form-field>\n      <mat-form-field class=\"unit-field\">\n        <mat-select [value]=\"lengthMeasureUnit\" (selectionChange)=\"onChangeLengthUnit($event.value)\">\n          <mat-option *ngFor=\"let unit of allLengthUnits\" [value]=\"unit\">\n            {{getLengthUnitEnum(unit)}}\n          </mat-option>\n        </mat-select>  \n      </mat-form-field>\n    </div>\n    <div *ngIf=\"labelFlag === labelType.Area || polygonCheck === 2\">\n      <mat-form-field class=\"readOnly-Input\">\n        <input\n          #input\n          matInput\n          placeholder=\"{{ 'igo.geo.draw.labelType.Area' | translate }}\"\n          value=\"{{currentArea}}\" readonly>\n      </mat-form-field>\n      <mat-form-field class=\"unit-field\">\n        <mat-select [value]=\"areaMeasureUnit\" (selectionChange)=\"onChangeAreaUnit($event.value)\">\n          <mat-option *ngFor=\"let unit of allAreaUnits\" [value]=\"unit\">\n            {{getAreaUnitEnum(unit)}}\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n    </div>\n  </div>\n\n\n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\" >\n      {{'igo.geo.draw.cancel' | translate}}\n    </button>\n    <button \n      mat-raised-button \n      color=\"primary\" \n      (click)=\"confirm()\"> \n      {{noLabelButton()}} \n    </button>\n  </div>\n</div>\n\n<div *ngIf=\"labelFlag === labelType.Custom\">\n  <div>\n    <p class=\"mat-typography\">{{ 'igo.geo.draw.dialogInstruction' | translate }}</p>\n    <mat-form-field class=\"input\">\n      <input\n        #input\n        matInput\n        (select)=\"true\"\n        (input)=\"getLabelLength($event.target.value)\"\n        placeholder=\"{{'igo.geo.draw.dialogTitle' | translate}}\"\n        value=\"{{ currentLabel }}\"\n        cdkFocusInitial/>\n    </mat-form-field>\n  </div>\n  \n  <div mat-dialog-actions>\n    <button mat-raised-button (click)=\"cancelDrawing()\" >\n      {{'igo.geo.draw.cancel' | translate}}\n    </button>\n    <button \n      mat-raised-button \n      color=\"primary\" \n      (click)=\"confirm(input.value)\">\n      {{noLabelButton()}}\n    </button>\n  </div>\n</div>\n", styles: [".mat-radio-button~.mat-radio-button{margin-left:16px}.readOnly-Input{width:200px!important}.unit-field{width:50px;margin-left:10px;margin-top:10px}.mat-form-field{position:sticky!important}.coordinatesInputView{top:5em!important}::ng-deep .mat-form-field-wrapper{margin-bottom:-1.25em;margin-top:.25em}.geometry-type-toggle,.mat-dialog-actions{display:flex!important;justify-content:center}.input{width:auto!important}.mat-button-toggle-group,.mat-button-toggle{width:100%}mat-checkbox{margin-right:10px}\n"] }]
     }], function () { return [{ type: i2$1.LanguageService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_DIALOG_DATA]
@@ -38920,10 +38924,10 @@ SearchBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchBa
         i0.ɵɵproperty("ngIf", ctx.searchSelector);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.searchSettings);
-    } }, dependencies: [i1.NgClass, i1.NgIf, i4.MatTooltip, i2.MatIcon, i3$1.MatButton, i13.MatFormField, i13.MatLabel, i14.MatInput, SearchSelectorComponent, SearchSettingsComponent, i1.AsyncPipe, i7.TranslatePipe], styles: ["[_nghost-%COMP%]     .mat-form-field{padding:0 5px}[_nghost-%COMP%]     .mat-form-field-wrapper{margin-bottom:-1.5em}[_nghost-%COMP%]     span.mat-form-field-label-wrapper{top:-20px}[_nghost-%COMP%]     div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}[_nghost-%COMP%]     div.mat-form-field-underline{display:none}.igo-search-bar-container[_ngcontent-%COMP%]{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container[_ngcontent-%COMP%] > mat-form-field[_ngcontent-%COMP%]{width:calc(100% - 80px)}.igo-search-bar-container.empty[_ngcontent-%COMP%] > mat-form-field[_ngcontent-%COMP%]{width:calc(100% - 40px)}.search-bar-buttons[_ngcontent-%COMP%]{position:relative;right:0px;display:inline-flex;top:0}.search-bar-buttons[_ngcontent-%COMP%] > button[_ngcontent-%COMP%]:nth-child(2):before{content:\"\";left:0px;top:5px;border-right:1px solid #ddd;height:28px}igo-search-selector[_ngcontent-%COMP%]{background-color:#fff;top:0;border-radius:0}igo-search-settings[_ngcontent-%COMP%]{background-color:#fff;top:0;border-radius:0}"], changeDetection: 0 });
+    } }, dependencies: [i1.NgClass, i1.NgIf, i4.MatTooltip, i2.MatIcon, i3$1.MatButton, i13.MatFormField, i13.MatLabel, i14.MatInput, SearchSelectorComponent, SearchSettingsComponent, i1.AsyncPipe, i7.TranslatePipe], styles: ["[_nghost-%COMP%]     .mat-form-field{padding:0 5px}[_nghost-%COMP%]     .mat-form-field-wrapper{margin-bottom:-1.5em}[_nghost-%COMP%]     span.mat-form-field-label-wrapper{top:-20px}[_nghost-%COMP%]     div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}[_nghost-%COMP%]     div.mat-form-field-underline{display:none}.igo-search-bar-container[_ngcontent-%COMP%]{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container[_ngcontent-%COMP%] > mat-form-field[_ngcontent-%COMP%]{width:calc(100% - 80px)}.igo-search-bar-container.empty[_ngcontent-%COMP%] > mat-form-field[_ngcontent-%COMP%]{width:calc(100% - 40px)}.search-bar-buttons[_ngcontent-%COMP%]{position:relative;right:0;display:inline-flex;top:0}.search-bar-buttons[_ngcontent-%COMP%] > button[_ngcontent-%COMP%]:nth-child(2):before{content:\"\";left:0;top:5px;border-right:1px solid #ddd;height:28px}igo-search-selector[_ngcontent-%COMP%]{background-color:#fff;top:0;border-radius:0}igo-search-settings[_ngcontent-%COMP%]{background-color:#fff;top:0;border-radius:0}"], changeDetection: 0 });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchBarComponent, [{
         type: Component,
-        args: [{ selector: 'igo-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-bar-container\" [ngClass]=\"{empty: empty$ | async}\">\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input\n      #input\n      matInput\n      autocomplete=\"off\"\n      [ngClass]=\"{'hasSearchIcon': showSearchButton}\"\n      [disabled]=\"disabled$ | async\"\n      [placeholder]=\"placeholder ? placeholder : (placeholder$ | async) ? (placeholder$.value | translate) : undefined\"\n      [value]=\"term$ | async\"\n      (keyup)=\"onKeyup($event)\"\n      (touchend)=\"onKeyup($event)\">\n  </mat-form-field>\n\n  <div class=\"search-bar-buttons\">\n    <button *ngIf=\"(empty$ | async)===false\"\n      mat-icon-button\n      [color]=\"color\"\n      (click)=\"onClearButtonClick()\"\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\">\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n    \n    <button *ngIf=\"showSearchButton\"\n      mat-icon-button\n      [color]=\"color\">\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\n    </button>\n\n    <igo-search-selector\n      *ngIf=\"searchSelector\"\n      [searchTypes]=\"searchTypes\"\n      [searchType]=\"searchType$ | async\"\n      (searchTypeChange)=\"onSearchTypeChange($event)\">\n    </igo-search-selector>\n\n    <igo-search-settings\n      *ngIf=\"searchSettings\"\n      [pointerSummaryEnabled]=\"pointerSummaryEnabled\"\n      (pointerSummaryStatus)=\"pointerSummaryStatus.emit($event)\"\n      [searchResultsGeometryEnabled]=\"searchResultsGeometryEnabled\"\n      (searchResultsGeometryStatus)=\"searchResultsGeometryStatus.emit($event)\"\n      [reverseSearchCoordsFormatEnabled]=\"reverseSearchCoordsFormatEnabled\"\n      (reverseSearchCoordsFormatStatus)=\"reverseSearchCoordsFormatStatus.emit($event)\"\n      (searchSourceChange)=\"onSearchSettingsChange()\">\n    </igo-search-settings>\n  </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field{padding:0 5px}:host ::ng-deep .mat-form-field-wrapper{margin-bottom:-1.5em}:host ::ng-deep span.mat-form-field-label-wrapper{top:-20px}:host ::ng-deep div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}:host ::ng-deep div.mat-form-field-underline{display:none}.igo-search-bar-container{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container>mat-form-field{width:calc(100% - 80px)}.igo-search-bar-container.empty>mat-form-field{width:calc(100% - 40px)}.search-bar-buttons{position:relative;right:0px;display:inline-flex;top:0}.search-bar-buttons>button:nth-child(2):before{content:\"\";left:0px;top:5px;border-right:1px solid #ddd;height:28px}igo-search-selector{background-color:#fff;top:0;border-radius:0}igo-search-settings{background-color:#fff;top:0;border-radius:0}\n"] }]
+        args: [{ selector: 'igo-search-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"igo-search-bar-container\" [ngClass]=\"{empty: empty$ | async}\">\n  <mat-form-field [floatLabel]=\"floatLabel\" [appearance]=\"appearance\">\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\n    <input\n      #input\n      matInput\n      autocomplete=\"off\"\n      [ngClass]=\"{'hasSearchIcon': showSearchButton}\"\n      [disabled]=\"disabled$ | async\"\n      [placeholder]=\"placeholder ? placeholder : (placeholder$ | async) ? (placeholder$.value | translate) : undefined\"\n      [value]=\"term$ | async\"\n      (keyup)=\"onKeyup($event)\"\n      (touchend)=\"onKeyup($event)\">\n  </mat-form-field>\n\n  <div class=\"search-bar-buttons\">\n    <button *ngIf=\"(empty$ | async)===false\"\n      mat-icon-button\n      [color]=\"color\"\n      (click)=\"onClearButtonClick()\"\n      [matTooltip]=\"'igo.geo.search.clearSearch' | translate\">\n      <mat-icon svgIcon=\"close\"></mat-icon>\n    </button>\n    \n    <button *ngIf=\"showSearchButton\"\n      mat-icon-button\n      [color]=\"color\">\n      <mat-icon svgIcon=\"magnify\"></mat-icon>\n    </button>\n\n    <igo-search-selector\n      *ngIf=\"searchSelector\"\n      [searchTypes]=\"searchTypes\"\n      [searchType]=\"searchType$ | async\"\n      (searchTypeChange)=\"onSearchTypeChange($event)\">\n    </igo-search-selector>\n\n    <igo-search-settings\n      *ngIf=\"searchSettings\"\n      [pointerSummaryEnabled]=\"pointerSummaryEnabled\"\n      (pointerSummaryStatus)=\"pointerSummaryStatus.emit($event)\"\n      [searchResultsGeometryEnabled]=\"searchResultsGeometryEnabled\"\n      (searchResultsGeometryStatus)=\"searchResultsGeometryStatus.emit($event)\"\n      [reverseSearchCoordsFormatEnabled]=\"reverseSearchCoordsFormatEnabled\"\n      (reverseSearchCoordsFormatStatus)=\"reverseSearchCoordsFormatStatus.emit($event)\"\n      (searchSourceChange)=\"onSearchSettingsChange()\">\n    </igo-search-settings>\n  </div>\n</div>\n", styles: [":host ::ng-deep .mat-form-field{padding:0 5px}:host ::ng-deep .mat-form-field-wrapper{margin-bottom:-1.5em}:host ::ng-deep span.mat-form-field-label-wrapper{top:-20px}:host ::ng-deep div.mat-form-field-infix{left:5px;right:5px;padding:0 0 12px!important}:host ::ng-deep div.mat-form-field-underline{display:none}.igo-search-bar-container{position:relative;width:100%;display:inline-flex;overflow:hidden}.igo-search-bar-container>mat-form-field{width:calc(100% - 80px)}.igo-search-bar-container.empty>mat-form-field{width:calc(100% - 40px)}.search-bar-buttons{position:relative;right:0;display:inline-flex;top:0}.search-bar-buttons>button:nth-child(2):before{content:\"\";left:0;top:5px;border-right:1px solid #ddd;height:28px}igo-search-selector{background-color:#fff;top:0;border-radius:0}igo-search-settings{background-color:#fff;top:0;border-radius:0}\n"] }]
     }], function () { return [{ type: i2$1.ConfigService }, { type: SearchService }, { type: SearchSourceService }]; }, { searchTypes: [{
             type: Input
         }], searchType: [{
@@ -40494,10 +40498,10 @@ ToastComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToastCompone
         i0.ɵɵproperty("ngIf", ctx.feature.geometry);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("feature", ctx.feature);
-    } }, dependencies: [i1.NgIf, i2.MatIcon, i3$1.MatButton, i5$1.PanelComponent, i5$1.FlexibleComponent, FeatureDetailsComponent], styles: ["[_nghost-%COMP%]{position:absolute;bottom:0px;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details[_ngcontent-%COMP%]     table{width:100%}"] });
+    } }, dependencies: [i1.NgIf, i2.MatIcon, i3$1.MatButton, i5$1.PanelComponent, i5$1.FlexibleComponent, FeatureDetailsComponent], styles: ["[_nghost-%COMP%]{position:absolute;bottom:0;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details[_ngcontent-%COMP%]     table{width:100%}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastComponent, [{
         type: Component,
-        args: [{ selector: 'igo-toast', template: "<igo-flexible #flex\n  collapsedMobile=\"51px\"\n  expandedMobile=\"300px\"\n  [state]=\"state\"\n  (swipeup)=\"swipe($event.type)\"\n  (swipedown)=\"swipe($event.type)\">\n\n  <igo-panel [title]=\"title\">\n    <button\n      mat-icon-button\n      panelLeftButton\n      (click)=\"toggle()\">\n      <mat-icon [svgIcon]=\"['collapsed', 'initial'].indexOf(flex.state) >= 0 ? 'arrow_upward' : 'arrow_downward'\"></mat-icon>\n    </button>\n\n    <button mat-icon-button panelRightButton class=\"igo-icon-button\" (click)=\"zoomToFeatureExtent()\" *ngIf=\"feature.geometry\">\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\n    </button>\n\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n  </igo-panel>\n\n</igo-flexible>\n", styles: [":host{position:absolute;bottom:0px;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"] }]
+        args: [{ selector: 'igo-toast', template: "<igo-flexible #flex\n  collapsedMobile=\"51px\"\n  expandedMobile=\"300px\"\n  [state]=\"state\"\n  (swipeup)=\"swipe($event.type)\"\n  (swipedown)=\"swipe($event.type)\">\n\n  <igo-panel [title]=\"title\">\n    <button\n      mat-icon-button\n      panelLeftButton\n      (click)=\"toggle()\">\n      <mat-icon [svgIcon]=\"['collapsed', 'initial'].indexOf(flex.state) >= 0 ? 'arrow_upward' : 'arrow_downward'\"></mat-icon>\n    </button>\n\n    <button mat-icon-button panelRightButton class=\"igo-icon-button\" (click)=\"zoomToFeatureExtent()\" *ngIf=\"feature.geometry\">\n      <mat-icon svgIcon=\"zoom-in\"></mat-icon>\n    </button>\n\n    <igo-feature-details [feature]=\"feature\"></igo-feature-details>\n  </igo-panel>\n\n</igo-flexible>\n", styles: [":host{position:absolute;bottom:0;width:100%;max-height:calc(100% - 50px);background-color:#fff}igo-feature-details ::ng-deep table{width:100%}\n"] }]
     }], function () { return []; }, { expanded: [{
             type: Input
         }], map: [{