geonetwork-ui 2.10.0-dev.cf0577fae → 2.10.0-dev.d26e9afe1

package/material-styles.css

@@ -0,0 +1,483 @@
+/* These classes were extracted from the full Material theme to save size */
+.cdk-overlay-pane {
+  position: absolute;
+  pointer-events: auto;
+  box-sizing: border-box;
+  z-index: 1000;
+  display: flex;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.cdk-overlay-connected-position-bounding-box {
+  position: absolute;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  min-width: 1px;
+  min-height: 1px;
+}
+
+.cdk-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  pointer-events: auto;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  opacity: 0;
+}
+
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+
+.cdk-overlay-transparent-backdrop {
+  transition:
+    visibility 1ms linear,
+    opacity 1ms linear;
+  visibility: hidden;
+  opacity: 1;
+}
+
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0;
+  visibility: visible;
+}
+
+.mat-mdc-option.suggestion.mat-mdc-option-active {
+  background-color: var(--color-primary-lightest);
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of autocomplete that may no longer apply for the MDC version. */
+.mat-mdc-autocomplete-panel
+  .mat-mdc-option.mat-selected:not(.mat-active):not(:hover):not(
+    .mat-option-disabled
+  ) {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.mat-mdc-option:hover:not(.mat-option-disabled),
+.mat-mdc-option:focus:not(.mat-option-disabled) {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of option that may no longer apply for the MDC version. */
+.mat-mdc-option.mat-selected:not(.mat-mdc-option-multiple):not(
+    .mat-option-disabled
+  ) {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.mat-mdc-select-panel
+  .mat-mdc-option.mat-selected:not(.mat-mdc-option-multiple) {
+  background: rgba(0, 0, 0, 0.12);
+}
+
+.mdc-menu-surface.mat-mdc-autocomplete-panel {
+  margin-top: 10px !important;
+  border-radius: 8px;
+  background: white;
+  box-shadow:
+    0 2px 4px -1px #0003,
+    0 4px 5px #00000024,
+    0 1px 10px #0000001f;
+}
+
+/* set up CSS variables for material (extracted from the prebuilt theme) */
+:host {
+  --mat-tab-container-height: 48px;
+  --mat-tab-divider-color: transparent;
+  --mat-tab-divider-height: 0;
+  --mat-tab-active-indicator-height: 2px;
+  --mat-tab-active-indicator-shape: 0;
+  --mat-checkbox-disabled-selected-checkmark-color: white;
+  --mat-checkbox-selected-focus-state-layer-opacity: 0.12;
+  --mat-checkbox-selected-hover-state-layer-opacity: 0.04;
+  --mat-checkbox-selected-pressed-state-layer-opacity: 0.12;
+  --mat-checkbox-unselected-focus-state-layer-opacity: 0.12;
+  --mat-checkbox-unselected-hover-state-layer-opacity: 0.04;
+  --mat-checkbox-unselected-pressed-state-layer-opacity: 0.12;
+  --mat-checkbox-touch-target-size: 48px;
+  --mat-checkbox-disabled-label-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
+  --mat-checkbox-disabled-selected-icon-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-checkbox-disabled-unselected-icon-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-checkbox-selected-checkmark-color: white;
+  --mat-checkbox-selected-focus-icon-color: #ff4081;
+  --mat-checkbox-selected-hover-icon-color: #ff4081;
+  --mat-checkbox-selected-icon-color: #ff4081;
+  --mat-checkbox-selected-pressed-icon-color: #ff4081;
+  --mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
+  --mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
+  --mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
+  --mat-checkbox-selected-focus-state-layer-color: #ff4081;
+  --mat-checkbox-selected-hover-state-layer-color: #ff4081;
+  --mat-checkbox-selected-pressed-state-layer-color: #ff4081;
+  --mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
+  --mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
+  --mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
+  --mat-checkbox-touch-target-display: block;
+  --mat-checkbox-state-layer-size: 40px;
+  --mat-checkbox-label-text-font: Roboto, sans-serif;
+  --mat-checkbox-label-text-line-height: 20px;
+  --mat-checkbox-label-text-size: 14px;
+  --mat-checkbox-label-text-tracking: 0.0178571429em;
+  --mat-checkbox-label-text-weight: 400;
+  --mat-button-filled-container-shape: 4px;
+  --mat-button-filled-horizontal-padding: 16px;
+  --mat-button-filled-icon-offset: -4px;
+  --mat-button-filled-icon-spacing: 8px;
+  --mat-button-filled-touch-target-size: 48px;
+  --mat-button-outlined-container-shape: 4px;
+  --mat-button-outlined-horizontal-padding: 15px;
+  --mat-button-outlined-icon-offset: -4px;
+  --mat-button-outlined-icon-spacing: 8px;
+  --mat-button-outlined-keep-touch-target: false;
+  --mat-button-outlined-outline-width: 1px;
+  --mat-button-outlined-touch-target-size: 48px;
+  --mat-button-protected-container-elevation-shadow: 0px 3px 1px -2px
+      rgba(0, 0, 0, 0.2),
+    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  --mat-button-protected-container-shape: 4px;
+  --mat-button-protected-disabled-container-elevation-shadow: 0px 0px 0px 0px
+      rgba(0, 0, 0, 0.2),
+    0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  --mat-button-protected-focus-container-elevation-shadow: 0px 2px 4px -1px
+      rgba(0, 0, 0, 0.2),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  --mat-button-protected-horizontal-padding: 16px;
+  --mat-button-protected-hover-container-elevation-shadow: 0px 2px 4px -1px
+      rgba(0, 0, 0, 0.2),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  --mat-button-protected-icon-offset: -4px;
+  --mat-button-protected-icon-spacing: 8px;
+  --mat-button-protected-pressed-container-elevation-shadow: 0px 5px 5px -3px
+      rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  --mat-button-protected-touch-target-size: 48px;
+  --mat-button-text-container-shape: 4px;
+  --mat-button-text-horizontal-padding: 8px;
+  --mat-button-text-icon-offset: 0;
+  --mat-button-text-icon-spacing: 8px;
+  --mat-button-text-with-icon-horizontal-padding: 8px;
+  --mat-button-text-touch-target-size: 48px;
+  --mat-button-tonal-container-shape: 4px;
+  --mat-button-tonal-horizontal-padding: 16px;
+  --mat-button-tonal-icon-offset: -4px;
+  --mat-button-tonal-icon-spacing: 8px;
+  --mat-button-tonal-touch-target-size: 48px;
+  --mat-button-filled-container-color: white;
+  --mat-button-filled-disabled-container-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 12%,
+    transparent
+  );
+  --mat-button-filled-disabled-label-text-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
+  --mat-button-filled-focus-state-layer-opacity: 0.12;
+  --mat-button-filled-hover-state-layer-opacity: 0.04;
+  --mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
+  --mat-button-filled-pressed-state-layer-opacity: 0.12;
+  --mat-button-filled-ripple-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 12%,
+    transparent
+  );
+  --mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
+  --mat-button-outlined-disabled-label-text-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
+  --mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
+  --mat-button-outlined-focus-state-layer-opacity: 0.12;
+  --mat-button-outlined-hover-state-layer-opacity: 0.04;
+  --mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
+  --mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
+  --mat-button-outlined-pressed-state-layer-opacity: 0.12;
+  --mat-button-outlined-ripple-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 12%,
+    transparent
+  );
+  --mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
+  --mat-button-protected-container-color: white;
+  --mat-button-protected-disabled-container-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 12%,
+    transparent
+  );
+  --mat-button-protected-disabled-label-text-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
+  --mat-button-protected-focus-state-layer-opacity: 0.12;
+  --mat-button-protected-hover-state-layer-opacity: 0.04;
+  --mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
+  --mat-button-protected-pressed-state-layer-opacity: 0.12;
+  --mat-button-protected-ripple-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 12%,
+    transparent
+  );
+  --mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
+  --mat-button-text-disabled-label-text-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
+  --mat-button-text-focus-state-layer-opacity: 0.12;
+  --mat-button-text-hover-state-layer-opacity: 0.04;
+  --mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
+  --mat-button-text-pressed-state-layer-opacity: 0.12;
+  --mat-button-text-ripple-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 12%,
+    transparent
+  );
+  --mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
+  --mat-button-tonal-container-color: white;
+  --mat-button-tonal-disabled-container-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 12%,
+    transparent
+  );
+  --mat-button-tonal-disabled-label-text-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
+  --mat-button-tonal-focus-state-layer-opacity: 0.12;
+  --mat-button-tonal-hover-state-layer-opacity: 0.04;
+  --mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
+  --mat-button-tonal-pressed-state-layer-opacity: 0.12;
+  --mat-button-tonal-ripple-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 12%,
+    transparent
+  );
+  --mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
+  --mat-button-filled-container-height: 36px;
+  --mat-button-filled-touch-target-display: block;
+  --mat-button-outlined-container-height: 36px;
+  --mat-button-outlined-touch-target-display: block;
+  --mat-button-protected-container-height: 36px;
+  --mat-button-protected-touch-target-display: block;
+  --mat-button-text-container-height: 36px;
+  --mat-button-text-touch-target-display: block;
+  --mat-button-tonal-container-height: 36px;
+  --mat-button-tonal-touch-target-display: block;
+  --mat-button-filled-label-text-font: Roboto, sans-serif;
+  --mat-button-filled-label-text-size: 14px;
+  --mat-button-filled-label-text-tracking: 0.0892857143em;
+  --mat-button-filled-label-text-transform: none;
+  --mat-button-filled-label-text-weight: 500;
+  --mat-button-outlined-label-text-font: Roboto, sans-serif;
+  --mat-button-outlined-label-text-size: 14px;
+  --mat-button-outlined-label-text-tracking: 0.0892857143em;
+  --mat-button-outlined-label-text-transform: none;
+  --mat-button-outlined-label-text-weight: 500;
+  --mat-button-protected-label-text-font: Roboto, sans-serif;
+  --mat-button-protected-label-text-size: 14px;
+  --mat-button-protected-label-text-tracking: 0.0892857143em;
+  --mat-button-protected-label-text-transform: none;
+  --mat-button-protected-label-text-weight: 500;
+  --mat-button-text-label-text-font: Roboto, sans-serif;
+  --mat-button-text-label-text-size: 14px;
+  --mat-button-text-label-text-tracking: 0.0892857143em;
+  --mat-button-text-label-text-transform: none;
+  --mat-button-text-label-text-weight: 500;
+  --mat-button-tonal-label-text-font: Roboto, sans-serif;
+  --mat-button-tonal-label-text-size: 14px;
+  --mat-button-tonal-label-text-tracking: 0.0892857143em;
+  --mat-button-tonal-label-text-transform: none;
+  --mat-button-tonal-label-text-weight: 500;
+  --mat-progress-spinner-active-indicator-width: 4px;
+  --mat-progress-spinner-size: 48px;
+  --mat-progress-spinner-active-indicator-color: #3f51b5;
+  --mat-option-selected-state-label-text-color: #3f51b5;
+  --mat-option-label-text-color: rgba(0, 0, 0, 0.87);
+  --mat-option-hover-state-layer-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 4%,
+    transparent
+  );
+  --mat-option-focus-state-layer-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 12%,
+    transparent
+  );
+  --mat-option-selected-state-layer-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 12%,
+    transparent
+  );
+  --mat-dialog-container-shape: 4px;
+  --mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
+    0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  --mat-dialog-container-max-width: 80vw;
+  --mat-dialog-container-small-max-width: 80vw;
+  --mat-dialog-container-min-width: 0;
+  --mat-dialog-actions-alignment: start;
+  --mat-dialog-actions-padding: 8px;
+  --mat-dialog-content-padding: 20px 24px;
+  --mat-dialog-with-actions-content-padding: 20px 24px;
+  --mat-dialog-headline-padding: 0 24px 9px;
+  --mat-dialog-container-color: white;
+  --mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
+  --mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
+  --mat-dialog-subhead-font: Roboto, sans-serif;
+  --mat-dialog-subhead-line-height: 32px;
+  --mat-dialog-subhead-size: 20px;
+  --mat-dialog-subhead-weight: 500;
+  --mat-dialog-subhead-tracking: 0.0125em;
+  --mat-dialog-supporting-text-font: Roboto, sans-serif;
+  --mat-dialog-supporting-text-line-height: 24px;
+  --mat-dialog-supporting-text-size: 16px;
+  --mat-dialog-supporting-text-weight: 400;
+  --mat-dialog-supporting-text-tracking: 0.03125em;
+  --mat-tooltip-container-shape: 4px;
+  --mat-tooltip-supporting-text-line-height: 16px;
+  --mat-tooltip-container-color: #424242;
+  --mat-tooltip-supporting-text-color: white;
+  --mat-tooltip-supporting-text-font: Roboto, sans-serif;
+  --mat-tooltip-supporting-text-size: 12px;
+  --mat-tooltip-supporting-text-weight: 400;
+  --mat-tooltip-supporting-text-tracking: 0.0333333333em;
+  --mat-radio-disabled-selected-icon-opacity: 0.38;
+  --mat-radio-disabled-unselected-icon-opacity: 0.38;
+  --mat-radio-state-layer-size: 40px;
+  --mat-radio-touch-target-size: 48px;
+  --mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
+  --mat-paginator-page-size-select-width: 84px;
+  --mat-paginator-page-size-select-touch-target-height: 48px;
+  --mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
+  --mat-paginator-container-background-color: white;
+  --mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
+  --mat-paginator-disabled-icon-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-paginator-container-size: 56px;
+  --mat-paginator-form-field-container-height: 40px;
+  --mat-paginator-form-field-container-vertical-padding: 8px;
+  --mat-paginator-touch-target-display: block;
+  --mat-paginator-container-text-font: Roboto, sans-serif;
+  --mat-paginator-container-text-line-height: 20px;
+  --mat-paginator-container-text-size: 12px;
+  --mat-paginator-container-text-tracking: 0.0333333333em;
+  --mat-paginator-container-text-weight: 400;
+  --mat-paginator-select-trigger-text-size: 12px;
+  --mat-autocomplete-container-shape: 4px;
+  --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px
+      rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  --mat-autocomplete-background-color: white;
+  --mat-datepicker-calendar-container-shape: 4px;
+  --mat-datepicker-calendar-container-touch-shape: 4px;
+  --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px
+      rgba(0, 0, 0, 0.2),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px
+      rgba(0, 0, 0, 0.2),
+    0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(
+    in srgb,
+    #3f51b5 20%,
+    transparent
+  );
+  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(
+    in srgb,
+    #ff4081 20%,
+    transparent
+  );
+  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
+  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(
+    69.5241935484,
+    163.4758064516,
+    93.9516129032
+  );
+  --mat-datepicker-calendar-date-selected-state-text-color: white;
+  --mat-datepicker-calendar-date-selected-state-background-color: #3f51b5;
+  --mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(
+    in srgb,
+    #3f51b5 38%,
+    transparent
+  );
+  --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
+  --mat-datepicker-calendar-date-focus-state-background-color: color-mix(
+    in srgb,
+    #3f51b5 12%,
+    transparent
+  );
+  --mat-datepicker-calendar-date-hover-state-background-color: color-mix(
+    in srgb,
+    #3f51b5 4%,
+    transparent
+  );
+  --mat-datepicker-toggle-active-state-icon-color: #3f51b5;
+  --mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
+  --mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
+  --mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
+  --mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
+  --mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
+  --mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
+  --mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
+  --mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
+  --mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
+  --mat-datepicker-calendar-date-outline-color: transparent;
+  --mat-datepicker-calendar-date-disabled-state-text-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(
+    0,
+    0,
+    0,
+    0.54
+  );
+  --mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
+  --mat-datepicker-range-input-disabled-state-separator-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-datepicker-range-input-disabled-state-text-color: color-mix(
+    in srgb,
+    rgba(0, 0, 0, 0.87) 38%,
+    transparent
+  );
+  --mat-datepicker-calendar-container-background-color: white;
+  --mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "geonetwork-ui",
-  "version": "2.10.0-dev.cf0577fae",
+  "version": "2.10.0-dev.d26e9afe1",
   "engines": {
-    "node": ">=20"
+    "node": ">=24"
   },
   "main": "./index.ts",
   "type": "module",
@@ -28,7 +28,6 @@
     "@angular/core": "19.x || 20.x || 21.x",
     "@angular/forms": "19.x || 20.x || 21.x",
     "@angular/material": "19.x || 20.x || 21.x",
-    "@angular/material-moment-adapter": "19.x || 20.x || 21.x",
     "@angular/platform-browser": "19.x || 20.x || 21.x",
     "@angular/platform-browser-dynamic": "19.x || 20.x || 21.x",
     "@angular/router": "19.x || 20.x || 21.x",
@@ -47,46 +46,37 @@
   },
   "dependencies": {
     "@biesbjerg/ngx-translate-extract-marker": "~1.0.0",
-    "@camptocamp/ogc-client": "1.3.1-dev.afd9c26",
+    "@camptocamp/ogc-client": "1.3.1-dev.bb345f0",
     "@geospatial-sdk/core": "0.0.5-dev.61",
     "@geospatial-sdk/geocoding": "0.0.5-dev.61",
     "@geospatial-sdk/legend": "0.0.5-dev.61",
     "@geospatial-sdk/openlayers": "0.0.5-dev.61",
-    "@ltd/j-toml": "~1.35.2",
-    "@messageformat/core": "^3.0.1",
-    "@ng-icons/core": "29.10.0",
-    "@ng-icons/iconoir": "29.10.0",
-    "@ng-icons/material-icons": "29.10.0",
-    "@ng-icons/tabler-icons": "29.10.0",
-    "@nx/angular": "22.0.4",
+    "@ltd/j-toml": "~1.38.0",
+    "@messageformat/core": "~3.4.0",
+    "@ng-icons/core": "~32.5.0",
+    "@ng-icons/iconoir": "~32.5.0",
+    "@ng-icons/material-icons": "~32.5.0",
+    "@ng-icons/tabler-icons": "~32.4.0",
     "@rgrove/parse-xml": "4.2.0",
-    "alasql": "4.6.0",
-    "basiclightbox": "^5.0.4",
-    "chart.js": "4.4.7",
-    "chroma-js": "3.1.2",
+    "alasql": "~4.17.0",
+    "chart.js": "~4.5.1",
+    "chroma-js": "~3.2.0",
     "date-fns": "4.1.0",
-    "document-register-element": "^1.14.10",
-    "duration-relativetimeformat": "^2.0.4",
-    "embla-carousel": "8.5.1",
-    "express": "4.22.0",
-    "geojson-validation": "^1.0.2",
-    "marked": "15.0.4",
-    "moment": "2.30.1",
-    "ng-table-virtual-scroll": "1.6.1",
-    "ngx-chips": "3.0.0",
-    "ngx-dropzone": "3.1.0",
-    "ngx-translate-messageformat-compiler": "~7.1.0",
-    "ol": "^10.0.0",
-    "papaparse": "5.4.1",
-    "pg": "^8.9.0",
-    "proj4": "^2.9.2",
-    "rdflib": "^2.3.0",
-    "reflect-metadata": "^0.1.13",
-    "semver": "7.6.3",
+    "document-register-element": "~1.14.10",
+    "duration-relativetimeformat": "~2.0.4",
+    "embla-carousel": "~8.6.0",
+    "flag-icons": "~7.5.0",
+    "geojson-validation": "~1.0.2",
+    "marked": "~17.0.4",
+    "ngx-dropzone": "~3.1.0",
+    "ngx-translate-messageformat-compiler": "~7.2.0",
+    "ol": "~10.8.0",
+    "papaparse": "~5.5.3",
+    "proj4": "~2.20.4",
+    "rdflib": "~2.3.5",
+    "semver": "~7.7.4",
     "tippy.js": "6.3.7",
     "tslib": "^2.3.0",
-    "typeorm": "^0.3.27",
-    "whatwg-fetch": "^3.6.2",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
   },
   "module": "fesm2022/geonetwork-ui.mjs",

package/src/libs/api/metadata-converter/src/lib/gn4/atomic-operations.ts

@@ -101,27 +101,68 @@ export const mapContact = (
   }
 }
 
-export const mapKeywords = (thesauri: Thesaurus[], language: string) => {
+export interface KeywordTree {
+  default?: string[]
+}
+
+/**
+ * Resolves a keyword's ancestor path within its thesaurus tree, or null for a
+ * root-level keyword (no ancestors to show). Tree entries are `^`-joined label
+ * paths (default language); they aren't index-aligned with the keywords, so we
+ * match on the last segment (not by position/URI), shortest path on poly-hierarchy.
+ */
+export const getKeywordHierarchyPath = (
+  keywordDefaultLabel: string,
+  tree?: KeywordTree | null
+): string[] | null => {
+  if (!keywordDefaultLabel || !tree?.default) return null
+  const shortest = tree.default
+    .map((entry) => entry.split('^'))
+    .filter((path) => path[path.length - 1] === keywordDefaultLabel)
+    .reduce(
+      (shortest, path) =>
+        !shortest || path.length < shortest.length ? path : shortest,
+      null
+    )
+  return shortest?.length > 1 ? shortest : null
+}
+
+export const mapKeywords = (
+  thesauri: Record<string, Thesaurus>,
+  language: string,
+  source?: SourceWithUnknownProps
+) => {
   const keywords = []
   for (const thesaurusId in thesauri) {
     const rawThesaurus = thesauri[thesaurusId]
+    // thesauri have an `id` (registered) or a `multilingualTitle` (cited);
+    // free-keyword groups only have a machine-key `title` like "otherKeywords-theme"
+    const { id, multilingualTitle, link = null } = rawThesaurus
     let thesaurus = null
-    if (rawThesaurus.id) {
-      const thesaurusSource: SourceWithUnknownProps = { ...rawThesaurus }
-      const url = getAsUrl(selectField(thesaurusSource, 'link'))
-      const name = selectField(thesaurusSource, 'title')
+    if (id || multilingualTitle) {
+      const url = getAsUrl(link)
+      const name = multilingualTitle
+        ? selectTranslatedValue<string>(multilingualTitle, language)
+        : rawThesaurus.title
       thesaurus = {
-        id: rawThesaurus.id,
+        ...(id && { id }),
         ...(name && { name }),
         ...(url && { url }),
       }
     }
+    const tree =
+      source && selectField<KeywordTree>(source, `${thesaurusId}_tree`)
+    // free-keyword groups have no `theme` field; their type is in the group key
+    const typeCode =
+      rawThesaurus.theme || thesaurusId.match(/otherKeywords-(\w+)$/)?.[1]
     for (const keyword of rawThesaurus.keywords) {
+      const hierarchyPath = getKeywordHierarchyPath(keyword.default, tree)
       keywords.push({
         label: selectTranslatedValue<string>(keyword, language),
-        type: getKeywordTypeFromKeywordTypeCode(rawThesaurus.theme),
+        type: getKeywordTypeFromKeywordTypeCode(typeCode),
         ...(keyword.link && { key: keyword.link }),
         ...(thesaurus && { thesaurus }),
+        ...(hierarchyPath && { hierarchyPath }),
       })
     }
   }

package/src/libs/api/metadata-converter/src/lib/gn4/gn4.field.mapper.ts

@@ -14,7 +14,7 @@ import {
   toDate,
 } from './atomic-operations'
 import { MetadataUrlService } from './metadata-url.service'
-import { Injectable, inject } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { getStatusFromStatusCode } from '../iso19139/utils/status.mapper'
 import { getUpdateFrequencyFromFrequencyCode } from '../iso19139/utils/update-frequency.mapper'
 import {
@@ -49,7 +49,7 @@ export class Gn4FieldMapper {
   private translateService = inject(TranslateService)
 
   private get getLocalizedIndexKey() {
-    return `lang${toLang3(this.translateService.currentLang)}`
+    return `lang${toLang3(this.translateService.getCurrentLang())}`
   }
 
   protected fields: Record<string, EsFieldMapperFn> = {
@@ -240,8 +240,9 @@ export class Gn4FieldMapper {
     allKeywords: (output, source) => ({
       ...output,
       keywords: mapKeywords(
-        selectField<Thesaurus[]>(source, 'allKeywords'),
-        this.getLocalizedIndexKey
+        selectField<Record<string, Thesaurus>>(source, 'allKeywords'),
+        this.getLocalizedIndexKey,
+        source
       ),
     }),
     inspireTheme: (output, source) => ({