@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

package/styles/components/fs_gradient_field.scss

@@ -1,16 +1,16 @@
+.fs-gradient-field-select > .v-input__control > .v-field {
+  display: flex;
 
-.fs-gradient-select-field .v-select__selection {
-  width: 100%;
-
-  
-}
+  & > .v-field__prepend-inner {
+    flex: 1;
+  }
 
-.fs-gradient-field-preview {
-  padding: 13px 20px;
-  > span {
-    height: 12px;
-    background: var(--fs-gradient-field-background) !important;
-    width: 100%;
+  & > .v-field__field {
+    flex: 0;
   }
 }
 
+.fs-gradient-field-preview {
+  background: var(--fs-gradient-field-background) !important;
+  min-width: 100%;
+}

package/styles/components/fs_magic_config_field.scss

@@ -1,5 +1,5 @@
-.fs-row > .fs-col:has(.v-switch) {
-    margin: 0 0 8px 0;
+.fs-magic-config-field > .fs-col:has(.v-switch) {
+    margin: 0 0 6px 0;
     align-self: end;
 }
 

package/styles/components/fs_map.scss

@@ -5,53 +5,54 @@
 
   .fs-leaflet-container {
     width: 100%;
-    height: var(--fs-map-leaflet-container-height);
+    height: 100%;
     filter: grayscale(var(--fs-map-container-grayscale));
   }
 
-  .fs-map-overlay-edit-button {
+  .fs-map-overlay-mobile {
     position: absolute;
-    top: 0;
+    bottom: 0;
+    left: 0;
     right: 0;
-    z-index: 960;
-    margin: 8px;
+    width: 100%;
+    margin: 0;
+    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  .fs-map-overlay-right-top {
+  .fs-map-overlay-desktop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 12px;
+    max-height: calc(100% - 24px);
+  }
+
+  .fs-map-layer-button {
     position: absolute;
     top: 0;
     right: 0;
-    margin: 4px 8px;
+    margin: 12px;
   }
 
-  .fs-map-overlay-right-bottom {
+  .fs-map-control-buttons {
     position: absolute;
     bottom: 0;
     right: 0;
-    z-index: 1000;
-    margin: 4px 8px;
-    width: calc(100% - 16px);
-
+    margin: 12px;
+    margin-bottom: calc(12px + var(--fs-map-control-buttons-margin-bottom));
 
-    .fs-map-zoom-overlay {
-      position: absolute;
-      bottom: 100%;
-      right: 0;
-      z-index: 1001;
-      margin-bottom: calc(var(--fs-map-leaflet-bottom-overlay-margin) + 8px);
+    .fs-map-zoom-plus-button > * {
+      border-bottom-left-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
 
-      button.fs-map-zoom-plus > * {
-        border-bottom-left-radius: 0 !important;
-        border-bottom-right-radius: 0 !important;
-      }
+      border-bottom: 0px !important;
+    }
 
-      button.fs-map-zoom-minus > * {
-        margin-top: 1px;
-        border-top-left-radius: 0 !important;
-        border-top-right-radius: 0 !important;
+    .fs-map-zoom-minus-button > * {
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
 
-        border-top: solid 1px var(--fs-card-border-color) !important;
-      }
+      border-top: 0px !important;
     }
   }
 
@@ -76,6 +77,11 @@
     }
   }
 
+  .fs-map-point-pin {
+    background-color: var(--fs-map-point-pin-color);
+    border-radius: 100%;
+  }
+
   .fs-map-location > div {
     display: flex;
     height: 100%;
@@ -105,11 +111,11 @@
 
     @keyframes fs-map-shadow-location {
       0% {
-        box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
+        box-shadow: 0 0 0px 0px var(--fs-map-location-pin-color-alpha);
       }
 
       50% {
-        box-shadow: 0 0 0px 7px var(--fs-map-mylocation-pin-color-alpha);
+        box-shadow: 0 0 0px 7px var(--fs-map-location-pin-color-alpha);
       }
 
       100% {

package/styles/components/fs_option_group.scss

@@ -1,8 +1,18 @@
 .fs-option-group {
-    border-radius: var(--fs-option-group-border-radius) !important;
-    border: var(--fs-option-group-border-size) solid !important;
-    background-color: var(--fs-option-group-background-color) !important;
-    width: fit-content;
+  border-radius: var(--fs-option-group-border-radius) !important;
+  border: var(--fs-option-group-border-size) solid !important;
+  background-color: var(--fs-option-group-background-color) !important;
+  border-color: var(--fs-option-group-border-color) !important;
+  width: fit-content;
+}
 
-    border-color: var(--fs-option-group-border-color) !important;
+.fs-option-group-full-width {
+  border-radius: var(--fs-option-group-border-radius) !important;
+  border: var(--fs-option-group-border-size) solid !important;
+  background-color: var(--fs-option-group-background-color) !important;
+  border-color: var(--fs-option-group-border-color) !important;
+
+  & > * {
+    width: 100% !important;
+  }
 }

package/styles/components/fs_radio.scss

@@ -11,4 +11,15 @@
 
 .fs-radio-description {
     color: var(--fs-radio-color) !important;
+}
+
+.fs-radio-label .v-input__control {
+    @include web {
+        height: 40px !important;
+    }
+
+    @include mobile {            
+        height: 36px !important;
+    }
+    grid-area: 1 / 2 / 3 / 3 !important;
 }

package/styles/components/fs_rich_text_field.scss

@@ -25,7 +25,9 @@
     &:focus-within {
         border-color: var(--fs-rich-text-field-active-border-color) !important;
     }
+}
 
+.fs-rich-text-field-readonly {
     @include web {
         padding: 10px 12px !important;
     }
@@ -33,7 +35,6 @@
     @include mobile {
         padding: 6px 16px !important;
     }
-
 }
 
 .fs-rich-text-field-undo {

package/styles/components/fs_search_field.scss

@@ -0,0 +1,3 @@
+.fs-search-field {
+  max-width: 500px;
+}

package/styles/components/fs_select_date_settings.scss

@@ -0,0 +1,3 @@
+.fs-select-field.fs-select-date-setting {
+    min-width: 160px;
+}

package/styles/components/fs_slide_group.scss

@@ -1,5 +1,10 @@
 .fs-slide-group {
+    height: var(--fs-group-height);
+    width: var(--fs-group-width);
+    max-width: 100%;
+
     & > .v-slide-group__container > .v-slide-group__content {
+        margin: 0 2px 1px 0 !important;
         padding: var(--fs-group-padding);
         gap: var(--fs-group-gap);
     }

package/styles/components/fs_span.scss

@@ -1,6 +1,7 @@
 .fs-span {
-    padding-inline-end: 2px;
+    // padding-inline-end: 2px;
     max-width: 100%;
+    text-align: left;
 }
 
 .fs-span-line-clamp {

package/styles/components/fs_switch.scss

@@ -31,6 +31,7 @@
 .fs-switch-label {
     cursor: var(--fs-switch-cursor) !important;
     color: var(--fs-switch-color) !important;
+    padding-top: 2px;
     user-select: none;
 }
 

package/styles/components/fs_tabs.scss

@@ -4,10 +4,14 @@
 
     @include web {
         height: 48px !important;
+        max-height: 48px;
+        min-height: 48px;
     }
 
     @include mobile {
         height: 40px !important;
+        max-height: 40px;
+        min-height: 40px;
     }
 }
 
@@ -30,10 +34,14 @@
 
     @include web {
         height: 48px !important;
+        max-height: 48px;
+        min-height: 48px;
     }
 
     @include mobile {
         height: 40px !important;
+        max-height: 40px;
+        min-height: 40px;
     }
 }
 
@@ -54,6 +62,7 @@
     color: var(--fs-tab-tag-color);
     display: flex;
     align-items: center;
+    justify-content: center;
 
     @include web {
         min-width: 28px;

package/styles/components/fs_text_area.scss

@@ -25,7 +25,9 @@
             padding: 0;
         }
 
-        height: var(--fs-text-area-height);
+        & > .v-field__clearable {
+            align-items: flex-start;
+        }
         
         @include web {
             padding: 11px 16px !important;
@@ -34,6 +36,10 @@
         @include mobile {
             padding: 10px 16px !important;
         }
+    } 
+
+    & > .v-input__append  {
+        padding-top: 0px;
     }
 }
 
@@ -62,6 +68,10 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
+
+        & > .v-field__clearable {
+            align-items: flex-start;
+        }
         
         @include web {
             padding: 11px 16px !important;
@@ -71,4 +81,8 @@
             padding: 10px 16px !important;
         }
     }
+
+    & > .v-input__append  {
+        padding-top: 0px;
+    }
 }

package/styles/components/fs_tile.scss

@@ -1,16 +1,28 @@
 .fs-tile {
     position: relative;
-    border-bottom-left-radius: 0px !important;
-    border-bottom-right-radius: 0px !important;
 }
 
 .fs-tile-bottom {
     position: absolute;
-    bottom: -1px;
-    left: -1px;
-    width: calc(100% + 2px);
+    bottom: 0px;
+    left: 0;
+    width: 100%;
     height: 3px;
-    background: var(--fs-tile-border-color);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    background: var(--fs-tile-bottom-border-color);
+}
+
+
+.fs-tile-left {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 3px;
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+    background: var(--fs-tile-left-border-color);
 }
 
 .fs-tile-checkbox {
@@ -30,4 +42,8 @@
         width: 32px;
         height: 32px;
     }
+}
+
+.fs-location-tile-text-container {
+    min-width: 0;
 }

package/styles/components/fs_window.scss

@@ -1,3 +1,8 @@
 .fs-window {
     width: var(--fs-window-width);
+    height: var(--fs-window-height);
+}
+.fs-window-item {
+    height: 100%;
+    min-height: 0;
 }

package/styles/components/fs_wrap_group.scss

@@ -1,4 +1,8 @@
 .fs-wrap-group {
+    height: var(--fs-group-height);
+    width: var(--fs-group-width);
+    max-width: 100%;
+
     & > .v-slide-group__container > .v-slide-group__content {
         padding: var(--fs-group-padding);
         gap: var(--fs-group-gap);

package/styles/components/index.scss

@@ -1,4 +1,9 @@
 @import "fs_accordion_panel.scss";
+@import "fs_agenda.scss";
+@import "fs_agenda_event.scss";
+@import "fs_agenda_hours_col.scss";
+@import "fs_agenda_hours_row.scss";
+@import "fs_agenda_time_line_marker.scss";
 @import "fs_autocomplete_field.scss";
 @import "fs_base_field.scss";
 @import "fs_breadcrumbs.scss";
@@ -38,7 +43,6 @@
 @import "fs_load_tile.scss";
 @import "fs_loader.scss";
 @import "fs_magic_config_field.scss";
-@import "fs_map_overlay.scss";
 @import "fs_map.scss";
 @import "fs_meta_field.scss";
 @import "fs_option_group.scss";
@@ -47,6 +51,7 @@
 @import "fs_radio.scss";
 @import "fs_rich_text_field.scss";
 @import "fs_row.scss";
+@import "fs_search_field.scss";
 @import "fs_select_field.scss";
 @import "fs_slide_group.scss";
 @import "fs_slider.scss";

package/styles/globals/overrides.scss

@@ -5,8 +5,8 @@
 
 // Otherwise a v-progress-circular has the size of its parent and can trigger the vertical scroll when spinning
 .v-progress-circular > svg {
-    height: fit-content;
-    width: fit-content;
+    height: fit-content !important;
+    width: fit-content !important;
 }
 
 // No default hover effect on switches and others, no limited opacity, no limited width...
@@ -40,13 +40,8 @@
         flex: 0 0 auto;
     }
 
-    &:not(.v-checkbox):not(.v-slider):not(.fs-small-input):not(.fs-number-field) {
-        min-width: 120px;
-        width: 100%;
-    }
-
-    &.fs-number-field {
-        min-width: 80px;
+    &:not(.v-checkbox):not(.v-slider):not(.fs-small-input) {
+        min-width: var(--fs-base-field-min-width);
         width: 100%;
     }
 
@@ -143,6 +138,24 @@
     display: none !important;
 }
 
+.v-text-field__suffix {
+    padding: 0 8px 0 0 !important;
+
+    @include web {
+        min-height: 38px !important;
+        height: 38px !important;
+    }
+
+    @include mobile {
+        min-height: 34px !important;
+        height: 34px !important;
+    }
+
+    & > .v-text-field__suffix__text {
+        @extend .text-body;
+    }
+}
+
 // Ellipsis on input of all fields
 input {
     text-overflow: ellipsis;
@@ -169,16 +182,6 @@ $nthOverlay: 25;
   }
 }
 
-/***** Applies to all slide groups (FSTabs, FSSlideGroup, FSWrapGroup) *****/
-.fs-slide-group {
-    max-width: 100%;
-    
-    // To avoid borders clipping
-    & > .v-slide-group__container > .v-slide-group__content {
-        margin: 0 2px 1px 0 !important;
-    }
-}
-
 // On touchscreen, hide arrows
 // Otherwise show small ones with base text color
 .v-slide-group__prev,

package/styles/globals/text_fonts.scss

@@ -14,9 +14,9 @@
     }
 
     @include mobile {
-        font-size: 29px !important;
+        font-size: 28px !important;
         line-height: 32px !important;
-        letter-spacing: -1.45px !important;
+        letter-spacing: -1.4px !important;
     }
 }
 
@@ -26,9 +26,9 @@
     font-weight: 600 !important;
 
     @include web {
-        font-size: 27px !important;
+        font-size: 26px !important;
         line-height: 32px !important;
-        letter-spacing: -0.81px !important;
+        letter-spacing: -0.78px !important;
     }
 
     @include mobile {
@@ -44,34 +44,16 @@
     font-weight: 600 !important;
 
     @include web {
-        font-size: 21px !important;
+        font-size: 20px !important;
         line-height: 24px !important;
-        letter-spacing: -0.63px !important;
+        letter-spacing: -0.6px !important;
     }
 
     @include mobile {
-        font-size: 17px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.51px !important;
-    }
-}
-
-.text-h4 {
-    font-family: 'Montserrat', sans-serif !important;
-    font-style: normal !important;
-    font-weight: 500 !important;
-
-    @include web {
         font-size: 16px !important;
         line-height: 20px !important;
         letter-spacing: -0.48px !important;
     }
-
-    @include mobile {
-        font-size: 14px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.41px !important;
-    }
 }
 
 .text-body {
@@ -82,14 +64,14 @@
 
     @include web {
         font-size: 14px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.48px !important;
+        line-height: 20px !important;
+        letter-spacing: -0.42px !important;
     }
 
     @include mobile {
         font-size: 12px !important;
-        line-height: 14px !important;
-        letter-spacing: -0.39px !important;
+        line-height: 16px !important;
+        letter-spacing: -0.36px !important;
     }
 }
 
@@ -101,52 +83,32 @@
 
     @include web {
         font-size: 14px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.48px !important;
+        line-height: 20px !important;
+        letter-spacing: -0.42px !important;
     }
 
     @include mobile {
-        font-size: 12px !important;
-        line-height: 14px !important;
-        letter-spacing: -0.39px !important;
-    }
-}
-
-.text-overline {
-    font-family: 'Montserrat', sans-serif !important;
-    font-style: normal !important;
-    text-transform: none !important;
-
-    @include web {
-        font-weight: 600 !important;
         font-size: 12px !important;
         line-height: 16px !important;
-        letter-spacing: 0.08px !important;
-    }
-
-    @include mobile {
-        font-weight: 500 !important;
-        font-size: 10px !important;
-        line-height: 16px !important;
-        letter-spacing: 0.19px !important;
+        letter-spacing: -0.36px !important;
     }
 }
 
-.text-underline {
+.text-overline {
     font-family: 'Montserrat', sans-serif !important;
     font-style: normal !important;
-    font-weight: 500 !important;
     text-transform: none !important;
+    font-weight: 600 !important;
 
     @include web {
         font-size: 12px !important;
         line-height: 16px !important;
-        letter-spacing: 0.08px !important;
+        letter-spacing: 0 !important;
     }
 
     @include mobile {
         font-size: 10px !important;
         line-height: 16px !important;
-        letter-spacing: 0.19px !important;
+        letter-spacing: 0 !important;
     }
 }

package/tools/alertsTools.ts

@@ -0,0 +1,54 @@
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models"
+
+const { $tr } = useTranslationsProvider();
+
+export const AlertTools = {
+  statusIcon(value: AlertStatus): string {
+    switch (value) {
+      case AlertStatus.Pending: return "mdi-timer-outline";
+      case AlertStatus.Untriggered: return "mdi-timer-off-outline";
+      case AlertStatus.Unresolved: return "mdi-alert-circle-outline";
+      case AlertStatus.Resolved: return "mdi-check-circle-outline";
+      case AlertStatus.Expired: return "mdi-clock-outline";
+      case AlertStatus.Triggered: return "mdi-alert-circle-outline";
+      case AlertStatus.Abandoned: return "mdi-cancel"
+      default: return "";
+    }
+  },
+  statusLabel(value: AlertStatus): string {
+    switch (value) {
+      case AlertStatus.Pending: return $tr("ui.alert.pending", "Pending");
+      case AlertStatus.Untriggered: return $tr("ui.alert.untriggered", "Untriggered");
+      case AlertStatus.Unresolved: return $tr("ui.alert.unresolved", "Unresolved");
+      case AlertStatus.Resolved: return $tr("ui.alert.resolved", "Resolved");
+      case AlertStatus.Expired: return $tr("ui.alert.expired", "Expired");
+      case AlertStatus.Triggered: return $tr("ui.alert.triggered", "Triggered");
+      case AlertStatus.Abandoned: return $tr("ui.alert.abandoned", "Abandoned");
+      default: return "";
+    }
+  },
+  criticityColor(value: Criticity): ColorEnum {
+    switch (value) {
+      case Criticity.Warning: return ColorEnum.Warning;
+      case Criticity.Error: return ColorEnum.Error;
+      case Criticity.Information: return ColorEnum.Primary;
+      default: return ColorEnum.Light;
+    }
+  },
+  criticityIcon(value: Criticity): string {
+    switch (value) {
+      case Criticity.Warning: return "mdi-alert-outline";
+      case Criticity.Error: return "mdi-alert-circle-outline";
+      default: return "mdi-information-outline";
+    }
+  },
+  criticityLabel(value: Criticity): string {
+    switch (value) {
+      case Criticity.Warning: return $tr("ui.alert.warning", "Warning");
+      case Criticity.Error: return $tr("ui.alert.error", "Error");
+      default: return $tr("ui.alert.information", "Information");
+    }
+  }
+}