@elderbyte/ngx-starter 18.13.0-beta.1 → 18.13.0-beta.2

package/theming/_elder-flex-layout.scss

@@ -25,13 +25,11 @@ $media: (
 }
 
 @mixin flex-layout {
-  box-sizing: border-box;
   display: flex !important;
 }
 
 @mixin flex-initial-100 {
   flex: 1 1 100%;
-  box-sizing: border-box;
 }
 
 @mixin elder-flex-layout($theme) {
@@ -61,7 +59,6 @@ $media: (
     min-height: 100%;
     min-width: 100%;
     width: 100%;
-    box-sizing: border-box;
   }
 
   /***************************************************************************
@@ -195,24 +192,20 @@ $media: (
 
   .flex {
     flex: 1 1 0%; // grow, shrink, no initial size
-    box-sizing: border-box;
     min-width: 0;
     min-height: 0;
   }
 
   .flex-auto {
     flex: 1 1 auto; // grow, shrink
-    box-sizing: border-box;
   }
 
   .flex-initial {
     flex: 0 1 auto; // No grow, shrink
-    box-sizing: border-box;
   }
 
   .flex-none {
     flex: none;
-    box-sizing: border-box;
   }
 
   .layout-row {
@@ -325,22 +318,18 @@ $media: (
 
   .flex-grow {
     flex-grow: 1;
-    box-sizing: border-box;
   }
 
   .flex-nogrow {
     flex-grow: 0;
-    box-sizing: border-box;
   }
 
   .flex-shrink {
     flex-shrink: 1;
-    box-sizing: border-box;
   }
 
   .flex-noshrink {
     flex: 1 0 0%; // grow, shrink, no initial size
-    box-sizing: border-box;
   }
 
   /***************************************************************************

package/theming/_elder-layout-system.scss

@@ -202,6 +202,231 @@
     padding-bottom: $xxl;
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * Margin                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  .m-auto {
+    margin: auto;
+  }
+
+  .mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .m-0 {
+    margin: 0;
+  }
+
+  .mt-0 {
+    margin-top: 0;
+  }
+
+  .mb-0 {
+    margin-bottom: 0;
+  }
+
+  .mr-0 {
+    margin-right: 0;
+  }
+
+  .ml-0 {
+    margin-left: 0;
+  }
+
+  .mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .m-xs {
+    margin: $xs;
+  }
+
+  .mt-xs {
+    margin-top: $xs;
+  }
+
+  .mb-xs {
+    margin-bottom: $xs;
+  }
+
+  .mr-xs {
+    margin-right: $xs;
+  }
+
+  .ml-xs {
+    margin-left: $xs;
+  }
+
+  .mx-xs {
+    margin-left: $xs;
+    margin-right: $xs;
+  }
+
+  .my-xs {
+    margin-top: $xs;
+    margin-bottom: $xs;
+  }
+
+  .m-sm {
+    margin: $sm;
+  }
+
+  .mt-sm {
+    margin-top: $sm;
+  }
+
+  .mb-sm {
+    margin-bottom: $sm;
+  }
+
+  .mr-sm {
+    margin-right: $sm;
+  }
+
+  .ml-sm {
+    margin-left: $sm;
+  }
+
+  .mx-sm {
+    margin-left: $sm;
+    margin-right: $sm;
+  }
+
+  .my-sm {
+    margin-top: $sm;
+    margin-bottom: $sm;
+  }
+
+  .m-md {
+    margin: $md;
+  }
+
+  .mt-md {
+    margin-top: $md;
+  }
+
+  .mb-md {
+    margin-bottom: $md;
+  }
+
+  .mr-md {
+    margin-right: $md;
+  }
+
+  .ml-md {
+    margin-left: $md;
+  }
+
+  .mx-md {
+    margin-left: $md;
+    margin-right: $md;
+  }
+
+  .my-md {
+    margin-top: $md;
+    margin-bottom: $md;
+  }
+
+  .m-lg {
+    margin: $lg;
+  }
+
+  .mt-lg {
+    margin-top: $lg;
+  }
+
+  .mb-lg {
+    margin-bottom: $lg;
+  }
+
+  .mr-lg {
+    margin-right: $lg;
+  }
+
+  .ml-lg {
+    margin-left: $lg;
+  }
+
+  .mx-lg {
+    margin-left: $lg;
+    margin-right: $lg;
+  }
+
+  .my-lg {
+    margin-top: $lg;
+    margin-bottom: $lg;
+  }
+
+  .m-xl {
+    margin: $xl;
+  }
+
+  .mt-xl {
+    margin-top: $xl;
+  }
+
+  .mb-xl {
+    margin-bottom: $xl;
+  }
+
+  .mr-xl {
+    margin-right: $xl;
+  }
+
+  .ml-xl {
+    margin-left: $xl;
+  }
+
+  .mx-xl {
+    margin-left: $xl;
+    margin-right: $xl;
+  }
+
+  .my-xl {
+    margin-top: $xl;
+    margin-bottom: $xl;
+  }
+
+  .m-xxl {
+    margin: $xxl;
+  }
+
+  .mt-xxl {
+    margin-top: $xxl;
+  }
+
+  .mb-xxl {
+    margin-bottom: $xxl;
+  }
+
+  .mr-xxl {
+    margin-right: $xxl;
+  }
+
+  .ml-xxl {
+    margin-left: $xxl;
+  }
+
+  .mx-xxl {
+    margin-left: $xxl;
+    margin-right: $xxl;
+  }
+
+  .my-xxl {
+    margin-top: $xxl;
+    margin-bottom: $xxl;
+  }
+
   /***************************************************************************
    *                                                                         *
    * Layout Widths                                                           *

package/theming/_elder-m3-theme.scss

@@ -1,8 +1,45 @@
-// This file was generated by running 'ng generate @angular/material:m3-theme'.
-// Proceed with caution if making changes to this file.
-
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use 'elder-design-token-overwrites' as elder-design-token-overwrites;
+@use '../index' as elder;
+
+@mixin render-default-elder-theme ($themes, $options: ()) {
+  // map options
+  $use-typography-hierarchy: not map-has-key($options, 'no-typography-hierarchy');
+
+  // create theme
+  //$themes: create-default-elder-themes();
+  $elder-light-theme-m3: map.get($themes, light);
+  $elder-dark-theme-m3: map.get($themes, dark-reverse);
+
+  // render theme
+  @include mat.all-component-typographies();
+  @include mat.core();
+
+  @if $use-typography-hierarchy {
+    @include mat.typography-hierarchy($elder-light-theme-m3, $back-compat: true);
+  }
+
+  .elder-light-theme,
+  .elder-dark-theme {
+    @include mat.all-component-themes($elder-light-theme-m3);
+    @include mat.system-level-colors($elder-light-theme-m3);
+    @include mat.system-level-typography($elder-light-theme-m3);
+    @include mat.color-variants-backwards-compatibility($elder-light-theme-m3);
+    @include elder.starter-theme($elder-light-theme-m3);
+  }
+
+  .elder-dark-theme {
+    @include mat.all-component-colors($elder-dark-theme-m3);
+    @include mat.system-level-colors($elder-dark-theme-m3);
+    @include mat.color-variants-backwards-compatibility($elder-dark-theme-m3);
+  }
+
+  .elder-light-theme,
+  .elder-dark-theme {
+    @include elder-design-token-overwrites.elder-design-token-overwrites();
+  }
+}
 
 @function create-default-elder-themes() {
   @return create-themes(get-palettes());
@@ -19,6 +56,8 @@
   );
   $_primary: map.merge(map.get($_palettes, primary), $_rest);
   $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+  $_primary-reverse: map.merge(map.get($_palettes, tertiary), $_rest);
+  $_tertiary-reverse: map.merge(map.get($_palettes, tertiary), $_rest);
 
   $density: 0;
 
@@ -60,7 +99,47 @@
     )
   );
 
-  @return (light: $light-theme, dark: $dark-theme);
+  $light-theme-reverse: mat.define-theme(
+    (
+      color: (
+        theme-type: light,
+        primary: $_primary-reverse,
+        tertiary: $_tertiary-reverse,
+        use-system-variables: true,
+        system-variables-prefix: md-sys-color,
+      ),
+      typography: (
+        use-system-variables: true,
+        system-variables-prefix: md-sys-typescale,
+      ),
+      density: (
+        scale: $density,
+      ),
+    )
+  );
+
+  $dark-theme-reverse: mat.define-theme(
+    (
+      color: (
+        theme-type: dark,
+        primary: $_primary-reverse,
+        tertiary: $_tertiary-reverse,
+        use-system-variables: true,
+        system-variables-prefix: md-sys-color,
+      ),
+      typography: (
+        use-system-variables: true,
+        system-variables-prefix: md-sys-typescale,
+      ),
+      density: (
+        scale: $density,
+      ),
+    )
+  );
+
+
+
+  @return (light: $light-theme, dark: $dark-theme, light-reverse: $light-theme-reverse, dark-reverse: $dark-theme-reverse);
 }
 
 @function get-palettes() {

package/theming/_elder-scrollbar-theme.scss

@@ -45,7 +45,7 @@
 
     /* Handle on hover */
     ::-webkit-scrollbar-thumb:hover {
-      background: var(--md-sys-color-primary-fixed);
+      background: var(--md-sys-color-primary);
     }
   }
 }

package/theming/_elder-style-fixes.scss

@@ -118,32 +118,225 @@
 }
 
 @mixin _mat3-fixes($theme) {
-  --mat-sidenav-container-width: auto; // is set to around 300px by default in MAT 3 (MAT 2 was auto by default)
-  --mat-badge-small-size-text-size: 9px; // this is the mat2 setting, mat3 somehow sets this to 0, which hides the font, unclear why.
-  --mdc-dialog-container-shape: 16px; // make border-radius of dialog container smaller (default is 28px)
-  --mat-dialog-container-max-width: 80vw; // 80vw is mat 2 default, mat 3 default is very narrow: 560px;
-  --mat-toolbar-title-text-tracking: 0; // mat toolbar typography
-  --mat-toolbar-title-text-weight: 500; // mat toolbar typography
-  --mat-table-row-item-outline-color: var(--md-sys-color-outline-variant); // make table row border color lighter
-
-  .mat-toolbar {
-    &.mat-primary {
-      --mat-toolbar-container-text-color: var(--md-sys-color-on-primary);
-      --mat-toolbar-container-background-color: var(--md-sys-color-primary);
-      .mat-mdc-icon-button {
-        color: var(--md-sys-color-on-primary);
+  .mat-toolbar .mat-mdc-icon-button {
+    color: inherit;
+  }
+
+  // reduce border radius from overlay
+  //--mdc-dialog-container-shape: 4px;
+
+  // remove weird box shadow of card in overlay (Problem: Cards shouldn't be in overlay)
+  .mat-mdc-dialog-container .mat-mdc-card {
+    box-shadow: none;
+  }
+
+  // .mat-mdc-slide-toggle {
+  //   margin-bottom: 4px;
+  // }
+
+  // fix elder badge borders
+  elder-badge {
+    .mat-mdc-standard-chip .mat-mdc-chip-action::before {
+      //border-color: var(--md-sys-color-outline);
+      border: none;
+    }
+  }
+
+  // set bg darker
+  // ::ng-deep .mat-app-background.elder-light-theme,
+  // ::ng-deep .mat-app-background.elder-dark-theme {}
+  //background-color: red !important;
+  --mat-app-background-color: var(--md-sys-color-surface-container-highest) !important;
+
+  .mat-app-background {
+    display: block;
+  }
+
+  .mat-mdc-tab-group {
+    background-color: var(--md-sys-color-surface-container);
+  }
+
+  .legacy-layout-card {
+    background-color: var(--mdc-elevated-card-container-color);
+    border: var(--elder-border-light);
+    border-radius: var(--elder-border-radius-sm);
+    // pane style
+    border: none !important;
+    border-radius: var(--mdc-outlined-card-container-shape, var(--mat-app-corner-medium));
+    overflow: hidden;
+  }
+
+  .elder-card-header {
+    background-color: var(--md-sys-color-surface-container);
+  }
+
+  .elder-card-title {
+    padding-bottom: 0 !important;
+    margin-bottom: 6px !important;
+  }
+
+  .elder-card-header {
+    margin-bottom: 12px !important;
+  }
+
+  // remove extra background from drawer
+  .mat-drawer-container {
+    background-color: transparent !important;
+  }
+
+  // .mat-mdc-snack-bar-container .mat-mdc-snackbar-surface {
+  //   background-color: var(--md-sys-color-inverse-surface);
+  // }
+
+  // app header bg color
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    elder-app-header .mat-panel.mat-primary {
+      background-color: var(--md-sys-color-primary) !important;
+      color: var(--md-sys-color-on-primary) !important;
+    }
+
+    .mat-toolbar {
+      &.mat-primary {
+        --mat-toolbar-container-text-color: var(--md-sys-color-on-primary);
+        --mat-toolbar-container-background-color: var(--md-sys-color-primary);
+        .mat-mdc-icon-button {
+          color: var(--md-sys-color-on-primary);
+        }
+      }
+      &.mat-accent {
+        --mat-toolbar-container-text-color: var(--md-sys-color-on-tertiary);
+        --mat-toolbar-container-background-color: var(--md-sys-color-tertiary);
+        .mat-mdc-icon-button {
+          color: var(--md-sys-color-on-tertiary);
+        }
       }
     }
-    &.mat-accent {
-      --mat-toolbar-container-text-color: var(--md-sys-color-on-tertiary);
-      --mat-toolbar-container-background-color: var(--md-sys-color-tertiary);
-      .mat-mdc-icon-button {
-        color: var(--md-sys-color-on-tertiary);
+
+    .mat-toolbar.mat-primary,
+    .mat-toolbar.mat-accent {
+      // color all toolbars primary
+      background-color: var(--md-sys-color-primary) !important;
+      * {
+        color: white !important;
       }
     }
   }
 
-  .mat-toolbar .mat-mdc-icon-button {
-    color: inherit;
+  &.elder-dark-theme {
+    .mat-panel {
+      background-color: var(--elder-dark-gray) !important;
+    }
+
+    .mat-toolbar.mat-primary,
+    .mat-toolbar.mat-accent {
+      background-color: var(--elder-dark-gray) !important;
+      * {
+        color: white !important;
+      }
+      .elder-toolbar-main-nav-button .mat-icon {
+        color: var(--md-sys-color-primary) !important;
+      }
+    }
+
+    elder-app-header .mat-panel {
+      color: var(--md-sys-color-on-surface) !important;
+    }
+  }
+
+  /**************************************************************************
+    * Start cloudfiles import 1
+    *************************************************************************/
+    
+  // mat tab group shouldnt have a background color
+  .mat-mdc-tab-header {
+    background-color: var(--md-sys-color-surface-container-low);
+  }
+
+  .mat-mdc-tab-group {
+    background-color: transparent !important;
+  }
+
+  elder-data-toolbar {
+    display: block;
+    //background-color: var(--md-sys-color-surface-container);
+  }
+
+  elder-search-box .elder-search-box-field {
+    background-color: var(--md-sys-color-surface-container-lowest);
+    border: none !important;
+    margin-top: 12px !important;
+    margin-bottom: 12px !important;
+    border-radius: var(
+      --mdc-outlined-card-container-shape,
+      var(--mat-app-corner-medium)
+    ) !important;
+
+    &.mat-focused {
+      background-color: var(--md-sys-color-surface-container-lowest);
+    }
+  }
+
+  elder-search-box {
+    .mdc-notched-outline .mat-mdc-notch-piece {
+      border: none !important;
+    }
   }
+
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    elder-table {
+      --mat-table-background-color: var(--md-sys-color-surface-container);
+
+      .mat-mdc-row {
+        background-color: var(--md-sys-color-surface-container-lowest);
+      }
+
+      .mat-mdc-header-row {
+        background: var(--md-sys-color-surface-container-low) !important;
+      }
+    }
+
+    elder-table .legacy-layout-card {
+      background-color: var(--md-sys-color-surface-container-low) !important;
+    }
+  }
+
+  /**************************************************************************
+    * End cloudfiles import 1
+    *************************************************************************/
+
+  // Button colors
+  .mat-accent.mat-mdc-button-base {
+    --md-sys-color-tertiary: var(--md-sys-color-secondary);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-secondary);
+    --md-sys-color-tertiary-container: var(--md-sys-color-secondary-container);
+    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-secondary-container); 
+  }
+
+  // slide toggle colors
+  .mat-accent.mat-mdc-slide-toggle {
+    --md-sys-color-tertiary: var(--md-sys-color-secondary);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-secondary);
+    --md-sys-color-tertiary-container: var(--md-sys-color-secondary-container);
+    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-secondary-container);
+  }
+
+  .mat-accent.mat-mdc-standard-chip {
+    --md-sys-color-tertiary: var(--md-sys-color-secondary);
+    --md-sys-color-on-tertiary: var(--md-sys-color-on-secondary);
+    --md-sys-color-tertiary-container: var(--md-sys-color-secondary-container);
+    --md-sys-color-on-tertiary-container: var(--md-sys-color-on-secondary-container);
+  }
+
+  // // switch toggle (deactivaded)
+  // // --mdc-switch-track-shape:
+  // --mat-switch-with-icon-handle-size: 24px;
+  // --mdc-switch-track-height: 12px;
+  // //--mat-switch-unselected-with-icon-handle-horizontal-margin: 0 4px;
+  // --mat-switch-selected-with-icon-handle-horizontal-margin: 0 14px;
+  // --mdc-switch-track-width: 42px;
+  // --mat-switch-track-outline-width: 0;
+  // --mdc-switch-unselected-track-color: var(--md-sys-color-secondary);
+  // //--mdc-switch-unselected-handle-color: var(--md-sys-color-secondary-container);
 }

package/theming/_mixins.scss

@@ -17,7 +17,6 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    box-sizing: border-box;
   }
 
   .mat-mdc-form-field-icon-prefix > .mat-mdc-icon-button,

package/esm2022/lib/components/loader-background/loader-background.component.mjs

@@ -1,11 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i0 from "@angular/core";
-export class LoaderBackgroundComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LoaderBackgroundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: LoaderBackgroundComponent, isStandalone: true, selector: "elder-loader-background", ngImport: i0, template: "<div class=\"loader-background\">\n  <div class=\"spinner\">\n    <div class=\"bounce1 circle\"></div>\n    <div class=\"bounce2 logo\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"var(--md-sys-color-tertiary-fixed)\"\n        viewBox=\"0 0 284.34 272.09\"\n      >\n        <g>\n          <path\n            d=\"M141.92,11A125,125,0,0,1,247,68.35q4.46-2.76,8.67-5.93a135.38,135.38,0,0,0-227.43,0q4.21,3.17,8.67,5.93A125,125,0,0,1,141.92,11Z\"\n          />\n          <path\n            d=\"M267,136.05a125,125,0,1,1-246-31.53c-2.44-3.48-5.11-7-7.85-10.47a135.11,135.11,0,0,0-6.69,42c0,74.74,60.8,135.54,135.54,135.54s135.55-60.8,135.55-135.54a135.11,135.11,0,0,0-6.69-42c-2.74,3.52-5.41,7-7.85,10.47A124.65,124.65,0,0,1,267,136.05Z\"\n          />\n          <g id=\"main-logo\">\n            <path\n              d=\"M151.24,188.12a41.39,41.39,0,0,1-5.06-12.27H138.1A41.13,41.13,0,0,1,133,188.12a37.86,37.86,0,0,1-9.67,10.31l16.83,44.43,20.48-44.6A38,38,0,0,1,151.24,188.12Z\"\n            />\n            <path\n              d=\"M205.38,95.82c-3,.39-6.16.67-9.48,1v14.75H181V98.24c-16.68,2.2-32.74,7.35-36.46,25.82.34,12.92-.48,26.37,2.58,38.89A50.81,50.81,0,0,0,153.34,178a46.35,46.35,0,0,0,11.6,12.45,61.34,61.34,0,0,0,32.73,11.65c25.65,1.59,38.9-16.32,40.73-40.34,1-13.61-.4-27.57,3.28-40.71,7.17-25.61,32.12-42.78,41.25-67.76C263.36,75.89,235.14,91.93,205.38,95.82ZM191.3,184.64a33.51,33.51,0,1,1,33.5-33.51A33.51,33.51,0,0,1,191.3,184.64Z\"\n            />\n            <path\n              d=\"M79,95.82C49.2,91.93,21,75.89,1.4,53.31c9.14,25,34.09,42.15,41.26,67.76,3.68,13.14,2.23,27.1,3.27,40.71,1.84,24,15.09,41.93,40.73,40.34a61.58,61.58,0,0,0,32.45-11.43A46.73,46.73,0,0,0,131,178,50.57,50.57,0,0,0,137.21,163c3.06-12.52,2.24-26,2.58-38.89C134.18,96.2,100.46,98.63,79,95.82ZM93,184.64a33.51,33.51,0,1,1,33.5-33.51A33.5,33.5,0,0,1,93,184.64Z\"\n            />\n          </g>\n        </g>\n      </svg>\n    </div>\n    <div class=\"bounce3 circle\"></div>\n  </div>\n</div>\n", styles: [".loader-background{--loader-bg-surface: var(--md-sys-color-surface);--loader-bg-color: var(--md-sys-color-primary);--logo-color: var(--md-sys-color-tertiary-fixed);position:relative;height:100vh;width:100vw;margin:0;padding:0;background:linear-gradient(200deg,var(--loader-bg-surface) 40%,var(--loader-bg-color) 0%)}.spinner{position:absolute;top:50vh;left:45vw;width:200px;text-align:center}.logo{width:50px;height:48px;border-radius:100%;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.logo svg{fill:var(--logo-color)!important}.circle{border:1.5px solid var(--logo-color);height:25px;border-radius:50%;width:25px;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{animation-delay:-.32s}.spinner .bounce2{animation-delay:-.16s}@keyframes sk-bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: LoaderBackgroundComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'elder-loader-background', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"loader-background\">\n  <div class=\"spinner\">\n    <div class=\"bounce1 circle\"></div>\n    <div class=\"bounce2 logo\">\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"var(--md-sys-color-tertiary-fixed)\"\n        viewBox=\"0 0 284.34 272.09\"\n      >\n        <g>\n          <path\n            d=\"M141.92,11A125,125,0,0,1,247,68.35q4.46-2.76,8.67-5.93a135.38,135.38,0,0,0-227.43,0q4.21,3.17,8.67,5.93A125,125,0,0,1,141.92,11Z\"\n          />\n          <path\n            d=\"M267,136.05a125,125,0,1,1-246-31.53c-2.44-3.48-5.11-7-7.85-10.47a135.11,135.11,0,0,0-6.69,42c0,74.74,60.8,135.54,135.54,135.54s135.55-60.8,135.55-135.54a135.11,135.11,0,0,0-6.69-42c-2.74,3.52-5.41,7-7.85,10.47A124.65,124.65,0,0,1,267,136.05Z\"\n          />\n          <g id=\"main-logo\">\n            <path\n              d=\"M151.24,188.12a41.39,41.39,0,0,1-5.06-12.27H138.1A41.13,41.13,0,0,1,133,188.12a37.86,37.86,0,0,1-9.67,10.31l16.83,44.43,20.48-44.6A38,38,0,0,1,151.24,188.12Z\"\n            />\n            <path\n              d=\"M205.38,95.82c-3,.39-6.16.67-9.48,1v14.75H181V98.24c-16.68,2.2-32.74,7.35-36.46,25.82.34,12.92-.48,26.37,2.58,38.89A50.81,50.81,0,0,0,153.34,178a46.35,46.35,0,0,0,11.6,12.45,61.34,61.34,0,0,0,32.73,11.65c25.65,1.59,38.9-16.32,40.73-40.34,1-13.61-.4-27.57,3.28-40.71,7.17-25.61,32.12-42.78,41.25-67.76C263.36,75.89,235.14,91.93,205.38,95.82ZM191.3,184.64a33.51,33.51,0,1,1,33.5-33.51A33.51,33.51,0,0,1,191.3,184.64Z\"\n            />\n            <path\n              d=\"M79,95.82C49.2,91.93,21,75.89,1.4,53.31c9.14,25,34.09,42.15,41.26,67.76,3.68,13.14,2.23,27.1,3.27,40.71,1.84,24,15.09,41.93,40.73,40.34a61.58,61.58,0,0,0,32.45-11.43A46.73,46.73,0,0,0,131,178,50.57,50.57,0,0,0,137.21,163c3.06-12.52,2.24-26,2.58-38.89C134.18,96.2,100.46,98.63,79,95.82ZM93,184.64a33.51,33.51,0,1,1,33.5-33.51A33.5,33.5,0,0,1,93,184.64Z\"\n            />\n          </g>\n        </g>\n      </svg>\n    </div>\n    <div class=\"bounce3 circle\"></div>\n  </div>\n</div>\n", styles: [".loader-background{--loader-bg-surface: var(--md-sys-color-surface);--loader-bg-color: var(--md-sys-color-primary);--logo-color: var(--md-sys-color-tertiary-fixed);position:relative;height:100vh;width:100vw;margin:0;padding:0;background:linear-gradient(200deg,var(--loader-bg-surface) 40%,var(--loader-bg-color) 0%)}.spinner{position:absolute;top:50vh;left:45vw;width:200px;text-align:center}.logo{width:50px;height:48px;border-radius:100%;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.logo svg{fill:var(--logo-color)!important}.circle{border:1.5px solid var(--logo-color);height:25px;border-radius:50%;width:25px;display:inline-block;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.spinner .bounce1{animation-delay:-.32s}.spinner .bounce2{animation-delay:-.16s}@keyframes sk-bouncedelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}\n"] }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGVyLWJhY2tncm91bmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWxkZXJieXRlL25neC1zdGFydGVyL3NyYy9saWIvY29tcG9uZW50cy9sb2FkZXItYmFja2dyb3VuZC9sb2FkZXItYmFja2dyb3VuZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lbGRlcmJ5dGUvbmd4LXN0YXJ0ZXIvc3JjL2xpYi9jb21wb25lbnRzL2xvYWRlci1iYWNrZ3JvdW5kL2xvYWRlci1iYWNrZ3JvdW5kLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUE7O0FBVWxFLE1BQU0sT0FBTyx5QkFBeUI7OEdBQXpCLHlCQUF5QjtrR0FBekIseUJBQXlCLG1GQ1Z0Qyx3K0RBaUNBOzsyRkR2QmEseUJBQXlCO2tCQVJyQyxTQUFTOytCQUNFLHlCQUF5QixjQUN2QixJQUFJLFdBQ1AsRUFBRSxtQkFHTSx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2VsZGVyLWxvYWRlci1iYWNrZ3JvdW5kJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlVXJsOiAnLi9sb2FkZXItYmFja2dyb3VuZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9sb2FkZXItYmFja2dyb3VuZC5jb21wb25lbnQuc2NzcycsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBMb2FkZXJCYWNrZ3JvdW5kQ29tcG9uZW50IHt9XG4iLCI8ZGl2IGNsYXNzPVwibG9hZGVyLWJhY2tncm91bmRcIj5cbiAgPGRpdiBjbGFzcz1cInNwaW5uZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiYm91bmNlMSBjaXJjbGVcIj48L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiYm91bmNlMiBsb2dvXCI+XG4gICAgICA8c3ZnXG4gICAgICAgIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIlxuICAgICAgICBmaWxsPVwidmFyKC0tbWQtc3lzLWNvbG9yLXRlcnRpYXJ5LWZpeGVkKVwiXG4gICAgICAgIHZpZXdCb3g9XCIwIDAgMjg0LjM0IDI3Mi4wOVwiXG4gICAgICA+XG4gICAgICAgIDxnPlxuICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICBkPVwiTTE0MS45MiwxMUExMjUsMTI1LDAsMCwxLDI0Nyw2OC4zNXE0LjQ2LTIuNzYsOC42Ny01LjkzYTEzNS4zOCwxMzUuMzgsMCwwLDAtMjI3LjQzLDBxNC4yMSwzLjE3LDguNjcsNS45M0ExMjUsMTI1LDAsMCwxLDE0MS45MiwxMVpcIlxuICAgICAgICAgIC8+XG4gICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgIGQ9XCJNMjY3LDEzNi4wNWExMjUsMTI1LDAsMSwxLTI0Ni0zMS41M2MtMi40NC0zLjQ4LTUuMTEtNy03Ljg1LTEwLjQ3YTEzNS4xMSwxMzUuMTEsMCwwLDAtNi42OSw0MmMwLDc0Ljc0LDYwLjgsMTM1LjU0LDEzNS41NCwxMzUuNTRzMTM1LjU1LTYwLjgsMTM1LjU1LTEzNS41NGExMzUuMTEsMTM1LjExLDAsMCwwLTYuNjktNDJjLTIuNzQsMy41Mi01LjQxLDctNy44NSwxMC40N0ExMjQuNjUsMTI0LjY1LDAsMCwxLDI2NywxMzYuMDVaXCJcbiAgICAgICAgICAvPlxuICAgICAgICAgIDxnIGlkPVwibWFpbi1sb2dvXCI+XG4gICAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgICBkPVwiTTE1MS4yNCwxODguMTJhNDEuMzksNDEuMzksMCwwLDEtNS4wNi0xMi4yN0gxMzguMUE0MS4xMyw0MS4xMywwLDAsMSwxMzMsMTg4LjEyYTM3Ljg2LDM3Ljg2LDAsMCwxLTkuNjcsMTAuMzFsMTYuODMsNDQuNDMsMjAuNDgtNDQuNkEzOCwzOCwwLDAsMSwxNTEuMjQsMTg4LjEyWlwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgZD1cIk0yMDUuMzgsOTUuODJjLTMsLjM5LTYuMTYuNjctOS40OCwxdjE0Ljc1SDE4MVY5OC4yNGMtMTYuNjgsMi4yLTMyLjc0LDcuMzUtMzYuNDYsMjUuODIuMzQsMTIuOTItLjQ4LDI2LjM3LDIuNTgsMzguODlBNTAuODEsNTAuODEsMCwwLDAsMTUzLjM0LDE3OGE0Ni4zNSw0Ni4zNSwwLDAsMCwxMS42LDEyLjQ1LDYxLjM0LDYxLjM0LDAsMCwwLDMyLjczLDExLjY1YzI1LjY1LDEuNTksMzguOS0xNi4zMiw0MC43My00MC4zNCwxLTEzLjYxLS40LTI3LjU3LDMuMjgtNDAuNzEsNy4xNy0yNS42MSwzMi4xMi00Mi43OCw0MS4yNS02Ny43NkMyNjMuMzYsNzUuODksMjM1LjE0LDkxLjkzLDIwNS4zOCw5NS44MlpNMTkxLjMsMTg0LjY0YTMzLjUxLDMzLjUxLDAsMSwxLDMzLjUtMzMuNTFBMzMuNTEsMzMuNTEsMCwwLDEsMTkxLjMsMTg0LjY0WlwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgICAgPHBhdGhcbiAgICAgICAgICAgICAgZD1cIk03OSw5NS44MkM0OS4yLDkxLjkzLDIxLDc1Ljg5LDEuNCw1My4zMWM5LjE0LDI1LDM0LjA5LDQyLjE1LDQxLjI2LDY3Ljc2LDMuNjgsMTMuMTQsMi4yMywyNy4xLDMuMjcsNDAuNzEsMS44NCwyNCwxNS4wOSw0MS45Myw0MC43Myw0MC4zNGE2MS41OCw2MS41OCwwLDAsMCwzMi40NS0xMS40M0E0Ni43Myw0Ni43MywwLDAsMCwxMzEsMTc4LDUwLjU3LDUwLjU3LDAsMCwwLDEzNy4yMSwxNjNjMy4wNi0xMi41MiwyLjI0LTI2LDIuNTgtMzguODlDMTM0LjE4LDk2LjIsMTAwLjQ2LDk4LjYzLDc5LDk1LjgyWk05MywxODQuNjRhMzMuNTEsMzMuNTEsMCwxLDEsMzMuNS0zMy41MUEzMy41LDMzLjUsMCwwLDEsOTMsMTg0LjY0WlwiXG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvZz5cbiAgICAgICAgPC9nPlxuICAgICAgPC9zdmc+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImJvdW5jZTMgY2lyY2xlXCI+PC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=