@elderbyte/ngx-starter 14.4.0-beta.7 → 14.5.0

package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss

@@ -1,5 +1,7 @@
 @use '@angular/material' as mat;
 
+$elder-tile-padding: 2px;
+
 @mixin theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
@@ -12,10 +14,7 @@
     background-color: mat.get-color-from-palette($background, card);
   }
 
-  .elder-grid-browser {
-    // background-color: mat.get-color-from-palette($background, card); // Maybe not card background?
-    //overflow: hidden;
-  }
+  .elder-grid-browser { }
 
   .elder-grid-flat {
     border: 1px solid mat.get-color-from-palette($foreground, divider);
@@ -33,22 +32,20 @@
   .elder-grid-tile {
     flex: 0 1 100%;
     flex-grow: 1;
-    margin: 0 5px;
+    margin: 0 $elder-tile-padding;
     width: 100%;
     height: 100%;
     cursor: pointer;
-    border-radius: 5px;
-    background-color: mat.get-color-from-palette($background, card);
+    background-color: rgba(mat.get-color-from-palette($background, unselected-chip), 0.34); // default background
     text-align: left;
-    border: 2px solid mat.get-color-from-palette($foreground, divider);
-    box-sizing: border-box;
     transition:
       box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
       border .25s linear;
   }
 
-  .elder-grid-tile:hover {
-    border: 2px solid mat.get-color-from-palette($primary);
+  .elder-grid-tile-content:hover .elder-grid-tile-overlay{
+    opacity: 1;
+    background-color: rgba(white, 0.08);
   }
 
   .elder-grid-tile:active {
@@ -93,13 +90,13 @@
 .elder-grid-tile-row {
   display: flex;
   flex-direction: row;
-  padding: 5px;
-  margin: 0 -5px;
+  padding: $elder-tile-padding;
+  margin: 0 ($elder-tile-padding * -1);
 }
 
 .elder-grid-tile-hidden {
   flex: 0 1 100%;
-  margin: 5px;
+  margin: $elder-tile-padding;
   width: 100%;
   height: 100%;
 }
@@ -119,7 +116,6 @@
     0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
-
 .cdk-drag-placeholder {
   flex: 0 1 100%;
   background: #ccc;
@@ -131,8 +127,8 @@
 .elder-grid-tile-overlay {
   position: absolute;
   left: 0; top: 0; right: 0; bottom: 0;
-  -webkit-transition: background-color 0.2s ease-in, opacity 0.2s ease-in;
-  transition: background-color 0.2s ease-in, opacity 0.2s ease-in;
+  -webkit-transition: background-color 0.1s ease-in, opacity 0.1s ease-in;
+  transition: background-color 0.1s ease-in, opacity 0.1s ease-in;
 }
 
 .elder-grid-tile-overlay-visible {
@@ -143,12 +139,6 @@
   opacity: 0;
 }
 
-.elder-grid-tile-content:hover .elder-grid-tile-overlay{
-  opacity: 1;
-  -webkit-transition: background-color 0.2s ease-in, opacity 0.2s ease-in;
-  transition: background-color 0.2s ease-in, opacity 0.2s ease-in;
-}
-
 .elder-click-through {
   pointer-events:none;
 }

package/src/lib/components/forms/search/search-box/elder-search-box.component.scss

@@ -1,6 +1,6 @@
 
 
-.elder-search-panel {
+.elder-search-panel-container {
   min-width: 250px;
 }
 

package/src/lib/components/panels/elder-dialog-panel/elder-dialog-panel.component.scss

@@ -0,0 +1,22 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .elder-dialog-panel {
+    color: mat.get-color-from-palette($foreground, text);
+    background-color: mat.get-color-from-palette($background, dialog);
+
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow:
+      0 5px 5px -3px rgba(0, 0, 0, 0.2),
+      0 8px 10px 1px rgba(0, 0, 0, 0.14),
+      0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  }
+}
+

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

@@ -35,5 +35,97 @@
     line-height: $line-height-em !important;
     font-size: $font-size !important;
   }
+}
+
+
+@mixin _palette-styles($palette) {
+  background: mat.get-color-from-palette($palette);
+  color: mat.get-color-from-palette($palette, default-contrast);
+}
+
+@mixin _form-field-overrides {
+  .mat-form-field-underline,
+  .mat-form-field-ripple,
+  .mat-focused .mat-form-field-ripple {
+    background-color: currentColor;
+  }
+
+  .mat-form-field-label,
+  .mat-focused .mat-form-field-label,
+  .elder-select-value,
+  .elder-select-icon,
+  .mat-form-field.mat-focused .elder-select-icon {
+    color: inherit!important;
+  }
+
+  .mat-input-element {
+    caret-color: currentColor;
+  }
+}
+
+@mixin color($color-config) {
+  $foreground: map.get($color-config, foreground);
+  $background: map.get($color-config, background);
+  $primary: map.get($color-config, primary);
+  $accent: map.get($color-config, accent);
+  $warn: map.get($color-config, warn);
+
+  .elder-select-value {
+    color: mat.get-color-from-palette($foreground, text);
+  }
+
+  .elder-select-disabled .elder-select-value {
+    color: mat.get-color-from-palette($foreground, disabled-text);
+  }
+
+  .elder-select-icon {
+    color: mat.get-color-from-palette($foreground, secondary-text);
+  }
 
+  .mat-toolbar {
+    background: mat.get-color-from-palette($background, app-bar);
+    color: mat.get-color-from-palette($foreground, text);
+
+    &.mat-primary {
+      @include _palette-styles($primary);
+    }
+
+    &.mat-accent {
+      @include _palette-styles($accent);
+    }
+
+    &.mat-warn {
+      @include _palette-styles($warn);
+    }
+
+    @include _form-field-overrides;
+  }
+
+  .mat-form-field {
+    &.mat-focused {
+      &.mat-primary .elder-select-icon {
+        color: mat.get-color-from-palette($primary, text);
+      }
+
+      &.mat-accent .elder-select-icon {
+        color: mat.get-color-from-palette($accent, text);
+      }
+
+      &.mat-warn .elder-select-icon {
+        color: mat.get-color-from-palette($warn, text);
+      }
+    }
+
+    &.mat-form-field-invalid .elder-select-base {
+      .elder-select-icon {
+        color: mat.get-color-from-palette($warn, text);
+      }
+    }
+
+    &.mat-form-field-disabled .elder-select-base {
+      .elder-select-icon {
+        color: mat.get-color-from-palette($foreground, disabled-text);
+      }
+    }
+  }
 }

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

@@ -29,57 +29,10 @@
       max-width: 100%;
     }
 
-  }
-
-
-}
-
-@mixin color($color-config) {
-  $foreground: map.get($color-config, foreground);
-  $background: map.get($color-config, background);
-  $primary: map.get($color-config, primary);
-  $accent: map.get($color-config, accent);
-  $warn: map.get($color-config, warn);
-
-  .elder-select-value {
-    color: mat.get-color-from-palette($foreground, text);
-  }
-
-  .elder-select-disabled .elder-select-value {
-    color: mat.get-color-from-palette($foreground, disabled-text);
-  }
-
-  .elder-select-icon {
-    color: mat.get-color-from-palette($foreground, secondary-text);
-  }
-
-
-  .mat-form-field {
-    &.mat-focused {
-      &.mat-primary .elder-select-icon {
-        color: mat.get-color-from-palette($primary, text);
-      }
-
-      &.mat-accent .elder-select-icon {
-        color: mat.get-color-from-palette($accent, text);
-      }
-
-      &.mat-warn .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
-    }
-
-    &.mat-form-field-invalid .elder-multi-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
+    .elder-browse-icon {
+      margin-right: 4px;
     }
 
-    &.mat-form-field-disabled .elder-multi-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($foreground, disabled-text);
-      }
-    }
   }
 }
 
@@ -93,7 +46,7 @@
   }
 
   @if $color != null {
-    @include color($color);
+    @include elder-select-base.color($color);
   }
 
   @if $typography != null {

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

@@ -29,54 +29,6 @@
   }
 }
 
-@mixin color($color-config) {
-  $foreground: map.get($color-config, foreground);
-  $background: map.get($color-config, background);
-  $primary: map.get($color-config, primary);
-  $accent: map.get($color-config, accent);
-  $warn: map.get($color-config, warn);
-
-  .elder-select-value {
-    color: mat.get-color-from-palette($foreground, text);
-  }
-
-  .elder-select-disabled .elder-select-value {
-    color: mat.get-color-from-palette($foreground, disabled-text);
-  }
-
-  .elder-select-icon {
-    color: mat.get-color-from-palette($foreground, secondary-text);
-  }
-
-  .mat-form-field {
-    &.mat-focused {
-      &.mat-primary .elder-select-icon {
-        color: mat.get-color-from-palette($primary, text);
-      }
-
-      &.mat-accent .elder-select-icon {
-        color: mat.get-color-from-palette($accent, text);
-      }
-
-      &.mat-warn .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
-    }
-
-    &.mat-form-field-invalid .elder-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
-    }
-
-    &.mat-form-field-disabled .elder-select {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($foreground, disabled-text);
-      }
-    }
-  }
-}
-
 @mixin theme($config-or-theme) {
   $color: mat.get-color-config($config-or-theme);
   $typography: mat.get-typography-config($config-or-theme);
@@ -87,7 +39,7 @@
   }
 
   @if $color != null {
-    @include color($color);
+    @include elder-select-base.color($color);
   }
 
   @if $typography != null {

package/theming/_elder-common.scss

@@ -71,6 +71,10 @@
     }
     .mat-form-field-infix {
       border: 0;
+      padding: 0 0 8px;
+    }
+    .mat-form-field-flex {
+      padding: 0;
     }
   }
 

package/theming/_elder-palettes.scss

@@ -84,3 +84,62 @@ $elder-gold: (
     A700: $dark-primary-text,
   )
 );
+
+/***************************************************************************
+ *                                                                         *
+ * Dark Theme Palettes                                                     *
+ *                                                                         *
+ **************************************************************************/
+
+$grey-palette: mat.$grey-palette;
+$light-primary-text: rgba(white, 0.87);
+$light-secondary-text: rgba(white, 0.40);
+$light-disabled-text: rgba(white, 0.38);
+$light-dividers: rgba(white, 0.12);
+$light-focused: rgba(white, 0.12);
+
+$dark-background-dp-01: #1f1f1f; // 5%
+$dark-background-dp-02: #222222; // 7%
+$dark-background-dp-03: #262626; // 8%
+$dark-background-dp-04: #272727; // 9%
+$dark-background-dp-06: #2c2c2c; // 11%
+$dark-background-dp-08: #2d2d2d; // 12%
+$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
+  disabled-button: rgba(white, 0.12),
+  raised-button: map.get($grey-palette, 800),
+  focused-button: $light-focused,
+  selected-button: map.get($grey-palette, 900),
+  selected-disabled-button: map.get($grey-palette, 800),
+  disabled-button-toggle: black,
+  unselected-chip: map.get($grey-palette, 800),
+  disabled-list-option: rgba(white, 0.12),
+  tooltip: map.get($grey-palette, 800),
+);
+
+// Foreground palette for dark themes.
+$elder-dark-theme-foreground: (
+  base: rgba(white, 0.87),
+  divider: $light-dividers,
+  dividers: $light-dividers,
+  disabled: $light-disabled-text,
+  disabled-button: rgba(white, 0.38),
+  disabled-text: $light-disabled-text,
+  elevation: black,
+  hint-text: $light-disabled-text,
+  secondary-text: $light-secondary-text,
+  icon: rgba(white, 0.87),
+  icons: rgba(white, 0.87),
+  text: rgba(white, 0.87),
+  slider-min: rgba(white, 0.87),
+  slider-off: rgba(white, 0.38),
+  slider-off-active: rgba(white, 0.38),
+);

package/theming/_elder-scrollbar-theme.scss

@@ -15,7 +15,7 @@
 
   /* Track */
   ::-webkit-scrollbar-track {
-    background: mat.get-color-from-palette($background, background);
+    // background: mat.get-color-from-palette($background, background);
   }
 
   /* Handle */

package/theming/_elder-theme.scss

@@ -0,0 +1,46 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+@use 'elder-palettes' as palettes;
+
+/***************************************************************************
+ *                                                                         *
+ * Public API                                                              *
+ *                                                                         *
+ **************************************************************************/
+
+@function define-dark-elder-theme($config) {
+  $result: $config;
+  @if map.get($config, color) {
+    $color-settings: map.get($config, color);
+    $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)));
+  }
+  @return _create-backwards-compatibility-theme($result);
+}
+
+/***************************************************************************
+ *                                                                         *
+ * Private functions                                                       *
+ *                                                                         *
+ **************************************************************************/
+
+@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
+  @return (
+    primary: $primary,
+    accent: $accent,
+    warn: if($warn != null, $warn, mat.define-palette(mat.$red-palette)),
+    is-dark: true,
+    foreground: palettes.$elder-dark-theme-foreground,
+    background: palettes.$elder-dark-theme-background
+  );
+}
+
+@function _create-backwards-compatibility-theme($theme) {
+  @if not map.get($theme, color) {
+    @return $theme;
+  }
+  $color: map.get($theme, color);
+  @return map.merge($theme, $color);
+}

package/theming/_elder-toast-theme.scss

@@ -9,22 +9,22 @@
   $foreground: map-get($theme, foreground);
 
   .elder-primary-toast {
-    background: mat.get-color-from-palette($background, background);
+    background: mat.get-color-from-palette($background, dialog);
     color: mat.get-color-from-palette($primary);
   }
 
   .elder-accent-toast {
-    background: mat.get-color-from-palette($background, background);
+    background: mat.get-color-from-palette($background, dialog);
     color: mat.get-color-from-palette($accent);
   }
 
   .elder-success-toast {
-    background: mat.get-color-from-palette($background, background);
+    background: mat.get-color-from-palette($background, dialog);
     color: mat.get-color-from-palette($primary);
   }
 
   .elder-warning-toast {
-    background: mat.get-color-from-palette($background, background);
+    background: mat.get-color-from-palette($background, dialog);
     color: mat.get-color-from-palette($accent);
   }
 
@@ -41,7 +41,7 @@
   }
 
   .elder-warn-text {
-    color: mat.get-color-from-palette($warn, );
+    color: mat.get-color-from-palette($warn);
   }
 
 }

package/esm2020/lib/components/data-view/base/elder-data-view-base.module.mjs

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ElderDataViewBaseComponent } from './elder-data-view-base';
-import * as i0 from "@angular/core";
-export { ElderDataViewBaseComponent } from './elder-data-view-base';
-export class ElderDataViewBaseModule {
-}
-ElderDataViewBaseModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ElderDataViewBaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElderDataViewBaseModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.5", ngImport: i0, type: ElderDataViewBaseModule, declarations: [ElderDataViewBaseComponent], imports: [CommonModule] });
-ElderDataViewBaseModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ElderDataViewBaseModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.5", ngImport: i0, type: ElderDataViewBaseModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ElderDataViewBaseComponent],
-                    imports: [CommonModule],
-                }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxkZXItZGF0YS12aWV3LWJhc2UubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWxkZXJieXRlL25neC1zdGFydGVyL3NyYy9saWIvY29tcG9uZW50cy9kYXRhLXZpZXcvYmFzZS9lbGRlci1kYXRhLXZpZXctYmFzZS5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7O0FBRXBFLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBTXBFLE1BQU0sT0FBTyx1QkFBdUI7O29IQUF2Qix1QkFBdUI7cUhBQXZCLHVCQUF1QixpQkFIakIsMEJBQTBCLGFBQy9CLFlBQVk7cUhBRWIsdUJBQXVCLFlBRnRCLFlBQVk7MkZBRWIsdUJBQXVCO2tCQUpuQyxRQUFRO21CQUFDO29CQUNOLFlBQVksRUFBRSxDQUFDLDBCQUEwQixDQUFDO29CQUMxQyxPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUM7aUJBQzFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBFbGRlckRhdGFWaWV3QmFzZUNvbXBvbmVudCB9IGZyb20gJy4vZWxkZXItZGF0YS12aWV3LWJhc2UnO1xuXG5leHBvcnQgeyBFbGRlckRhdGFWaWV3QmFzZUNvbXBvbmVudCB9IGZyb20gJy4vZWxkZXItZGF0YS12aWV3LWJhc2UnO1xuXG5ATmdNb2R1bGUoe1xuICAgIGRlY2xhcmF0aW9uczogW0VsZGVyRGF0YVZpZXdCYXNlQ29tcG9uZW50XSxcbiAgICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbn0pXG5leHBvcnQgY2xhc3MgRWxkZXJEYXRhVmlld0Jhc2VNb2R1bGUge31cbiJdfQ==

package/esm2020/lib/components/iframes/iframe-message.mjs

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWZyYW1lLW1lc3NhZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lbGRlcmJ5dGUvbmd4LXN0YXJ0ZXIvc3JjL2xpYi9jb21wb25lbnRzL2lmcmFtZXMvaWZyYW1lLW1lc3NhZ2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbIlxuXG5leHBvcnQgdHlwZSBJZnJhbWVBY3Rpb24gPSAnUE9TVCcgfCAnQ0xPU0UnO1xuXG5leHBvcnQgaW50ZXJmYWNlIElmcmFtZU1lc3NhZ2U8VD4ge1xuXG4gIGFjdGlvbj86IElmcmFtZUFjdGlvbjtcbiAgZGF0YT86IFQ7XG5cbn1cbiJdfQ==

package/lib/components/data-view/base/elder-data-view-base.module.d.ts

@@ -1,9 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./elder-data-view-base";
-import * as i2 from "@angular/common";
-export { ElderDataViewBaseComponent } from './elder-data-view-base';
-export declare class ElderDataViewBaseModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderDataViewBaseModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderDataViewBaseModule, [typeof i1.ElderDataViewBaseComponent], [typeof i2.CommonModule], never>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<ElderDataViewBaseModule>;
-}

package/lib/components/iframes/iframe-message.d.ts

@@ -1,5 +0,0 @@
-export declare type IframeAction = 'POST' | 'CLOSE';
-export interface IframeMessage<T> {
-    action?: IframeAction;
-    data?: T;
-}