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

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

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

package/lib/components/layout/public_api.d.ts

@@ -1,2 +1,2 @@
 export * from './pane/pane.component';
-export * from './pane-container/pane-container.component';
+export * from './basic-pane-layout/basic-pane-layout.component';

package/lib/components/public_api.d.ts

@@ -40,5 +40,4 @@ export * from './auditing/elder-audit.module';
 export * from './tabs/elder-tab.module';
 export * from './badge/elder-badge.module';
 export * from './page/public_api';
-export { ElderStyleDebuggerComponent } from './style-debugger/style-debugger.component';
 export * from './layout/public_api';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "19.1.0-beta.0",
+  "version": "19.1.0-beta.2",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",

package/src/lib/components/files/blob-viewer/elder-blob-viewer.component.scss

@@ -40,6 +40,6 @@
   height: 100%;
   border-radius: 0px;
   box-shadow: 0px 2px 14px #000;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #fff;
+  border: none;
+  padding: 8px;
 }

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

@@ -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..
   }
 
@@ -374,4 +373,10 @@
       caret-color: currentColor;
     }
   }
+
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    // TMP only for debugging
+    --mdc-linear-progress-track-color: green !important; // TODO REMOVE
+  }
 }

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

@@ -1,8 +1,12 @@
+@use 'sass:map';
+@use './elder-config' as config;
+
 @mixin elder-design-tokens() {
   @include elder-badge-sizing();
 
   // bg color
   --md-sys-color-background: var(--md-sys-color-surface-container-highest);
+  --mat-app-background-color: var(--md-sys-color-background);
 
   // mat variables
   --mat-sidenav-container-width: auto; // is set to around 300px by default in MAT 3 (MAT 2 was auto by default)
@@ -23,8 +27,8 @@
   --elder-lightened-transparent-bg: rgba(255, 255, 255, 0.15);
 
   // elder pane
-  --elder-pane-padding: 8px;
-  --elder-pane-gap: calc(var(--elder-pane-padding) * 2);
+  --elder-pane-padding: #{map.get(config.$sizes, sm)};
+  --elder-pane-gap: #{map.get(config.$sizes, sm)};
   --elder-pane-border-radius: var(
     --mdc-outlined-card-container-shape,
     var(--mat-app-corner-medium)
@@ -49,12 +53,19 @@
   --elder-toolbar-main-nav-button-color: var(--md-sys-color-on-primary);
   --elder-toolbar-main-nav-button-container-bg-color: var(--md-sys-color-primary);
 
+  // light theme overwrites
+  &.elder-light-theme {
+    --md-sys-color-primary: rgb(11, 40, 79);
+    --md-sys-color-tertiary: rgb(182, 159, 106);
+  }
+
   // dark theme overwrites
   &.elder-dark-theme {
     --md-sys-color-primary-container: #826e38; // lighten up dark mode container color
     --md-sys-color-tertiary-container: var(--md-sys-color-primary-container);
     --md-sys-color-surface-container-highest: #191919;
     --md-sys-color-surface-container-lowest: #262626;
+    --md-sys-color-error: #FF999F;
     --elder-dark-gray: var(--md-sys-color-surface-container);
     --mat-sidenav-container-background-color: var(--md-sys-color-surface-container);
     --mdc-chip-outline-color: rgba(255, 255, 255, 0.3);

package/theming/system/_elder-starter-theme.scss

@@ -11,6 +11,8 @@
 @use '../style-tweaks/elder-component-themes' as elder-component-themes;
 @use '../utility-classes/elder-flex-layout' as elder-flex-layout;
 @use '../utility-classes/elder-color-helpers' as elder-color-helpers;
+@use '../utility-classes/elder-typography-helpers' as elder-typography-helpers;
+@use '../utility-classes/elder-common-helpers' as elder-common-helpers;
 @use '../utility-classes/elder-layout-system' as elder-layout-system;
 
 // Create a theme.
@@ -33,6 +35,8 @@
   @include elder-flex-layout.elder-flex-layout($theme);
   @include elder-layout-system.elder-layout-system($theme);
   @include elder-color-helpers.elder-color-helpers();
+  @include elder-typography-helpers.elder-typography-helpers();
+  @include elder-common-helpers.elder-common-helpers();
 
   // component themes rendered in global css
   @include elder-component-themes.theme(

package/theming/utility-classes/_elder-color-helpers.scss

@@ -58,6 +58,10 @@
     }
   }
 
+  .elder-bg-transparent {
+    background-color: transparent;
+  }
+
   // text colors
   @each $name, $value in $color-variables {
     .elder-text-#{$name} {

package/theming/utility-classes/_elder-common-helpers.scss

@@ -0,0 +1,8 @@
+@mixin elder-common-helpers() {
+    .border-none {
+        border: none;
+    }
+    .display-none {
+        display: none; // unfortunately .hidden is already used
+    }
+}

package/theming/utility-classes/_elder-flex-layout.scss

@@ -62,10 +62,6 @@ $media: (
     width: 100%;
   }
 
-  .min-h-full {
-    min-height: 100%;
-  }
-
   /***************************************************************************
    *                                                                         *
    * Flex Layout Row                                                         *

package/theming/utility-classes/_elder-typography-helpers.scss

@@ -0,0 +1,61 @@
+@mixin elder-typography-helpers() {
+    .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/style-debugger/style-debugger.component.d.ts

@@ -1,40 +0,0 @@
-import { Renderer2 } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class ElderStyleDebuggerComponent {
-    private renderer;
-    isHidden: import("@angular/core").WritableSignal<boolean>;
-    isMinimized: import("@angular/core").WritableSignal<boolean>;
-    originalStyleList: {
-        name: string;
-        css: string;
-    }[];
-    styleList: {
-        isActive: boolean;
-        name: string;
-        css: string;
-    }[];
-    activeStyles: {
-        [key: number]: HTMLStyleElement;
-    };
-    stylesJson: string;
-    constructor(renderer: Renderer2);
-    ngOnInit(): void;
-    toggleStyle(index: number): void;
-    activateStyle(index: number): void;
-    toggleAllStyles(): void;
-    activateAllStyles(): void;
-    updateStyle(index: number, $event: Event): void;
-    clearStyles(): void;
-    toggleHidden(): void;
-    toggleMinimize(): void;
-    updateStylesJson(): void;
-    resetToOriginalStyles(): void;
-    resetStylesJson(): void;
-    importStylesFromJsonInputField(): void;
-    updateStylesFromJson(json: string): void;
-    exportStylesFromJsonInputField(): void;
-    saveStylesJsonToLocalStorage(): void;
-    loadStylesJsonFromLocalStorage(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderStyleDebuggerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderStyleDebuggerComponent, "elder-style-debugger", never, {}, {}, never, never, true, never>;
-}