@elderbyte/ngx-starter 14.4.0-beta.24 → 14.4.0-beta.25

package/lib/components/panels/card-panel/elder-card-panel.component.d.ts

@@ -1,8 +1,6 @@
-import { OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class ElderCardPanelComponent implements OnInit {
+export declare class ElderCardPanelComponent {
     constructor();
-    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderCardPanelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ElderCardPanelComponent, "elder-card-panel", never, {}, {}, never, ["*"], false>;
 }

package/lib/components/panels/elder-dialog-panel/elder-dialog-panel.component.d.ts

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class ElderDialogPanelComponent {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderDialogPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderDialogPanelComponent, "elder-dialog-panel", never, {}, {}, never, ["*"], false>;
+}

package/lib/components/panels/elder-panel.module.d.ts

@@ -1,13 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./flat/elder-panel.component";
 import * as i2 from "./card-panel/elder-card-panel.component";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/material/core";
-import * as i5 from "@angular/flex-layout";
+import * as i3 from "./elder-dialog-panel/elder-dialog-panel.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/material/core";
+import * as i6 from "@angular/flex-layout";
 export { ElderPanelComponent } from './flat/elder-panel.component';
 export { ElderCardPanelComponent } from './card-panel/elder-card-panel.component';
+export { ElderDialogPanelComponent } from './elder-dialog-panel/elder-dialog-panel.component';
 export declare class ElderPanelModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderPanelModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderPanelModule, [typeof i1.ElderPanelComponent, typeof i2.ElderCardPanelComponent], [typeof i3.CommonModule, typeof i4.MatCommonModule, typeof i5.FlexLayoutModule], [typeof i1.ElderPanelComponent, typeof i2.ElderCardPanelComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderPanelModule, [typeof i1.ElderPanelComponent, typeof i2.ElderCardPanelComponent, typeof i3.ElderDialogPanelComponent], [typeof i4.CommonModule, typeof i5.MatCommonModule, typeof i6.FlexLayoutModule], [typeof i1.ElderPanelComponent, typeof i2.ElderCardPanelComponent, typeof i3.ElderDialogPanelComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderPanelModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "14.4.0-beta.24",
+  "version": "14.4.0-beta.25",
   "peerDependencies": {
     "@angular/common": "^14.0.0",
     "@angular/core": "^14.0.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($primary), 0.24); // app-bar
     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/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);
   }
 
 }