@provoly/dashboard 0.18.4 → 0.18.6

package/filters/date/date-filter.component.d.ts

@@ -12,6 +12,7 @@ export declare class DateFilterComponent extends BaseFilterComponent implements
     constructor(store: Store);
     ngOnInit(): void;
     setFilter(value: string): void;
+    changeValue($event: string): void;
     clearDate(index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateFilterComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DateFilterComponent, "pry-date-filter", never, {}, {}, never, never, false, never>;

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

@@ -102,6 +102,7 @@ export declare const enTranslations: {
             automateRefresh: string;
             options: string;
             close: string;
+            filter: string;
             heatmap: string;
             bubblemap: string;
             markermap: string;

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

@@ -102,6 +102,7 @@ export declare const frTranslations: {
             automateRefresh: string;
             options: string;
             close: string;
+            filter: string;
             heatmap: string;
             bubblemap: string;
             markermap: string;

package/lib/dashboard/components/widgets/header/widget-header.component.d.ts

@@ -9,7 +9,7 @@ import { LibraryTypes } from '../../../../core/store/image/image.service';
 import { ToolboxMenuService } from '../../../../core/toolbox/toolbox-menu.service';
 import { SubscriptionnerDirective } from '../../subscriptionner.directive';
 import * as i0 from "@angular/core";
-export declare const WIDGET_HEADER_HEIGHT = 60;
+export declare const WIDGET_HEADER_HEIGHT = 30;
 export type HeaderAction = {
     icon: string;
     action: (that: PryWidgetHeaderComponent) => void;

package/lib/dashboard/filter/base-filter.component.d.ts

@@ -1,13 +1,17 @@
+import { OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Filter } from '../../core/model/filter.interface';
 import { SubscriptionnerDirective } from '../components/subscriptionner.directive';
 import * as i0 from "@angular/core";
-export declare class BaseFilterComponent extends SubscriptionnerDirective {
+export declare class BaseFilterComponent extends SubscriptionnerDirective implements OnInit {
     protected store: Store;
     filter?: Filter;
     type: string;
+    protected _value: any;
     constructor(store: Store);
+    ngOnInit(): void;
     updateFilter(value: any): void;
+    validateFilters(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseFilterComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BaseFilterComponent, "pry-base-filter", never, { "filter": { "alias": "filter"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/dashboard/filter/components/filter-instanciator/filter-instanciator.component.d.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, ChangeDetectorRef, Injector, ViewContainerRef } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { Filter } from '../../../../core/model/filter.interface';
 import { SubscriptionnerDirective } from '../../../components/subscriptionner.directive';
 import { FilterFactoryService } from '../../filter-factory.service';
@@ -11,10 +11,13 @@ export declare class FilterInstanciatorComponent extends SubscriptionnerDirectiv
     private filterFactoryService;
     private changeDetector;
     filter$: BehaviorSubject<Filter | null>;
+    private applySub?;
+    private currentInstance?;
     set filter(filter: Filter);
     filterContainerRef: ViewContainerRef;
+    set applyFilter$(applyFilter$: Observable<void>);
     constructor(store: Store, injector: Injector, filterFactoryService: FilterFactoryService, changeDetector: ChangeDetectorRef);
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FilterInstanciatorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FilterInstanciatorComponent, "pry-filter-instanciator", never, { "filter": { "alias": "filter"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FilterInstanciatorComponent, "pry-filter-instanciator", never, { "filter": { "alias": "filter"; "required": false; }; "applyFilter$": { "alias": "applyFilter$"; "required": false; }; }, {}, never, never, false, never>;
 }

package/lib/dashboard/item-utils.d.ts

@@ -1,4 +1,3 @@
-import Geometry from 'ol/geom/Geometry';
 import { AttributeSimpleValue, Item, ValueType } from '../core/model/item.interface';
 import { ResultSet } from '../core/model/result-set.interface';
 import { Attribute, Class } from '../core/store/class/class.interface';
@@ -7,13 +6,6 @@ export interface OlFeature {
     get(key: string): any;
 }
 export declare class ItemUtils {
-    static readGeometry<T extends 'point' | 'line' | 'multi-line' | 'polygon' | 'multi-polygon'>(item: Item, type: T, attribute: Attribute | undefined): Geometry;
-    static projectGeometry(geometry: {
-        type: string;
-        coordinates: [number, number] | [number, number][] | [number, number][][] | [number, number][][][];
-    }): any;
-    static readLocations<T extends 'point' | 'line' | 'polygon'>(item: Item, type: T): T extends 'point' ? [number, number][] : [number, number][][];
-    private static extractGeometries;
     static getAttributeValue(item: Item | OlFeature, attribute: Attribute | string | undefined): AttributeSimpleValue | AttributeSimpleValue[];
     static getAttributeCalculatedValue(item: Item, attribute: Attribute | string | undefined): ValueType | ValueType[];
     static sortAttributes(a: AttributeSimpleValue, b: AttributeSimpleValue): number;

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

@@ -441,6 +441,8 @@ export declare const DashboardActions: {
         value: any;
         datasourceId: string;
     } & import("@ngrx/store/src/models").TypedAction<"[Dashboard] (bus) update filter value">>;
+    clearAllFilterValues: import("@ngrx/store").ActionCreator<"[Dashboard] (bus) clear all filter values", () => import("@ngrx/store/src/models").TypedAction<"[Dashboard] (bus) clear all filter values">>;
+    dispatchFilters: import("@ngrx/store").ActionCreator<"[Dashboard] (bus) apply filters to presentation datasources", () => import("@ngrx/store/src/models").TypedAction<"[Dashboard] (bus) apply filters to presentation datasources">>;
     resetWmsFeatures: import("@ngrx/store").ActionCreator<"[Widget map] Reset Wms layer features", () => import("@ngrx/store/src/models").TypedAction<"[Widget map] Reset Wms layer features">>;
     getWmsFeatures: import("@ngrx/store").ActionCreator<"[Widget map] Get Wms layer features", (props: {
         url: string;

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

@@ -1,4 +1,4 @@
-export declare const DEFAULT_GAP_PX = 2;
+export declare const DEFAULT_GAP_PX = 15;
 export declare const DEFAULT_COLUMNS_NUMBER = 12;
 export declare const DEFAULT_ROWS_NUMBER = 12;
 export declare const DEFAULT_ROW_HEIGHT_PX = 50;

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

@@ -218,7 +218,7 @@ export declare class DashboardEffects {
     toggleEditionModeIfNotManual$: import("rxjs").Observable<{
         force?: boolean | undefined;
     } & import("@ngrx/store/src/models").TypedAction<"[Dashboard] toggle edition mode">> & import("@ngrx/effects").CreateEffectMetadata;
-    updateViewAfterFilterValueUpdate$: import("rxjs").Observable<{
+    dispatchFilters$: import("rxjs").Observable<{
         id: string;
     } & import("@ngrx/store/src/models").TypedAction<"[Search] (bus) search named">> & import("@ngrx/effects").CreateEffectMetadata;
     getCapability$: import("rxjs").Observable<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@provoly/dashboard",
-  "version": "0.18.4",
+  "version": "0.18.6",
   "type": "commonjs",
   "peerDependencies": {
     "@angular/cdk": "14.x || 15.x || 16.x",
@@ -193,18 +193,18 @@
       "esm": "./esm2022/components/filter/provoly-dashboard-components-filter.mjs",
       "default": "./fesm2022/provoly-dashboard-components-filter.mjs"
     },
-    "./components/metadata-editor": {
-      "types": "./components/metadata-editor/index.d.ts",
-      "esm2022": "./esm2022/components/metadata-editor/provoly-dashboard-components-metadata-editor.mjs",
-      "esm": "./esm2022/components/metadata-editor/provoly-dashboard-components-metadata-editor.mjs",
-      "default": "./fesm2022/provoly-dashboard-components-metadata-editor.mjs"
-    },
     "./components/scheme-picker": {
       "types": "./components/scheme-picker/index.d.ts",
       "esm2022": "./esm2022/components/scheme-picker/provoly-dashboard-components-scheme-picker.mjs",
       "esm": "./esm2022/components/scheme-picker/provoly-dashboard-components-scheme-picker.mjs",
       "default": "./fesm2022/provoly-dashboard-components-scheme-picker.mjs"
     },
+    "./components/metadata-editor": {
+      "types": "./components/metadata-editor/index.d.ts",
+      "esm2022": "./esm2022/components/metadata-editor/provoly-dashboard-components-metadata-editor.mjs",
+      "esm": "./esm2022/components/metadata-editor/provoly-dashboard-components-metadata-editor.mjs",
+      "default": "./fesm2022/provoly-dashboard-components-metadata-editor.mjs"
+    },
     "./components/sinceDate": {
       "types": "./components/sinceDate/index.d.ts",
       "esm2022": "./esm2022/components/sinceDate/provoly-dashboard-components-sinceDate.mjs",

package/presentation/style/_o-pry-new-presentation.scss

@@ -83,7 +83,7 @@ pry-add-edit-presentation {
 }
 
 .a-presentation-title {
-  padding: 15px;
+  padding: 10px;
 }
 
 .a-presentation__search {

package/presentation/style/_o-pry-presentation.scss

@@ -172,10 +172,16 @@
 h1.a-presentation-title {
   font-size: 16px;
   padding-right: 20px;
+  color: #3E546A;
 }
 
 .title-container {
   display: flex;
+
+  .h-1 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 }
 
 .info-icon {
@@ -183,11 +189,11 @@ h1.a-presentation-title {
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 50%;
-  background-color: #ccc;
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   align-self: center;
   margin-right: 1rem;
+  border: 1px solid #3E546A;
 }

package/styles/components/_a-btn.scss

@@ -114,6 +114,7 @@
     width: toRem(27);
     height: toRem(27);
     padding: 0;
+    margin: 2px;
   }
 
   // Toggler open/close element
@@ -164,12 +165,12 @@
   }
 
   &.-size-sm {
-    gap: toRem(5);
-    height: toRem(34);
-    padding-left: toRem(15);
-    padding-right: toRem(15);
-    font-size: toRem(13);
-    line-height: toRem(15);
+    gap: toRem(3);
+    height: toRem(30);
+    padding-left: toRem(12);
+    padding-right: toRem(12);
+    font-size: toRem(10);
+    line-height: toRem(13);
 
     &.-circle {
       width: toRem(34);
@@ -179,15 +180,15 @@
 
   &.-size-md {
     gap: toRem(5);
-    height: toRem(37);
-    padding-left: toRem(20);
-    padding-right: toRem(20);
-    font-size: toRem(14);
-    line-height: toRem(16);
+    height: toRem(34);
+    padding-left: toRem(15);
+    padding-right: toRem(15);
+    font-size: toRem(12);
+    line-height: toRem(14);
 
     &.-circle {
-      width: toRem(37);
-      height: toRem(37);
+      width: toRem(34);
+      height: toRem(34);
     }
 
     pry-icon,

package/styles/components/_a-color-picker.scss

@@ -5,6 +5,7 @@
   height: toRem(30);
   border-radius: toRem(15);
   position: relative;
+  box-shadow: 0px 4px 4px rgba(17, 59, 110, 0.24);
 
   &__modal {
     position: absolute;

package/styles/components/_a-table.scss

@@ -24,7 +24,7 @@
   thead {
     td,
     th {
-      height: toRem(24);
+      height: toRem(30);
       margin: toRem(8);
       padding: toRem(8);
     }

package/styles/components/_m-filter.scss

@@ -3,6 +3,8 @@
 /* Molecule m-filter */
 
 .m-filter {
+  min-width: toRem(150);
+
   &__wrapper {
     display: flex;
     align-items: center;
@@ -13,9 +15,57 @@
     }
   }
 
+  &__label {
+    cursor: none;
+    margin: 0;
+    align-self: center;
+    white-space: nowrap;
+  }
+
+  &__input {
+    outline: none;
+    min-height: toRem(20);
+    line-height: toRem(12);
+    padding: 0 toRem(2) toRem(1) toRem(1);
+  }
+
+  &__date-input-separator {
+    margin: 0 toRem(5);
+  }
+
+  &__input-wrapper {
+    display: flex;
+    border-radius: toRem(5);
+    padding: toRem(4) toRem(10);
+    align-items: center;
+
+    &--dropdown {
+      padding: toRem(3) toRem(10);
+    }
+
+    .ng-select-container {
+      border: none;
+      min-width: toRem(100);
+    }
+
+    .ng-select.ng-select-single .ng-select-container {
+      min-height: 22px;
+      height: 22px;
+    }
+
+    .ng-dropdown-panel.ng-select-bottom {
+      margin-top: 3px;
+    }
+
+    .ng-select.ng-select-focused:not(.ng-select-opened) > .ng-select-container{
+      border: none transparent;
+      box-shadow: none;
+    }
+  }
+
   &__clear-wrapper {
     position: absolute;
-    bottom: toRem(8);
+    bottom: 0.4rem;
     cursor: pointer;
     -webkit-user-select: none;
     user-select: none;
@@ -31,6 +81,11 @@
     &--date {
       right: toRem(35);
     }
+
+    &--two-dates {
+      right: toRem(35);
+      bottom: toRem(0);
+    }
   }
 
   &__clear {
@@ -45,5 +100,5 @@
 pry-filter-instanciator {
   display: flex;
   justify-content: space-around;
-  padding: toRem(10);
+  padding: 0 toRem(10);
 }

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

@@ -53,3 +53,9 @@
     width: 100%;
   }
 }
+
+pry-admin-form-dataset {
+  textarea {
+    resize: both;
+  }
+}

package/styles/components/_o-about.scss

@@ -39,7 +39,7 @@
     width: 1.5rem;
     height: 1.5rem;
     border-radius: 50%;
-    background-color: #ccc;
+    border: 1px solid #3E546A;
     cursor: pointer;
     display: inline-flex;
     justify-content: center;

package/styles/components/_o-widget.scss

@@ -23,7 +23,7 @@
     overflow: auto;
     justify-content: space-between;
     width: 100%;
-    height: toRem(60);
+    height: toRem(32);
 
     &__content {
       display: flex;
@@ -45,9 +45,11 @@
           overflow: hidden;
           padding-left: toRem(10);
           padding-bottom: 0;
-          font-size: toRem(15);
+          font-size: toRem(14);
+          font-weight: 500;
           text-overflow: ellipsis;
           white-space: nowrap;
+          text-transform: uppercase;
         }
 
         &__color-point {

package/styles/layout/_o-workspace.scss

@@ -19,9 +19,31 @@
     padding: toRem(20);
 
     &__filters {
+      display: flex;
+      padding: toRem(8) toRem(10);
+      max-height: 50px; // needed for ng-select
+    }
+
+    &__filter-container {
       display: flex;
       justify-content: flex-start;
-      padding: toRem(10);
+      overflow-x: auto;
+      overflow-y: hidden;
+      margin-bottom: toRem(-5);
+      max-height: 50px; // needed for ng-select
+      padding: toRem(4) 0;
+
+      &:has(ng-dropdown-panel.ng-dropdown-panel) {
+        padding-bottom: 350px; // max ng-select dropdown length
+        background-clip: content-box, padding-box;
+      }
+    }
+
+    &__filter-actions {
+      display: flex;
+      align-items: center;
+      gap: toRem(10);
+      padding: 0 toRem(10);
     }
   }
 

package/styles-theme/abstracts-theme/variables/_variables-typo.scss

@@ -127,7 +127,16 @@ $theme-typography: (
     'letter-spacing': -1px,
     'font-weight': 700,
     'font-style': ''
-  )
+  ),
+  'tooltip': (
+    'font-family': '',
+    'font-variation': '',
+    'font-size': 12px,
+    'line-height': 14px,
+    'letter-spacing': '',
+    'font-weight': 400,
+    'font-style': ''
+  ),
 );
 
 ///// DO NOT EDIT FROM HERE /////

package/styles-theme/components-theme/_m-filter.theme.scss

@@ -1,7 +1,46 @@
-/* Theme - Atom a-icon */
+@use '../../styles/abstracts' as *;
+@use '../abstracts-theme/variables.theme' as *;
+
+/* Theme - Molecule m-filter */
 
-// colors that make the clear button look like the ng-select clear button
 .m-filter {
+  display: flex;
+  align-items: center;
+
+  &__input-wrapper {
+    border: 1px solid themed($theme-map, 'color', 'primary', 400);
+    color: themed($theme-map, 'color', 'primary', 700);
+    background-color: themed($theme-map, 'color', 'primary', 'contrast', 700);
+
+    .pry-select {
+      font-size: 12px;
+    }
+
+    &:has(input:focus) {
+      outline: 2px solid themed($theme-map, 'color', 'accent', 600);
+      outline-offset: toRem(2);
+      border-color: themed($theme-map, 'color', 'accent', 600);
+    }
+
+    &:has(input:not(focus)) {
+      outline:none;
+      border-color: themed($theme-map, 'color', 'primary', 400);
+    }
+  }
+
+  &__label {
+    background: transparent;
+    font-size: 12px;
+    font-weight: bold;
+    color: #424B5A; // color for label taken from figma
+  }
+
+  &__input {
+    border: none transparent;
+    font-size: 12px;
+  }
+
+  // colors that make the clear button look like the ng-select clear button
   &__clear-wrapper {
     color: #999999;
 

package/styles-theme/components-theme/_m-tooltip.theme.scss

@@ -7,11 +7,11 @@
   $this: &;
 
   &__text {
-    @include typography-level(themed($theme-map, 'typography', 'body'));
+    @include typography-level(themed($theme-map, 'typography', 'tooltip'));
   }
 
   &__description {
-    @include typography-level(themed($theme-map, 'typography', 'label'));
+    @include typography-level(themed($theme-map, 'typography', 'tooltip'));
   }
 
   &--popup,

package/styles-theme/components-theme/_o-pry-dataset.theme.scss

@@ -8,5 +8,5 @@
 }
 
 .info-icon {
-  background-color: #ccc;
+  //background-color: #ccc;
 }

package/widgets/widget-aggregated-chart/component/widget-aggregated-chart.component.d.ts

@@ -82,6 +82,7 @@ export declare class WidgetAggregatedChartComponent extends DataWidgetComponent
     openSettings(): void;
     openData(): void;
     private getTitle;
+    getChartConfig(): import("vega-lite").Config<import("vega").SignalRef>;
     changeChartTitle($event: string): void;
     changeType($event: GraphType): void;
     changeDonutSize($event: number): void;

package/widgets/widget-aggregated-chart/style/_o-widget-chart.scss

@@ -41,3 +41,8 @@
     }
   }
 }
+
+#vg-tooltip-element.vg-tooltip.custom-theme {
+  font-size: 12px;
+  font-family: 'Ubuntu', 'sans-serif';
+}

package/widgets/widget-map/utils/widget-map.utils.d.ts

@@ -1,20 +1,26 @@
-import { Attribute, Class, Field, Item, MapWidgetLayerOptions, Relation, ResultSet } from '@provoly/dashboard';
+import { Attribute, AttributeSimpleValue, Class, Field, Item, MapWidgetLayerOptions, Relation, ResultSet } from '@provoly/dashboard';
 import { Feature, Map } from 'ol';
 import { Circle, LineString, Point } from 'ol/geom';
 import { Style } from 'ol/style';
-export declare const populateLocationAttribute: (layer: MapWidgetLayerOptions, resultSet: ResultSet, classesNotFiltered: Class[], fields: Field[]) => void;
-export declare const populateIntensityAttribute: (layer: MapWidgetLayerOptions, resultSet: ResultSet, classesNotFiltered: Class[], fields: Field[]) => void;
-export declare const getFeatureFromItem: (item: Item, type: string, locationAttribute: Attribute, iconStyle?: Style, selectedIconStyle?: Style) => Feature<import("ol/geom/Geometry").default>;
-export declare const getCircleFeatureFromItem: (item: Item, locationAttribute: Attribute, radius: number, iconStyle: Style, selectedIconStyle: Style) => Feature<Circle>;
-export declare const getLinkFeature: (relation: Relation, featureSource: Feature<Point>, featureDestination: Feature<Point>) => Feature<LineString>;
-export declare const getMapAsPng: (map: Map) => Promise<string>;
-export declare const exportMapAsImage: (map: Map, filename: string) => void;
-export declare const geometryForLayer: (layer: MapWidgetLayerOptions) => string;
-export declare const assignLayersOrder: (_layers: MapWidgetLayerOptions[]) => MapWidgetLayerOptions[];
-export declare const DEFAULT_HEATMAP_RADIUS = 25;
-export declare const DEFAULT_RADIUS_INTENSITY_FACTOR = 10000;
-export declare const DEFAULT_ZOOM_MIN = 3;
-export declare const DEFAULT_ZOOM_START = 10;
-export declare const DEFAULT_ZOOM_MAX = 18;
-export declare const DEFAULT_MAP_CENTER: number[];
-export declare const BACKGROUND_ORDER = 9999;
+import { ProjectionLike } from 'ol/proj';
+import Geometry from 'ol/geom/Geometry';
+export declare class WidgetMapUtils {
+    static populateLocationAttribute(layer: MapWidgetLayerOptions, resultSet: ResultSet, classesNotFiltered: Class[], fields: Field[]): void;
+    static populateIntensityAttribute(layer: MapWidgetLayerOptions, resultSet: ResultSet, classesNotFiltered: Class[], fields: Field[]): void;
+    static getFeatureFromItem(projection: ProjectionLike, item: Item, type: string, locationAttribute: Attribute, iconStyle?: Style, selectedIconStyle?: Style): Feature<Geometry>;
+    static getCircleFeatureFromItem(projection: ProjectionLike, item: Item, locationAttribute: Attribute, radius: number, iconStyle: Style, selectedIconStyle: Style): Feature<Circle>;
+    static getLinkFeature(relation: Relation, featureSource: Feature<Point>, featureDestination: Feature<Point>): Feature<LineString>;
+    static getMapAsPng(map: Map): Promise<string>;
+    static exportMapAsImage(map: Map, filename: string): void;
+    static geometryForLayer(layer: MapWidgetLayerOptions): string;
+    static assignLayersOrder(_layers: MapWidgetLayerOptions[]): MapWidgetLayerOptions[];
+    static readGeometry<T extends 'point' | 'line' | 'multi-line' | 'polygon' | 'multi-polygon'>(projection: ProjectionLike, item: Item, type: T, attribute: Attribute | undefined): Geometry | null | undefined;
+    static extractGeometries(value: AttributeSimpleValue, points: any[], type: 'point' | 'line' | 'polygon'): void;
+    static DEFAULT_HEATMAP_RADIUS: number;
+    static DEFAULT_RADIUS_INTENSITY_FACTOR: number;
+    static DEFAULT_ZOOM_MIN: number;
+    static DEFAULT_ZOOM_START: number;
+    static DEFAULT_ZOOM_MAX: number;
+    static DEFAULT_MAP_CENTER: number[];
+    static BACKGROUND_ORDER: number;
+}

package/widgets/widget-table/style/_o-widget-table.scss

@@ -6,6 +6,7 @@
 .o-widget--table {
   display: flex;
   flex-direction: column;
+  font-size: toRem(12);
 
   .no-result {
     display: flex;
@@ -60,5 +61,19 @@
         opacity: 1;
       }
     }
+
+    thead tr, thead tr th {
+      height: toRem(30);
+      white-space: nowrap;
+    }
+
+    td, th {
+      margin: toRem(5);
+      padding: toRem(4.5);
+    }
+
+    .checkbox-wrapper {
+      height: auto;
+    }
   }
 }