@igo2/core 1.15.4 → 16.0.0-rc.0

package/style/all-style.scss

@@ -0,0 +1,3 @@
+@use './style.scss' as core;
+@use '../../../common/src/style/style.scss' as common;
+@use '../../../geo/src/style/style.scss' as geo;

package/style/layout.scss

@@ -0,0 +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;
+  }
+}

package/style/partial/core-utils.scss

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

package/style/partial/core.variables.scss

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

package/style/partial/media.scss

@@ -1,80 +1,80 @@
-$mobile-portrait: 'only screen and (orientation:portrait) and (max-width: 599px)';
-$tablet-portrait: 'only screen and (orientation:portrait) and (min-width: 600px) and (max-width: 839px)';
-$desktop-portrait: 'only screen and (orientation:portrait) and (min-width: 840px)';
-
-$mobile-landscape: 'only screen and (orientation:landscape) and (max-width: 959px)';
-$tablet-landscape: 'only screen and (orientation:landscape) and (min-width: 960px) and (max-width: 1279px)';
-$desktop-landscape: 'only screen and (orientation:landscape) and (min-width: 1280px)';
-
-$mobile: $mobile-portrait + ',' + $mobile-landscape;
-$tablet: $tablet-portrait + ',' + $tablet-landscape;
-$desktop: $desktop-portrait + ',' + $desktop-landscape;
-
-$portrait: 'only screen and (orientation:portrait)';
-$landscape: 'only screen and (orientation:landscape)';
-
-$xsmall-screen: 'only screen and (max-width: 599px)';
-$small-screen: 'only screen and (min-width: 600px) and (max-width: 959px)';
-$medium-screen: 'only screen and (min-width: 960px) and (max-width: 1280px)';
-$large-screen: 'only screen and (min-width: 1280px) and (max-width: 1919px)';
-$xlarge-screen: 'only screen and (min-width: 1920px)';
-
-@mixin mobile {
-  @media #{$mobile} {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media #{$tablet} {
-    @content;
-  }
-}
-
-@mixin desktop {
-  @media #{$desktop} {
-    @content;
-  }
-}
-
-@mixin portrait {
-  @media #{$portrait} {
-    @content;
-  }
-}
-
-@mixin landscape {
-  @media #{$landscape} {
-    @content;
-  }
-}
-
-@mixin xsmall-screen {
-  @media #{$xsmall-screen} {
-    @content;
-  }
-}
-
-@mixin small-screen {
-  @media #{$small-screen} {
-    @content;
-  }
-}
-
-@mixin medium-screen {
-  @media #{$medium-screen} {
-    @content;
-  }
-}
-
-@mixin large-screen {
-  @media #{$large-screen} {
-    @content;
-  }
-}
-
-@mixin xlarge-screen {
-  @media #{$xlarge-screen} {
-    @content;
-  }
-}
+$mobile-portrait: 'only screen and (orientation:portrait) and (max-width: 599px)';
+$tablet-portrait: 'only screen and (orientation:portrait) and (min-width: 600px) and (max-width: 839px)';
+$desktop-portrait: 'only screen and (orientation:portrait) and (min-width: 840px)';
+
+$mobile-landscape: 'only screen and (orientation:landscape) and (max-width: 959px)';
+$tablet-landscape: 'only screen and (orientation:landscape) and (min-width: 960px) and (max-width: 1279px)';
+$desktop-landscape: 'only screen and (orientation:landscape) and (min-width: 1280px)';
+
+$mobile: $mobile-portrait + ',' + $mobile-landscape;
+$tablet: $tablet-portrait + ',' + $tablet-landscape;
+$desktop: $desktop-portrait + ',' + $desktop-landscape;
+
+$portrait: 'only screen and (orientation:portrait)';
+$landscape: 'only screen and (orientation:landscape)';
+
+$xsmall-screen: 'only screen and (max-width: 599px)';
+$small-screen: 'only screen and (min-width: 600px) and (max-width: 959px)';
+$medium-screen: 'only screen and (min-width: 960px) and (max-width: 1280px)';
+$large-screen: 'only screen and (min-width: 1280px) and (max-width: 1919px)';
+$xlarge-screen: 'only screen and (min-width: 1920px)';
+
+@mixin mobile {
+  @media #{$mobile} {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media #{$tablet} {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media #{$desktop} {
+    @content;
+  }
+}
+
+@mixin portrait {
+  @media #{$portrait} {
+    @content;
+  }
+}
+
+@mixin landscape {
+  @media #{$landscape} {
+    @content;
+  }
+}
+
+@mixin xsmall-screen {
+  @media #{$xsmall-screen} {
+    @content;
+  }
+}
+
+@mixin small-screen {
+  @media #{$small-screen} {
+    @content;
+  }
+}
+
+@mixin medium-screen {
+  @media #{$medium-screen} {
+    @content;
+  }
+}
+
+@mixin large-screen {
+  @media #{$large-screen} {
+    @content;
+  }
+}
+
+@mixin xlarge-screen {
+  @media #{$xlarge-screen} {
+    @content;
+  }
+}

package/style/style.css

@@ -0,0 +1,237 @@
+/* based on angular-toastr css https://github.com/Foxandxss/angular-toastr/blob/cb508fe6801d6b288d3afc525bb40fee1b101650/dist/angular-toastr.css */
+/* position */
+.toast-center-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.toast-top-center {
+  top: 0;
+  right: 0;
+  width: 100%;
+}
+
+.toast-bottom-center {
+  bottom: 0;
+  right: 0;
+  width: 100%;
+}
+
+.toast-top-full-width {
+  top: 0;
+  right: 0;
+  width: 100%;
+}
+
+.toast-bottom-full-width {
+  bottom: 0;
+  right: 0;
+  width: 100%;
+}
+
+.toast-top-left {
+  top: 12px;
+  left: 12px;
+}
+
+.toast-top-right {
+  top: 12px;
+  right: 12px;
+}
+
+.toast-bottom-right {
+  right: 12px;
+  bottom: 12px;
+}
+
+.toast-bottom-left {
+  bottom: 12px;
+  left: 12px;
+}
+
+/* toast styles */
+.toast-title {
+  font-weight: bold;
+}
+
+.toast-message {
+  word-wrap: break-word;
+}
+
+.toast-message a,
+.toast-message label {
+  color: #FFFFFF;
+}
+
+.toast-message a:hover {
+  color: #CCCCCC;
+  text-decoration: none;
+}
+
+.toast-close-button {
+  position: relative;
+  right: -0.3em;
+  top: -0.3em;
+  float: right;
+  font-size: 20px;
+  font-weight: bold;
+  color: #FFFFFF;
+  text-shadow: 0 1px 0 #ffffff;
+  /* opacity: 0.8; */
+}
+
+.toast-close-button:hover,
+.toast-close-button:focus {
+  color: #000000;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.4;
+}
+
+/*Additional properties for button version
+ iOS requires the button element instead of an anchor tag.
+ If you want the anchor version, it requires `href="#"`.*/
+button.toast-close-button {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+}
+
+.toast-container {
+  pointer-events: none;
+  position: fixed;
+  z-index: 999999;
+}
+
+.toast-container * {
+  box-sizing: border-box;
+}
+
+.toast-container .ngx-toastr {
+  position: relative;
+  overflow: hidden;
+  margin: 0 0 6px;
+  padding: 15px 15px 15px 50px;
+  width: 300px;
+  border-radius: 3px 3px 3px 3px;
+  background-position: 15px center;
+  background-repeat: no-repeat;
+  background-size: 24px;
+  box-shadow: 0 0 12px #999999;
+  color: #FFFFFF;
+}
+
+.toast-container .ngx-toastr:hover {
+  box-shadow: 0 0 12px #000000;
+  opacity: 1;
+  cursor: pointer;
+}
+
+/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/info-circle.svg */
+.toast-info {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOS4wNDMgOCA4IDExOS4wODMgOCAyNTZjMCAxMzYuOTk3IDExMS4wNDMgMjQ4IDI0OCAyNDhzMjQ4LTExMS4wMDMgMjQ4LTI0OEM1MDQgMTE5LjA4MyAzOTIuOTU3IDggMjU2IDh6bTAgMTEwYzIzLjE5NiAwIDQyIDE4LjgwNCA0MiA0MnMtMTguODA0IDQyLTQyIDQyLTQyLTE4LjgwNC00Mi00MiAxOC44MDQtNDIgNDItNDJ6bTU2IDI1NGMwIDYuNjI3LTUuMzczIDEyLTEyIDEyaC04OGMtNi42MjcgMC0xMi01LjM3My0xMi0xMnYtMjRjMC02LjYyNyA1LjM3My0xMiAxMi0xMmgxMnYtNjRoLTEyYy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDY0YzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MTAwaDEyYzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MjR6Jy8+PC9zdmc+");
+}
+
+/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/times-circle.svg */
+.toast-error {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTEyMS42IDMxMy4xYzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMzggMzc3LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMzEybC02NS4xIDY1LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwxMzQuNCAzMzhjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2NS42LTY1LTY1LjYtNjUuMWMtNC43LTQuNy00LjctMTIuMyAwLTE3bDM5LjYtMzkuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsNjUgNjUuNyA2NS4xLTY1LjZjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDM5LjYgMzkuNmM0LjcgNC43IDQuNyAxMi4zIDAgMTdMMzEyIDI1Nmw2NS42IDY1LjF6Jy8+PC9zdmc+");
+}
+
+/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/check.svg */
+.toast-success {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeicvPjwvc3ZnPg==");
+}
+
+/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/exclamation-triangle.svg */
+.toast-warning {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NzYgNTEyJyB3aWR0aD0nNTc2JyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eicvPjwvc3ZnPg==");
+}
+
+.toast-container.toast-top-center .ngx-toastr,
+.toast-container.toast-bottom-center .ngx-toastr {
+  width: 300px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.toast-container.toast-top-full-width .ngx-toastr,
+.toast-container.toast-bottom-full-width .ngx-toastr {
+  width: 96%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ngx-toastr {
+  background-color: #030303;
+  pointer-events: auto;
+}
+
+.toast-success {
+  background-color: #51A351;
+}
+
+.toast-error {
+  background-color: #BD362F;
+}
+
+.toast-info {
+  background-color: #2F96B4;
+}
+
+.toast-warning {
+  background-color: #F89406;
+}
+
+.toast-progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 4px;
+  background-color: #000000;
+  opacity: 0.4;
+}
+
+/* Responsive Design */
+@media all and (max-width: 240px) {
+  .toast-container .ngx-toastr.div {
+    padding: 8px 8px 8px 50px;
+    width: 11em;
+  }
+  .toast-container .toast-close-button {
+    right: -0.2em;
+    top: -0.2em;
+  }
+}
+@media all and (min-width: 241px) and (max-width: 480px) {
+  .toast-container .ngx-toastr.div {
+    padding: 8px 8px 8px 50px;
+    width: 18em;
+  }
+  .toast-container .toast-close-button {
+    right: -0.2em;
+    top: -0.2em;
+  }
+}
+@media all and (min-width: 481px) and (max-width: 768px) {
+  .toast-container .ngx-toastr.div {
+    padding: 15px 15px 15px 50px;
+    width: 25em;
+  }
+}
+button.mat-mdc-menu-item {
+  line-height: 24px !important;
+}
+
+a.mat-mdc-menu-item > mat-icon {
+  margin-bottom: 14px;
+}
+
+button.mat-mdc-icon-button.mat-mdc-button-base[disabled=true] {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.mat-mdc-menu-content mat-list {
+  padding: 0;
+}

package/style/style.scss

@@ -0,0 +1,19 @@
+@import 'ngx-toastr/toastr';
+
+button.mat-mdc-menu-item {
+  line-height: 24px !important;
+}
+
+a.mat-mdc-menu-item > mat-icon {
+  margin-bottom: 14px;
+}
+
+button.mat-mdc-icon-button.mat-mdc-button-base[disabled='true'] {
+  color: rgba(0, 0, 0, 0.26);
+}
+
+.mat-mdc-menu-content {
+  mat-list {
+    padding: 0;
+  }
+}

package/theming/all-theme.scss

@@ -0,0 +1,14 @@
+@use '@angular/material' as mat;
+
+@use '../packages.import' as igo;
+@use './material-theme-override';
+@use './typography' as typo;
+
+@mixin all-component-themes($config) {
+  @include material-theme-override.material-override($config);
+
+  @include igo.core-component-themes($config);
+  @include igo.common-component-themes($config);
+  @include igo.context-component-themes($config);
+  @include igo.geo-component-themes($config);
+}

package/theming/material-theme-override.scss

@@ -0,0 +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);
+    }
+  }
+}