@elderbyte/ngx-starter 18.11.0 → 18.11.1

package/src/lib/components/time/elder-interval-input/elder-interval-input.component.scss

@@ -1,4 +1,3 @@
-
 .elder-flex-interval-control {
   flex: 1 1 auto;
   overflow: hidden;

package/src/lib/components/time/elder-local-date-input/elder-local-date-input.component.scss

@@ -1,7 +1,4 @@
-
-
-
-input::-webkit-calendar-picker-indicator{
+input::-webkit-calendar-picker-indicator {
   display: none;
 }
 
@@ -11,6 +8,6 @@ input::-webkit-calendar-picker-indicator{
 
 .elder-local-date-input {
   &.center {
-    text-align: center
+    text-align: center;
   }
 }

package/src/lib/components/time/period/elder-period-input/elder-period-input.component.scss

@@ -1,5 +1,4 @@
 .period-field {
-
 }
 
 .suffix {
@@ -11,15 +10,12 @@
 }
 
 .period-input-years {
-
 }
 
 .period-input-months {
-
 }
 
 .period-input-months {
-
 }
 
 input.period-input::-webkit-outer-spin-button,

package/src/lib/components/toasts/standard-toast/standard-toast.component.scss

@@ -1,4 +1,3 @@
-
 .toast-title {
   font-size: 16px;
 }

package/src/lib/components/url-fragment/url-fragment-switcher/elder-url-fragment-switcher.component.scss

@@ -1,10 +1,7 @@
-
-
 .activeURlFragment {
   padding-left: 6px;
 }
 
-
 .mat-body-strong {
   line-height: 5px;
   padding-top: 10px;
@@ -22,5 +19,3 @@
   padding-bottom: 14px;
   color: black;
 }
-
-

package/src/lib/components/viewers/elder-svg-viewer/elder-svg-viewer.component.scss

@@ -1,4 +1,3 @@
-
 .svg {
   width: 100%;
   height: 100%;

package/theming/_elder-common.scss

@@ -1,7 +1,7 @@
 @use 'mat-icon-button-size' as icon-button-size;
 @use '@angular/material' as mat;
 @use 'mixins' as mixins;
-@mixin elder-common-styles ($theme) {
+@mixin elder-common-styles($theme) {
   $common-sizes: map-get($theme, elder, common-sizes);
   $form-field-density: map-get($theme, elder, density, form-field);
   @include mat.form-field-density($form-field-density);
@@ -17,7 +17,7 @@
   $md: map-get($common-sizes, md);
   $lg: map-get($common-sizes, lg);
   $xl: map-get($common-sizes, xl);
-  $xxl:map-get($common-sizes, xxl);
+  $xxl: map-get($common-sizes, xxl);
 
   /***************************************************************************
    *                                                                         *
@@ -57,7 +57,7 @@
    *                                                                         *
    **************************************************************************/
 
-  th.mat-mdc-header-cell  {
+  th.mat-mdc-header-cell {
     &.elder-number-cell {
       text-align: right;
       justify-content: flex-end;
@@ -68,8 +68,8 @@
     }
   }
 
-  td.mat-mdc-cell  {
-    &.elder-number-cell{
+  td.mat-mdc-cell {
+    &.elder-number-cell {
       text-align: right;
       justify-content: flex-end;
     }
@@ -79,7 +79,7 @@
     }
   }
 
-  td.mat-mdc-footer-cell  {
+  td.mat-mdc-footer-cell {
     &.elder-number-cell {
       text-align: right;
       justify-content: flex-end;
@@ -102,7 +102,6 @@
     .mat-form-field-underline {
       display: none;
     }
-
   }
 
   /***************************************************************************
@@ -110,8 +109,8 @@
   **************************************************************************/
 
   .mat-mdc-form-field.elder-dense {
-
-    .mat-mdc-text-field-wrapper { // padding left / right 16 by default
+    .mat-mdc-text-field-wrapper {
+      // padding left / right 16 by default
       padding-left: $sm !important;
       padding-right: $sm !important;
     }
@@ -133,7 +132,7 @@
         transform: translateY(-100%) scale(0.75);
       }
       .mat-mdc-form-field-infix {
-        padding-top: 14px!important; // 16px by default
+        padding-top: 14px !important; // 16px by default
         padding-bottom: 2px;
         min-height: 40px; // (24 + 2*16) = 56px by default
       }
@@ -271,7 +270,7 @@
     display: none;
   }
 
-  input[type=number].elder-input-no-spinner {
+  input[type='number'].elder-input-no-spinner {
     -moz-appearance: textfield;
   }
 

package/theming/_elder-defaults.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use 'sass:map';
 
 /******************************
 Default values
@@ -45,7 +45,5 @@ Validates $theme and sets default value if null
 }
 
 @function get-default-input() {
- @return (
-
- );
+  @return ();
 }

package/theming/_elder-flex-layout.scss

@@ -48,7 +48,7 @@ $media: (
   $md: map-get($common-sizes, md);
   $lg: map-get($common-sizes, lg);
   $xl: map-get($common-sizes, xl);
-  $xxl:map-get($common-sizes, xxl);
+  $xxl: map-get($common-sizes, xxl);
 
   /***************************************************************************
    *                                                                         *
@@ -172,7 +172,8 @@ $media: (
    *                                                                         *
    **************************************************************************/
 
-  .layout-col, .layout-row {
+  .layout-col,
+  .layout-row {
     &.wrap {
       flex-wrap: wrap;
     }
@@ -186,8 +187,6 @@ $media: (
     }
   }
 
-
-
   /***************************************************************************
    *                                                                         *
    * Flex Item                                                               *
@@ -197,8 +196,8 @@ $media: (
   .flex {
     flex: 1 1 0%; // grow, shrink, no initial size
     box-sizing: border-box;
-    min-width:0;
-    min-height:0;
+    min-width: 0;
+    min-height: 0;
   }
 
   .flex-auto {
@@ -590,8 +589,8 @@ $media: (
    *                                                                         *
    **************************************************************************/
 
-  .layout-col, .layout-row {
-
+  .layout-col,
+  .layout-row {
     // justify-start
     &.place-start-start {
       justify-content: start;

package/theming/_elder-mdc-support.scss

@@ -3,7 +3,6 @@
 @use '../theming/mat-icon-button-size' as icon-button-size;
 @use '../theming/elder-typography-utils' as elder-typography;
 
-
 @mixin mdc-theme-support($config-or-theme) {
   $color: mat.m2-get-color-config($config-or-theme);
   $typography: elder-typography.get-typography-config($config-or-theme);
@@ -35,7 +34,6 @@
   $font-size: mat.m2-font-size($config, body-1);
   $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
-
   // $control-button-size: 24px; // $line-height-em
   $control-button-size: var(--mdc-typography-body1-line-height, 24px);
   $control-icon-size: 20px;
@@ -71,9 +69,9 @@
 @mixin _mdc-mat-snack-bar($color-config) {
   $is-dark-theme: map.get($color-config, is-dark);
   $snackbar-text-color: if(
-      $is-dark-theme,
-      var(--mdc-theme-text-primary-on-light),
-      var(--mdc-theme-text-primary-on-dark),
+    $is-dark-theme,
+    var(--mdc-theme-text-primary-on-light),
+    var(--mdc-theme-text-primary-on-dark)
   );
 
   .mat-mdc-snack-bar-container {
@@ -103,9 +101,7 @@
   }
 }
 
-
 @mixin _mdc-control-icon($color-config) {
-
   $foreground: map.get($color-config, foreground);
   $background: map.get($color-config, background);
   $primary: map.get($color-config, primary);
@@ -119,43 +115,46 @@
   .mat-mdc-form-field {
     &.mat-focused {
       &.mat-primary {
-        .elder-mdc-control-icon, .elder-control-icon-button {
+        .elder-mdc-control-icon,
+        .elder-control-icon-button {
           color: mat.m2-get-color-from-palette($primary, text);
         }
       }
 
       &.mat-accent {
-        .elder-mdc-control-icon, .elder-control-icon-button {
+        .elder-mdc-control-icon,
+        .elder-control-icon-button {
           color: mat.m2-get-color-from-palette($accent, text);
         }
       }
 
       &.mat-warn {
-        .elder-mdc-control-icon, .elder-control-icon-button {
+        .elder-mdc-control-icon,
+        .elder-control-icon-button {
           color: mat.m2-get-color-from-palette($warn, text);
         }
       }
     }
 
     &.mat-form-field-invalid {
-      .elder-mdc-control-icon, .elder-control-icon-button {
+      .elder-mdc-control-icon,
+      .elder-control-icon-button {
         color: mat.m2-get-color-from-palette($warn, text);
       }
     }
 
     &.mat-form-field-disabled {
-      .elder-mdc-control-icon, .elder-control-icon-button {
+      .elder-mdc-control-icon,
+      .elder-control-icon-button {
         color: mat.m2-get-color-from-palette($foreground, disabled-text);
       }
     }
   }
-
 }
 
 @mixin _form-field-palette($palette) {
-
   $contrast-color: mat.m2-get-color-from-palette($palette, default-contrast);
-  $contrast-color-inactive: rgba($contrast-color, .5);
+  $contrast-color-inactive: rgba($contrast-color, 0.5);
 
   .mat-mdc-slide-toggle .mdc-form-field {
     background: mat.m2-get-color-from-palette($palette);
@@ -176,11 +175,14 @@
       color: $contrast-color;
     }
 
-    ::placeholder, .mat-mdc-select-placeholder {
+    ::placeholder,
+    .mat-mdc-select-placeholder {
       color: $contrast-color-inactive;
     }
 
-    .elder-mdc-control-icon, .elder-control-icon-button, .mat-mdc-select-arrow {
+    .elder-mdc-control-icon,
+    .elder-control-icon-button,
+    .mat-mdc-select-arrow {
       color: $contrast-color-inactive;
     }
 
@@ -203,13 +205,14 @@
     }
 
     &.mat-focused {
-      .mat-mdc-select-arrow, .elder-mdc-control-icon, .elder-control-icon-button {
+      .mat-mdc-select-arrow,
+      .elder-mdc-control-icon,
+      .elder-control-icon-button {
         color: $contrast-color;
       }
     }
 
     &:hover {
-
       .mdc-notched-outline {
         .mdc-notched-outline__leading {
           border-color: $contrast-color;

package/theming/_elder-palettes.scss

@@ -1,7 +1,6 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 
-
 /***************************************************************************
  *                                                                         *
  * Overriding Material Base Variables                                      *
@@ -20,15 +19,16 @@ $light-primary-text: white;
 // ElderByte Theme
 
 $elder-blue: (
-  50: #DFE3E8,
-  100: #B3BCC8,
-  200: #8593A7,
+  50: #dfe3e8,
+  100: #b3bcc8,
+  200: #8593a7,
   300: #546883,
-  400: #2F4869,
-  500: #0B284F, // Official Main Color tone: #002852 (#0B284F)
-  600: #0A2448,
+  400: #2f4869,
+  500: #0b284f,
+  // Official Main Color tone: #002852 (#0B284F)
+  600: #0a2448,
   700: #092040,
-  800: #081C38,
+  800: #081c38,
   900: #061529,
   A100: #809ec5,
   A200: #5179bf,
@@ -49,20 +49,21 @@ $elder-blue: (
     A200: $light-primary-text,
     A400: $light-primary-text,
     A700: $light-primary-text,
-  )
+  ),
 );
 
 $elder-gold: (
-  50: #F6F3EC,
-  100: #E8E1D1,
-  200: #DACFB4,
-  300: #CCBC96,
-  400: #C1AD80,
-  500: #B69F6A, // Official ElderByte Accent tone
-  600: #A69160,
+  50: #f6f3ec,
+  100: #e8e1d1,
+  200: #dacfb4,
+  300: #ccbc96,
+  400: #c1ad80,
+  500: #b69f6a,
+  // Official ElderByte Accent tone
+  600: #a69160,
   700: #948156,
-  800: #81714B,
-  900: #5F5337,
+  800: #81714b,
+  900: #5f5337,
   A100: #e1d1a9,
   A200: #efd08f,
   A400: #dbbe7a,
@@ -82,7 +83,7 @@ $elder-gold: (
     A200: $dark-primary-text,
     A400: $dark-primary-text,
     A700: $dark-primary-text,
-  )
+  ),
 );
 
 /***************************************************************************
@@ -93,7 +94,7 @@ $elder-gold: (
 
 $grey-palette: mat.$m2-grey-palette;
 $light-primary-text: rgba(white, 0.87);
-$light-secondary-text: rgba(white, 0.40);
+$light-secondary-text: rgba(white, 0.4);
 $light-disabled-text: rgba(white, 0.38);
 $light-dividers: rgba(white, 0.12);
 $light-focused: rgba(white, 0.12);
@@ -109,11 +110,13 @@ $dark-background-dp-12: #333333; // 14%
 // Background palette for dark themes.
 $elder-dark-theme-background: (
   status-bar: black,
-  app-bar:    $dark-background-dp-01,
-  background: #121212, // #121212
-  hover:      rgba(white, 0.04),
-  card:       $dark-background-dp-03,
-  dialog:     $dark-background-dp-12, // $my-dark-dp-06
+  app-bar: $dark-background-dp-01,
+  background: #121212,
+  // #121212
+  hover: rgba(white, 0.04),
+  card: $dark-background-dp-03,
+  dialog: $dark-background-dp-12,
+  // $my-dark-dp-06
   disabled-button: rgba(white, 0.12),
   raised-button: map.get($grey-palette, 800),
   focused-button: $light-focused,

package/theming/_elder-scrollbar-theme.scss

@@ -6,7 +6,6 @@
 }
 
 @mixin _starter-scrollbar-theme($theme) {
-
   $scrollbarStyling: map.get($theme, elder, scrollbar-styling);
 
   @if $scrollbarStyling {
@@ -62,7 +61,6 @@
 }
 
 @mixin scrollbar-width($width) {
-
   ::-webkit-scrollbar {
     width: $width;
   }

package/theming/_elder-style-fixes.scss

@@ -1,6 +1,6 @@
 @use '@angular/material' as mat;
 @use 'mixins' as mixins;
-@use "sass:map";
+@use 'sass:map';
 
 @mixin elder-style-fixes($theme) {
   @include _ng-style-fixes;
@@ -21,7 +21,6 @@
 }
 
 @mixin _mat-style-fixes($theme) {
-
   // Globally disable automatic scrolling of Material Drawer Container
   .mat-drawer-inner-container {
     overflow: hidden !important;
@@ -123,7 +122,11 @@
     @if $form-field-density < -1 {
       .mdc-text-field--filled {
         .mdc-floating-label--float-above {
-          transform: var($mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (44px + var($mat-mdc-form-field-label-offset-x, 0px))))) !important;
+          transform: var(
+            $mat-mdc-form-field-label-transform,
+            translateY(-50%)
+              translateX(calc(1 * (44px + var($mat-mdc-form-field-label-offset-x, 0px))))
+          ) !important;
         }
 
         .mat-mdc-form-field-infix {
@@ -142,18 +145,18 @@
       pointer-events: none !important;
 
       mat-label {
-        pointer-events: none !important;;
+        pointer-events: none !important;
       }
     }
 
     .mdc-notched-outline__notch {
-      pointer-events: none !important;;
+      pointer-events: none !important;
 
       .mdc-floating-label {
-        pointer-events: none !important;;
+        pointer-events: none !important;
 
         mat-label {
-          pointer-events: none !important;;
+          pointer-events: none !important;
         }
       }
     }

package/theming/_elder-theme.scss

@@ -15,7 +15,12 @@
     $primary: map.get($color-settings, primary);
     $accent: map.get($color-settings, accent);
     $warn: map.get($color-settings, warn);
-    $result: map.merge($config, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
+    $result: map.merge(
+      $config,
+      (
+        color: _mat-create-dark-color-config($primary, $accent, $warn),
+      )
+    );
   }
   @return _create-backwards-compatibility-theme($result);
 }

package/theming/_elder-toast-theme.scss

@@ -1,7 +1,6 @@
 @use '@angular/material' as mat;
 
 @mixin theme($theme) {
-
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
@@ -44,5 +43,4 @@
   .elder-warn-text {
     color: mat.m2-get-color-from-palette($warn);
   }
-
 }

package/theming/_mat-icon-button-size.scss

@@ -2,7 +2,7 @@
  * Based on https://github.com/btxtiger/mat-icon-button-sizes
  * The default factor between button and icon size is *= 0.6
  */
-  @mixin matIconButtonSize($buttonSize, $iconSize) {
+@mixin matIconButtonSize($buttonSize, $iconSize) {
   width: $buttonSize !important;
   height: $buttonSize !important;
   padding: 0px !important;
@@ -10,7 +10,8 @@
   align-items: center;
   justify-content: center;
 
-  .mat-icon, img {
+  .mat-icon,
+  img {
     width: $iconSize;
     height: $iconSize;
     font-size: $iconSize;

package/theming/_mixins.scss

@@ -2,13 +2,15 @@
   $iconSize: calc-form-icon-size($density);
   $iconPadding: calc-form-icon-padding($density);
 
-  .mat-mdc-form-field-icon-prefix>a, .mat-mdc-form-field-icon-suffix>a {
+  .mat-mdc-form-field-icon-prefix > a,
+  .mat-mdc-form-field-icon-suffix > a {
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
-  .mat-mdc-form-field-icon-prefix>.mat-icon, .mat-mdc-form-field-icon-suffix>.mat-icon {
+  .mat-mdc-form-field-icon-prefix > .mat-icon,
+  .mat-mdc-form-field-icon-suffix > .mat-icon {
     width: $iconSize !important;
     height: $iconSize !important;
     padding: 0 $iconPadding !important;
@@ -18,18 +20,18 @@
     box-sizing: border-box;
   }
 
-  .mat-mdc-form-field-icon-prefix>.mat-mdc-icon-button,
-  .mat-mdc-form-field-icon-suffix>.mat-mdc-icon-button,
-  .mat-mdc-form-field-icon-prefix>div>.mat-mdc-icon-button,
-  .mat-mdc-form-field-icon-suffix>div>.mat-mdc-icon-button,
-  .mat-mdc-form-field-icon-prefix>.mat-datepicker-toggle>.mat-mdc-icon-button,
-  .mat-mdc-form-field-icon-suffix>.mat-datepicker-toggle>.mat-mdc-icon-button {
+  .mat-mdc-form-field-icon-prefix > .mat-mdc-icon-button,
+  .mat-mdc-form-field-icon-suffix > .mat-mdc-icon-button,
+  .mat-mdc-form-field-icon-prefix > div > .mat-mdc-icon-button,
+  .mat-mdc-form-field-icon-suffix > div > .mat-mdc-icon-button,
+  .mat-mdc-form-field-icon-prefix > .mat-datepicker-toggle > .mat-mdc-icon-button,
+  .mat-mdc-form-field-icon-suffix > .mat-datepicker-toggle > .mat-mdc-icon-button {
     width: $iconSize !important;
     height: $iconSize !important;
     padding: 0 $iconPadding !important;
     line-height: 0;
 
-    >.mat-mdc-button-touch-target {
+    > .mat-mdc-button-touch-target {
       width: $iconSize !important;
       height: $iconSize !important;
       line-height: 0;