@dative-gpi/foundation-shared-components 1.0.26 → 1.0.28-remove-deprecated2

package/styles/components/fs_tabs.scss

@@ -2,13 +2,9 @@
     display: flex !important;
     width: 100% !important;
 
-    @include web {
-        height: 48px !important;
-    }
-
-    @include mobile {
-        height: 40px !important;
-    }
+    height: var(--fs-tab-height) !important;
+    max-height: var(--fs-tab-height);
+    min-height: var(--fs-tab-height);
 }
 
 .fs-tab {
@@ -19,6 +15,10 @@
     align-items: center !important;
     display: flex;
 
+    height: var(--fs-tab-height) !important;
+    max-height: var(--fs-tab-height);
+    min-height: var(--fs-tab-height);
+
     & .fs-tab-label {
         @extend .text-button;
     }
@@ -27,14 +27,6 @@
         border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
         color: var(--fs-group-hover-color) !important;
     }
-
-    @include web {
-        height: 48px !important;
-    }
-
-    @include mobile {
-        height: 40px !important;
-    }
 }
 
 .fs-tab-active {
@@ -54,14 +46,8 @@
     color: var(--fs-tab-tag-color);
     display: flex;
     align-items: center;
+    justify-content: center;
 
-    @include web {
-        min-width: 28px;
-        height: 28px;
-    }
-
-    @include mobile {
-        min-width: 24px;
-        height: 24px;
-    }
+    min-width: var(--fs-tab-tag-size);
+    height: var(--fs-tab-tag-size);
 }

package/styles/components/fs_tag.scss

@@ -3,14 +3,6 @@
     border-radius: 2px !important;
     background-color: var(--fs-tag-background-color) !important;
     color: var(--fs-tag-color) !important;
-
-    @include web {
-        height: 28px !important;
-    }
-
-    @include mobile {
-        height: 24px !important;
-    }
 }
 
 .fs-tag-button {
@@ -31,15 +23,7 @@
         color: var(--fs-tag-active-color) !important;
     }
 
-    @include web {
-        min-width: 20px !important;
-        width: 20px !important;
-        height: 20px !important;
-    }
-
-    @include mobile {
-        min-width: 20px !important;
-        width: 20px !important;
-        height: 16px !important;
-    }
+    min-width: 20px !important;
+    width: 20px !important;
+    height: 20px !important;
 }

package/styles/components/fs_text_area.scss

@@ -1,7 +1,7 @@
 .fs-text-area:not(.fs-text-area-auto-grow) {
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-area-border-color) !important;
-        height: var(--fs-text-area-height);
+        padding: var(--fs-text-area-padding) !important;
 
         &--error {
             border-color: var(--fs-text-area-error-border-color) !important;
@@ -25,21 +25,17 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
-        
-        @include web {
-            padding: 11px 16px !important;
-        }
-    
-        @include mobile {
-            padding: 10px 16px !important;
-        }
+    } 
+
+    & > .v-input__append  {
+        padding-top: 0px;
     }
 }
 
 .fs-text-area-auto-grow {
     & > .v-input__control > .v-field {
         border: 1px solid var(--fs-text-area-border-color) !important;
-        padding: 0 !important;
+        padding: var(--fs-text-area-padding) !important;
 
         &--error {
             border-color: var(--fs-text-area-error-border-color) !important;
@@ -61,13 +57,13 @@
             color: var(--fs-text-area-color);
             padding: 0;
         }
-        
-        @include web {
-            padding: 11px 16px !important;
-        }
-    
-        @include mobile {
-            padding: 10px 16px !important;
+
+        & > .v-field__clearable {
+            align-items: flex-start;
         }
     }
+
+    & > .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 {
@@ -20,14 +32,8 @@
     justify-content: center;
     top: 1px;
     right: 1px;
+}
 
-    @include web {
-        width: 40px;
-        height: 40px;
-    }
-
-    @include mobile {
-        width: 32px;
-        height: 32px;
-    }
+.fs-location-tile-text-container {
+    min-width: 0;
 }

package/styles/components/fs_window.scss

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

package/styles/components/fs_wrap_group.scss

@@ -1,5 +1,12 @@
 .fs-wrap-group {
+    height: var(--fs-group-height);
+    width: var(--fs-group-width);
+    max-width: 100%;
+    margin: 0 -1px 0 0;
+
     & > .v-slide-group__container > .v-slide-group__content {
+        margin: 0 1px 0 0;
+        
         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";
@@ -28,7 +33,6 @@
 @import "fs_grid.scss";
 @import "fs_header_button.scss";
 @import "fs_hidden_button.scss";
-@import "fs_icon_field.scss";
 @import "fs_icon.scss";
 @import "fs_image.scss";
 @import "fs_image_card.scss";
@@ -38,7 +42,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";
@@ -54,13 +57,10 @@
 @import "fs_switch.scss";
 @import "fs_tag.scss";
 @import "fs_tabs.scss";
-@import "fs_tag_field.scss";
 @import "fs_text_area.scss";
 @import "fs_text_field.scss";
 @import "fs_text.scss";
 @import "fs_tile.scss";
-@import "fs_time_field.scss";
-@import "fs_timeslot_field.scss";
 @import "fs_tooltip.scss";
 @import "fs_translate_field.scss";
 @import "fs_tree_view_field.scss";

package/styles/globals/index.scss

@@ -1,9 +1,5 @@
 // Warning: Imports are loaded in order. If you need to use a variable / property / mixin, import it after the file that defines it
-@import 'breakpoints.scss';
 @import 'text_fonts.scss';
 @import 'touchscreen.scss';
 @import 'scrollbars.scss';
-@import 'overrides.scss';
-
-// Find a better way to fix this
-@import 'fixes.scss';
+@import 'overrides.scss';

package/styles/globals/overrides.scss

@@ -40,26 +40,11 @@
         flex: 0 0 auto;
     }
 
-    &:not(.v-checkbox):not(.v-slider):not(.fs-small-input):not(.fs-number-field) {
-        min-width: 120px;
+    &:not(.v-checkbox):not(.v-slider):not(.fs-small-input) {
+        min-width: var(--fs-base-field-min-width);
         width: 100%;
     }
 
-    &.fs-number-field {
-        min-width: 80px;
-        width: 100%;
-    }
-
-    &.v-checkbox {
-        @include web {
-            min-width: 24px;
-        }
-
-        @include mobile {
-            min-width: 20px;
-        }
-    }
-
     &:has(.v-input__control):has(.v-input__append) > .v-input__append {
         margin-inline-start: 8px !important;
     }
@@ -95,29 +80,27 @@
         }
     }
 
-    &:not(.fs-text-area) > .v-input__control > .v-field {
-        padding: 0 12px 0 16px !important;
+    &:not(.fs-text-area) > .v-input__control > .v-field > .v-field__field {
+        min-height: var(--fs-base-field-input-height) !important;
+        height: var(--fs-base-field-input-height) !important;
 
-        & > .v-field__field > .v-field__input {
-            @extend .text-body;
+        & > .v-field__input {
+            min-height: var(--fs-base-field-input-height) !important;
+            height: var(--fs-base-field-input-height) !important;
             
             padding-bottom: 0px !important;
             padding-inline: 0px !important;
             padding-top: 0px !important;
             flex-wrap: nowrap;
             overflow: hidden;
-        
-            @include web {
-                min-height: 38px !important;
-                height: 38px !important;
-            }
-        
-            @include mobile {
-                min-height: 34px !important;
-                height: 34px !important;
-            }
+
+            @extend .text-body;
         }
     }
+
+    &:not(.fs-text-area):not(.fs-clock-field) > .v-input__control > .v-field {
+        padding: 0 12px 0 16px !important;
+    }
 }
 
 // If there is a prepend, it has a padding on the right and an opacity of 100%
@@ -146,15 +129,8 @@
 .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;
-    }
+    min-height: var(--fs-base-field-input-height) !important;
+    height: var(--fs-base-field-input-height) !important;
 
     & > .v-text-field__suffix__text {
         @extend .text-body;
@@ -187,16 +163,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,
@@ -211,13 +177,7 @@ $nthOverlay: 25;
     }
     
     & > .v-icon {
-        @include web {
-            font-size: 24px !important;
-        }
-    
-        @include mobile {
-            font-size: 20px !important;
-        }
+        font-size: var(--fs-group-icon-size) !important;
     }
 }
 

package/styles/globals/text_fonts.scss

@@ -7,17 +7,9 @@
     font-style: normal !important;
     font-weight: 700 !important;
 
-    @include web {
-        font-size: 36px !important;
-        line-height: 40px !important;
-        letter-spacing: -0.72px !important;
-    }
-
-    @include mobile {
-        font-size: 28px !important;
-        line-height: 32px !important;
-        letter-spacing: -1.4px !important;
-    }
+    font-size: var(--fs-font-h1-font-size) !important;
+    line-height: var(--fs-font-h1-line-height) !important;
+    letter-spacing: var(--fs-font-h1-letter-spacing) !important;
 }
 
 .text-h2 {
@@ -25,17 +17,9 @@
     font-style: normal !important;
     font-weight: 600 !important;
 
-    @include web {
-        font-size: 26px !important;
-        line-height: 32px !important;
-        letter-spacing: -0.78px !important;
-    }
-
-    @include mobile {
-        font-size: 22px !important;
-        line-height: 24px !important;
-        letter-spacing: -0.88px !important;
-    }
+    font-size: var(--fs-font-h2-font-size) !important;
+    line-height: var(--fs-font-h2-line-height) !important;
+    letter-spacing: var(--fs-font-h2-letter-spacing) !important;
 }
 
 .text-h3 {
@@ -43,17 +27,9 @@
     font-style: normal !important;
     font-weight: 600 !important;
 
-    @include web {
-        font-size: 20px !important;
-        line-height: 24px !important;
-        letter-spacing: -0.6px !important;
-    }
-
-    @include mobile {
-        font-size: 16px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.48px !important;
-    }
+    font-size: var(--fs-font-h3-font-size) !important;
+    line-height: var(--fs-font-h3-line-height) !important;
+    letter-spacing: var(--fs-font-h3-letter-spacing) !important;
 }
 
 .text-body {
@@ -62,17 +38,9 @@
     font-weight: 500 !important;
     text-transform: none !important;
 
-    @include web {
-        font-size: 14px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.42px !important;
-    }
-
-    @include mobile {
-        font-size: 12px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.36px !important;
-    }
+    font-size: var(--fs-font-body-font-size) !important;
+    line-height: var(--fs-font-body-line-height) !important;
+    letter-spacing: var(--fs-font-body-letter-spacing) !important;
 }
 
 .text-button {
@@ -81,17 +49,9 @@
     font-weight: 700 !important;
     text-transform: none !important;
 
-    @include web {
-        font-size: 14px !important;
-        line-height: 20px !important;
-        letter-spacing: -0.42px !important;
-    }
-
-    @include mobile {
-        font-size: 12px !important;
-        line-height: 16px !important;
-        letter-spacing: -0.36px !important;
-    }
+    font-size: var(--fs-font-button-font-size) !important;
+    line-height: var(--fs-font-button-line-height) !important;
+    letter-spacing: var(--fs-font-button-letter-spacing) !important;
 }
 
 .text-overline {
@@ -100,15 +60,7 @@
     text-transform: none !important;
     font-weight: 600 !important;
 
-    @include web {
-        font-size: 12px !important;
-        line-height: 16px !important;
-        letter-spacing: 0 !important;
-    }
-
-    @include mobile {
-        font-size: 10px !important;
-        line-height: 16px !important;
-        letter-spacing: 0 !important;
-    }
+    font-size: var(--fs-font-overline-font-size) !important;
+    line-height: var(--fs-font-overline-line-height) !important;
+    letter-spacing: var(--fs-font-overline-letter-spacing) !important;
 }

package/tools/alertsTools.ts

@@ -0,0 +1,69 @@
+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"
+import { getTimeBestString } from "../utils";
+
+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-status.pending", "Pending");
+      case AlertStatus.Untriggered: return $tr("ui.alert-status.untriggered", "Untriggered");
+      case AlertStatus.Unresolved: return $tr("ui.alert-status.unresolved", "Unresolved");
+      case AlertStatus.Resolved: return $tr("ui.alert-status.resolved", "Resolved");
+      case AlertStatus.Expired: return $tr("ui.alert-status.expired", "Expired");
+      case AlertStatus.Triggered: return $tr("ui.alert-status.triggered", "Triggered");
+      case AlertStatus.Abandoned: return $tr("ui.alert-status.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.common.warning", "Warning");
+      case Criticity.Error: return $tr("ui.common.error", "Error");
+      case Criticity.Information: return $tr("ui.common.information", "Information")
+      default: return $tr("ui.common.none", "None");
+    }
+  }
+}
+
+export const prettyDuration = (n: number) => {
+  const day = Math.floor(n / 24 / 60 / 60);
+  const hours = Math.floor((n - day * 24 * 60 * 60) / 3600);
+  const minutes = Math.floor((n - day * 24 * 60 * 60 - hours * 60 * 60) / 60);
+  const seconds = Math.floor(n - day * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60);
+
+  return day > 0 ?
+    `${getTimeBestString(day * 24 * 60 * 60)} ${getTimeBestString(hours * 60 * 60)} ${getTimeBestString(minutes * 60)} ${getTimeBestString(seconds)}`
+    : hours > 0
+      ? `${getTimeBestString(hours * 60 * 60)} ${getTimeBestString(minutes * 60)} ${getTimeBestString(seconds)}`
+      : `${getTimeBestString(minutes * 60)} ${getTimeBestString(seconds)}`;
+};