@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

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";
@@ -43,6 +47,7 @@
 @import "fs_option_group.scss";
 @import "fs_pagination.scss";
 @import "fs_password_field.scss";
+@import "fs_progress_bar.scss";
 @import "fs_radio.scss";
 @import "fs_rich_text_field.scss";
 @import "fs_row.scss";
@@ -53,13 +58,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,26 +129,24 @@
 .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;
     }
 }
 
-// Ellipsis on input of all fields
 input {
+    // Ellipsis on all fields
     text-overflow: ellipsis;
 }
 
+input, select, textarea {
+    // No zoom on focus for user of a certain version of Chrome, and who ask their mobile to zoom if font-size < 16px
+    touch-action: none;
+}
+
 // No up / down buttons in input field of type number
 input[type=number] { 
     -moz-appearance: textfield;
@@ -187,16 +168,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 +182,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;
     }
 }
 
@@ -227,9 +192,11 @@ $nthOverlay: 25;
 }
 
 // Change color on arrows when hovered
-.v-slide-group__prev:hover,
-.v-slide-group__next:hover {
-    color: var(--fs-group-hover-color);
+@include clickscreen {
+    .v-slide-group__prev:hover,
+    .v-slide-group__next:hover {
+        color: var(--fs-group-hover-color);
+    }
 }
 
 /***************************************************************************/

package/styles/globals/scrollbars.scss

@@ -47,9 +47,19 @@
 @include touchscreen {
   .fs-hide-x-scrollbar {
     overflow-x: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
   }
 
   .fs-hide-y-scrollbar {
     overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
   }
 }

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)}`;
+};