@igo2/geo 19.0.0-next.29 → 19.0.0-next.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igo2/geo",
-  "version": "19.0.0-next.29",
+  "version": "19.0.0-next.30",
   "description": "IGO Library",
   "author": "IGO Community",
   "keywords": [
@@ -25,7 +25,7 @@
       "sass": "./style/style.scss"
     },
     "./theme": {
-      "sass": "./src/geo-theme.scss"
+      "sass": "./src/geo.theme.scss"
     },
     "./package.json": {
       "default": "./package.json"
@@ -42,10 +42,10 @@
     "@angular/material-moment-adapter": "^19.0.0",
     "@angular/material": "^19.0.0",
     "@angular/platform-browser": "^19.0.0",
-    "@igo2/auth": "^19.0.0-next.29",
-    "@igo2/common": "^19.0.0-next.29",
-    "@igo2/core": "^19.0.0-next.29",
-    "@igo2/utils": "^19.0.0-next.29",
+    "@igo2/auth": "^19.0.0-next.30",
+    "@igo2/common": "^19.0.0-next.30",
+    "@igo2/core": "^19.0.0-next.30",
+    "@igo2/utils": "^19.0.0-next.30",
     "@mat-datetimepicker/core": "^15.0.1",
     "@turf/boolean-intersects": "^7.2.0",
     "@turf/buffer": "^7.2.0",
@@ -62,8 +62,8 @@
     "jszip": "^3.10.1",
     "moment": "^2.30.0",
     "nosleep.js": "^0.12.0",
-    "ol-mapbox-style": "^12.5.0",
-    "ol": "10.5.0",
+    "ol-mapbox-style": "^13.1.0",
+    "ol": "10.6.0",
     "proj4": "^2.15.0",
     "rxjs": "^7.8.0",
     "striptags": "^3.2.0",

package/src/geo.theme.scss

@@ -0,0 +1,15 @@
+@use './lib/directions/directions.theming.scss' as directions;
+@use './lib/draw/draw.theming.scss' as draw;
+@use './lib/layer/layer.theming.scss' as layer;
+@use './lib/map/map.theming.scss' as map;
+@use './lib/search/search.theming.scss' as search;
+@use './lib/catalog/catalog.theming.scss' as catalog;
+
+@mixin themes($theme) {
+  @include directions.themes($theme);
+  @include draw.themes($theme);
+  @include layer.themes($theme);
+  @include map.themes($theme);
+  @include search.themes($theme);
+  @include catalog.themes($theme);
+}

package/src/lib/catalog/catalog-browser/catalog-browser.theming.scss

@@ -6,7 +6,7 @@
 }
 
 @mixin density($theme) {
-  $density: mat.m2-get-density-config($theme);
+  $density: mat.get-theme-density($theme);
 
   $theme: map.merge(
     $theme,

package/src/lib/directions/directions-inputs/directions-inputs.theming.scss

@@ -1,12 +1,12 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin igo-directions-inputs-theming($theme) {
+@mixin theme($theme) {
   @include density($theme);
 }
 
 @mixin density($theme) {
-  $density: mat.m2-get-density-config($theme);
+  $density: mat.get-theme-density($theme);
 
   $theme: map.merge(
     $theme,

package/src/lib/directions/directions.theming.scss

@@ -1,8 +1,5 @@
-@use './directions-results/directions-results.theming' as
-  directions-results-theme;
 @use './directions-inputs/directions-inputs.theming' as directions-inputs-theme;
 
-@mixin igo-directions-theming($theme) {
-  @include directions-results-theme.igo-directions-results-theming($theme);
-  @include directions-inputs-theme.igo-directions-inputs-theming($theme);
+@mixin themes($theme) {
+  @include directions-inputs-theme.theme($theme);
 }

package/src/lib/draw/draw.theming.scss

@@ -1,10 +1,4 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin igo-draw-theming($theme) {
-  $foreground: map.get($theme, foreground);
-  $typography: mat.m2-get-typography-config($theme);
-
+@mixin themes($theme) {
   igo-draw-popup-component,
   igo-draw-popup-component,
   igo-draw-shorcuts,
@@ -17,16 +11,7 @@
     }
 
     .igo-map-tooltip-draw {
-      color: mat.m2-get-color-from-palette($foreground, text);
-      font-weight: bold;
-      font-size: mat.m2-font-size($typography, subtitle-1);
-    }
-  }
-
-  igo-draw-popup-component {
-    h1 {
-      font-size: mat.m2-font-size($typography, headline-4);
-      font-family: Roboto, 'Helvetica Neue', sans-serif;
+      font: var(--mat-sys-headline-small);
     }
   }
 }

package/src/lib/layer/layer-legend/layer-legend.theme.scss

@@ -2,20 +2,11 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
-  @include color($theme);
   @include density($theme);
 }
 
-@mixin color($theme) {
-  $primary: map.get($theme, primary);
-
-  igo-layer-legend img:after {
-    border-top-color: mat.m2-get-color-from-palette($primary);
-  }
-}
-
 @mixin density($theme) {
-  $density: mat.m2-get-density-config($theme);
+  $density: mat.get-theme-density($theme);
 
   $theme: map.merge(
     $theme,

package/src/lib/layer/layer-list-tool/layer-list-tool.theming.scss

@@ -2,23 +2,11 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
-  @include color($theme);
   @include density($theme);
 }
 
-@mixin color($theme) {
-  igo-layer-list-tool {
-    mat-form-field {
-      .mat-mdc-text-field-wrapper,
-      .mat-mdc-form-field-focus-overlay {
-        background-color: white !important;
-      }
-    }
-  }
-}
-
 @mixin density($theme) {
-  $density: mat.m2-get-density-config($theme);
+  $density: mat.get-theme-density($theme);
 
   $theme: map.merge(
     $theme,

package/src/lib/layer/layer.theming.scss

@@ -1,21 +1,9 @@
 @use '@angular/material' as mat;
+
 @use './layer-legend/layer-legend.theme.scss' as layer-legend;
 @use './layer-list-tool/layer-list-tool.theming.scss' as layer-list-tool;
-@use './layer-unavailable/layer-unavailable.theme.scss' as layer-unavailable;
-@use './layer-visibility-button/layer-visibility-button.theme.scss' as
-  layer-visibility-button;
-@use './layer-viewer/layer-viewer.theme' as layer-viewer;
-@use './layer-item/layer-item.theme.scss' as layer-item;
-@use './layer-group/layer-group.theme.scss' as layer-group;
-@use './layer-list/layer-list.theme.scss' as layer-list;
 
 @mixin themes($theme) {
   @include layer-legend.theme($theme);
   @include layer-list-tool.theme($theme);
-  @include layer-item.theme($theme);
-  @include layer-group.theme($theme);
-  @include layer-list.theme($theme);
-  @include layer-unavailable.theme($theme);
-  @include layer-viewer.theme($theme);
-  @include layer-visibility-button.theme($theme);
 }

package/src/lib/map/map-browser/map-browser.theming.scss

@@ -1,38 +1,12 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin igo-map-browser-theming($theme) {
-  @include color($theme);
+@mixin theme($theme) {
   @include density($theme);
-  @include typography($theme);
-}
-
-@mixin color($theme) {
-  $primary: map.get($theme, primary);
-  $is-dark: map.get($theme, is-dark);
-
-  igo-map-browser div.ol-attribution > button {
-    color: mat.m2-get-color-from-palette(
-      $primary,
-      if($is-dark, default-contrast, default)
-    );
-    background-color: mat.m2-get-color-from-palette(
-      $primary,
-      if($is-dark, default, default-contrast)
-    );
-  }
-}
-
-@mixin typography($theme) {
-  $typography: mat.m2-get-typography-config($theme);
-
-  igo-map-browser div.ol-attribution > ul {
-    font-size: mat.m2-font-size($typography, body-1);
-  }
 }
 
 @mixin density($theme) {
-  $density: mat.m2-get-density-config($theme);
+  $density: mat.get-theme-density($theme);
   $theme: map.merge(
     $theme,
     (

package/src/lib/map/map.theming.scss

@@ -1,9 +1,5 @@
 @use './map-browser/map-browser.theming.scss' as map-browser;
-@use './zoom-button/zoom-button.theming.scss' as zoom-button;
-@use './menu-button/menu-button.theming.scss' as menu-button;
 
-@mixin igo-map-theming($theme) {
-  @include map-browser.igo-map-browser-theming($theme);
-  @include zoom-button.igo-zoom-button-theming($theme);
-  @include menu-button.theme($theme);
+@mixin themes($theme) {
+  @include map-browser.theme($theme);
 }

package/src/lib/search/search-bar/search-bar.theming.scss

@@ -2,32 +2,8 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
-  @include color($theme);
   @include density($theme);
-
-  igo-search-bar {
-    mat-form-field {
-      .mdc-line-ripple {
-        display: none;
-      }
-    }
-  }
-}
-
-@mixin color($theme) {
-  igo-search-bar {
-    mat-form-field {
-      .mat-mdc-text-field-wrapper,
-      .mat-mdc-form-field-focus-overlay {
-        background-color: white !important;
-      }
-    }
-  }
 }
 
 @mixin density($theme) {
-  igo-search-bar {
-    @include mat.form-field-density($theme);
-    @include mat.icon-button-density($theme);
-  }
 }

package/src/lib/search/search.theming.scss

@@ -1,7 +1,5 @@
 @use './search-bar/search-bar.theming' as search-bar;
-@use './search-results/search-results-item.theme' as search-results-item;
 
-@mixin theme($theme) {
+@mixin themes($theme) {
   @include search-bar.theme($theme);
-  @include search-results-item.theme($theme);
 }

package/src/geo-theme.scss

@@ -1,23 +0,0 @@
-@use './lib/directions/directions.theming.scss' as directions-theme;
-@use './lib/draw/draw.theming.scss' as draw-theme;
-@use './lib/feature/feature.theming.scss' as feature-theme;
-@use './lib/filter/filter.theming.scss' as filter-theme;
-@use './lib/layer/layer.theming.scss' as layer-theme;
-@use './lib/map/map.theming.scss' as map-theme;
-@use './lib/measure/measure.theming.scss' as measure-theme;
-@use './lib/search/search.theming.scss' as search-theme;
-@use './lib/workspace/workspace.theming.scss' as workspace-theme;
-@use './lib/catalog/catalog.theming.scss' as catalog-theme;
-
-@mixin geo-component-themes($theme) {
-  @include directions-theme.igo-directions-theming($theme);
-  @include draw-theme.igo-draw-theming($theme);
-  @include feature-theme.igo-feature-theming($theme);
-  @include filter-theme.igo-filter-theming($theme);
-  @include layer-theme.themes($theme);
-  @include map-theme.igo-map-theming($theme);
-  @include measure-theme.igo-measure-theming($theme);
-  @include search-theme.theme($theme);
-  @include workspace-theme.igo-workspace-theming($theme);
-  @include catalog-theme.themes($theme);
-}

package/src/lib/directions/directions-results/directions-results.theming.scss

@@ -1,10 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin igo-directions-results-theming($theme) {
-  $accent: map.get($theme, accent);
-
-  igo-directions-results mat-list-item.igo-steps:hover {
-    background-color: mat.m2-get-color-from-palette($accent, lighter);
-  }
-}

package/src/lib/feature/feature-details/feature-details.theming.scss

@@ -1,16 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin igo-feature-details-theming($theme) {
-  $is-dark: map.get($theme, is-dark);
-  $foreground: map.get($theme, foreground);
-  $background: map.get($theme, background);
-
-  igo-feature-details > table.igo-striped tbody tr:nth-child(odd) {
-    background-color: mat.m2-get-color-from-palette(
-      $background,
-      if($is-dark, app-bar, status-bar)
-    );
-    color: black;
-  }
-}

package/src/lib/feature/feature.theming.scss

@@ -1,4 +0,0 @@
-@use './feature-details/feature-details.theming.scss' as feature-details;
-@mixin igo-feature-theming($theme) {
-  @include feature-details.igo-feature-details-theming($theme);
-}

package/src/lib/filter/filter.theming.scss

@@ -1,13 +0,0 @@
-@use '@mat-datetimepicker/core/datetimepicker/datetimepicker-theme' as
-  datetimepicker;
-
-@use './time-filter-form/time-filter-form.theming.scss' as time-filter;
-@use './ogc-filter-selection/ogc-filter-selection.theming.scss' as
-  ogc-filter-selection;
-
-@mixin igo-filter-theming($theme) {
-  @include datetimepicker.mat-datetimepicker-theme($theme);
-
-  @include time-filter.igo-time-filter-form-theming($theme);
-  @include ogc-filter-selection.igo-ogc-filter-selection-theming($theme);
-}

package/src/lib/filter/ogc-filter-selection/ogc-filter-selection.theming.scss

@@ -1,18 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin igo-ogc-filter-selection-theming($theme) {
-  $primary: map.get($theme, primary);
-  $accent: map.get($theme, accent);
-  $dark: mat.m2-define-palette(mat.$m2-grey-palette, 800, 700, 900);
-
-  igo-ogc-filter-selection {
-    mat-button-toggle.mat-button-toggle-checked {
-      background-color: mat.m2-get-color-from-palette($accent);
-      color: mat.m2-get-color-from-palette($dark);
-    }
-    mat-button-toggle {
-      color: black !important;
-    }
-  }
-}

package/src/lib/filter/time-filter-form/time-filter-form.theming.scss

@@ -1,5 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin igo-time-filter-form-theming($theme) {
-}

package/src/lib/layer/layer-group/layer-group.theme.scss

@@ -1,28 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include color($theme);
-}
-
-@mixin color($theme) {
-  $background: map.get($theme, background);
-  $foreground: map.get($theme, foreground);
-  igo-layer-group {
-    background-color: mat.m2-get-color-from-palette($background, card);
-
-    button {
-      &.mat-default {
-        mat-icon {
-          color: mat.m2-get-color-from-palette($foreground, base);
-        }
-      }
-
-      &.disabled {
-        mat-icon {
-          color: mat.m2-get-color-from-palette($foreground, disabled);
-        }
-      }
-    }
-  }
-}

package/src/lib/layer/layer-item/layer-item.theme.scss

@@ -1,36 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include color($theme);
-}
-
-@mixin color($theme) {
-  $background: map.get($theme, background);
-  $foreground: map.get($theme, foreground);
-
-  igo-layer-item {
-    background-color: mat.m2-get-color-from-palette($background, card);
-
-    button {
-      &.mat-default {
-        mat-icon {
-          color: mat.m2-get-color-from-palette($foreground, base);
-        }
-      }
-
-      &.disabled {
-        mat-icon {
-          color: mat.m2-get-color-from-palette($foreground, disabled);
-        }
-      }
-    }
-
-    .unavailable-layer {
-      background-color: mat.m2-get-color-from-palette(
-        $background,
-        disabled-list-option
-      );
-    }
-  }
-}

package/src/lib/layer/layer-list/layer-list.theme.scss

@@ -1,51 +0,0 @@
-@use 'sass:map';
-@use 'sass:color';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include color($theme);
-}
-
-@mixin color($theme) {
-  $accent: map.get($theme, accent);
-  $hoveredColor: mat.m2-get-color-from-palette($accent, default);
-
-  igo-layer-list {
-    mat-tree-node {
-      &.--selected,
-      &.--dragged {
-        igo-layer-group,
-        igo-layer-item {
-          background-color: mat.m2-get-color-from-palette($accent, lighter);
-          color: mat.m2-get-color-from-palette($accent, default-contrast);
-        }
-      }
-
-      &.--children-selected {
-        igo-layer-group,
-        igo-layer-item {
-          background-color: color.adjust(
-            $color: mat.m2-get-color-from-palette($accent, lighter),
-            $lightness: 8%
-          );
-          color: mat.m2-get-color-from-palette($accent, default-contrast);
-        }
-      }
-
-      &.--drag-hover {
-        &::after {
-          border-color: $hoveredColor !important;
-        }
-      }
-    }
-
-    // Workaround, the hover freeze when a tree is expanded when dragging
-    mat-tree:not(.--dragging) {
-      mat-tree-node {
-        &:hover::after {
-          border-color: $hoveredColor;
-        }
-      }
-    }
-  }
-}

package/src/lib/layer/layer-unavailable/layer-unavailable.theme.scss

@@ -1,19 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include color($theme);
-}
-
-@mixin color($theme) {
-  $background: map.get($theme, background);
-
-  igo-layer-unavailable {
-    .unavailable-layer {
-      background-color: mat.m2-get-color-from-palette(
-        $background,
-        disabled-list-option
-      );
-    }
-  }
-}

package/src/lib/layer/layer-viewer/_layer-viewer.theme.scss

@@ -1,16 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include color($theme);
-}
-
-@mixin color($theme) {
-  $accent: map.get($theme, accent);
-
-  igo-layer-viewer {
-    .active-background {
-      background-color: mat.m2-get-color-from-palette($accent, 50);
-    }
-  }
-}

package/src/lib/layer/layer-visibility-button/layer-visibility-button.theme.scss

@@ -1,27 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include color($theme);
-}
-
-@mixin color($theme) {
-  $foreground: map.get($theme, foreground);
-
-  igo-layer-visibility-button {
-    button {
-      &.mat-default {
-        mat-icon {
-          color: mat.m2-get-color-from-palette($foreground, base);
-        }
-      }
-
-      &.out-of-range,
-      &.disabled {
-        mat-icon {
-          color: mat.m2-get-color-from-palette($foreground, disabled);
-        }
-      }
-    }
-  }
-}

package/src/lib/map/menu-button/menu-button.theming.scss

@@ -1,20 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../../../../core/src/style/partial/core.variables' as core;
-
-@mixin theme($theme) {
-  @include color($theme);
-}
-
-@mixin color($theme) {
-  $primary: map.get($theme, primary);
-
-  igo-menu-button > button#menu-button {
-    color: core.$app-background-color;
-    background-color: mat.m2-get-color-from-palette($primary);
-  }
-  igo-menu-button > button#menu-button.menu-button-white-background {
-    color: mat.m2-get-color-from-palette($primary);
-    background-color: core.$app-background-color;
-  }
-}

package/src/lib/map/zoom-button/zoom-button.theming.scss

@@ -1,32 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin igo-zoom-button-theming($theme) {
-  $primary: map.get($theme, primary);
-  $accent: map.get($theme, accent);
-  $is-dark: map.get($theme, is-dark);
-
-  igo-zoom-button > div.igo-zoom-button-container > button {
-    &.mat-primary {
-      color: mat.m2-get-color-from-palette(
-        $primary,
-        if($is-dark, default-contrast, default)
-      );
-      background-color: mat.m2-get-color-from-palette(
-        $primary,
-        if($is-dark, default, default-contrast)
-      );
-    }
-
-    &.mat-accent {
-      color: mat.m2-get-color-from-palette(
-        $accent,
-        if($is-dark, default-contrast, default)
-      );
-      background-color: mat.m2-get-color-from-palette(
-        $accent,
-        if($is-dark, default, default-contrast)
-      );
-    }
-  }
-}

package/src/lib/measure/measure.theming.scss

@@ -1,5 +0,0 @@
-@use './measurer/measurer.theming.scss' as measurer;
-
-@mixin igo-measure-theming($theme) {
-  @include measurer.igo-measurer-theming($theme);
-}

package/src/lib/measure/measurer/measurer.theming.scss

@@ -1,26 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin igo-measurer-theming($theme) {
-  @include color($theme);
-  @include typography($theme);
-}
-
-@mixin color($theme) {
-  $foreground: map.get($theme, foreground);
-
-  .igo-map-tooltip-measure {
-    background-color: rgba(255, 204, 51, 0.7);
-    border: 1px solid rgb(255, 205, 51);
-    color: black;
-    font-weight: bold;
-  }
-}
-
-@mixin typography($theme) {
-  $typography: mat.m2-get-typography-config($theme);
-
-  .igo-map-tooltip-measure {
-    font-size: mat.m2-font-size($typography, subtitle-1);
-  }
-}