@elderbyte/ngx-starter 19.1.0-beta.11 → 19.1.0-beta.13

package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss

@@ -1,60 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../elder-select-base' as elder-select-base;
-
-@mixin typography($typography-config) {
-  @include elder-select-base.typography($typography-config);
-
-  .elder-multi-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
-
-    .elder-select-input {
-      height: var(--md-sys-typescale-body-medium-line-height);
-    }
-
-    .elder-prefix-icon {
-      margin-left: 3px;
-    }
-
-    .elder-chip-input {
-      flex: 1 0 auto;
-      padding-left: 8px;
-    }
-
-    .elder-chip-input-select {
-      flex: 1 0 140px;
-      max-width: 100%;
-    }
-
-    .elder-browse-icon {
-      margin-right: 4px;
-    }
-  }
-}
-
-@mixin theme($config-or-theme) {
-  @include typography($config-or-theme);
-
-  .elder-chip-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .elder-trailing-icon {
-    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-    opacity: 0.54;
-  }
-
-  .cdk-drag-preview {
-    box-shadow: var(--elder-box-shadow-default);
-  }
-
-  .cdk-drag-placeholder {
-    opacity: 0;
-  }
-
-  .cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-  }
-}

package/src/lib/components/select/single/elder-select/elder-select.component.scss

@@ -1,58 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../elder-select-base' as elder-select-base;
-
-@mixin typography($config-or-theme) {
-  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
-
-  @include elder-select-base.typography($config-or-theme);
-
-  .elder-select {
-    font-family: var(--md-sys-typescale-body-medium-font);
-
-    .elder-input-prefix-icon-container {
-      padding-right: 3px;
-    }
-  }
-
-  .elder-select-input {
-    height: $line-height-em;
-    font: inherit;
-  }
-
-  .elder-select-arrow {
-    cursor: pointer;
-  }
-}
-
-@mixin theme($config-or-theme) {
-  // @debug mat.get-theme-typography($config-or-theme, body-medium, line-height);
-  // @debug mat.get-theme-typography($config-or-theme, body-medium, font-family);
-  @include typography($config-or-theme);
-
-  @keyframes shrink {
-    0% {
-      transform: scale(1);
-    }
-    100% {
-      transform: scale(0.75);
-    }
-  }
-
-  .loading {
-    animation: shrink 0.3s ease-in-out infinite alternate;
-    -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
-  }
-
-  .clickable-icon {
-    cursor: pointer;
-  }
-
-  .full-width {
-    width: 100%;
-  }
-
-  .elder-select-dropdown-input {
-    cursor: pointer;
-  }
-}

package/theming/abstracts/_elder-design-tokens.scss

@@ -46,8 +46,8 @@
     // cards, table etc bg
     --mdc-elevated-card-container-color: var(--md-sys-color-surface-container-lowest);
     --mdc-outlined-card-container-color: var(--mdc-elevated-card-container-color);
-    //--mat-table-background-color: var(--md-sys-color-surface-container-lowest);
-    --mat-table-background-color: transparent;
+    // --mat-table-background-color: transparent;
+    --mat-table-background-color: var(--md-sys-color-surface-container-lowest);
     --mat-paginator-container-background-color: var(--mat-table-background-color);
     --elder-grid-background-color: var(--mat-table-background-color);
     //--mat-table-header-container-height: 56px; // 56px is default

package/theming/base/_elder-component-themes.scss

@@ -1,22 +1,21 @@
 @use '../components/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'
+@use '../components/elder-table-theme.scss' as elder-table;
+@use '../components/elder-nav-theme' as elder-nav;
+@use '../components/elder-card-stack-theme.scss' as elder-card-stack;
+@use '../components/elder-select-theme' as elder-select;
+@use '../components/elder-multi-select-chips-theme'
   as elder-multi-select-chips;
-@use '../../src/lib/components/select/multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component'
+@use '../components/elder-multi-select-chip-options-theme'
   as elder-multi-select-chip-options;
+@use '../components/elder-filter-chip-template-theme' as elder-filter-chip-template;
 
 @mixin theme($theme) {
   @include elder-chip.theme($theme);
+  @include elder-table.theme($theme);
   @include elder-nav.theme($theme);
+  @include elder-card-stack.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);
+  @include elder-filter-chip-template.theme($theme);
 }

package/theming/base/_elder-fixes-base.scss

@@ -128,13 +128,6 @@
     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;
@@ -293,10 +286,6 @@
   }
 
   // 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
@@ -332,16 +321,6 @@
     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
   **************************************************************************/

package/theming/components/_elder-card-stack-theme.scss

@@ -0,0 +1,72 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  .card-stack {
+    //background-color: var(--md-sys-color-surface-container);
+    border-radius: var(--elder-border-radius-sm);
+    border: var(--elder-border-light);
+  }
+
+  .card-list.cdk-drop-list-dragging {
+    border: 2px dashed var(--md-sys-color-outline-variant);
+  }
+
+  .stack-header {
+    height: 62px;
+  }
+  
+  .card-container {
+    min-width: 120px;
+    min-height: 0;
+  }
+  
+  .card-list {
+    min-height: 100%;
+  }
+  
+  .card {
+    border-radius: var(--elder-border-radius-sm);
+    box-shadow: var(--mat-app-elevation-shadow-level-1);
+    cursor: move;
+    overflow: hidden;
+  }
+  .card.cdk-drag-disabled.clickable {
+    cursor: pointer;
+  }
+  .card.cdk-drag-disabled.unclickable {
+    cursor: default;
+  }
+  
+  .hoverme .hide {
+    visibility: hidden;
+  }
+  
+  .hoverme:hover .hide {
+    visibility: visible;
+  }
+  
+  .rotate {
+    transform: rotate(-90deg);
+  }
+  
+  .scrollable {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  .noselect {
+    user-select: none;
+  }
+  
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
+  
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+  
+  .card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+}

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

@@ -0,0 +1,24 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    .nav-link-active {
+      color: var(--md-sys-color-primary) !important;
+    }
+  }
+
+  &.elder-light-theme elder-shell .elder-nav-list-full {
+    background-color: var(--md-sys-color-surface); // main nav bg color
+  }
+
+  &.elder-dark-theme elder-shell {
+    .elder-nav-list-full {
+      background-color: var(--md-sys-color-surface-container-high); // main nav bg color
+    }
+    .nav-link:hover,
+    .nav-group-button:hover {
+      background-color: var(--md-sys-color-surface-container) !important;
+    }
+  }
+}

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

@@ -0,0 +1,213 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  .elder-mat-inner-table {
+    width: 100%;
+  }
+
+  .elder-table-row.dense {
+    height: 42px !important;
+  }
+
+  .elder-mat-table-container {
+    border-radius: var(--elder-border-radius-sm);
+    overflow: hidden;
+  }
+
+  /**
+ * Style for the select column
+ */
+  .mat-column-select {
+    overflow: initial;
+    min-width: 72px;
+    max-width: 5%;
+    width: 72px;
+  }
+
+  .elder-row-removing {
+    text-decoration: line-through;
+  }
+
+  .elder-row-hidden {
+    display: none;
+  }
+
+  /******************************
+  Clickable row
+  *******************************/
+
+  .elder-table-row {
+    cursor: pointer;
+  }
+
+  /** https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 **/
+  // firefox-scroll-fix
+  :host {
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .elder-table-hint {
+    color: gray;
+  }
+
+  .elder-table-footer {
+    height: var(--elder-data-element-footer-height);
+  }
+
+  .elder-table-checkbox {
+    opacity: 0.25;
+
+    -webkit-transition: opacity 0.5s ease-in-out;
+    -moz-transition: opacity 0.5s ease-in-out;
+    transition: opacity 0.5s ease-in-out;
+  }
+
+  .elder-table-row:hover .elder-table-checkbox {
+    opacity: 0.9;
+  }
+
+  .elder-table-checkbox-visible {
+    opacity: 1;
+  }
+
+  .elder-table-inner {
+    background-color: var(--md-sys-color-surface-container-lowest);
+  }
+
+  .elder-table-row:focus {
+    // Disable browser focus style
+    box-shadow: none;
+    outline-style: none;
+    td {
+      background-color: var(
+        --elder-color-highlight-strong
+      ); // OLD: background-color: mat.m2-get-color-from-palette($accent, default, 0.3);
+      border-bottom: var(
+        --md-sys-color-tertiary-fixed
+      ); // OLD: border-bottom: 1px solid mat.m2-get-color-from-palette($accent, default);
+    }
+  }
+  .elder-table-row.elder-table-row-activated {
+    //background-color: var(--md-sys-color-surface-dim);
+    background-color: var(--elder-color-highlight-strong);
+  }
+
+  .elder-table-row.elder-table-row-selected {
+    background-color: var(--elder-color-highlight-variant);
+  }
+
+  .elder-table-row:hover {
+    background-color: var(--elder-color-highlight-light);
+    cursor: pointer;
+  }
+
+  .elder-mat-table-flat {
+    border: var(--elder-border-light);
+  }
+
+  .elder-table {
+    background-color: var(--mat-table-background-color);
+
+    // Fix line height of paginator section
+    .mat-mdc-paginator {
+      .mat-mdc-form-field,
+      .mat-mdc-floating-label {
+        line-height: unset;
+      }
+
+      .mat-mdc-select {
+        line-height: unset;
+      }
+    }
+
+    $pad: 8px;
+    $pad-right: 12px;
+
+    .elder-mat-inner-table.mat-mdc-table {
+      .mat-mdc-header-cell {
+        padding-left: $pad;
+        padding-right: $pad-right;
+
+        // configure automatic wrapping of too long strings
+        overflow-wrap: normal;
+        word-wrap: normal;
+        word-break: normal;
+        white-space: unset;
+        hyphens: auto;
+
+        &:first-of-type {
+          padding-left: $pad + $pad-right;
+        }
+
+        &:last-of-type {
+          padding-right: $pad; // TODO: This can lead to overflows in some cases, is there a better solution?
+
+          &[mat-sort-header]:not([arrowposition='before']) {
+            padding-right: $pad;
+          }
+        }
+
+        &[mat-sort-header] {
+          &[arrowposition='before'] {
+            padding-left: 0px;
+          }
+
+          &:not([arrowposition='before']) {
+            padding-right: $pad-right;
+          }
+        }
+
+        & > .mat-sort-header-container {
+          display: inline-flex;
+        }
+      }
+
+      .mat-mdc-cell {
+        padding-left: $pad;
+        padding-right: $pad-right;
+
+        overflow-wrap: normal;
+        word-wrap: normal;
+        word-break: normal;
+        white-space: unset;
+        hyphens: auto;
+
+        &:first-of-type {
+          padding-left: $pad + $pad-right;
+        }
+
+        &:last-of-type {
+          padding-right: $pad;
+        }
+      }
+
+      .mat-mdc-footer-cell {
+        padding-left: $pad;
+        padding-right: $pad-right;
+        font-weight: bold;
+
+        &:first-of-type {
+          padding-left: $pad + $pad-right;
+        }
+
+        &:last-of-type {
+          padding-right: $pad;
+        }
+
+        .mat-mdc-paginator {
+          margin-left: -$pad;
+          margin-right: -$pad;
+        }
+      }
+    }
+  }
+
+  .mat-mdc-row {
+    background-color: var(--md-sys-color-surface-container-lowest);
+  }
+
+  .mat-mdc-header-row {
+    background: var(--md-sys-color-surface-container-lowest) !important;
+  }
+}

package/theming/components/elder-filter-chip-template-theme.scss

@@ -0,0 +1,79 @@
+// @use 'sass:map';
+// @use '@angular/material' as mat;
+// @use './elder-select-base-mixin' as elder-select-base;
+
+
+// @mixin typography($typography-config) {
+//   $config: $typography-config; // TODO $typography-config
+//   // The unit-less line-height from the font config.
+//   $line-height: mat.line-height($config, body-1);
+//   $font-size: mat.font-size($config, body-1);
+//   $line-height-em: var(--md-sys-typescale-body-medium-line-height);
+
+//   @include elder-select-base.typography($typography-config);
+
+//   .elder-multi-select {
+//     font-family: mat.font-family($config);
+
+//     .elder-select-input {
+//       height: $line-height-em;
+//     }
+
+//     .elder-prefix-icon {
+//       margin-left: 3px;
+//     }
+
+//     .elder-chip-input {
+//       flex: 1 0 auto;
+//       padding-left: 8px;
+//     }
+
+//     .elder-chip-input-select {
+//       flex: 1 0 140px;
+//       max-width: 100%;
+//     }
+
+//     .elder-browse-icon {
+//       margin-right: 4px;
+//     }
+//   }
+// }
+
+@mixin theme($config-or-theme) {
+  // $color: mat.get-color-config($config-or-theme);
+
+  // $typography: mat.define-typography-config();
+
+  // @if $color != null {
+  //   @include elder-select-base.color($color);
+  // }
+
+  // @if $typography != null {
+  //   @include typography($typography);
+  // }
+
+  .elder-chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .elder-trailing-icon {
+    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
+    opacity: 0.54;
+  }
+
+  .cdk-drag-preview {
+    // border-radius: var(--elder-border-radius-sm);
+    box-shadow: var(--elder-box-shadow-default);
+  }
+
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
+
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+}

package/theming/components/elder-multi-select-chip-options-theme.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './elder-select-base-mixin' as elder-select-base;
+
+@mixin typography($typography-config) {
+  @include elder-select-base.typography($typography-config);
+
+  .elder-multi-select {
+    font-family: var(--md-sys-typescale-body-medium-font);
+
+    .elder-select-input {
+      height: var(--md-sys-typescale-body-medium-line-height);
+    }
+
+    .elder-prefix-icon {
+      margin-left: 3px;
+    }
+
+    .elder-chip-input {
+      flex: 1 0 auto;
+      padding-left: 8px;
+    }
+
+    .elder-chip-input-select {
+      flex: 1 0 140px;
+      max-width: 100%;
+    }
+
+    .elder-browse-icon {
+      margin-right: 4px;
+    }
+  }
+}
+
+@mixin theme($config-or-theme) {
+  @include typography($config-or-theme);
+
+  .elder-chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .elder-trailing-icon {
+    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
+    opacity: 0.54;
+  }
+}

package/theming/components/elder-multi-select-chips-theme.scss

@@ -0,0 +1,60 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './elder-select-base-mixin' as elder-select-base;
+
+@mixin typography($typography-config) {
+  @include elder-select-base.typography($typography-config);
+
+  .elder-multi-select {
+    font-family: var(--md-sys-typescale-body-medium-font);
+
+    .elder-select-input {
+      height: var(--md-sys-typescale-body-medium-line-height);
+    }
+
+    .elder-prefix-icon {
+      margin-left: 3px;
+    }
+
+    .elder-chip-input {
+      flex: 1 0 auto;
+      padding-left: 8px;
+    }
+
+    .elder-chip-input-select {
+      flex: 1 0 140px;
+      max-width: 100%;
+    }
+
+    .elder-browse-icon {
+      margin-right: 4px;
+    }
+  }
+}
+
+@mixin theme($config-or-theme) {
+  @include typography($config-or-theme);
+
+  .elder-chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .elder-trailing-icon {
+    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
+    opacity: 0.54;
+  }
+
+  .cdk-drag-preview {
+    box-shadow: var(--elder-box-shadow-default);
+  }
+
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
+
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+}