@elderbyte/ngx-starter 19.1.0-beta.0 → 19.1.0-beta.10

package/theming/{style-tweaks/_elder-style-fixes.scss → base/_elder-fixes-base.scss}

@@ -1,8 +1,8 @@
 @use '@angular/material' as mat;
-@use './elder-style-tweak-mixins' as mixins;
+@use './elder-base-mixins' as mixins;
 @use 'sass:map';
 
-@mixin elder-style-fixes($theme) {
+@mixin elder-fixes-base($theme) {
   @include _ng-style-fixes;
   @include _mat-style-fixes($theme);
   @include _mat3-fixes($theme);
@@ -130,9 +130,8 @@
 
   .legacy-layout-card {
     background-color: var(--mdc-elevated-card-container-color);
-    //border: var(--elder-border-light);
     border-radius: var(--elder-border-radius-sm);
-    box-shadow: var(--mdc-elevated-card-container-elevation);
+    box-shadow: var(--mdc-elevated-card-container-elevation, var(--mat-sys-level1));
     overflow: hidden; // this might cause issues, but is probably correct..
   }
 
@@ -178,7 +177,14 @@
     }
   }
 
+  &.elder-light-theme {
+    .mat-toolbar.mat-primary .mat-mdc-input-element::placeholder {
+      color: var(--md-sys-color-inverse-on-surface) !important; // fix placeholder color
+    }
+  }
+
   &.elder-dark-theme {
+    .mat-toolbar,
     .mat-toolbar.mat-primary,
     .mat-toolbar.mat-accent {
       background-color: var(--elder-dark-gray) !important;
@@ -298,18 +304,18 @@
   }
 
   // round input fields
-  &.deactivated {
-    elder-search-box .elder-search-box-field,
-    .mat-toolbar .mat-mdc-form-field {
-      background-color: var(--md-sys-color-surface-container-low);
-      border-radius: 24px !important;
-
-      // remove border from notch piece on input fields
-      .mat-mdc-notch-piece {
-        border-width: 0 !important;
-      }
-    }
-  }
+  // &.deactivated {
+  //   elder-search-box .elder-search-box-field,
+  //   .mat-toolbar .mat-mdc-form-field {
+  //     background-color: var(--md-sys-color-surface-container-low);
+  //     border-radius: 24px !important;
+
+  //     // remove border from notch piece on input fields
+  //     .mat-mdc-notch-piece {
+  //       border-width: 0 !important;
+  //     }
+  //   }
+  // }
 
   .mat-toolbar .mat-mdc-form-field {
     background-color: var(--elder-lightened-transparent-bg);
@@ -320,10 +326,6 @@
       --mdc-outlined-text-field-input-text-color: var(--md-sys-color-inverse-on-surface) !important;
       --mdc-outlined-text-field-caret-color: var(--md-sys-color-inverse-on-surface) !important;
     }
-    // * {
-    //   color: var(--md-sys-color-inverse-on-surface);
-    //   border-color: var(--md-sys-color-inverse-on-surface);
-    // }
   }
 
   .elder-pane {
@@ -374,4 +376,14 @@
       caret-color: currentColor;
     }
   }
+
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    --mdc-linear-progress-track-color: var(--elder-color-highlight-variant);
+  }
+
+  // disable icon button overflow
+  // .mat-mdc-icon-button {
+  //   overflow: hidden;
+  // }
 }

package/theming/{style-tweaks/_elder-form.scss → base/_elder-form-base.scss}

@@ -1,8 +1,8 @@
-@use './elder-style-tweak-mixins' as mixins;
+@use './elder-base-mixins' as mixins;
 @use '@angular/material' as mat;
 @use 'sass:map';
 
-@mixin elder-form-styles($theme) {
+@mixin elder-form-base($theme) {
   $common-sizes: map.get($theme, elder, common-sizes);
   $form-field-density: map.get($theme, elder, density, form-field);
 
@@ -325,16 +325,19 @@
   .elder-round-form-field {
     border: none;
     border-radius: 24px;
-    background-color: var(--md-sys-color-surface-container-low);
+    background-color: var(--md-sys-color-surface-container);
+    cursor: text;
+    outline: var(--elder-round-form-field-outline);
 
     .mdc-notched-outline .mat-mdc-notch-piece {
       border: none !important;
     }
     &:hover {
-      outline: solid 1px var(--md-sys-color-primary-container);
+      background-color: var(--md-sys-color-surface-container-high);
     }
     &.mat-focused {
       outline: solid 1px var(--md-sys-color-primary);
+      background-color: var(--md-sys-color-surface-container-low);
     }
   }
 }

package/theming/{style-tweaks/_elder-color-variants.scss → base/_elder-m2-legacy-base.scss}

@@ -13,7 +13,7 @@
 // "mat.color-variants-backwards-compatibility()"
 // But can be customized in this mixin below:
 
-@mixin elder-color-variants($theme) {
+@mixin elder-m2-legacy-base($theme) {
   // Apply primary color variants for button components
   mat-chip-option[color='primary'] {
     @include mat.chips-color($theme, $color-variant: primary);
@@ -28,4 +28,10 @@
   mat-chip-option[color='accent'] {
     @include mat.chips-color($theme, $color-variant: tertiary);
   }
+
+  // &.elder-light-theme {
+  //   .mat-accent.mat-mdc-standard-chip {
+  //     background-color: var(--md-sys-color-tertiary-fixed) !important;
+  //   }
+  // }
 }

package/theming/components/_elder-chip-theme.scss

@@ -0,0 +1,158 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../abstracts/elder-scss-variables' as config;
+
+$colorStateNone: var(--elder-chip-color-state-none);
+$colorStateOpen: var(--elder-chip-color-state-open);
+
+$colorStateInProgress: var(--elder-chip-color-state-in-progress);
+$colorStateCompleted: var(--elder-chip-color-state-completed);
+$colorStateWarn: var(--elder-chip-color-state-warn);
+$colorStateError: var(--elder-chip-color-state-error);
+$colorStateOther: var(--elder-chip-color-state-other);
+
+$level-low: $colorStateCompleted;
+$level-medium: $colorStateInProgress;
+$level-high: $colorStateWarn;
+$level-critical: $colorStateError;
+
+@mixin theme($config-or-theme) {
+  .mat-mdc-chip.mat-mdc-chip {
+    --mdc-chip-elevated-container-color: rgba(143, 143, 143, 0.2);
+    background-color: var(--mdc-chip-elevated-container-color);
+
+    &.elder-chip-color-primary,
+    &.color-primary {
+      background-color: var(--md-sys-color-primary-container);
+    }
+
+    &.elder-chip-color-primary,
+    &.color-primary {
+      @include _theme_color_chip(
+        var(--md-sys-color-primary-container),
+        var(--md-sys-color-primary),
+        var(--md-sys-color-on-primary)
+      );
+    }
+
+    &.elder-chip-color-accent,
+    &.elder-chip-color-tertiary,
+    &.color-accent {
+      @include _theme_color_chip(
+        var(--md-sys-color-tertiary-container),
+        var(--md-sys-color-tertiary),
+        var(--md-sys-color-on-tertiary)
+      );
+    }
+
+    &.elder-chip-color-warn,
+    &.color-warn {
+      @include _theme_color_chip(
+        var(--md-sys-color-error-container),
+        var(--md-sys-color-error),
+        var(--md-sys-color-on-error)
+      );
+    }
+
+    &.elder-chip-state-none,
+    &.none {
+      @include _outlined-label-chip($colorStateNone);
+    }
+
+    &.elder-chip-state-open,
+    &.state-open {
+      @include _outlined-label-chip($colorStateOpen);
+    }
+
+    &.elder-chip-state-in-progress,
+    &.state-in-progress {
+      @include _outlined-label-chip($colorStateInProgress);
+    }
+
+    &.elder-chip-state-completed,
+    &.state-completed {
+      @include _outlined-label-chip($colorStateCompleted);
+    }
+
+    &.elder-chip-state-warn,
+    &.state-warn {
+      @include _outlined-label-chip($colorStateWarn);
+    }
+
+    &.elder-chip-state-error,
+    &.state-error {
+      @include _outlined-label-chip($colorStateError);
+    }
+
+    &.elder-chip-state-other,
+    &.state-other {
+      @include _outlined-label-chip($colorStateOther);
+    }
+
+    // ---
+
+    &.elder-chip-level-low,
+    &.level-low {
+      @include _outlined-label-chip($level-low);
+    }
+    &.elder-chip-level-medium,
+    &.level-medium {
+      @include _outlined-label-chip($level-medium);
+    }
+    &.elder-chip-level-high,
+    &.level-high {
+      @include _outlined-label-chip($level-high);
+    }
+    &.elder-chip-level-critical,
+    &.level-critical {
+      @include _outlined-label-chip($level-critical);
+    }
+
+    // &.elder-chip-state-none,
+    // &.elder-chip-state-open,
+    // &.elder-chip-state-in-progress,
+    // &.elder-chip-state-completed,
+    // &.elder-chip-state-warn,
+    // &.elder-chip-state-error,
+    // &.elder-chip-state-other,
+    // &.elder-chip-level-low,
+    // &.elder-chip-level-medium,
+    // &.elder-chip-level-high,
+    // &.elder-chip-level-critical {
+    //   color: red !important;
+    //   .mat-mdc-chip-action-label,
+    //   .mat-mdc-chip-avatar {
+    //     color: red !important;
+    //   }
+    // }
+  }
+}
+
+@mixin _theme_color_chip($color1, $color2, $color3) {
+  &.legacy {
+    background-color: $color2;
+    .mat-mdc-chip-action-label,
+    .mat-mdc-chip-avatar,
+    .mdc-evolution-chip__checkmark {
+      color: $color3;
+    }
+  }
+  &.md3 {
+    background-color: $color1;
+    border-color: $color2;
+    .mat-mdc-chip-action-label,
+    .mat-mdc-chip-avatar,
+    .mdc-evolution-chip__checkmark {
+      //color: $color2;
+    }
+  }
+}
+
+@mixin _outlined-label-chip($color1) {
+  background-color: $color1;
+  // border-color: $color1;
+  // .mat-mdc-chip-action-label,
+  // .mat-mdc-chip-avatar {
+  //   color: $color1;
+  // }
+}

package/theming/{utility-classes/_elder-color-helpers.scss → utilities/_elder-color-utils.scss}

@@ -1,4 +1,4 @@
-@mixin elder-color-helpers() {
+@mixin elder-color-utils() {
   $color-variables: (
     'background': var(--md-sys-color-background),
     'error': var(--md-sys-color-error),
@@ -58,6 +58,10 @@
     }
   }
 
+  .elder-bg-transparent {
+    background-color: transparent;
+  }
+
   // text colors
   @each $name, $value in $color-variables {
     .elder-text-#{$name} {
@@ -65,13 +69,6 @@
     }
   }
 
-  // border colors
-  @each $name, $value in $color-variables {
-    .elder-border-#{$name} {
-      border-color: #{$value};
-    }
-  }
-
   .elder-pane-bg-color {
     background-color: var(--elder-pane-bg-color);
   }

package/theming/utilities/_elder-common-utils.scss

@@ -0,0 +1,17 @@
+@mixin elder-common-utils() {
+    .border-none {
+        border: none;
+    }
+    .display-none {
+        display: none;
+    }
+    .text-center {
+        text-align: center;
+    }
+    .overflow-hidden {
+        overflow: hidden;
+    }
+    .overflow-auto {
+        overflow: auto;
+    }
+}

package/theming/{utility-classes/_elder-flex-layout.scss → utilities/_elder-flex-layout-utils.scss}

@@ -1,4 +1,4 @@
-@use '../system/elder-config' as settings;
+@use '../abstracts/elder-scss-variables' as settings;
 @use 'sass:map';
 
 /***************************************************************************
@@ -33,7 +33,7 @@ $media: (
   flex: 1 1 100%;
 }
 
-@mixin elder-flex-layout($theme) {
+@mixin elder-flex-layout-utils($theme) {
   $common-sizes: map.get($theme, elder, common-sizes);
 
   /***************************************************************************
@@ -62,10 +62,6 @@ $media: (
     width: 100%;
   }
 
-  .min-h-full {
-    min-height: 100%;
-  }
-
   /***************************************************************************
    *                                                                         *
    * Flex Layout Row                                                         *
@@ -209,6 +205,10 @@ $media: (
     flex: 0 1 auto; // No grow, shrink
   }
 
+  .flex-initial-100 {
+    flex: 1 1 100%;
+  }
+
   .flex-none {
     flex: none;
   }
@@ -315,6 +315,108 @@ $media: (
     }
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * Flex Item Grow/Shrink                                                   *
+   *                                                                         *
+   **************************************************************************/
+
+   .max-w-100 {
+    max-width: 100%;
+  }
+
+  .max-w-90 {
+    max-width: 90%;
+  }
+
+  .max-w-80 {
+    max-width: 80%;
+  }
+
+  .max-w-70 {
+    max-width: 70%;
+  }
+
+  .max-w-60 {
+    max-width: 60%;
+  }
+
+  .max-w-50 {
+    max-width: 50%;
+  }
+
+  .max-w-40 {
+    max-width: 40%;
+  }
+
+  .max-w-30 {
+    max-width: 30%;
+  }
+
+  .max-w-25 {
+    max-width: 25%;
+  }
+
+  .max-w-20 {
+    max-width: 20%;
+  }
+
+  .max-w-15 {
+    max-width: 15%;
+  }
+
+  .max-w-10 {
+    max-width: 10%;
+  }
+
+  .max-h-100 {
+    max-height: 100%;
+  }
+
+  .max-h-90 {
+    max-height: 90%;
+  }
+
+  .max-h-80 {
+    max-height: 80%;
+  }
+
+  .max-h-70 {
+    max-height: 70%;
+  }
+
+  .max-h-60 {
+    max-height: 60%;
+  }
+
+  .max-h-50 {
+    max-height: 50%;
+  }
+
+  .max-h-40 {
+    max-height: 40%;
+  }
+
+  .max-h-30 {
+    max-height: 30%;
+  }
+
+  .max-h-25 {
+    max-height: 25%;
+  }
+
+  .max-h-20 {
+    max-height: 20%;
+  }
+
+  .max-h-15 {
+    max-height: 15%;
+  }
+
+  .max-h-10 {
+    max-height: 10%;
+  }
+
   /***************************************************************************
    *                                                                         *
    * Flex Item Grow/Shrink                                                   *

package/theming/{utility-classes/_elder-layout-system.scss → utilities/_elder-layout-utils.scss}

@@ -1,7 +1,7 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 
-@mixin elder-layout-system($theme) {
+@mixin elder-layout-utils($theme) {
   $common-sizes: map.get($theme, elder, common-sizes);
 
   /***************************************************************************
@@ -23,6 +23,10 @@
    *                                                                         *
    **************************************************************************/
 
+  .p-pane {
+    padding: var(--elder-pane-padding);
+  }
+
   .p-xs {
     padding: $xs;
   }
@@ -248,34 +252,25 @@
     margin-right: auto;
   }
 
-  .m-0 {
-    margin: 0;
-  }
-
-  .mt-0 {
-    margin-top: 0;
+  .my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
   }
 
-  .mb-0 {
-    margin-bottom: 0;
+  .mt-auto {
+    margin-top: auto;
   }
 
-  .mr-0 {
-    margin-right: 0;
+  .mb-auto {
+    margin-bottom: auto;
   }
 
-  .ml-0 {
-    margin-left: 0;
-  }
-
-  .mx-0 {
-    margin-left: 0;
-    margin-right: 0;
+  .mr-auto {
+    margin-right: auto;
   }
 
-  .my-0 {
-    margin-top: 0;
-    margin-bottom: 0;
+  .ml-auto {
+    margin-left: auto;
   }
 
   .m-xs {
@@ -458,6 +453,36 @@
     margin-bottom: $xxl;
   }
 
+  .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;
+  }
+
   /***************************************************************************
    *                                                                         *
    * Layout Widths                                                           *

package/theming/utilities/_elder-typography-utils.scss

@@ -0,0 +1,61 @@
+@mixin elder-typography-utils() {
+    .text-display-large {
+        font: var(--md-sys-typescale-display-large);
+    }
+
+    .text-display-medium {
+        font: var(--md-sys-typescale-display-medium);
+    }
+
+    .text-display-small {
+        font: var(--md-sys-typescale-display-small);
+    }
+
+    .text-headline-large {
+        font: var(--md-sys-typescale-headline-large);
+    }
+
+    .text-headline-medium {
+        font: var(--md-sys-typescale-headline-medium);
+    }
+
+    .text-headline-small {
+        font: var(--md-sys-typescale-headline-small);
+    }
+
+    .text-title-large {
+        font: var(--md-sys-typescale-title-large);
+    }
+
+    .text-title-medium {
+        font: var(--md-sys-typescale-title-medium);
+    }
+
+    .text-title-small {
+        font: var(--md-sys-typescale-title-small);
+    }
+
+    .text-label-large {
+        font: var(--md-sys-typescale-label-large);
+    }
+
+    .text-label-medium {
+        font: var(--md-sys-typescale-label-medium);
+    }
+
+    .text-label-small {
+        font: var(--md-sys-typescale-label-small);
+    }
+
+    .text-body-large {
+        font: var(--md-sys-typescale-body-large);
+    }
+
+    .text-body-medium {
+        font: var(--md-sys-typescale-body-medium);
+    }
+
+    .text-body-small {
+        font: var(--md-sys-typescale-body-small);
+    }
+}

package/lib/components/layout/pane-container/pane-container.component.d.ts

@@ -1,11 +0,0 @@
-import { QueryList } from '@angular/core';
-import { ElderPaneComponent } from '../public_api';
-import * as i0 from "@angular/core";
-export declare class ElderPaneContainerComponent {
-    class: string;
-    children: QueryList<ElderPaneComponent>;
-    hasChild: boolean;
-    ngAfterContentInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderPaneContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderPaneContainerComponent, "elder-pane-container", never, {}, {}, ["children"], ["elder-pane", "*"], true, never>;
-}

package/lib/components/m3-sidenav/m3-sidenav.component.d.ts

@@ -1,5 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class M3SidenavComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<M3SidenavComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<M3SidenavComponent, "elder-m3-sidenav", never, {}, {}, never, never, true, never>;
-}