build: upgrade to angular 12

angular.json

@@ -73,10 +73,17 @@
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
+          "defaultConfiguration": "development",
           "options": {
-            "browserTarget": "SensLog:build"
+            "browserTarget": "SensLog:build",
+            "proxyConfig": "proxy-config.json"
           },
           "configurations": {
+            "development": {
+              "optimization": false,
+              "vendorChunk": true,
+              "sourceMap": true
+            },
             "production": {
               "browserTarget": "SensLog:build:production"
             }

package.json

@@ -12,43 +12,43 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~11.2.4",
-    "@angular/common": "~11.2.4",
-    "@angular/compiler": "~11.2.4",
-    "@angular/core": "~11.2.4",
-    "@angular/forms": "~11.2.4",
-    "@angular/platform-browser": "~11.2.4",
-    "@angular/platform-browser-dynamic": "~11.2.4",
-    "@angular/router": "~11.2.4",
-    "@fortawesome/angular-fontawesome": "^0.8.2",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@angular/animations": "~12.2.9",
+    "@angular/common": "~12.2.9",
+    "@angular/compiler": "~12.2.9",
+    "@angular/core": "~12.2.9",
+    "@angular/forms": "~12.2.9",
+    "@angular/platform-browser": "~12.2.9",
+    "@angular/platform-browser-dynamic": "~12.2.9",
+    "@angular/router": "~12.2.9",
+    "@fortawesome/angular-fontawesome": "^0.9.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "bootstrap": "^4.6.0",
     "hslayers-ng": "^6.1.0",
     "jquery": "^3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
-    "ngx-cookie-service": "^11.0.2",
+    "ngx-cookie-service": "^12.0.3",
     "ol": "^6.8.1",
     "primeicons": "^4.1.0",
-    "primeng": "^11.3.1",
+    "primeng": "^12.2.0",
     "rxjs": "~6.6.0",
-    "tslib": "^2.0.0",
+    "tslib": "2.0.0",
     "vega": "^5.20.2",
     "vega-tooltip": "^0.25.1",
     "zone.js": "~0.11.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1102.3",
-    "@angular/cli": "~11.2.3",
-    "@angular/compiler-cli": "~11.2.4",
+    "@angular-devkit/build-angular": "~12.2.9",
+    "@angular/cli": "~12.2.9",
+    "@angular/compiler-cli": "~12.2.9",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.1.0",
+    "karma": "~6.3.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~4.0.0",
@@ -56,6 +56,6 @@
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
-    "typescript": "~4.1.5"
+    "typescript": "~4.3.5"
   }
-}
+}

src/assets/scss/_dashboard.scss

@@ -14,6 +14,7 @@
   }
 }
 
+
 .dashboard {
   padding: $grid-gutter-width 0;
 
@@ -50,10 +51,11 @@
   .p-accordion {
     .p-accordion-header {
       .p-accordion-header-link {
-        padding-top: $grid-gutter-width / 2;
-        padding-bottom: $grid-gutter-width / 2;
+        padding-top: math.div($grid-gutter-width, 2);
+        padding-bottom: math.div($grid-gutter-width, 2);
         color: #0B1226;
         background: #F2F2F2;
+        border: none;
       }
 
       &:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
@@ -61,15 +63,15 @@
         background: #BCBCBC;
       }
 
-      &:not(.p-disabled).p-highlight  {
+      &:not(.p-disabled).p-highlight {
         .p-accordion-header-link {
           color: #0B1226;
           background: #BCBCBC;
         }
       }
 
-      .p-splitbutton-defaultbutton{
-        margin-left: $grid-gutter-width  / 2;
+      .p-splitbutton-defaultbutton {
+        margin-left: math.div($grid-gutter-width, 2);
       }
     }
 
@@ -77,6 +79,7 @@
       padding: 0;
       color: #0B1226;
       background: #F2F2F2;
+      border: none;
 
       .ng-star-inserted {
         &:nth-child(2n) .row {
@@ -85,7 +88,7 @@
 
         .row {
           margin: 0;
-          padding: 5px 0;
+          padding: 5px 0 5px 50px;
 
           @include hover-focus() {
             cursor: pointer;
@@ -101,6 +104,34 @@
       }
     }
   }
+
+  .p-tabview {
+    .p-tabview-title {
+      font-size: 16pt;
+    }
+
+    .p-tabview-nav li .p-tabview-nav-link {
+      border-radius: 0;
+      border: none;
+    }
+
+    .p-tabview-nav-link {
+      background: #FFFFFF !important;
+      color: #0B1226 !important;
+    }
+
+    .p-highlight {
+      .p-tabview-nav-link {
+        color: #0B1226 !important;
+        background: #BCBCBC !important;
+      }
+    }
+
+    .p-tabview-panels {
+      background: #FFFFFF !important;
+      padding: 0;
+    }
+  }
 }
 
 .dashboard-sensor-heading-wrapper {
@@ -121,7 +152,7 @@
   display: inline-flex;
   align-items: center;
   vertical-align: bottom;
-  margin: 0 $grid-gutter-width / 2;
+  margin: 0 math.div($grid-gutter-width, 2);
   width: 2px;
   height: 100%;
   background: $secondary;

src/assets/scss/_graph.scss

@@ -145,8 +145,8 @@
 }
 
 .graph-view-wrapper {
-  padding-left: $grid-gutter-width / 2;
-  padding-right: $grid-gutter-width / 2;
+  padding-left: math.div($grid-gutter-width, 2);
+  padding-right: math.div($grid-gutter-width, 2);
 
   @include media-breakpoint-down(lg) {
     overflow-x: scroll;

src/assets/scss/_login.scss

@@ -85,7 +85,7 @@
 
   p {
     margin-bottom: 0;
-    padding: ($grid-gutter-width / 2) 0;
+    padding: math.div($grid-gutter-width, 2) 0;
   }
 
   a {

src/assets/scss/_navbar.scss

@@ -99,7 +99,7 @@
 .navbar-toggler {
   position: absolute;
   top: 50%;
-  right: $grid-gutter-width / 2;
+  right: math.div($grid-gutter-width, 2);
   width: 60px;
   height: 45px;
   z-index: 1;
@@ -120,9 +120,11 @@
     &:nth-child(1) {
       top: 0;
     }
+
     &:nth-child(2) {
       top: 18px;
     }
+
     &:nth-child(3) {
       top: 36px;
     }
@@ -154,7 +156,7 @@
 
   @include media-breakpoint-down(md) {
     position: absolute;
-    left: -($grid-gutter-width / 2);
+    left: -(math.div($grid-gutter-width, 2));
     top: 90px;
     width: calc(100% + 20px);
     background: $primary;

src/assets/scss/_popup-form.scss

@@ -3,6 +3,7 @@
     .p-dialog .p-dialog-footer .p-button {
       @extend .p-button-primary;
       @extend .dark;
+
       @include media-breakpoint-down(sm) {
         margin: 5px 10px;
       }
@@ -10,7 +11,7 @@
   }
 
   h3 {
-    margin-top: $grid-gutter-width / 2;
+    margin-top: math.div($grid-gutter-width, 2);
     text-align: center;
     font-size: 24px;
   }

src/assets/scss/_themes.scss

@@ -19,8 +19,8 @@ html,body{
     }
 
     @include media-breakpoint-down(xs) {
-      padding-right: $grid-gutter-width / 2;
-      padding-left: $grid-gutter-width / 2;
+      padding-right: math.div($grid-gutter-width, 2);
+      padding-left: math.div($grid-gutter-width, 2);
     }
   }
 

src/assets/scss/_variables.scss

@@ -1,10 +1,9 @@
-// Variables
-//
-// Variables should follow the `$component-state-property-size` formula for
-// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+/* Variables */
 
-// Color system
+/* Variables should follow the `$component-state-property-size` formula for
+   consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. */
 
+/* Color system */
 $white:    #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
@@ -89,17 +88,17 @@ $theme-colors: map-merge(
     $theme-colors
 );
 
-// Set a specific jump point for requesting color jumps
+/* Set a specific jump point for requesting color jumps */
 $theme-color-interval:      8% !default;
 
-// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+/* The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. */
 $yiq-contrasted-threshold:  150 !default;
 
-// Customize the light and dark text colors for use in our YIQ color contrast function.
+/* Customize the light and dark text colors for use in our YIQ color contrast function. */
 $yiq-text-dark:             $gray-900 !default;
 $yiq-text-light:            $white !default;
 
-// Characters which are escaped by the escape-svg function
+/* Characters which are escaped by the escape-svg function */
 $escaped-characters: (
     ("<", "%3c"),
     (">", "%3e"),
@@ -109,9 +108,9 @@ $escaped-characters: (
 ) !default;
 
 
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
+/* Options */
+
+/* Quickly modify global styling by enabling or disabling optional features. */
 
 $enable-caret:                                true !default;
 $enable-rounded:                              true !default;
@@ -128,11 +127,11 @@ $enable-validation-icons:                     true !default;
 $enable-deprecation-messages:                 true !default;
 
 
-// Spacing
-//
-// Control the default styling of most Bootstrap elements by modifying these
-// variables. Mostly focused on spacing.
-// You can add more entries to the $spacers map, should you need more variation.
+/* Spacing */
+
+/* Control the default styling of most Bootstrap elements by modifying these
+   variables. Mostly focused on spacing.
+   You can add more entries to the $spacers map, should you need more variation. */
 
 $spacer: 1rem !default;
 $spacers: () !default;
@@ -148,7 +147,7 @@ $spacers: map-merge(
     $spacers
 );
 
-// This variable affects the `.h-*` and `.w-*` classes.
+/* This variable affects the `.h-*` and `.w-*` classes. */
 $sizes: () !default;
 $sizes: map-merge(
     (
@@ -162,36 +161,36 @@ $sizes: map-merge(
 );
 
 
-// Body
-//
-// Settings for the `<body>` element.
+/* Body */
+
+/* Settings for the `<body>` element. */
 
 $body-bg:                   $white !default;
 $body-color:                $gray-900 !default;
 
 
-// Links
-//
-// Style anchor elements.
+/* Links */
+
+/* Style anchor elements. */
 
 $link-color:                              theme-color("primary") !default;
 $link-decoration:                         none !default;
 $link-hover-color:                        darken($link-color, 15%) !default;
 $link-hover-decoration:                   none !default;
-// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+/* Darken percentage for links with `.text-*` class (e.g. `.text-success`)*/
 $emphasized-link-hover-darken-percentage: 15% !default;
 
-// Paragraphs
-//
-// Style p element.
+/* Paragraphs */
+
+/* Style p element. */
 
 $paragraph-margin-bottom:   1rem !default;
 
 
-// Grid breakpoints
-//
-// Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
+/* Grid breakpoints */
+
+/* Define the minimum dimensions at which your layout will change,
+   adapting to different screen sizes, for use in media queries. */
 
 $grid-breakpoints: (
   xs: 0,
@@ -205,9 +204,9 @@ $grid-breakpoints: (
 @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
 
 
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
+/* Grid containers */
+
+/* Define the maximum width of `.container` for different screen sizes. */
 
 $container-max-widths: (
   sm: 540px,
@@ -219,18 +218,18 @@ $container-max-widths: (
 @include _assert-ascending($container-max-widths, "$container-max-widths");
 
 
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
+/* Grid columns */
+
+/* Set the number of columns and specify the width of the gutters. */
 
 $grid-columns:                12 !default;
 $grid-gutter-width:           20px !default;
 $grid-row-columns:            6 !default;
 
 
-// Components
-//
-// Define common padding and border radius sizes and more.
+/* Components */
+
+/* Define common padding and border radius sizes and more. */
 
 $line-height-lg:              1.5 !default;
 $line-height-sm:              1.5 !default;
@@ -270,15 +269,15 @@ $embed-responsive-aspect-ratios: join(
     $embed-responsive-aspect-ratios
 );
 
-// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
+/* Typography */
+
+/* Font, line-height, and color for body text, headings, and more. */
 
-// stylelint-disable value-keyword-case
+/* stylelint-disable value-keyword-case */
 $font-family-sans-serif:      'Roboto', sans-serif !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:            $font-family-sans-serif !default;
-// stylelint-enable value-keyword-case
+/* stylelint-enable value-keyword-case */
 
 $font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
 $font-size-lg:                $font-size-base * 1.25 !default;
@@ -300,7 +299,7 @@ $h4-font-size:                16px !default;
 $h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
 
-$headings-margin-bottom:      $spacer / 2 !default;
+$headings-margin-bottom:      math.div($spacer, 2) !default;
 $headings-font-family:        null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
@@ -345,9 +344,9 @@ $mark-bg:                     #fcf8e3 !default;
 $hr-margin-y:                 $spacer !default;
 
 
-// Tables
-//
-// Customizes the `.table` component with basic values, each used across all table variations.
+/* Tables */
+
+/* Customizes the `.table` component with basic values, each used across all table variations. */
 
 $table-cell-padding:          .75rem !default;
 $table-cell-padding-sm:       .3rem !default;
@@ -381,9 +380,9 @@ $table-bg-level:              -9 !default;
 $table-border-level:          -6 !default;
 
 
-// Buttons + Forms
-//
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+/* Buttons + Forms */
+
+/* Shared variables that are reassigned to `$input-` and `$btn-` specific variables. */
 
 $input-btn-padding-y:         .375rem !default;
 $input-btn-padding-x:         .75rem !default;
@@ -408,9 +407,9 @@ $input-btn-line-height-lg:    $line-height-lg !default;
 $input-btn-border-width:      $border-width !default;
 
 
-// Buttons
-//
-// For each of Bootstrap's buttons, define text, background, and border color.
+/* Buttons */
+
+/* For each of Bootstrap's buttons, define text, background, and border color. */
 
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
@@ -442,7 +441,7 @@ $btn-link-disabled-color:     $gray-600 !default;
 
 $btn-block-spacing-y:         .5rem !default;
 
-// Allows for customizing button radius independently from global border radius
+/* Allows for customizing button radius independently from global border radius */
 $btn-border-radius:           $border-radius !default;
 $btn-border-radius-lg:        $border-radius-lg !default;
 $btn-border-radius-sm:        $border-radius-sm !default;
@@ -450,7 +449,7 @@ $btn-border-radius-sm:        $border-radius-sm !default;
 $btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
 
-// Forms
+/* Forms */
 
 $label-margin-bottom:                   .5rem !default;
 
@@ -496,7 +495,7 @@ $input-height-border:                   $input-border-width * 2 !default;
 
 $input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
 $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
-$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
+$input-height-inner-quarter:            add($input-line-height * .25em, math.div($input-padding-y, 2)) !default;
 
 $input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
 $input-height-sm:                       add($input-line-height-sm * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
@@ -566,7 +565,7 @@ $custom-radio-indicator-border-radius:          50% !default;
 $custom-radio-indicator-icon-checked:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3' fill='#{$custom-control-indicator-checked-color}'/></svg>") !default;
 
 $custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
-$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-border-radius:         math.div($custom-control-indicator-size, 2) !default;
 $custom-switch-indicator-size:                  subtract($custom-control-indicator-size, $custom-control-indicator-border-width * 4) !default;
 
 $custom-select-padding-y:           $input-padding-y !default;
@@ -651,7 +650,7 @@ $custom-file-text: (
 ) !default;
 
 
-// Form validation
+/* Form validation */
 
 $form-feedback-margin-top:          $form-text-margin-top !default;
 $form-feedback-font-size:           $small-font-size !default;
@@ -678,10 +677,10 @@ $form-validation-states: map-merge(
     $form-validation-states
 );
 
-// Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
+/* Z-index master list */
+
+/* Warning: Avoid customizing these values. They're used for a bird's eye view
+   of components dependent on the z-axis and are designed to all work together. */
 
 $zindex-dropdown:                   1000 !default;
 $zindex-sticky:                     1020 !default;
@@ -692,7 +691,7 @@ $zindex-popover:                    1060 !default;
 $zindex-tooltip:                    1070 !default;
 
 
-// Navs
+/* Navs */
 
 $nav-link-padding-y:                .5rem !default;
 $nav-link-padding-x:                1rem !default;
@@ -711,21 +710,21 @@ $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
 $nav-divider-color:                 $gray-200 !default;
-$nav-divider-margin-y:              $spacer / 2 !default;
+$nav-divider-margin-y:              math.div($spacer, 2) !default;
 
 
-// Navbar
+/* Navbar */
 
-$navbar-padding-y:                  $spacer / 2 !default;
+$navbar-padding-y:                  math.div($spacer, 2) !default;
 $navbar-padding-x:                  $spacer !default;
 
 $navbar-nav-link-padding-x:         .5rem !default;
 
 $navbar-brand-font-size:            $font-size-lg !default;
-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+/* Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link */
 $nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y:            math.div(($nav-link-height - $navbar-brand-height), 2) !default;
 
 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
@@ -754,9 +753,9 @@ $navbar-dark-brand-color:                 $navbar-dark-active-color !default;
 $navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
 
 
-// Dropdowns
-//
-// Dropdown menu container and contents.
+/* Dropdowns */
+
+/* Dropdown menu container and contents. */
 
 $dropdown-min-width:                10rem !default;
 $dropdown-padding-x:                0 !default;
@@ -789,7 +788,7 @@ $dropdown-header-color:             $gray-600 !default;
 $dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
 
 
-// Pagination
+/* Pagination */
 
 $pagination-padding-y:              .5rem !default;
 $pagination-padding-x:              .75rem !default;
@@ -822,14 +821,14 @@ $pagination-disabled-border-color:  $gray-300 !default;
 $pagination-border-radius-sm:       $border-radius-sm !default;
 $pagination-border-radius-lg:       $border-radius-lg !default;
 
-// Jumbotron
+/* Jumbotron */
 
 $jumbotron-padding:                 2rem !default;
 $jumbotron-color:                   null !default;
 $jumbotron-bg:                      $gray-200 !default;
 
 
-// Cards
+/* Cards */
 
 $card-spacer-y:                     .75rem !default;
 $card-spacer-x:                     1.25rem !default;
@@ -845,7 +844,7 @@ $card-bg:                           $white !default;
 
 $card-img-overlay-padding:          1.25rem !default;
 
-$card-group-margin:                 $grid-gutter-width / 2 !default;
+$card-group-margin:                 math.div($grid-gutter-width, 2) !default;
 $card-deck-margin:                  $card-group-margin !default;
 
 $card-columns-count:                3 !default;
@@ -853,7 +852,7 @@ $card-columns-gap:                  1.25rem !default;
 $card-columns-margin:               $card-spacer-y !default;
 
 
-// Tooltips
+/* Tooltips */
 
 $tooltip-font-size:                 $font-size-sm !default;
 $tooltip-max-width:                 200px !default;
@@ -869,7 +868,7 @@ $tooltip-arrow-width:               .8rem !default;
 $tooltip-arrow-height:              .4rem !default;
 $tooltip-arrow-color:               $tooltip-bg !default;
 
-// Form tooltips must come after regular tooltips
+/* Form tooltips must come after regular tooltips */
 $form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
 $form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
 $form-feedback-tooltip-font-size:     $tooltip-font-size !default;
@@ -878,7 +877,7 @@ $form-feedback-tooltip-opacity:       $tooltip-opacity !default;
 $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
 
 
-// Popovers
+/* Popovers */
 
 $popover-font-size:                 $font-size-sm !default;
 $popover-bg:                        $white !default;
@@ -905,7 +904,7 @@ $popover-arrow-color:               $popover-bg !default;
 $popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
 
 
-// Toasts
+/* Toasts */
 
 $toast-max-width:                   350px !default;
 $toast-padding-x:                   .75rem !default;
@@ -923,7 +922,7 @@ $toast-header-background-color:     rgba($white, .85) !default;
 $toast-header-border-color:         rgba(0, 0, 0, .05) !default;
 
 
-// Badges
+/* Badges */
 
 $badge-font-size:                   75% !default;
 $badge-font-weight:                 $font-weight-bold !default;
@@ -935,17 +934,17 @@ $badge-transition:                  $btn-transition !default;
 $badge-focus-width:                 $input-btn-focus-width !default;
 
 $badge-pill-padding-x:              .6em !default;
-// Use a higher than normal value to ensure completely rounded edges when
-// customizing padding or font-size on labels.
+/* Use a higher than normal value to ensure completely rounded edges when
+   customizing padding or font-size on labels. */
 $badge-pill-border-radius:          10rem !default;
 
 
-// Modals
+/* Modals */
 
-// Padding applied to the modal body
+/* Padding applied to the modal body */
 $modal-inner-padding:               1rem !default;
 
-// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+/* Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding */
 $modal-footer-margin-between:       .5rem !default;
 
 $modal-dialog-margin:               .5rem !default;
@@ -983,9 +982,9 @@ $modal-transition:                  transform .3s ease-out !default;
 $modal-scale-transform:             scale(1.02) !default;
 
 
-// Alerts
-//
-// Define alert colors, border radius, and padding.
+/* Alerts */
+
+/* Define alert colors, border radius, and padding. */
 
 $alert-padding-y:                   .75rem !default;
 $alert-padding-x:                   1.25rem !default;
@@ -999,7 +998,7 @@ $alert-border-level:                -9 !default;
 $alert-color-level:                 6 !default;
 
 
-// Progress bars
+/* Progress bars */
 
 $progress-height:                   1rem !default;
 $progress-font-size:                $font-size-base * .75 !default;
@@ -1012,7 +1011,7 @@ $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;
 
 
-// List group
+/* List group */
 
 $list-group-color:                  null !default;
 $list-group-bg:                     $white !default;
@@ -1038,7 +1037,7 @@ $list-group-action-active-color:    $body-color !default;
 $list-group-action-active-bg:       $gray-200 !default;
 
 
-// Image thumbnails
+/* Image thumbnails */
 
 $thumbnail-padding:                 .25rem !default;
 $thumbnail-bg:                      $body-bg !default;
@@ -1048,13 +1047,13 @@ $thumbnail-border-radius:           $border-radius !default;
 $thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
 
 
-// Figures
+/* Figures */
 
 $figure-caption-font-size:          90% !default;
 $figure-caption-color:              $gray-600 !default;
 
 
-// Breadcrumbs
+/* Breadcrumbs */
 
 $breadcrumb-font-size:              null !default;
 
@@ -1072,7 +1071,7 @@ $breadcrumb-divider:                quote("/") !default;
 $breadcrumb-border-radius:          $border-radius !default;
 
 
-// Carousel
+/* Carousel */
 
 $carousel-control-color:             $white !default;
 $carousel-control-width:             15% !default;
@@ -1099,7 +1098,7 @@ $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 
 
-// Spinners
+/* Spinners */
 
 $spinner-width:         2rem !default;
 $spinner-height:        $spinner-width !default;
@@ -1110,7 +1109,7 @@ $spinner-height-sm:       $spinner-width-sm !default;
 $spinner-border-width-sm: .2em !default;
 
 
-// Close
+/* Close */
 
 $close-font-size:                   $font-size-base * 1.5 !default;
 $close-font-weight:                 $font-weight-bold !default;
@@ -1118,7 +1117,7 @@ $close-color:                       $black !default;
 $close-text-shadow:                 0 1px 0 $white !default;
 
 
-// Code
+/* Code */
 
 $code-font-size:                    87.5% !default;
 $code-color:                        $pink !default;
@@ -1133,7 +1132,7 @@ $pre-color:                         $gray-900 !default;
 $pre-scrollable-max-height:         340px !default;
 
 
-// Utilities
+/* Utilities */
 
 $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
 $overflows: auto, hidden !default;
@@ -1141,7 +1140,7 @@ $positions: static, relative, absolute, fixed, sticky !default;
 $user-selects: all, auto, none !default;
 
 
-// Printing
+/* Printing */
 
 $print-page-size:                   a3 !default;
 $print-body-min-width:              map-get($grid-breakpoints, "lg") !default;

src/assets/scss/styles.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @import "node_modules/bootstrap/scss/functions";
 @import "variables";
 @import "node_modules/bootstrap/scss/mixins";

tsconfig.json

@@ -10,6 +10,7 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
+    "skipLibCheck": true,
     "target": "es2015",
     "module": "es2020",
     "lib": [