@elderbyte/ngx-starter 19.1.0-beta.1 → 19.1.0-beta.3

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

@@ -0,0 +1,6 @@
+import * as i0 from "@angular/core";
+export declare class ElderBasicPaneLayoutComponent {
+    class: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderBasicPaneLayoutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderBasicPaneLayoutComponent, "elder-basic-pane-layout", never, {}, {}, never, ["*"], 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.3",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",

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

@@ -148,7 +148,7 @@
         }
 
         &:last-of-type {
-          padding-right: $pad;
+          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;

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-form.scss

@@ -325,16 +325,18 @@
   .elder-round-form-field {
     border: none;
     border-radius: 24px;
-    background-color: var(--md-sys-color-surface-container-low);
+    background-color: var(--md-sys-color-surface-container);
+    cursor: text;
 
     .mdc-notched-outline .mat-mdc-notch-piece {
       border: none !important;
     }
     &:hover {
-      outline: solid 1px var(--md-sys-color-primary-container);
+      background-color: var(--md-sys-color-surface-container-low);
     }
     &.mat-focused {
       outline: solid 1px var(--md-sys-color-primary);
+      background-color: var(--md-sys-color-surface-container-low);
     }
   }
 }

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

@@ -373,4 +373,9 @@
       caret-color: currentColor;
     }
   }
+
+  &.elder-light-theme,
+  &.elder-dark-theme {
+    --mdc-linear-progress-track-color: var(--md-sys-color-secondary-fixed-dim);
+  }
 }

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

@@ -18,6 +18,7 @@
   --mat-table-row-item-outline-color: var(--md-sys-color-outline-variant);
   --mat-divider-color: var(--md-sys-color-outline-variant); // make divider color lighter
   --mat-sidenav-container-elevation-shadow: var(--mat-app-elevation-shadow-level-16);
+  --mat-sidenav-container-background-color: var(--md-sys-color-surface-container);
 
   // elder custom variables
   --elder-border-radius-sm: 4px; // typical small border radius, inspired by mat 2
@@ -65,8 +66,8 @@
     --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);
 
     // dark mode specific colors

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,11 @@
+@mixin elder-common-helpers() {
+    .border-none {
+        border: none;
+    }
+    .display-none {
+        display: none; // unfortunately .hidden is already used
+    }
+    .p-pane {
+        padding: var(--elder-pane-padding);
+    }
+}

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

@@ -62,10 +62,6 @@ $media: (
     width: 100%;
   }
 
-  .min-h-full {
-    min-height: 100%;
-  }
-
   /***************************************************************************
    *                                                                         *
    * Flex Layout Row                                                         *
@@ -209,6 +205,10 @@ $media: (
     flex: 0 1 auto; // No grow, shrink
   }
 
+  .flex-initial-100 {
+    flex: 1 1 100%;
+  }
+
   .flex-none {
     flex: none;
   }
@@ -315,6 +315,108 @@ $media: (
     }
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * Flex Item Grow/Shrink                                                   *
+   *                                                                         *
+   **************************************************************************/
+
+   .max-w-100 {
+    max-width: 100%;
+  }
+
+  .max-w-90 {
+    max-width: 90%;
+  }
+
+  .max-w-80 {
+    max-width: 80%;
+  }
+
+  .max-w-70 {
+    max-width: 70%;
+  }
+
+  .max-w-60 {
+    max-width: 60%;
+  }
+
+  .max-w-50 {
+    max-width: 50%;
+  }
+
+  .max-w-40 {
+    max-width: 40%;
+  }
+
+  .max-w-30 {
+    max-width: 30%;
+  }
+
+  .max-w-25 {
+    max-width: 25%;
+  }
+
+  .max-w-20 {
+    max-width: 20%;
+  }
+
+  .max-w-15 {
+    max-width: 15%;
+  }
+
+  .max-w-10 {
+    max-width: 10%;
+  }
+
+  .max-h-100 {
+    max-height: 100%;
+  }
+
+  .max-h-90 {
+    max-height: 90%;
+  }
+
+  .max-h-80 {
+    max-height: 80%;
+  }
+
+  .max-h-70 {
+    max-height: 70%;
+  }
+
+  .max-h-60 {
+    max-height: 60%;
+  }
+
+  .max-h-50 {
+    max-height: 50%;
+  }
+
+  .max-h-40 {
+    max-height: 40%;
+  }
+
+  .max-h-30 {
+    max-height: 30%;
+  }
+
+  .max-h-25 {
+    max-height: 25%;
+  }
+
+  .max-h-20 {
+    max-height: 20%;
+  }
+
+  .max-h-15 {
+    max-height: 15%;
+  }
+
+  .max-h-10 {
+    max-height: 10%;
+  }
+
   /***************************************************************************
    *                                                                         *
    * Flex Item Grow/Shrink                                                   *

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>;
-}