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

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

@@ -2523,44 +2523,16 @@ igo-entity-table table.igo-entity-table-with-selection tr.igo-entity-table-row-h
   color: white;
 }
 
+igo-entity-table .mat-mdc-table thead {
+  background-color: #fafafa;
+}
+
 igo-entity-table {
   --mat-table-header-container-height: 52px;
   --mat-table-footer-container-height: 48px;
   --mat-table-row-item-container-height: 48px;
 }
 
-igo-entity-selector {
-  --mat-paginator-container-size: 40px;
-}
-
-igo-entity-selector .mat-mdc-paginator .mat-mdc-form-field-infix {
-  min-height: 40px;
-}
-igo-entity-selector .mat-mdc-paginator .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-  top: 20px;
-}
-igo-entity-selector .mat-mdc-paginator .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-  --mat-mdc-form-field-label-transform: translateY(
-          -26.75px)
-          scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
-  transform: var(--mat-mdc-form-field-label-transform);
-}
-igo-entity-selector .mat-mdc-paginator .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-igo-entity-selector .mat-mdc-paginator .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-igo-entity-selector .mat-mdc-paginator .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-igo-entity-selector .mat-mdc-paginator .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
-  display: none;
-}
-
 igo-entity-selector .mat-mdc-form-field-infix {
   min-height: 48px;
 }
@@ -2589,6 +2561,24 @@ igo-entity-selector .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .
   display: none;
 }
 
+igo-list .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 48px;
+  width: var(--mdc-icon-button-state-layer-size);
+  height: var(--mdc-icon-button-state-layer-size);
+  padding: 12px;
+}
+igo-list .mat-mdc-list-base {
+  --mdc-list-list-item-one-line-container-height: 48px;
+  --mdc-list-list-item-two-line-container-height: 64px;
+  --mdc-list-list-item-three-line-container-height: 88px;
+}
+igo-list .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line, igo-list .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line, igo-list .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
+  height: 56px;
+}
+igo-list .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, igo-list .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, igo-list .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
+  height: 72px;
+}
+
 igo-list [igolistitem][color=primary].igo-list-item-selected > mat-list-item {
   background-color: #ef6c00;
   color: white;
@@ -2825,14 +2815,6 @@ igo-feature-details > table.igo-striped tbody tr:nth-child(odd) {
   background-color: #ff780a;
 }
 
-igo-ogc-filter-time-slider {
-  /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
-}
-igo-ogc-filter-time-slider .mat-slider-thumb-label {
-  transform: rotate(45deg) !important;
-  border-radius: 50% 50% 0 !important;
-}
-
 igo-ogc-filter-selection mat-button-toggle.mat-button-toggle-checked {
   background-color: #039be5;
   color: #424242;
@@ -2887,11 +2869,6 @@ igo-layer-item.igo-layer-item-focused > mat-list-item {
   color: white;
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of menu that may no longer apply for the MDC version. */
-.mat-menu-opacity-slider {
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.5), 0 4px 5px 0 rgba(0, 0, 0, 0.15), 0 1px 10px 0 rgba(0, 0, 0, 0.4);
-}
-
 igo-map-browser div.ol-attribution > button {
   color: #ef6c00;
   background-color: white;
@@ -2979,4 +2956,25 @@ igo-search-bar .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-m
 igo-confirmation-popup-component h1 {
   font-size: 32px;
   font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+igo-catalog-browser .mat-mdc-icon-button.mat-mdc-button-base {
+  --mdc-icon-button-state-layer-size: 40px;
+  width: var(--mdc-icon-button-state-layer-size);
+  height: var(--mdc-icon-button-state-layer-size);
+  padding: 8px;
+}
+igo-catalog-browser .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target {
+  display: none;
+}
+igo-catalog-browser .mat-mdc-list-base {
+  --mdc-list-list-item-one-line-container-height: 40px;
+  --mdc-list-list-item-two-line-container-height: 56px;
+  --mdc-list-list-item-three-line-container-height: 80px;
+}
+igo-catalog-browser .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line, igo-catalog-browser .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line, igo-catalog-browser .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
+  height: 48px;
+}
+igo-catalog-browser .mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, igo-catalog-browser .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, igo-catalog-browser .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
+  height: 64px;
 }

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

@@ -1,25 +1,25 @@
-@use '@angular/material' as mat;
-@use '../../index' as igo;
-
-$primary: mat.define-palette(mat.$orange-palette, 800);
-$accent: mat.define-palette(mat.$light-blue-palette, 600, 100, 800);
-$warn: mat.define-palette(mat.$red-palette, 600);
-$typography: igo.$igo-typography;
-
-$theme: mat.define-light-theme(
-  (
-    color: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn
-    ),
-    typography: $typography,
-    density: 0
-  )
-);
-
-@include mat.core();
-@include mat.typography-hierarchy($typography);
-@include mat.all-component-themes($theme);
-
-@include igo.all-component-themes($theme);
+@use '@angular/material' as mat;
+@use '../../index' as igo;
+
+$primary: mat.define-palette(mat.$orange-palette, 800);
+$accent: mat.define-palette(mat.$light-blue-palette, 600, 100, 800);
+$warn: mat.define-palette(mat.$red-palette, 600);
+$typography: igo.$igo-typography;
+
+$theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $primary,
+      accent: $accent,
+      warn: $warn
+    ),
+    typography: $typography,
+    density: 0
+  )
+);
+
+@include mat.core();
+@include mat.typography-hierarchy($typography);
+@include mat.all-component-themes($theme);
+
+@include igo.all-component-themes($theme);

package/theming/prebuilt-themes/qcca/base/_index.scss

@@ -1,4 +1,4 @@
-@forward './breakpoints';
-@forward './colors' as colors-*;
-@forward './palette';
-@forward './typography';
+@forward './breakpoints';
+@forward './colors' as colors-*;
+@forward './palette';
+@forward './typography';

package/theming/prebuilt-themes/qcca/base/breakpoints.scss

@@ -1,57 +1,57 @@
-@use 'sass:map';
-
-// There is no standard for breakpoints for the Quebec.ca theme
-// This is the Material breakpoint design by devices
-$device-breakpoints: (
-  mobile: (
-    max: 599px
-  ),
-  tablet: (
-    min: 600px,
-    max: 1239px
-  ),
-  laptop: (
-    min: 1240px,
-    max: 1439px
-  ),
-  desktop: (
-    min: 1440px
-  )
-);
-
-// Source: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss
-@function breakpoint-min($name, $breakpoints: $device-breakpoints) {
-  $min: map.get($breakpoints, $name, min);
-  @return if($min != 0, $min, null);
-}
-
-@function breakpoint-max($name, $breakpoints: $device-breakpoints) {
-  $max: map.get($breakpoints, $name, max);
-  @return if($max and $max > 0, $max, null);
-}
-
-// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-// Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $breakpoints: $device-breakpoints) {
-  $min: breakpoint-min($name, $breakpoints);
-  @if $min {
-    @media (min-width: $min) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
-
-// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-// Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $breakpoints: $device-breakpoints) {
-  $max: breakpoint-max($name, $breakpoints);
-  @if $max {
-    @media (max-width: $max) {
-      @content;
-    }
-  } @else {
-    @content;
-  }
-}
+@use 'sass:map';
+
+// There is no standard for breakpoints for the Quebec.ca theme
+// This is the Material breakpoint design by devices
+$device-breakpoints: (
+  mobile: (
+    max: 599px
+  ),
+  tablet: (
+    min: 600px,
+    max: 1239px
+  ),
+  laptop: (
+    min: 1240px,
+    max: 1439px
+  ),
+  desktop: (
+    min: 1440px
+  )
+);
+
+// Source: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss
+@function breakpoint-min($name, $breakpoints: $device-breakpoints) {
+  $min: map.get($breakpoints, $name, min);
+  @return if($min != 0, $min, null);
+}
+
+@function breakpoint-max($name, $breakpoints: $device-breakpoints) {
+  $max: map.get($breakpoints, $name, max);
+  @return if($max and $max > 0, $max, null);
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $device-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $device-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

package/theming/prebuilt-themes/qcca/base/typography/_index.scss

@@ -1,2 +1,2 @@
-@forward './typography' as typo-*;
-@forward './typography.utils';
+@forward './typography' as typo-*;
+@forward './typography.utils';

package/theming/prebuilt-themes/qcca/base/typography/typography.utils.scss

@@ -1,18 +1,18 @@
-@use '../palette';
-
-@mixin title-border {
-  &:after {
-    content: '';
-    display: block;
-    margin: 0;
-    width: 48px;
-    padding-top: 4px;
-    border-bottom: 4px solid palette.$accent;
-  }
-}
-
-@mixin title-level-4 {
-  font-size: 21px !important;
-  line-height: 24px !important;
-  font-weight: bold !important;
-}
+@use '../palette';
+
+@mixin title-border {
+  &:after {
+    content: '';
+    display: block;
+    margin: 0;
+    width: 48px;
+    padding-top: 4px;
+    border-bottom: 4px solid palette.$accent;
+  }
+}
+
+@mixin title-level-4 {
+  font-size: 21px !important;
+  line-height: 24px !important;
+  font-weight: bold !important;
+}

package/theming/prebuilt-themes/qcca/components/_index.theme.scss

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

package/theming/prebuilt-themes/qcca/components/button.scss

@@ -1,24 +1,24 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../base';
-
-$color-500: map.get(base.$palette, 500);
-
-.mdc-button {
-  font-size: mat.font-size(base.$typo-typography, body-1) !important;
-  line-height: mat.line-height(base.$typo-typography, body-1) !important;
-  font-weight: bold !important;
-}
-
-.mat-mdc-outlined-button {
-  border: 2px solid currentColor;
-}
-
-.mat-mdc-button-base {
-  border-radius: 0 !important;
-}
-
-.mat-mdc-raised-button {
-  color: $color-500 !important;
-  border-color: $color-500 !important;
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../base';
+
+$color-500: map.get(base.$palette, 500);
+
+.mdc-button {
+  font-size: mat.font-size(base.$typo-typography, body-1) !important;
+  line-height: mat.line-height(base.$typo-typography, body-1) !important;
+  font-weight: bold !important;
+}
+
+.mat-mdc-outlined-button {
+  border: 2px solid currentColor;
+}
+
+.mat-mdc-button-base {
+  border-radius: 0 !important;
+}
+
+.mat-mdc-raised-button {
+  color: $color-500 !important;
+  border-color: $color-500 !important;
+}

package/theming/prebuilt-themes/qcca/components/dialog.scss

@@ -1,36 +1,36 @@
-@use '../base';
-
-.mdc-dialog {
-  max-width: 600px;
-
-  &__surface {
-    border-radius: 0 !important;
-  }
-
-  &__title {
-    padding-top: 8px !important; // Workaround, this should be 32px but Material apply a default height for the title.
-    padding-bottom: 24px !important;
-
-    @include base.title-level-4;
-    @include base.title-border;
-  }
-
-  &__tile,
-  &__content,
-  &__actions {
-    padding-left: 32px !important;
-    padding-right: 32px !important;
-  }
-
-  &__actions {
-    padding-top: 24px !important;
-    padding-bottom: 32px !important;
-  }
-
-  .close-button {
-    $iconButtonPadding: 8px;
-    position: absolute;
-    top: 16px - $iconButtonPadding;
-    right: 16px - $iconButtonPadding;
-  }
-}
+@use '../base';
+
+.mdc-dialog {
+  max-width: 600px;
+
+  &__surface {
+    border-radius: 0 !important;
+  }
+
+  &__title {
+    padding-top: 8px !important; // Workaround, this should be 32px but Material apply a default height for the title.
+    padding-bottom: 24px !important;
+
+    @include base.title-level-4;
+    @include base.title-border;
+  }
+
+  &__tile,
+  &__content,
+  &__actions {
+    padding-left: 32px !important;
+    padding-right: 32px !important;
+  }
+
+  &__actions {
+    padding-top: 24px !important;
+    padding-bottom: 32px !important;
+  }
+
+  .close-button {
+    $iconButtonPadding: 8px;
+    position: absolute;
+    top: 16px - $iconButtonPadding;
+    right: 16px - $iconButtonPadding;
+  }
+}

package/theming/prebuilt-themes/qcca/components/scrollbar.scss

@@ -1,15 +1,15 @@
 @use '../base';
 
 *::-webkit-scrollbar {
-    width: 6px;
+  width: 6px;
 }
 
 *::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 5px base.$blue-light;
-    border-radius: 10px;
+  box-shadow: inset 0 0 5px base.$blue-light;
+  border-radius: 10px;
 }
 
 *::-webkit-scrollbar-thumb {
-    background: base.$blue-normal-piv;
-    border-radius: 10px;
-}
+  background: base.$blue-normal-piv;
+  border-radius: 10px;
+}

package/theming/prebuilt-themes/qcca/components/search-bar.scss

@@ -1,41 +1,41 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../base';
-
-igo-search-bar {
-  // Workaroung, OPEN SANS font add a mysterious 1px for the height
-  .mat-mdc-form-field-infix {
-    max-height: 40px;
-  }
-
-  button[mat-icon-button] {
-    background-color: map.get(base.$palette, 500);
-
-    &:hover {
-      background-color: map.get(base.$palette, 400);
-    }
-  }
-
-  mat-icon {
-    color: map.get(base.$palette, contrast, 500);
-  }
-}
-
-igo-search-results {
-  igo-collapsible {
-    .mdc-list-item__primary-text {
-      color: base.$blue-dark;
-      font-weight: bold;
-    }
-  }
-
-  igo-search-results-item {
-    .mdc-list-item__primary-text {
-      font-weight: normal;
-    }
-  }
-
-  .mdc-list-item--with-leading-icon .mdc-list-item__start {
-    color: base.$blue-dark;
-  }
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../base';
+
+igo-search-bar {
+  // Workaroung, OPEN SANS font add a mysterious 1px for the height
+  .mat-mdc-form-field-infix {
+    max-height: 40px;
+  }
+
+  button[mat-icon-button] {
+    background-color: map.get(base.$palette, 500);
+
+    &:hover {
+      background-color: map.get(base.$palette, 400);
+    }
+  }
+
+  mat-icon {
+    color: map.get(base.$palette, contrast, 500);
+  }
+}
+
+igo-search-results {
+  igo-collapsible {
+    .mdc-list-item__primary-text {
+      color: base.$blue-dark;
+      font-weight: bold;
+    }
+  }
+
+  igo-search-results-item {
+    .mdc-list-item__primary-text {
+      font-weight: normal;
+    }
+  }
+
+  .mdc-list-item--with-leading-icon .mdc-list-item__start {
+    color: base.$blue-dark;
+  }
+}

package/theming/prebuilt-themes/qcca/components/search-bar.theme.scss

@@ -1,29 +1,29 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include density($theme);
-}
-
-@mixin density($theme) {
-  $density: mat.get-density-config($theme);
-
-  $theme4: map.merge(
-    $theme,
-    (
-      density: $density - 4
-    )
-  );
-
-  $theme2: map.merge(
-    $theme,
-    (
-      density: $density - 2
-    )
-  );
-
-  igo-search-bar {
-    @include mat.form-field-density($theme4);
-    @include mat.icon-button-density($theme2);
-  }
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  @include density($theme);
+}
+
+@mixin density($theme) {
+  $density: mat.get-density-config($theme);
+
+  $theme4: map.merge(
+    $theme,
+    (
+      density: $density - 4
+    )
+  );
+
+  $theme2: map.merge(
+    $theme,
+    (
+      density: $density - 2
+    )
+  );
+
+  igo-search-bar {
+    @include mat.form-field-density($theme4);
+    @include mat.icon-button-density($theme2);
+  }
+}