@elderbyte/ngx-starter 19.1.0-beta.1 → 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.1",
+  "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

@@ -373,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

@@ -65,6 +65,7 @@
     --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>;
-}