@provoly/dashboard 0.24.9 → 0.24.11

package/lib/core/components/edit-input/edit-input.component.d.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
 export declare class PryEditInputComponent implements ControlValueAccessor {
@@ -9,7 +9,11 @@ export declare class PryEditInputComponent implements ControlValueAccessor {
     _onChange: (_: any) => void;
     _onTouched: () => void;
     editMode: boolean;
+    showButton: boolean;
     label: string;
+    editButtonTooltip: string;
+    confirmButtonTooltip: string;
+    validated: EventEmitter<string>;
     constructor(_cd: ChangeDetectorRef);
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
@@ -17,5 +21,5 @@ export declare class PryEditInputComponent implements ControlValueAccessor {
     writeValue(obj: any): void;
     toggle(force?: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PryEditInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PryEditInputComponent, "pry-edit-input", never, { "label": { "alias": "label"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PryEditInputComponent, "pry-edit-input", never, { "label": { "alias": "label"; "required": false; }; "editButtonTooltip": { "alias": "editButtonTooltip"; "required": false; }; "confirmButtonTooltip": { "alias": "confirmButtonTooltip"; "required": false; }; }, { "validated": "validated"; }, never, never, false, never>;
 }

package/lib/core/i18n/en.translations.d.ts

@@ -255,6 +255,7 @@ export declare const enTranslations: {
         theme: {
             editInput: {
                 toggle: string;
+                confirm: string;
             };
             previousMonth: string;
             nextMonth: string;

package/lib/core/i18n/fr.translations.d.ts

@@ -223,6 +223,7 @@ export declare const frTranslations: {
             delete: string;
             edit: string;
             editProfil: string;
+            editTitle: string;
             choice: string;
             choiceInList: string;
             text: string;
@@ -255,6 +256,7 @@ export declare const frTranslations: {
         theme: {
             editInput: {
                 toggle: string;
+                confirm: string;
             };
             previousMonth: string;
             nextMonth: string;

package/lib/core/model/manifest.interface.d.ts

@@ -6,7 +6,7 @@ import { DetailWidgetOptions } from './widget-detail-manifest.interface';
 import { GraphWidgetOptions } from './widget-graph-manifest.interface';
 import { IframeWidgetOptions } from './widget-iframe-manifest.interface';
 import { ImageWidgetOptions } from './widget-image-manifest.interface';
-import { MapWidgetOptions } from './widget-map-manifest.interface';
+import { LayerGroup, MapWidgetOptions } from './widget-map-manifest.interface';
 import { TableWidgetOptions } from './widget-table-manifest.interface';
 import { TemplateWidgetOptions } from './widget-template-manifest.interface';
 import { TileWidgetOptions } from './widget-tile-manifest.interface';
@@ -65,6 +65,7 @@ export interface GlobalManifest {
     };
     filters?: Filter[];
     html?: string;
+    layerGroups?: LayerGroup[];
 }
 export interface WidgetManifest {
     title?: string;

package/lib/core/model/widget-map-manifest.interface.d.ts

@@ -29,6 +29,7 @@ export interface BaseWidgetMapLayerOptions {
     background?: boolean;
     fit?: boolean;
     slide?: 'left' | 'right' | 'all';
+    group?: string;
 }
 export interface MapWidgetHeatMapLayerOptions extends BaseWidgetMapLayerOptions {
     type: 'heatmap';
@@ -118,4 +119,9 @@ export declare enum TooltipMode {
 export declare const widgetMapConfig: {
     actions$: BehaviorSubject<("click" | "lasso" | "rectangle" | "zoom" | "move" | "export" | "upload")[]>;
 };
+export interface LayerGroup {
+    name: string;
+    singleLayer: boolean;
+    visibleLayers: string[];
+}
 export declare const DEFAULT_PROJECTION = "EPSG:4326";

package/lib/dashboard/store/dashboard.actions.d.ts

@@ -7,6 +7,7 @@ import { Relation } from '../../core/model/relation.interface';
 import { OrderValue } from '../../core/model/result-order.interface';
 import { ResultSet, ResultSets } from '../../core/model/result-set.interface';
 import { GetCapabilitiesResponse } from './wms.service';
+import { LayerGroup } from '../../core/model/widget-map-manifest.interface';
 export type DashboardCellParams = {
     gridWidth: number;
     gridHeight: number;
@@ -506,4 +507,40 @@ export declare const DashboardActions: {
         presentation: ManifestDescription;
         viewMode: ViewMode;
     } & import("@ngrx/store/src/models").TypedAction<"[Dashboard] load presentation">>;
+    initDefaultLayerGroup: import("@ngrx/store").ActionCreator<"[Dashboard] init default layer group", (props: {
+        layers?: string[] | undefined;
+    }) => {
+        layers?: string[] | undefined;
+    } & import("@ngrx/store/src/models").TypedAction<"[Dashboard] init default layer group">>;
+    addLayerGroup: import("@ngrx/store").ActionCreator<"[Dashboard] add map layer group", (props: {
+        defaultTitle: string;
+    }) => {
+        defaultTitle: string;
+    } & import("@ngrx/store/src/models").TypedAction<"[Dashboard] add map layer group">>;
+    updateLayerGroup: import("@ngrx/store").ActionCreator<"[Dashboard] update map layer group", (props: {
+        name: string;
+        newName?: string | undefined;
+        singleLayer?: boolean | undefined;
+        visibleLayers?: string | string[] | undefined;
+    }) => {
+        name: string;
+        newName?: string | undefined;
+        singleLayer?: boolean | undefined;
+        visibleLayers?: string | string[] | undefined;
+    } & import("@ngrx/store/src/models").TypedAction<"[Dashboard] update map layer group">>;
+    confirmLayerGroupDeletion: import("@ngrx/store").ActionCreator<"[Dashboard] confirm deleting map layer group", (props: {
+        name: string;
+    }) => {
+        name: string;
+    } & import("@ngrx/store/src/models").TypedAction<"[Dashboard] confirm deleting map layer group">>;
+    deleteLayerGroup: import("@ngrx/store").ActionCreator<"[Dashboard] delete map layer group", (props: {
+        name: string;
+    }) => {
+        name: string;
+    } & import("@ngrx/store/src/models").TypedAction<"[Dashboard] delete map layer group">>;
+    updateAllLayerGroups: import("@ngrx/store").ActionCreator<"[Dashboard] remove map layer group", (props: {
+        groups: LayerGroup[];
+    }) => {
+        groups: LayerGroup[];
+    } & import("@ngrx/store/src/models").TypedAction<"[Dashboard] remove map layer group">>;
 };

package/lib/dashboard/store/dashboard.effects.d.ts

@@ -152,6 +152,7 @@ export declare class DashboardEffects {
         } | undefined;
         filters?: import("@provoly/dashboard").Filter[] | undefined;
         html?: string | undefined;
+        layerGroups?: import("../../core/model/widget-map-manifest.interface").LayerGroup[] | undefined;
     }]> & import("@ngrx/effects").CreateEffectMetadata;
     saveManifest$: import("rxjs").Observable<import("@ngrx/store/src/models").TypedAction<"[Dashboard] (bus) fetching available manifests"> | ({
         initial?: GlobalManifest | undefined;
@@ -239,6 +240,9 @@ export declare class DashboardEffects {
         mode: ViewMode;
         customDisplay?: import("@provoly/dashboard").DisplayOptions | undefined;
     } & import("@ngrx/store/src/models").TypedAction<"[Dashboard/Display] (bus) Update displayed dashboard management features">)> & import("@ngrx/effects").CreateEffectMetadata;
+    confirmLayerGroupDeletion$: import("rxjs").Observable<{
+        name: string;
+    } & import("@ngrx/store/src/models").TypedAction<"[Dashboard] confirm deleting map layer group">> & import("@ngrx/effects").CreateEffectMetadata;
     constructor(dashboardInitService: DashboardInitService, actions$: Actions, store: Store<any>, manifestService: ManifestService, itemService: ItemService, titleService: PryTitleService, translateService: PryI18nService, snackBar: PrySnackbarService, router: Router, refreshService: RefreshService, toolboxManifestService: ToolboxManifestService, busService: BusService, searchService: SearchService, pryDialog: PryDialogService, wmsService: WmsService, widgetFactoryService: WidgetFactoryService, i18nService: PryI18nService);
     static ɵfac: i0.ɵɵFactoryDeclaration<DashboardEffects, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DashboardEffects>;

package/lib/dashboard/store/dashboard.selectors.d.ts

@@ -33,6 +33,7 @@ export declare const DashboardSelectors: {
         } | undefined;
         filters?: Filter[] | undefined;
         html?: string | undefined;
+        layerGroups?: import("@provoly/dashboard").LayerGroup[] | undefined;
     }, (s1: {
         sender: string;
         tenants: string[];
@@ -48,6 +49,7 @@ export declare const DashboardSelectors: {
         } | undefined;
         filters?: Filter[] | undefined;
         html?: string | undefined;
+        layerGroups?: import("@provoly/dashboard").LayerGroup[] | undefined;
     }>;
     refreshRates: MemoizedSelector<object, {
         [key: string]: number;
@@ -58,6 +60,7 @@ export declare const DashboardSelectors: {
         } | undefined;
         filters?: Filter[] | undefined;
         html?: string | undefined;
+        layerGroups?: import("@provoly/dashboard").LayerGroup[] | undefined;
     }) => {
         [key: string]: number;
     }>;
@@ -68,6 +71,7 @@ export declare const DashboardSelectors: {
         } | undefined;
         filters?: Filter[] | undefined;
         html?: string | undefined;
+        layerGroups?: import("@provoly/dashboard").LayerGroup[] | undefined;
     }, s2: number) => DashboardManifest>;
     widgetManifest: (index: number) => MemoizedSelector<DashboardManifest, WidgetManifest, import("@ngrx/store").DefaultProjectorFn<WidgetManifest>>;
     manifestsList: MemoizedSelector<object, import("../../core/model/manifest.interface").ManifestDescription[], (s1: {
@@ -138,6 +142,7 @@ export declare const DashboardSelectors: {
         } | undefined;
         filters?: Filter[] | undefined;
         html?: string | undefined;
+        layerGroups?: import("@provoly/dashboard").LayerGroup[] | undefined;
     }) => {
         [key: string]: {
             windowIndex: number;
@@ -258,6 +263,7 @@ export declare const DashboardSelectors: {
         } | undefined;
         filters?: Filter[] | undefined;
         html?: string | undefined;
+        layerGroups?: import("@provoly/dashboard").LayerGroup[] | undefined;
     }, (s1: {
         sender: string;
         tenants: string[];
@@ -273,6 +279,7 @@ export declare const DashboardSelectors: {
         } | undefined;
         filters?: Filter[] | undefined;
         html?: string | undefined;
+        layerGroups?: import("@provoly/dashboard").LayerGroup[] | undefined;
     }>;
     loading: MemoizedSelector<object, boolean, (s1: {
         sender: string;
@@ -323,6 +330,7 @@ export declare const DashboardSelectors: {
         } | undefined;
         filters?: Filter[] | undefined;
         html?: string | undefined;
+        layerGroups?: import("@provoly/dashboard").LayerGroup[] | undefined;
     }) => boolean>;
     isCurrentPresentationOwner: MemoizedSelector<object, boolean, (s1: {
         current: import("../../core/model/manifest.interface").ManifestDescription | undefined;
@@ -341,4 +349,5 @@ export declare const DashboardSelectors: {
     }, (s1: DashboardState) => {
         [url: string]: import("@provoly/dashboard").GetCapabilitiesResponse | null;
     }>;
+    layerGroups: MemoizedSelector<object, import("@provoly/dashboard").LayerGroup[], (s1: DashboardState) => import("@provoly/dashboard").LayerGroup[]>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@provoly/dashboard",
-  "version": "0.24.9",
+  "version": "0.24.11",
   "type": "commonjs",
   "peerDependencies": {
     "@angular/cdk": "16.x || 17.x",
@@ -132,6 +132,36 @@
       "esm": "./esm2022/toolbox/provoly-dashboard-toolbox.mjs",
       "default": "./fesm2022/provoly-dashboard-toolbox.mjs"
     },
+    "./filters/autocomplete": {
+      "types": "./filters/autocomplete/index.d.ts",
+      "esm2022": "./esm2022/filters/autocomplete/provoly-dashboard-filters-autocomplete.mjs",
+      "esm": "./esm2022/filters/autocomplete/provoly-dashboard-filters-autocomplete.mjs",
+      "default": "./fesm2022/provoly-dashboard-filters-autocomplete.mjs"
+    },
+    "./filters/date": {
+      "types": "./filters/date/index.d.ts",
+      "esm2022": "./esm2022/filters/date/provoly-dashboard-filters-date.mjs",
+      "esm": "./esm2022/filters/date/provoly-dashboard-filters-date.mjs",
+      "default": "./fesm2022/provoly-dashboard-filters-date.mjs"
+    },
+    "./filters/list": {
+      "types": "./filters/list/index.d.ts",
+      "esm2022": "./esm2022/filters/list/provoly-dashboard-filters-list.mjs",
+      "esm": "./esm2022/filters/list/provoly-dashboard-filters-list.mjs",
+      "default": "./fesm2022/provoly-dashboard-filters-list.mjs"
+    },
+    "./filters/number": {
+      "types": "./filters/number/index.d.ts",
+      "esm2022": "./esm2022/filters/number/provoly-dashboard-filters-number.mjs",
+      "esm": "./esm2022/filters/number/provoly-dashboard-filters-number.mjs",
+      "default": "./fesm2022/provoly-dashboard-filters-number.mjs"
+    },
+    "./filters/text": {
+      "types": "./filters/text/index.d.ts",
+      "esm2022": "./esm2022/filters/text/provoly-dashboard-filters-text.mjs",
+      "esm": "./esm2022/filters/text/provoly-dashboard-filters-text.mjs",
+      "default": "./fesm2022/provoly-dashboard-filters-text.mjs"
+    },
     "./components/card": {
       "types": "./components/card/index.d.ts",
       "esm2022": "./esm2022/components/card/provoly-dashboard-components-card.mjs",
@@ -186,36 +216,6 @@
       "esm": "./esm2022/components/stepper/provoly-dashboard-components-stepper.mjs",
       "default": "./fesm2022/provoly-dashboard-components-stepper.mjs"
     },
-    "./filters/autocomplete": {
-      "types": "./filters/autocomplete/index.d.ts",
-      "esm2022": "./esm2022/filters/autocomplete/provoly-dashboard-filters-autocomplete.mjs",
-      "esm": "./esm2022/filters/autocomplete/provoly-dashboard-filters-autocomplete.mjs",
-      "default": "./fesm2022/provoly-dashboard-filters-autocomplete.mjs"
-    },
-    "./filters/date": {
-      "types": "./filters/date/index.d.ts",
-      "esm2022": "./esm2022/filters/date/provoly-dashboard-filters-date.mjs",
-      "esm": "./esm2022/filters/date/provoly-dashboard-filters-date.mjs",
-      "default": "./fesm2022/provoly-dashboard-filters-date.mjs"
-    },
-    "./filters/list": {
-      "types": "./filters/list/index.d.ts",
-      "esm2022": "./esm2022/filters/list/provoly-dashboard-filters-list.mjs",
-      "esm": "./esm2022/filters/list/provoly-dashboard-filters-list.mjs",
-      "default": "./fesm2022/provoly-dashboard-filters-list.mjs"
-    },
-    "./filters/number": {
-      "types": "./filters/number/index.d.ts",
-      "esm2022": "./esm2022/filters/number/provoly-dashboard-filters-number.mjs",
-      "esm": "./esm2022/filters/number/provoly-dashboard-filters-number.mjs",
-      "default": "./fesm2022/provoly-dashboard-filters-number.mjs"
-    },
-    "./filters/text": {
-      "types": "./filters/text/index.d.ts",
-      "esm2022": "./esm2022/filters/text/provoly-dashboard-filters-text.mjs",
-      "esm": "./esm2022/filters/text/provoly-dashboard-filters-text.mjs",
-      "default": "./fesm2022/provoly-dashboard-filters-text.mjs"
-    },
     "./pipeline-components/filter": {
       "types": "./pipeline-components/filter/index.d.ts",
       "esm2022": "./esm2022/pipeline-components/filter/provoly-dashboard-pipeline-components-filter.mjs",
@@ -234,18 +234,18 @@
       "esm": "./esm2022/pipeline-components/noop/provoly-dashboard-pipeline-components-noop.mjs",
       "default": "./fesm2022/provoly-dashboard-pipeline-components-noop.mjs"
     },
-    "./pipeline-components/output-dataset": {
-      "types": "./pipeline-components/output-dataset/index.d.ts",
-      "esm2022": "./esm2022/pipeline-components/output-dataset/provoly-dashboard-pipeline-components-output-dataset.mjs",
-      "esm": "./esm2022/pipeline-components/output-dataset/provoly-dashboard-pipeline-components-output-dataset.mjs",
-      "default": "./fesm2022/provoly-dashboard-pipeline-components-output-dataset.mjs"
-    },
     "./pipeline-components/subgraph": {
       "types": "./pipeline-components/subgraph/index.d.ts",
       "esm2022": "./esm2022/pipeline-components/subgraph/provoly-dashboard-pipeline-components-subgraph.mjs",
       "esm": "./esm2022/pipeline-components/subgraph/provoly-dashboard-pipeline-components-subgraph.mjs",
       "default": "./fesm2022/provoly-dashboard-pipeline-components-subgraph.mjs"
     },
+    "./pipeline-components/output-dataset": {
+      "types": "./pipeline-components/output-dataset/index.d.ts",
+      "esm2022": "./esm2022/pipeline-components/output-dataset/provoly-dashboard-pipeline-components-output-dataset.mjs",
+      "esm": "./esm2022/pipeline-components/output-dataset/provoly-dashboard-pipeline-components-output-dataset.mjs",
+      "default": "./fesm2022/provoly-dashboard-pipeline-components-output-dataset.mjs"
+    },
     "./tooltips/attribute": {
       "types": "./tooltips/attribute/index.d.ts",
       "esm2022": "./esm2022/tooltips/attribute/provoly-dashboard-tooltips-attribute.mjs",

package/styles/base/_utils.scss

@@ -49,6 +49,10 @@
     align-items: center;
   }
 
+  &.-justify-center {
+    justify-content: center;
+  }
+
   &.-column {
     flex-direction: column;
   }

package/styles/components/_a-range-slider.scss

@@ -18,12 +18,9 @@
 
   &[type='range'] {
     width: 100%;
-    height: 7px;
+    height: 4px;
     border-radius: 5px;
-    background: rgba(255, 255, 255, 0.6);
-    background-image: linear-gradient(#426EA4, #4081d0);
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
+    background: #113B6E;
     box-shadow: 0 0 2px 2px #F5F7F9;
     -webkit-appearance: none;
   }
@@ -59,24 +56,11 @@
   &__max {
     position: absolute;
     z-index: 0;
-    bottom: -6px;
+    top: 0;
     width: 20px;
     color: #113B6E;
     opacity: 0.7;
     text-align: center;
-
-    &:before {
-      content: '';
-      display: block;
-      position: absolute;
-      top: -11px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 2px;
-      height: 10px;
-      background-color: #113B6E;
-      border-radius: 2px;
-    }
   }
 
   &__min {
@@ -90,15 +74,15 @@
   // Selected value
   &__selected-value {
     position: absolute;
-    top: -3px;
+    bottom: -7px;
     transform: translateX(-50%);
     display: flex;
     align-items: center;
     justify-content: center;
     min-width: 30px;
     height: 22px;
-    border-radius: 10px;
     font-size: 13px;
     font-weight: 600;
+    background-color: #FFFFFF;
   }
 }

package/styles/components/_m-form-label-field.scss

@@ -25,6 +25,7 @@
   &__edit-inline {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: toRem(10);
 
     &__txtvalue {

package/styles/components/_o-layer-settings.scss

@@ -0,0 +1,139 @@
+@use '../abstracts' as *;
+
+/* Organism - map layer settings */
+
+.o-layer-settings {
+  padding: toRem(20) toRem(20);
+  margin: 20px -20px 0 -20px;
+
+  &__group {
+    margin-top: toRem(30);
+    padding-bottom: toRem(10);
+
+    .m-form-radio-group {
+      gap: toRem(10);
+      margin: toRem(5) 0 toRem(5) toRem(10);
+
+      .a-label {
+        font-weight: 400;
+      }
+    }
+
+    .a-btn.-link-like {
+      font-size: toRem(12);
+      font-weight: 700;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .m-tooltip {
+      margin-left: toRem(10);
+    }
+  }
+
+  &__group-title {
+
+    &.m-form-label-field {
+      margin-bottom: 0;
+    }
+
+    .u-display-flex {
+      align-items: center;
+      padding-right: toRem(15);
+
+      .o-layer-settings__delete-group {
+        margin-bottom: toRem(10);
+
+        &:after {
+          top: calc(50% + 4px);
+        }
+      }
+
+      pry-edit-input {
+        flex: 1;
+      }
+    }
+  }
+
+  &__layers {
+    display: flex;
+    flex-direction: column;
+    gap: toRem(10);
+  }
+
+  &__layer-wrapper {
+    .drag-placeholder {
+      background: white;
+      min-height: 55px;
+      transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
+  }
+
+  &__layer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 toRem(5);
+
+    .u-display-flex {
+      gap: 0;
+    }
+
+    .a-btn--icon-only {
+      height: auto;
+      width: auto;
+    }
+
+    .a-h5 {
+      margin: 0;
+      font-size: toRem(14);
+    }
+
+    .unfold-layer {
+      margin-top: -6px;
+    }
+  }
+
+  &__layer-content {
+    padding: 0 toRem(20);
+
+    &.-collapsed {
+      display: none;
+    }
+  }
+
+  .a-label {
+    font-weight: 700;
+  }
+
+  .m-form-label-field {
+    .a-label {
+      font-weight: 700;
+    }
+  }
+
+  .drag-handle {
+    cursor: pointer;
+
+    &.-disabled {
+      cursor: unset;
+      opacity: 0.5;
+    }
+  }
+
+  .a-tooltip {
+    &:after{
+      white-space: nowrap;
+    }
+  }
+}
+
+.cdk-drop-list-dragging .cdk-drag {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drag-animating {
+  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
+}

package/styles/components/_o-pry-edit.scss

@@ -3,7 +3,35 @@
 /* Organism - component pry edit */
 
 .o-pry-edit {
-  .m-form-label-field__edit-inline__txtvalue {
-    font-size: toRem(16);
+  .m-form-label-field__edit-inline {
+    position: relative;
+
+    &__txtvalue {
+      margin-top: 0;
+    }
+  }
+
+  .a-btn {
+    display: none;
+    opacity: 0;
+  }
+
+  .-button-visible {
+    display: block;
+    opacity: 1;
+    transition: opacity 0.3s;
+    position: absolute;
+    top: 0;
+    right: 10px;
+  }
+
+  &.-edit {
+    .m-form-label-field__edit-inline {
+      margin-top: -2px;
+    }
+
+    .-button-visible {
+      top: 4px;
+    }
   }
 }

package/styles/components/_o-settings.scss

@@ -23,7 +23,7 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: toRem(20);
+      padding: toRem(8) toRem(20) toRem(10);
 
       .a-h2 {
         padding-bottom: 0;
@@ -38,7 +38,7 @@
       overflow-x: hidden;
       overflow-y: auto;
       width: 100%;
-      padding: toRem(20);
+      padding: 0 toRem(20);
 
       &__actions {
         display: flex;
@@ -54,6 +54,10 @@
         }
       }
 
+      .m-form-label-field {
+        margin-bottom: toRem(10);
+      }
+
       &__fields {
         margin-bottom: toRem(30);
         padding-bottom: toRem(30);

package/styles/main.scss

@@ -58,6 +58,7 @@
 @use 'components/o-chips-selector' as *;
 @use 'components/o-draggable-menu' as *;
 @use 'components/o-form' as *;
+@use 'components/o-layer-settings' as *;
 @use 'components/o-modal' as *;
 @use 'components/o-named-query' as *;
 @use 'components/o-object-panel' as *;

package/styles-theme/components-theme/_m-layer-legend.theme.scss

@@ -0,0 +1,24 @@
+@use '../../styles/abstracts' as *;
+@use '../abstracts-theme/variables.theme' as *;
+
+/* Theme Molecules - m-map-layer-action, m-layer-legend, m-map-slide-legend */
+
+.m-map-layer-action {
+  color: themed($theme-map, 'color', 'primary', 750);
+
+  &__container {
+    background-color: themed($theme-map, 'color', 'primary', 'contrast', 50);
+  }
+}
+
+.m-layer-switcher {
+  &--radios {
+    display: flex;
+    flex-direction: column;
+    gap: toRem(5);
+
+    input {
+      accent-color: themed($theme-map, 'color', 'primary', 600);
+    }
+  }
+}