@elderbyte/ngx-starter 19.1.0-beta.8 → 19.1.0

package/src/lib/components/chips/_elder-chip-theme.scss

@@ -1,129 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-$colorStateNone: rgb(143, 143, 143);
-$colorStateOpen: rgb(199, 199, 199);
-
-$colorStateInProgress: rgb(33, 150, 243);
-$colorStateCompleted: rgb(4, 170, 109);
-$colorStateWarn: rgb(255, 145, 0);
-$colorStateError: rgb(255, 0, 0);
-$colorStateOther: rgb(121, 73, 252);
-
-$level-low: rgb(4, 170, 109);
-$level-medium: rgb(33, 150, 243);
-$level-high: rgb(255, 145, 0);
-$level-critical: rgb(255, 0, 0);
-
-@mixin theme($config-or-theme) {
-  .mat-mdc-chip.elder-chip-label {
-    --mdc-chip-elevated-container-color: rgba(143, 143, 143, 0.2);
-    background-color: var(--mdc-chip-elevated-container-color);
-
-    &.color-primary {
-      background-color: var(--md-sys-color-primary-container);
-    }
-
-    &.color-primary {
-      @include _theme_color_chip(
-        var(--md-sys-color-primary-container),
-        var(--md-sys-color-primary),
-        var(--md-sys-color-on-primary)
-      );
-    }
-
-    &.color-accent {
-      @include _theme_color_chip(
-        var(--md-sys-color-tertiary-container),
-        var(--md-sys-color-tertiary),
-        var(--md-sys-color-on-tertiary)
-      );
-    }
-
-    &.color-warn {
-      @include _theme_color_chip(
-        var(--md-sys-color-error-container),
-        var(--md-sys-color-error),
-        var(--md-sys-color-on-error)
-      );
-    }
-
-    &.none {
-      background-color: rgba($colorStateNone, 0.2);
-      border-color: $colorStateNone;
-      background-color: var(--md-sys-color-surface-variant);
-    }
-
-    &.state-open {
-      background-color: rgba($colorStateOpen, 0.2);
-      border-color: var(--md-sys-color-surface-variant);
-      .mat-mdc-chip-avatar {
-        color: var(--md-sys-color-surface-variant);
-      }
-      background-color: var(--md-sys-color-surface-container);
-    }
-
-    &.state-in-progress {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-primary-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-on-primary-container);
-    }
-    &.state-completed {
-      --mdc-chip-elevated-container-color: var(--mdc-chip-elevated-selected-container-color);
-      --mdc-chip-label-text-color: var(--mdc-chip-elevated-on-container-color);
-    }
-    &.state-warn {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-tertiary-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-tertiary-on-container);
-    }
-    &.state-error {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-error-container);
-      --mdc-chip-label-text-color: var(--md-sys-color-error-on-container);
-    }
-    &.state-other {
-      --mdc-chip-elevated-container-color: var(--md-sys-color-primary-fixed-dim);
-      --mdc-chip-label-text-color: var(--md-sys-color-on-primary-fixed);
-    }
-
-    &.level-low {
-      @include _outlined-label-chip($level-low);
-    }
-    &.level-medium {
-      @include _outlined-label-chip($level-medium);
-    }
-    &.level-high {
-      @include _outlined-label-chip($level-high);
-    }
-    &.level-critical {
-      @include _outlined-label-chip($level-critical);
-    }
-  }
-}
-
-@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: rgba($color1, 0.2);
-  border-color: $color1;
-  .mat-mdc-chip-action-label,
-  .mat-mdc-chip-avatar {
-    color: $color1;
-  }
-}

package/src/lib/components/navigation/nav/_elder-nav-theme.scss

@@ -1,66 +0,0 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  @include _group-theme($theme);
-  @include _link-theme($theme);
-}
-
-@mixin _group-theme($theme) {
-  .nav-group-button:hover {
-    background-color: var(--md-sys-color-surface-container-high);
-    transition: background-color 0.5s;
-  }
-
-  .nav-group-button:not(.nav-group-button-open) {
-    .mat-icon {
-      color: var(--md-sys-color-on-surface);
-    }
-  }
-
-  .nav-group-button-active {
-    background-color: var(--md-sys-color-primary-fixed);
-  }
-
-  .nav-group-button-open {
-    padding-left: 11px !important; // -5 to counter border-left
-    .mat-icon {
-      color: var(--md-sys-color-primary);
-    }
-  }
-}
-
-@mixin _link-theme($theme) {
-  .nav-link.nav-link-clickable {
-    cursor: pointer;
-    &:hover {
-      background-color: var(--md-sys-color-surface-container-high);
-      color: var(--md-sys-color-on-surface);
-      .mat-icon {
-        color: var(--md-sys-color-on-surface);
-      }
-    }
-  }
-
-  .nav-link.nav-link-disabled {
-    cursor: default;
-  }
-
-  .nav-link:hover {
-    background-color: var(--md-sys-color-surface-container-low);
-  }
-
-  .nav-link.nav-link-active {
-    background-color: var(--md-sys-color-surface-container-highest);
-    color: var(--md-sys-color-on-surface-container);
-    .mat-icon {
-      color: var(--md-sys-color-on-teriary);
-    }
-  }
-
-  .nav-link.nav-link-inactive {
-    color: var(--md-sys-color-on-surface);
-    .mat-icon {
-      color: var(--md-sys-color-on-surface);
-    }
-  }
-}

package/src/lib/components/select/_elder-select-base.scss

@@ -1,28 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin typography($typography-config) {
-  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
-
-  $icon-size: 16px;
-  $arrow-icon-size: 24px;
-
-  .elder-input-prefix-icon-container {
-    height: $line-height-em !important;
-    min-width: $line-height-em !important;
-  }
-
-  .elder-select-arrow {
-    width: $arrow-icon-size !important;
-    height: $arrow-icon-size !important;
-    line-height: $arrow-icon-size !important;
-    font-size: $arrow-icon-size !important;
-  }
-
-  .elder-icon-small {
-    width: $icon-size !important;
-    height: $icon-size !important;
-    line-height: $icon-size !important;
-    font-size: $icon-size !important;
-  }
-}

package/theming/style-tweaks/_elder-color-variants.scss

@@ -1,31 +0,0 @@
-@use '@angular/material' as mat;
-
-/**
- * Source: https://material.angular.io/guide/theming#using-component-color-variants
- * 
- * This applies custom color variants for the legacy M2 color system for usage in M3.
- * There are different mixins for many components (not all).
- * You can find the list of the components and there supported color variants here:
- * https://material.angular.io/guide/theming#using-component-color-variants
- */
-
-// Custom Color variants for m3. They can already be provided through
-// "mat.color-variants-backwards-compatibility()"
-// But can be customized in this mixin below:
-
-@mixin elder-color-variants($theme) {
-  // Apply primary color variants for button components
-  mat-chip-option[color='primary'] {
-    @include mat.chips-color($theme, $color-variant: primary);
-  }
-
-  // Apply secondary color variants for button components
-  mat-chip-option[color='danger'] {
-    @include mat.chips-color($theme, $color-variant: error);
-  }
-
-  // Apply tertiary color variants for button components
-  mat-chip-option[color='accent'] {
-    @include mat.chips-color($theme, $color-variant: tertiary);
-  }
-}

package/theming/style-tweaks/_elder-component-themes.scss

@@ -1,22 +0,0 @@
-@use '../../src/lib/components/chips/elder-chip-theme' as elder-chip;
-@use '../../src/lib/components/data-view/table/elder-table/elder-table.component' as elder-table;
-@use '../../src/lib/components/navigation/nav/elder-nav-theme' as elder-nav;
-@use '../../src/lib/components/data-view/grid/elder-grid/elder-grid.component' as elder-grid;
-@use '../../src/lib/components/card-organizer/card-stack/elder-card-stack.component' as
-  elder-card-stack;
-@use '../../src/lib/components/select/single/elder-select/elder-select.component' as elder-select;
-@use '../../src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component'
-  as elder-multi-select-chips;
-@use '../../src/lib/components/select/multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component'
-  as elder-multi-select-chip-options;
-
-@mixin theme($theme) {
-  @include elder-chip.theme($theme);
-  @include elder-nav.theme($theme);
-  @include elder-select.theme($theme);
-  @include elder-multi-select-chips.theme($theme);
-  @include elder-multi-select-chip-options.theme($theme);
-  @include elder-table.theme($theme);
-  @include elder-card-stack.theme($theme);
-  @include elder-grid.theme($theme);
-}

package/theming/style-tweaks/_elder-reset.scss

@@ -1,13 +0,0 @@
-/***************************************************************************
- *                                                                         *
- * CSS reset                                                               *
- *                                                                         *
- **************************************************************************/
-
-@mixin elder-reset() {
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-}

package/theming/style-tweaks/_elder-style-fixes.scss

@@ -1,387 +0,0 @@
-@use '@angular/material' as mat;
-@use './elder-style-tweak-mixins' as mixins;
-@use 'sass:map';
-
-@mixin elder-style-fixes($theme) {
-  @include _ng-style-fixes;
-  @include _mat-style-fixes($theme);
-  @include _mat3-fixes($theme);
-
-  // elder custom icons fill color
-  .mat-icon.svg-icon-inherit-color svg * {
-    fill: currentColor !important;
-  }
-}
-
-@mixin _ng-style-fixes {
-  // Trick to ensure flex functionality within router-outlet
-  router-outlet.router-flex + * {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    height: 100%; // Required for Safari
-    width: 100%;
-    min-height: 0; // Fixes scrolling vert
-    min-width: 0; // Fixes scrolling horz
-  }
-}
-
-@mixin _mat-style-fixes($theme) {
-  // Globally disable automatic scrolling of Material Drawer Container
-  .mat-drawer-inner-container {
-    overflow: hidden !important;
-  }
-
-  // Globally disable automatic scrolling of Material Drawer Content
-  .mat-drawer-content {
-    overflow: hidden !important;
-  }
-
-  /******************************
-  Material tab fix
-  *******************************/
-
-  .mat-mdc-tab-body-wrapper {
-    flex: 1 1 100% !important;
-    height: 100% !important;
-  }
-
-  .mat-mdc-tab-body {
-    display: flex !important;
-    flex-direction: column;
-  }
-
-  /******************************
-  Material Chip fix
-  *******************************/
-
-  .mat-mdc-chip {
-    // Fixes default avatar on attribute usage (<mat-chip-avatar> vs matChipAvatar) which is broken in Angular Material 15.0.0
-    mat-chip-avatar {
-      .mat-icon {
-        width: 18px;
-        height: 18px;
-        line-height: 18px;
-        font-size: 18px;
-      }
-
-      img {
-        width: 18px;
-        height: 18px;
-        overflow: hidden;
-        border-radius: 9px;
-      }
-    }
-  }
-
-  /******************************
-    Material Badge Index
-    *******************************/
-
-  .mat-badge-content {
-    z-index: 1;
-  }
-
-  /******************************
-  Material chip make regular chips clickable when applying this class
-  *******************************/
-
-  .clickable-chip {
-    .mat-mdc-chip-action {
-      cursor: pointer;
-    }
-  }
-
-  /******************************
-    Styling toast messages
-    *******************************/
-  .elder-primary-text {
-    color: var(--md-sys-color-primary);
-  }
-
-  .elder-accent-text {
-    color: var(--md-sys-color-tertiary);
-  }
-
-  .elder-warn-text {
-    color: var(--md-sys-color-error);
-  }
-}
-
-@mixin _mat3-fixes($theme) {
-  // 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;
-  }
-  // fix elder badge borders
-  elder-badge {
-    .mat-mdc-standard-chip .mat-mdc-chip-action::before {
-      border: none;
-    }
-  }
-
-  .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-radius: var(--elder-border-radius-sm);
-    box-shadow: var(--mdc-elevated-card-container-elevation, var(--mat-sys-level1));
-    overflow: hidden; // this might cause issues, but is probably correct..
-  }
-
-  .elder-card-title {
-    padding-bottom: 0 !important;
-    margin-bottom: 6px !important;
-  }
-
-  // remove extra background from drawer
-  .mat-drawer-container {
-    background-color: transparent !important;
-  }
-
-  // app header bg color
-  &.elder-light-theme,
-  &.elder-dark-theme {
-    .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-toolbar.elder-toolbar-main-nav-button-container {
-      &.mat-primary,
-      &.mat-accent {
-        background-color: var(--elder-toolbar-main-nav-button-container-bg-color);
-
-        .mat-mdc-icon-button {
-          color: var(--elder-toolbar-main-nav-button-color);
-        }
-      }
-    }
-  }
-
-  &.elder-dark-theme {
-    .mat-toolbar,
-    .mat-toolbar.mat-primary,
-    .mat-toolbar.mat-accent {
-      background-color: var(--elder-dark-gray) !important;
-      * {
-        color: var(--md-sys-color-on-surface) !important;
-      }
-      .elder-toolbar-main-nav-button .mat-icon {
-        color: var(--md-sys-color-primary) !important;
-      }
-    }
-
-    elder-app-header .elder-panel {
-      color: var(--md-sys-color-on-surface) !important;
-    }
-  }
-
-  /**************************************************************************
-    * Start cloudfiles import 1
-    *************************************************************************/
-
-  .mat-mdc-tab-group {
-    background-color: transparent !important;
-  }
-
-  elder-data-toolbar {
-    display: block;
-  }
-
-  /**************************************************************************
-    * 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);
-  }
-
-  // badge positioning
-  .mat-badge-above .mat-badge-content {
-    bottom: 82%;
-  }
-
-  // bring back the badge warn color that was removed in m3
-  .mat-badge-warn {
-    --mat-badge-background-color: var(--md-sys-color-error);
-  }
-
-  & {
-    // fix button paddings to keep spacing
-    --elder-button-horizontal-padding: 19px;
-    --mat-protected-button-horizontal-padding: var(--elder-button-horizontal-padding);
-    --mat-outlined-button-horizontal-padding: var(--elder-button-horizontal-padding);
-    --mat-filled-button-horizontal-padding: var(--elder-button-horizontal-padding);
-
-    // mat toolbar title-text line height
-    --mat-toolbar-title-text-line-height: 36px;
-  }
-
-  // Sekundärfarbe anstatt Tertiärfarbe, da es wenig Sinn macht, auf dieses Element viel Aufmerksamkeit zu lenken
-  .elder-light-theme,
-  .elder-dark-theme {
-    &.mat-accent.mat-icon {
-      --mat-icon-color: var(--md-sys-color-secondary);
-    }
-  }
-
-  .elder-pane-grid {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-around;
-    padding: var(--elder-pane-padding);
-    gap: var(--elder-pane-gap);
-    height: 100%;
-    align-items: stretch;
-  }
-
-  .elder-pane {
-    border-radius: var(--elder-pane-border-radius, var(--mat-app-corner-medium));
-    overflow: hidden;
-    background-color: var(--elder-pane-bg-color);
-  }
-
-  // scrollbar styling
-  ::-webkit-scrollbar {
-    width: var(--elder-scrollbar-width);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--md-sys-color-outline-variant);
-    border-radius: 5px;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--md-sys-color-outline);
-  }
-
-  // fix
-  .elder-pane .legacy-layout-card {
-    border-radius: 0 !important;
-  }
-
-  .mat-mdc-card,
-  .mat-mdc-card-outlined {
-    // set normal mat-cards back to m2 border-radius
-    border-radius: var(--elder-border-radius-sm);
-  }
-
-  // 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;
-      }
-    }
-  }
-
-  .mat-toolbar .mat-mdc-form-field {
-    background-color: var(--elder-lightened-transparent-bg);
-    &,
-    *,
-    .mat-icon {
-      color: var(--md-sys-color-inverse-on-surface);
-      --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 {
-    background-color: var(--md-sys-color-surface-container-lowest);
-  }
-
-  &.elder-dark-theme {
-    // brighter dark mode nav
-    .elder-nav-list-full {
-      background-color: var(--md-sys-color-surface-container-lowest) !important;
-    }
-    .nav-link-active {
-      color: var(--md-sys-color-primary) !important;
-    }
-  }
-
-  /**************************************************************************
-    Elder panel
-  **************************************************************************/
-  .elder-panel {
-    background: var(--md-sys-color-primary-container);
-    color: var(--md-sys-color-on-primary-container);
-    transition: background-color 0.5s;
-
-    &.mat-primary,
-    &.mat-accent,
-    &.mat-warn {
-      background: var(--elder-dark-mode-color-surface, var(--md-sys-color-primary));
-      color: var(--elder-dark-mode-color-on-surface, var(--md-sys-color-on-primary));
-    }
-
-    // form field overrides
-    .mat-form-field-underline,
-    .mat-form-field-ripple,
-    .mat-focused .mat-form-field-ripple {
-      background-color: currentColor;
-    }
-
-    .mat-mdc-form-field-label,
-    .mat-focused .mat-form-field-label,
-    .mat-select-value,
-    .mat-select-arrow,
-    .mat-form-field.mat-focused .mat-select-arrow {
-      color: inherit;
-    }
-
-    .mat-mdc-input-element {
-      caret-color: currentColor;
-    }
-  }
-
-  &.elder-light-theme,
-  &.elder-dark-theme {
-    --mdc-linear-progress-track-color: var(--elder-color-highlight-dim);
-  }
-
-  // disable icon button overflow
-  .mat-mdc-icon-button {
-    overflow: hidden;
-  }
-}