@testgorilla/tgo-ui 6.2.3 → 6.2.4

package/projects/tgo-canopy-ui/theme/_input.scss

@@ -1,6 +1,7 @@
-@use "variables.scss" as *;
+@use 'variables.scss' as *;
 
-ui-dropdown, ui-autocomplete {
+ui-dropdown,
+ui-autocomplete {
   .mat-mdc-form-field {
     &.keyboard-focused {
       position: relative;
@@ -67,7 +68,7 @@ ui-dropdown, ui-autocomplete {
   }
 }
 
-*[theme="classic"] {
+*[theme='classic'] {
   .mat-mdc-form-field {
     .mat-mdc-form-field-hint.error,
     .mat-mdc-form-field-hint.error svg {
@@ -80,15 +81,17 @@ ui-dropdown, ui-autocomplete {
       .mat-mdc-text-field-wrapper {
         height: 48px;
 
-        &:hover, &.mdc-text-field--focused {
-
+        &:hover,
+        &.mdc-text-field--focused {
           .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above) {
             top: 21px !important;
           }
 
           @extend .active-field;
 
-          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+          .mdc-notched-outline__leading,
+          .mdc-notched-outline__notch,
+          .mdc-notched-outline__trailing {
             border-color: $tgo-petrol-default !important;
           }
 
@@ -101,11 +104,13 @@ ui-dropdown, ui-autocomplete {
   }
 }
 
-*[theme="dark"], *[theme="light"], .dark, .light {
-
+*[theme='dark'],
+*[theme='light'],
+.dark,
+.light {
   &.phone-number-select {
     margin-top: 8px;
-    border-radius: 10px!important;
+    border-radius: 10px !important;
     box-shadow: $box-shadow-hover-state;
 
     .country-option {
@@ -137,7 +142,8 @@ ui-dropdown, ui-autocomplete {
     }
   }
 
-  .mat-mdc-autocomplete-panel, &.mat-mdc-autocomplete-panel {
+  .mat-mdc-autocomplete-panel,
+  &.mat-mdc-autocomplete-panel {
     box-shadow: $box-shadow-hover-state;
     border-radius: 10px;
     .mat-mdc-option.selected-option,
@@ -145,58 +151,65 @@ ui-dropdown, ui-autocomplete {
       &:hover {
         background: var(--ui-autocomplete-option-color) !important;
       }
-      background: $grayscale-10!important;
+      background: $grayscale-10 !important;
     }
-    .mat-mdc-option:hover:not(.mdc-list-item--disabled)     {
+    .mat-mdc-option:hover:not(.mdc-list-item--disabled) {
       background: var(--ui-autocomplete-option-color) !important;
     }
 
-    .mat-mdc-option:active:not(.mdc-list-item--disabled)     {
+    .mat-mdc-option:active:not(.mdc-list-item--disabled) {
       background: var(--ui-autocomplete-option-color) !important;
     }
 
     .mat-mdc-option {
-      .mdc-list-item__primary-text, span {
-        color: $black!important;
+      .mdc-list-item__primary-text,
+      span {
+        color: $black !important;
         font-weight: 400;
       }
     }
 
     .mat-mdc-optgroup-label {
       .mdc-list-item__primary-text {
-        font-size: 14px!important;
+        font-size: 14px !important;
       }
     }
 
     .mat-mdc-optgroup {
       .mdc-list-item__primary-text {
-        color: $black!important;
+        color: $black !important;
         text-transform: lowercase;
       }
 
       .mdc-list-item__primary-text:first-letter {
-        text-transform: uppercase!important;
+        text-transform: uppercase !important;
       }
     }
 
     .cdk-virtual-scroll-content-wrapper {
-      .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled):not(.selected-option) {
-        background: transparent!important;
+      .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled):not(
+          .selected-option
+        ) {
+        background: transparent !important;
       }
     }
 
-    .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled):not(.selected-option) {
-      background: transparent!important;
+    .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled):not(
+        .selected-option
+      ) {
+      background: transparent !important;
     }
   }
 
-  .ui-dropdown-list, &.ui-dropdown-list {
+  .ui-dropdown-list,
+  &.ui-dropdown-list {
     .mat-mdc-option .mat-mdc-focus-indicator {
       display: none;
     }
 
-    .mat-mdc-option, .mat-option-section .section-title {
-      color: $black!important;
+    .mat-mdc-option,
+    .mat-option-section .section-title {
+      color: $black !important;
     }
 
     .mat-mdc-option-multiple .mat-pseudo-checkbox {
@@ -213,19 +226,20 @@ ui-dropdown, ui-autocomplete {
     &.mat-accent mat-option,
     &.mat-accent .mat-mdc-option-multiple {
       &:hover {
-        background: var(--dropdown-color-option-hover)!important;
+        background: var(--dropdown-color-option-hover) !important;
       }
 
       &:active {
-        background: var(--dropdown-color-option-active)!important;
+        background: var(--dropdown-color-option-active) !important;
       }
 
       &.mat-mdc-option-active,
       &.mdc-list-item--selected {
-        background-color: $grayscale-10!important;
+        background-color: $grayscale-10 !important;
 
-        .mdc-list-item__primary-text, .mat-pseudo-checkbox-checked:after {
-          color: $black!important;
+        .mdc-list-item__primary-text,
+        .mat-pseudo-checkbox-checked:after {
+          color: $black !important;
         }
 
         &:hover:not(.mdc-list-item--disabled),
@@ -244,8 +258,10 @@ ui-dropdown, ui-autocomplete {
     }
   }
 
-  .mat-mdc-form-field, .autocomplete-wrapper .mat-mdc-form-field {
-    &.mat-form-field-appearance-outline,  &.mat-text-field-outlined {
+  .mat-mdc-form-field,
+  .autocomplete-wrapper .mat-mdc-form-field {
+    &.mat-form-field-appearance-outline,
+    &.mat-text-field-outlined {
       --mdc-outlined-text-field-caret-color: #{$black} !important;
 
       .mdc-text-field__input::placeholder {
@@ -259,15 +275,17 @@ ui-dropdown, ui-autocomplete {
       }
 
       .mat-mdc-form-field-subscript-wrapper {
-        padding: 0!important;
+        padding: 0 !important;
         min-height: 24px;
 
-        &:after, &:before {
+        &:after,
+        &:before {
           display: none;
         }
       }
 
-      input, .mat-text-field__input {
+      input,
+      .mat-text-field__input {
         caret-color: $black;
       }
 
@@ -287,19 +305,19 @@ ui-dropdown, ui-autocomplete {
         &:hover {
           ui-icon {
             svg {
-              color: $black!important;
+              color: $black !important;
             }
           }
         }
 
         ui-icon {
           svg {
-            color: $grayscale-40!important;
+            color: $grayscale-40 !important;
           }
 
           &:focus-visible {
             svg {
-              color: $black!important;
+              color: $black !important;
             }
           }
         }
@@ -307,14 +325,14 @@ ui-dropdown, ui-autocomplete {
         .value-tag {
           ui-icon {
             svg {
-              color: $black!important;
+              color: $black !important;
             }
           }
 
           &:hover {
             ui-icon {
               svg {
-                color: $tgo-white!important;
+                color: $tgo-white !important;
               }
             }
           }
@@ -328,9 +346,9 @@ ui-dropdown, ui-autocomplete {
 
         &.mdc-text-field--disabled {
           * {
-            border-color: $grayscale-30!important;
-            color: $grayscale-30!important;
-            pointer-events: none!important;
+            border-color: $grayscale-30 !important;
+            color: $grayscale-30 !important;
+            pointer-events: none !important;
           }
 
           .mdc-notched-outline__notch {
@@ -368,14 +386,17 @@ ui-dropdown, ui-autocomplete {
           }
         }
 
-        &:hover, &.mdc-text-field--focused {
+        &:hover,
+        &.mdc-text-field--focused {
           .mat-mdc-form-field-icon-prefix svg {
             color: $black !important;
           }
 
           @extend .active-field;
 
-          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+          .mdc-notched-outline__leading,
+          .mdc-notched-outline__notch,
+          .mdc-notched-outline__trailing {
             border-color: $black !important;
           }
 
@@ -386,23 +407,21 @@ ui-dropdown, ui-autocomplete {
       }
 
       &.mat-warn {
-
         .mat-mdc-form-field-required-marker:after {
           color: $error-50;
         }
 
         mat-label {
-          color: $error-50!important;
+          color: $error-50 !important;
         }
 
         .mat-mdc-form-field-hint.error {
           color: $error-50 !important;
 
           a {
-            color: $error-50!important;
+            color: $error-50 !important;
           }
 
-
           svg {
             color: $error-50 !important;
           }
@@ -413,18 +432,23 @@ ui-dropdown, ui-autocomplete {
         }
 
         .mat-mdc-text-field-wrapper {
-          .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+          .mdc-notched-outline__leading,
+          .mdc-notched-outline__notch,
+          .mdc-notched-outline__trailing {
             border-color: $error-50 !important;
           }
 
-          &:hover, &.mdc-text-field--focused {
+          &:hover,
+          &.mdc-text-field--focused {
             .mat-mdc-form-field-icon-prefix svg {
               color: $error-50 !important;
             }
 
             @extend .active-field;
 
-            .mdc-notched-outline__leading, .mdc-notched-outline__notch, .mdc-notched-outline__trailing {
+            .mdc-notched-outline__leading,
+            .mdc-notched-outline__notch,
+            .mdc-notched-outline__trailing {
               border-color: $error-50 !important;
             }
 
@@ -439,18 +463,21 @@ ui-dropdown, ui-autocomplete {
 }
 
 // this overrides for dark ui-dropdown used in coderunner only. will be removed with proper rebranded dark theme
-*[theme="dark"], .dark {
+*[theme='dark'],
+.dark {
   .ui-dropdown-list.mat-accent {
     background-color: $grayscale-50;
 
     mat-option {
       background-color: $grayscale-50 !important;
 
-      &:hover, &.mat-mdc-option-active {
+      &:hover,
+      &.mat-mdc-option-active {
         background-color: $grayscale-40 !important;
       }
 
-      &, &.mat-mdc-option-active {
+      &,
+      &.mat-mdc-option-active {
         .mdc-list-item__primary-text {
           color: $tgo-white !important;
         }
@@ -508,12 +535,20 @@ ui-dropdown, ui-autocomplete {
   }
 }
 
-.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label,
-.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch label {
-  color: $grayscale-50!important;
+.ui-field[theme='light']
+  .mat-mdc-form-field.mat-form-field-appearance-outline
+  .mat-mdc-text-field-wrapper
+  .mdc-notched-outline__notch
+  label,
+.ui-field[theme='dark']
+  .mat-mdc-form-field.mat-form-field-appearance-outline
+  .mat-mdc-text-field-wrapper
+  .mdc-notched-outline__notch
+  label {
+  color: $grayscale-50 !important;
 
   &:active {
-    color: $black!important;
+    color: $black !important;
   }
 }
 
@@ -526,13 +561,14 @@ ui-dropdown, ui-autocomplete {
       padding-bottom: 10px;
     }
 
-    span, .mat-mdc-form-field-hint-spacer {
+    span,
+    .mat-mdc-form-field-hint-spacer {
       line-height: 16px;
     }
   }
 
   .mat-mdc-form-field-hint:before {
-    height: 0!important;
+    height: 0 !important;
   }
 
   .mat-mdc-form-field-hint.error {
@@ -551,7 +587,6 @@ ui-dropdown, ui-autocomplete {
   }
 }
 
-
 .custom-errors {
   ui-icon {
     margin-right: 4px;
@@ -569,7 +604,15 @@ ui-dropdown, ui-autocomplete {
   position: relative;
 }
 
-.light.mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active, .light.mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled),
-.dark.mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled), .light.mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active, .light.mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
-  background: var(--ui-autocomplete-option-color)!important;
+.light.mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),
+.light.mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),
+.light.mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,
+.light.mat-mdc-autocomplete-panel
+  .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled),
+.dark.mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),
+.light.mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),
+.light.mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,
+.light.mat-mdc-autocomplete-panel
+  .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
+  background: var(--ui-autocomplete-option-color) !important;
 }

package/projects/tgo-canopy-ui/theme/_lib-styles.scss

@@ -1,13 +1,14 @@
-@use "variables.scss" as *;
-@use "tooltip.scss" as *;
-@use "mat-paginator.scss" as *;
-@use "core.scss" as *;
+@use 'variables.scss' as *;
+@use 'tooltip.scss' as *;
+@use 'mat-paginator.scss' as *;
+@use 'core.scss' as *;
 
-*[theme="dark"], *[theme="light"] {
+*[theme='dark'],
+*[theme='light'] {
   * {
-    font-family: "ModernGothic", sans-serif !important;
+    font-family: 'ModernGothic', sans-serif !important;
     font-weight: 400;
-  };
+  }
 }
 
 //custom scss for the angular material components

package/projects/tgo-canopy-ui/theme/_mat-paginator.scss

@@ -1,28 +1,29 @@
-@use "./variables" as *;
+@use './variables' as *;
 
 .mat-mdc-paginator {
-
   .mdc-text-field--focused {
-    .mdc-notched-outline__leading, .mdc-notched-outline__trailing, .mdc-notched-outline__notch {
+    .mdc-notched-outline__leading,
+    .mdc-notched-outline__trailing,
+    .mdc-notched-outline__notch {
       border-color: $tgo-petrol-default !important;
     }
   }
 
   .mat-mdc-select {
-    &[aria-expanded="false"] {
+    &[aria-expanded='false'] {
       .mat-mdc-select-arrow {
         @extend .select-arrow;
         background-image: url('/icons/Arrow_down.svg');
       }
 
-      &[aria-disabled="true"] {
+      &[aria-disabled='true'] {
         .mat-mdc-select-arrow {
           opacity: 0.2 !important;
         }
       }
     }
 
-    &[aria-expanded="true"] {
+    &[aria-expanded='true'] {
       .mat-mdc-select-arrow {
         @extend .select-arrow;
         background-image: url('/icons/Arrow_up.svg');
@@ -36,13 +37,13 @@
 }
 
 .mdc-menu-surface {
-  &[aria-labelledby*="mat-paginator"] {
+  &[aria-labelledby*='mat-paginator'] {
     mat-option {
-      &[aria-selected="true"] {
-        background: $tgo-petrol-90w!important;
+      &[aria-selected='true'] {
+        background: $tgo-petrol-90w !important;
 
         .mdc-list-item__primary-text {
-          color: black!important;
+          color: black !important;
         }
       }
     }

package/projects/tgo-canopy-ui/theme/_palette.scss

@@ -1,19 +1,19 @@
-@use "@angular/material" as mat;
+@use '@angular/material' as mat;
 @include mat.elevation-classes();
 @include mat.app-background();
 //teal
 $tgo-teal-palette: (
-  50: #ECF6F5,
+  50: #ecf6f5,
   //secondary teal
-  100: #CBD6CB,
-  200: #B5DDD5,
-  300: #7EC3B6,
-  400: #55B9A6,
-  500: #46A997,
-  600: #347E70,
-  700: #31766A,
-  800: #2B685D,
-  900: #1C443C,
+  100: #cbd6cb,
+  200: #b5ddd5,
+  300: #7ec3b6,
+  400: #55b9a6,
+  500: #46a997,
+  600: #347e70,
+  700: #31766a,
+  800: #2b685d,
+  900: #1c443c,
   contrast: (
     50: #000000,
     100: #000000,
@@ -30,16 +30,16 @@ $tgo-teal-palette: (
 
 //petrol
 $tgo-petrol-palette: (
-  50: #E9F0F1,
+  50: #e9f0f1,
   //secondary petrol
-  100: #C8D7DE,
-  200: #A9C2C9,
-  300: #6894A0,
-  400: #368DA6,
+  100: #c8d7de,
+  200: #a9c2c9,
+  300: #6894a0,
+  400: #368da6,
   500: #276678,
-  600: #1F5261,
-  700: #1B4754,
-  800: #183F4A,
+  600: #1f5261,
+  700: #1b4754,
+  800: #183f4a,
   900: #102930,
   contrast: (
     50: #000000,
@@ -56,14 +56,14 @@ $tgo-petrol-palette: (
 $tgo-error-palette: (
   50: #ffffff,
   //secondary error
-  100: #F0DAD9,
-  200: #E3C3C6,
-  300: #DCA7A6,
-  400: #D49190,
+  100: #f0dad9,
+  200: #e3c3c6,
+  300: #dca7a6,
+  400: #d49190,
   500: #cb7b7a,
-  600: #C26564,
-  700: #BA4F4E,
-  800: #8E5655,
+  600: #c26564,
+  700: #ba4f4e,
+  800: #8e5655,
   900: #513131,
   contrast: (
     50: #000000,
@@ -89,9 +89,21 @@ $tgo-error: mat.m2-define-palette($tgo-error-palette, 500);
 //typography
 $tgo-typography: mat.m2-define-typography-config(
   $font-family: "'Open Sans', sans-serif",
-  $body-1: mat.m2-define-typography-level($font-size: 14px, $letter-spacing: normal),
-  $body-2: mat.m2-define-typography-level($font-size: 14px, $letter-spacing: normal),
-  $button: mat.m2-define-typography-level($font-size: 14px, $letter-spacing: normal),
+  $body-1:
+    mat.m2-define-typography-level(
+      $font-size: 14px,
+      $letter-spacing: normal,
+    ),
+  $body-2:
+    mat.m2-define-typography-level(
+      $font-size: 14px,
+      $letter-spacing: normal,
+    ),
+  $button:
+    mat.m2-define-typography-level(
+      $font-size: 14px,
+      $letter-spacing: normal,
+    ),
 );
 
 $my-theme: mat.m2-define-light-theme(