@igo2/core 16.0.0-rc.0 → 16.0.0-rc.1

package/style/layout.scss

@@ -1,163 +1,163 @@
-/*
- * ------------------------------
- * Padding et margin
- * ------------------------------
- */
-// Les dimensions suivantes suivent les normes de Material Design, mais ne sont pas incluses dans Angular Material
-$layout-spacing-sizes: 0 4 8 12 16 24 32 40 48;
-
-$layout-sides: (
-  t: top,
-  r: right,
-  b: bottom,
-  l: left
-);
-
-@each $size in $layout-spacing-sizes {
-  @each $shortSide, $side in $layout-sides {
-    .m-#{$shortSide}-#{$size} {
-      margin-#{$side}: #{$size}px !important;
-    }
-    .m-#{$shortSide}-#{$size}-neg {
-      margin-#{$side}: -#{$size}px !important;
-    }
-    .p-#{$shortSide}-#{$size} {
-      padding-#{$side}: #{$size}px !important;
-    }
-  }
-
-  .m-#{$size} {
-    margin: #{$size}px !important;
-  }
-  .m-#{$size}-neg {
-    margin: -#{$size}px !important;
-  }
-
-  .p-#{$size} {
-    padding: #{$size}px !important;
-  }
-
-  .m-h-#{$size} {
-    margin-left: #{$size}px !important;
-    margin-right: #{$size}px !important;
-  }
-
-  .m-h-#{$size}-neg {
-    margin-left: -#{$size}px !important;
-    margin-right: -#{$size}px !important;
-  }
-
-  .m-v-#{$size} {
-    margin-top: #{$size}px !important;
-    margin-bottom: #{$size}px !important;
-  }
-
-  .m-v-#{$size}-neg {
-    margin-top: -#{$size}px !important;
-    margin-bottom: -#{$size}px !important;
-  }
-
-  .p-h-#{$size} {
-    padding-left: #{$size}px !important;
-    padding-right: #{$size}px !important;
-  }
-
-  .p-v-#{$size} {
-    padding-top: #{$size}px !important;
-    padding-bottom: #{$size}px !important;
-  }
-}
-
-.flex {
-  display: flex;
-
-  &-col {
-    flex-direction: column;
-  }
-
-  &-1 {
-    flex: 1;
-  }
-
-  &-wrap {
-    flex-wrap: wrap !important;
-  }
-}
-
-.align-items {
-  &-center {
-    align-items: center;
-  }
-  &-end {
-    align-items: flex-end;
-  }
-  &-start {
-    align-items: start;
-  }
-}
-
-.align-self {
-  &-center {
-    align-self: center;
-  }
-  &-end {
-    align-self: flex-end;
-  }
-  &-start {
-    align-self: start;
-  }
-}
-
-.justify-content {
-  &-center {
-    justify-content: center;
-  }
-  &-end {
-    justify-content: flex-end;
-  }
-  &-start {
-    justify-content: start;
-  }
-  &-space-between {
-    justify-content: space-between;
-  }
-}
-
-.d {
-  &-block {
-    display: block;
-  }
-
-  &-none {
-    display: none;
-  }
-}
-
-.w-100 {
-  width: 100%;
-}
-
-.h-100 {
-  height: 100%;
-}
-
-.overflow {
-  &-y-auto {
-    overflow-y: auto;
-  }
-  &-y-hidden {
-    overflow-y: hidden;
-  }
-  &-x-auto {
-    overflow-x: auto;
-  }
-  &-x-hidden {
-    overflow-x: hidden;
-  }
-  &-auto {
-    overflow: auto;
-  }
-  &-hidden {
-    overflow: hidden;
-  }
-}
+/*
+ * ------------------------------
+ * Padding et margin
+ * ------------------------------
+ */
+// Les dimensions suivantes suivent les normes de Material Design, mais ne sont pas incluses dans Angular Material
+$layout-spacing-sizes: 0 4 8 12 16 24 32 40 48;
+
+$layout-sides: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left
+);
+
+@each $size in $layout-spacing-sizes {
+  @each $shortSide, $side in $layout-sides {
+    .m-#{$shortSide}-#{$size} {
+      margin-#{$side}: #{$size}px !important;
+    }
+    .m-#{$shortSide}-#{$size}-neg {
+      margin-#{$side}: -#{$size}px !important;
+    }
+    .p-#{$shortSide}-#{$size} {
+      padding-#{$side}: #{$size}px !important;
+    }
+  }
+
+  .m-#{$size} {
+    margin: #{$size}px !important;
+  }
+  .m-#{$size}-neg {
+    margin: -#{$size}px !important;
+  }
+
+  .p-#{$size} {
+    padding: #{$size}px !important;
+  }
+
+  .m-h-#{$size} {
+    margin-left: #{$size}px !important;
+    margin-right: #{$size}px !important;
+  }
+
+  .m-h-#{$size}-neg {
+    margin-left: -#{$size}px !important;
+    margin-right: -#{$size}px !important;
+  }
+
+  .m-v-#{$size} {
+    margin-top: #{$size}px !important;
+    margin-bottom: #{$size}px !important;
+  }
+
+  .m-v-#{$size}-neg {
+    margin-top: -#{$size}px !important;
+    margin-bottom: -#{$size}px !important;
+  }
+
+  .p-h-#{$size} {
+    padding-left: #{$size}px !important;
+    padding-right: #{$size}px !important;
+  }
+
+  .p-v-#{$size} {
+    padding-top: #{$size}px !important;
+    padding-bottom: #{$size}px !important;
+  }
+}
+
+.flex {
+  display: flex;
+
+  &-col {
+    flex-direction: column;
+  }
+
+  &-1 {
+    flex: 1;
+  }
+
+  &-wrap {
+    flex-wrap: wrap !important;
+  }
+}
+
+.align-items {
+  &-center {
+    align-items: center;
+  }
+  &-end {
+    align-items: flex-end;
+  }
+  &-start {
+    align-items: start;
+  }
+}
+
+.align-self {
+  &-center {
+    align-self: center;
+  }
+  &-end {
+    align-self: flex-end;
+  }
+  &-start {
+    align-self: start;
+  }
+}
+
+.justify-content {
+  &-center {
+    justify-content: center;
+  }
+  &-end {
+    justify-content: flex-end;
+  }
+  &-start {
+    justify-content: start;
+  }
+  &-space-between {
+    justify-content: space-between;
+  }
+}
+
+.d {
+  &-block {
+    display: block;
+  }
+
+  &-none {
+    display: none;
+  }
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+.overflow {
+  &-y-auto {
+    overflow-y: auto;
+  }
+  &-y-hidden {
+    overflow-y: hidden;
+  }
+  &-x-auto {
+    overflow-x: auto;
+  }
+  &-x-hidden {
+    overflow-x: hidden;
+  }
+  &-auto {
+    overflow: auto;
+  }
+  &-hidden {
+    overflow: hidden;
+  }
+}

package/style/partial/core-utils.scss

@@ -1,5 +1,5 @@
-@mixin text-ellipsis {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
+@mixin text-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

package/style/partial/core.variables.scss

@@ -1,5 +1,5 @@
-$igo-margin: 5px;
-$igo-padding: 5px;
-$igo-icon-size: 40px;
-
-$app-background-color: rgb(255, 255, 255);
+$igo-margin: 5px;
+$igo-padding: 5px;
+$igo-icon-size: 40px;
+
+$app-background-color: rgb(255, 255, 255);

package/theming/material-theme-override.scss

@@ -1,39 +1,39 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin material-override($theme) {
-  @include mat-button-toggle($theme);
-  @include mat-tab-group($theme);
-}
-
-@mixin mat-tab-group($theme) {
-  mat-tab-group,
-  mat-tab-group ::ng-deep .mat-mdc-tab-body-wrapper {
-    height: 100%;
-    overflow: hidden;
-  }
-}
-
-@mixin mat-button-toggle($theme) {
-  $accent: map.get($theme, accent);
-  $dark: mat.define-palette(mat.$grey-palette, 800, 700, 900);
-  $density: mat.get-density-config($theme);
-
-  $theme: map.merge(
-    $theme,
-    (
-      density: $density - 3
-    )
-  );
-
-  @include mat.button-toggle-density($theme);
-
-  mat-button-toggle {
-    color: black !important;
-
-    &.mat-button-toggle-checked {
-      background-color: mat.get-color-from-palette($accent);
-      color: mat.get-color-from-palette($dark);
-    }
-  }
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin material-override($theme) {
+  @include mat-button-toggle($theme);
+  @include mat-tab-group($theme);
+}
+
+@mixin mat-tab-group($theme) {
+  mat-tab-group,
+  mat-tab-group ::ng-deep .mat-mdc-tab-body-wrapper {
+    height: 100%;
+    overflow: hidden;
+  }
+}
+
+@mixin mat-button-toggle($theme) {
+  $accent: map.get($theme, accent);
+  $dark: mat.define-palette(mat.$grey-palette, 800, 700, 900);
+  $density: mat.get-density-config($theme);
+
+  $theme: map.merge(
+    $theme,
+    (
+      density: $density - 3
+    )
+  );
+
+  @include mat.button-toggle-density($theme);
+
+  mat-button-toggle {
+    color: black !important;
+
+    &.mat-button-toggle-checked {
+      background-color: mat.get-color-from-palette($accent);
+      color: mat.get-color-from-palette($dark);
+    }
+  }
+}

package/theming/prebuilt-themes/blue-theme.css

@@ -2920,18 +2920,14 @@ igo-zoom-button > div.igo-zoom-button-container > button.mat-accent {
   background-color: rgba(0, 0, 0, 0.87);
 }
 
-igo-menu-button > #menu-button {
-  color: #1976d2;
-}
-
-igo-menu-button > #menu-button.menu-button-reverse-color-close {
+igo-menu-button > button#menu-button {
+  color: rgb(255, 255, 255);
   background-color: #1976d2;
-  color: white;
 }
 
-igo-menu-button > #menu-button.menu-button-reverse-color {
-  background-color: #1976d2;
-  color: white;
+igo-menu-button > button#menu-button.menu-button-white-background {
+  color: #1976d2;
+  background-color: rgb(255, 255, 255);
 }
 
 .igo-map-tooltip-measure {

package/theming/prebuilt-themes/blue-theme.scss

@@ -1,34 +1,34 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../index' as igo;
-
-$primary: mat.define-palette(mat.$blue-palette, 700, 400, 900);
-$accent: mat.define-palette(mat.$blue-palette, 200);
-$warn: mat.define-palette(mat.$red-palette);
-$typography: igo.$igo-typography;
-
-$theme: mat.define-light-theme(
-  (
-    color: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn
-    ),
-    typography: $typography,
-    density: 0
-  )
-);
-
-$foreground: igo.theme-foreground(mat.define-palette(mat.$grey-palette, 900));
-$theme: map.merge(
-  $theme,
-  (
-    foreground: $foreground
-  )
-);
-
-@include mat.core();
-@include mat.typography-hierarchy($typography);
-@include mat.all-component-themes($theme);
-
-@include igo.all-component-themes($theme);
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../index' as igo;
+
+$primary: mat.define-palette(mat.$blue-palette, 700, 400, 900);
+$accent: mat.define-palette(mat.$blue-palette, 200);
+$warn: mat.define-palette(mat.$red-palette);
+$typography: igo.$igo-typography;
+
+$theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $primary,
+      accent: $accent,
+      warn: $warn
+    ),
+    typography: $typography,
+    density: 0
+  )
+);
+
+$foreground: igo.theme-foreground(mat.define-palette(mat.$grey-palette, 900));
+$theme: map.merge(
+  $theme,
+  (
+    foreground: $foreground
+  )
+);
+
+@include mat.core();
+@include mat.typography-hierarchy($typography);
+@include mat.all-component-themes($theme);
+
+@include igo.all-component-themes($theme);

package/theming/prebuilt-themes/bluedark-theme.css

@@ -2920,18 +2920,14 @@ igo-zoom-button > div.igo-zoom-button-container > button.mat-accent {
   background-color: black;
 }
 
-igo-menu-button > #menu-button {
-  color: #164e62;
-}
-
-igo-menu-button > #menu-button.menu-button-reverse-color-close {
+igo-menu-button > button#menu-button {
+  color: rgb(255, 255, 255);
   background-color: #164e62;
-  color: white;
 }
 
-igo-menu-button > #menu-button.menu-button-reverse-color {
-  background-color: #164e62;
-  color: white;
+igo-menu-button > button#menu-button.menu-button-white-background {
+  color: #164e62;
+  background-color: rgb(255, 255, 255);
 }
 
 .igo-map-tooltip-measure {

package/theming/prebuilt-themes/bluedark-theme.scss

@@ -1,67 +1,67 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../index' as igo;
-
-$bluedark-palette: (
-  50: #e3eaec,
-  100: #b9cad0,
-  200: #8ba7b1,
-  300: #5c8391,
-  400: #39697a,
-  500: #164e62,
-  600: #13475a,
-  700: #103d50,
-  800: #0c3546,
-  900: #062534,
-  A100: #6dc6ff,
-  A200: #3ab2ff,
-  A400: #079eff,
-  A700: #0090ec,
-  contrast: (
-    50: #000000,
-    100: #000000,
-    200: #000000,
-    300: #ffffff,
-    400: #ffffff,
-    500: #ffffff,
-    600: #ffffff,
-    700: #ffffff,
-    800: #ffffff,
-    900: #ffffff,
-    A100: #000000,
-    A200: #000000,
-    A400: #ffffff,
-    A700: #ffffff
-  )
-);
-
-$primary: mat.define-palette($bluedark-palette, 500);
-$accent: mat.define-palette($bluedark-palette, 200);
-$warn: mat.define-palette(mat.$red-palette);
-$typography: igo.$igo-typography;
-
-$theme: mat.define-light-theme(
-  (
-    color: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn
-    ),
-    typography: $typography,
-    density: 0
-  )
-);
-
-$foreground: igo.theme-foreground(mat.define-palette(mat.$grey-palette, 900));
-$theme: map.merge(
-  $theme,
-  (
-    foreground: $foreground
-  )
-);
-
-@include mat.core();
-@include mat.typography-hierarchy($typography);
-@include mat.all-component-themes($theme);
-
-@include igo.all-component-themes($theme);
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../index' as igo;
+
+$bluedark-palette: (
+  50: #e3eaec,
+  100: #b9cad0,
+  200: #8ba7b1,
+  300: #5c8391,
+  400: #39697a,
+  500: #164e62,
+  600: #13475a,
+  700: #103d50,
+  800: #0c3546,
+  900: #062534,
+  A100: #6dc6ff,
+  A200: #3ab2ff,
+  A400: #079eff,
+  A700: #0090ec,
+  contrast: (
+    50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #ffffff,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #ffffff,
+    A700: #ffffff
+  )
+);
+
+$primary: mat.define-palette($bluedark-palette, 500);
+$accent: mat.define-palette($bluedark-palette, 200);
+$warn: mat.define-palette(mat.$red-palette);
+$typography: igo.$igo-typography;
+
+$theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $primary,
+      accent: $accent,
+      warn: $warn
+    ),
+    typography: $typography,
+    density: 0
+  )
+);
+
+$foreground: igo.theme-foreground(mat.define-palette(mat.$grey-palette, 900));
+$theme: map.merge(
+  $theme,
+  (
+    foreground: $foreground
+  )
+);
+
+@include mat.core();
+@include mat.typography-hierarchy($typography);
+@include mat.all-component-themes($theme);
+
+@include igo.all-component-themes($theme);