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

package/lib/common/utils/public_api.d.ts

@@ -11,3 +11,4 @@ export * from './query-list-binding';
 export * from './parse-util';
 export * from './focus-util';
 export * from './batcher';
+export * from './signal-input';

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

@@ -37,10 +37,12 @@ export declare abstract class ElderDataViewBaseComponent implements IElderDataVi
      */
     private _dense;
     /**
+     * @deprecated This property is no longer relevant, since we always render the elements as embedded.
      * The appearance of the surrounding card container.
      */
     private _appearance;
     /**
+     * @deprecated This property is no longer relevant, since we always render the elements as embedded.
      * If true, this table is in embedded mode.
      * No borders / floating visible so that the table can be embedded into another container
      */
@@ -101,9 +103,21 @@ export declare abstract class ElderDataViewBaseComponent implements IElderDataVi
      * @deprecated Switch to appearance="raised"
      */
     set float(value: BooleanInput);
+    /**
+     * @deprecated , since we always render the elements as embedded.
+     */
     set appearance(value: MatCardAppearance);
+    /**
+     * @deprecated , since we always render the elements as embedded.
+     */
     get appearance(): MatCardAppearance;
+    /**
+     * @deprecated , since we always render the elements as embedded.
+     */
     set embedded(value: boolean | '');
+    /**
+     * @deprecated , since we always render the elements as embedded.
+     */
     get embedded(): boolean | '';
     /***************************************************************************
      *                                                                         *

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

@@ -1,11 +1,6 @@
-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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderBasicPaneLayoutComponent, "elder-basic-pane-layout", never, {}, {}, never, ["*"], true, never>;
 }

package/lib/components/layout/pane/header/pane-actions.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class ElderPaneActionsComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderPaneActionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderPaneActionsComponent, "elder-pane-actions", never, {}, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class ElderPaneHeaderComponent {
+    class: string;
+    title: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderPaneHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderPaneHeaderComponent, "elder-pane-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; }, {}, never, ["mat-icon, [mat-icon-button]", "[start]", "elder-pane-title", "[center]", "elder-pane-actions", "[end]", "*"], true, never>;
+}

package/lib/components/layout/pane/header/pane-title.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class ElderPaneTitleComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderPaneTitleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderPaneTitleComponent, "elder-pane-title", never, {}, {}, never, ["*"], true, never>;
+}

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

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class ElderPaneContentComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderPaneContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderPaneContentComponent, "elder-pane-content", never, {}, {}, never, ["*"], true, never>;
+}

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

@@ -2,5 +2,5 @@ import * as i0 from "@angular/core";
 export declare class ElderPaneComponent {
     class: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderPaneComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderPaneComponent, "elder-pane", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderPaneComponent, "elder-pane", never, {}, {}, never, ["elder-pane-header", "elder-pane-content", "*"], true, never>;
 }

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

@@ -1,2 +1,6 @@
 export * from './pane/pane.component';
+export * from './pane/pane-content.component';
+export * from './pane/header/pane-header.component';
+export * from './pane/header/pane-title.component';
+export * from './pane/header/pane-actions.component';
 export * from './basic-pane-layout/basic-pane-layout.component';

package/lib/components/select/single/elder-select/elder-select.component.d.ts

@@ -144,6 +144,6 @@ export declare class ElderSelectComponent<TEntity = any, TId = any, TValue = TEn
      */
     protected writeToControl(value: TValue): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectComponent<any, any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderSelectComponent<any, any, any>, "elder-select", never, { "nullDisplay": { "alias": "nullDisplay"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "entity": { "alias": "entity"; "required": false; }; "entityId": { "alias": "entityId"; "required": false; }; }, { "entityIdChange": "entityIdChange"; "entityIdUpdated": "entityIdUpdated"; "entityChange": "entityChange"; "entityUpdated": "entityUpdated"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderSelectComponent<any, any, any>, "elder-select", never, { "nullDisplay": { "alias": "nullDisplay"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "entity": { "alias": "entity"; "required": false; }; "entityId": { "alias": "entityId"; "required": false; }; }, { "entityIdChange": "entityIdChange"; "entityIdUpdated": "entityIdUpdated"; "entityChange": "entityChange"; "entityUpdated": "entityUpdated"; "entity$": "entity"; }, never, never, true, never>;
 }
 export {};

package/package.json

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

package/src/lib/components/card-organizer/card-stack/elder-card-stack.component.scss

@@ -1,15 +1,11 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  .card-stack {
-    //background-color: var(--md-sys-color-surface-container);
-    border-radius: var(--elder-border-radius-sm);
-    border: var(--elder-border-light);
-  }
+.card-stack {
+  //background-color: var(--md-sys-color-surface-container);
+  border-radius: var(--elder-border-radius-sm);
+  border: var(--elder-border-light);
+}
 
-  .card-list.cdk-drop-list-dragging {
-    border: 2px dashed var(--md-sys-color-outline-variant);
-  }
+.card-list.cdk-drop-list-dragging {
+  border: 2px dashed var(--md-sys-color-outline-variant);
 }
 
 .stack-header {

package/src/lib/components/data-transfer/http-data-transfer-overview/http-data-transfer-overview.component.scss

@@ -15,12 +15,13 @@
 }
 
 .elevated-card {
-  margin-top: 4px; // fix for position
-  box-shadow: var(--mat-app-elevation-shadow-level-5, none) !important;
-  background-color: var(--md-sys-color-surface-container-low) !important;
+  background-color: var(--mdc-elevated-card-container-color);
+  border-radius: var(--elder-border-radius-sm);
+  border-radius: var(--elder-pane-border-radius);
+  overflow: hidden;
+  box-shadow: var(--mat-app-elevation-shadow-level-5, none);
 }
 
 .toolbar-dark-bg {
-  background-color: var(--md-sys-color-surface-container);
-  border-radius: 10px;
+  background-color: var(--md-sys-color-surface-container-low);
 }

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

@@ -1,87 +1,5 @@
-@use '@angular/material' as mat;
-
 $elder-tile-padding: 8px;
 
-@mixin theme($theme) {
-  .elder-grid-container {
-    border-radius: var(--elder-border-radius-sm);
-  }
-
-  mat-card:has(> .elder-grid-container) {
-    background-color: var(--md-sys-color-surface-container-lowest);
-  }
-
-  .elder-grid-flat {
-    border: var(--elder-border-light);
-  }
-
-  .elder-grid-toolbar {
-    min-height: 44px;
-  }
-
-  .elder-grid-footer {
-    min-height: 44px;
-  }
-
-  .elder-grid-tile {
-    overflow: hidden;
-    flex: 0 1 100%;
-    flex-grow: 1;
-    margin: 0 $elder-tile-padding;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    // background-color: rgba(
-    //   mat.get-theme-color($theme, neutral, 80),
-    //   0.34
-    // ); // default background
-    background-color: var(--md-sys-color-surface-container-low);
-    text-align: left;
-    transition:
-      box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
-      border 0.25s linear;
-  }
-
-  .elder-grid-tile:hover {
-    //border-color: rgba(var(--md-sys-color-primary), 0.75);
-    border-color: var(--md-sys-color-primary);
-  }
-
-  .elder-grid-tile-content:hover .elder-grid-tile-overlay {
-    opacity: 1;
-    background-color: rgba(white, 0.08);
-  }
-
-  .elder-grid-tile:active {
-    z-index: 100;
-    box-shadow: var(--elder-box-shadow-default);
-  }
-
-  .elder-grid-tile-check {
-    pointer-events: auto;
-    mat-icon {
-      color: var(--md-sys-color-outline-variant);
-      background-color: var(--md-sys-color-surface);
-      border-radius: 12px;
-    }
-
-    mat-icon.elder-selected {
-      color: var(--md-sys-color-tertiary);
-    }
-  }
-
-  .elder-grid-tile-check:hover {
-    mat-icon {
-      color: var(--md-sys-color-primary);
-    }
-  }
-}
-
-:host {
-  min-width: 0;
-  min-height: 0;
-}
-
 .elder-grid-tile-row {
   display: flex;
   flex-direction: row;
@@ -127,3 +45,73 @@ $elder-tile-padding: 8px;
 .elder-grid-tile-overlay-hidden {
   opacity: 0;
 }
+
+.elder-grid-container {
+  background-color: var(--elder-grid-background-color);
+}
+
+// mat-card:has(> .elder-grid-container) {
+//   background-color: var(--md-sys-color-surface-container-lowest);
+// }
+
+.elder-grid-flat {
+  border: var(--elder-border-light);
+}
+
+.elder-grid-toolbar {
+  min-height: 44px;
+}
+
+.elder-grid-footer {
+  min-height: var(--elder-data-element-footer-height);
+}
+
+.elder-grid-tile {
+  overflow: hidden;
+  flex: 0 1 100%;
+  flex-grow: 1;
+  margin: 0 $elder-tile-padding;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  border-radius: var(--elder-pane-border-radius);
+  background-color: var(--md-sys-color-surface-container-low);
+  text-align: left;
+  transition:
+    box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
+    border 0.25s linear;
+}
+
+.elder-grid-tile:hover {
+  //border-color: rgba(var(--md-sys-color-primary), 0.75);
+  border-color: var(--md-sys-color-primary);
+}
+
+.elder-grid-tile-content:hover .elder-grid-tile-overlay {
+  opacity: 1;
+  background-color: rgba(white, 0.08);
+}
+
+.elder-grid-tile:active {
+  z-index: 100;
+  box-shadow: var(--elder-box-shadow-default);
+}
+
+.elder-grid-tile-check {
+  pointer-events: auto;
+  mat-icon {
+    color: var(--md-sys-color-outline-variant);
+    background-color: var(--md-sys-color-surface);
+    border-radius: 12px;
+  }
+
+  mat-icon.elder-selected {
+    color: var(--md-sys-color-tertiary);
+  }
+}
+
+.elder-grid-tile-check:hover {
+  mat-icon {
+    color: var(--md-sys-color-primary);
+  }
+}

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

@@ -1,138 +1,120 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
+:host {
+    /** https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 **/
+    // firefox-scroll-fix
+    min-width: 0;
+    min-height: 0;
 }
 
-@mixin theme($theme) {
-  & {
-    --mat-paginator-container-background-color: var(--md-sys-color-surface-container-low);
-  }
-
-  .elder-mat-inner-table {
+.elder-mat-inner-table {
     width: 100%;
-  }
+}
 
-  .elder-table-row.dense {
+.elder-table-row.dense {
     height: 42px !important;
-  }
+}
 
-  .elder-mat-table-container {
+.elder-mat-table-container {
     border-radius: var(--elder-border-radius-sm);
     overflow: hidden;
-  }
+}
 
-  /**
- * Style for the select column
- */
-  .mat-column-select {
+/**
+* Style for the select column
+*/
+.mat-column-select {
     overflow: initial;
     min-width: 72px;
     max-width: 5%;
     width: 72px;
-  }
+}
 
-  .elder-row-removing {
+.elder-row-removing {
     text-decoration: line-through;
-  }
+}
 
-  .elder-row-hidden {
+.elder-row-hidden {
     display: none;
-  }
+}
 
-  /******************************
-  Clickable row
-  *******************************/
+/******************************
+Clickable row
+*******************************/
 
-  .elder-table-row {
+.elder-table-row {
     cursor: pointer;
-  }
-
-  /** https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 **/
-  // firefox-scroll-fix
-  :host {
-    min-width: 0;
-    min-height: 0;
-  }
+}
 
-  .elder-table-hint {
+.elder-table-hint {
     color: gray;
-  }
+}
 
-  .elder-table-footer {
-    height: 44px;
-  }
+.elder-table-footer {
+    height: var(--elder-data-element-footer-height);
+}
 
-  .elder-table-checkbox {
+.elder-table-checkbox {
     opacity: 0.25;
-
-    -webkit-transition: opacity 0.5s ease-in-out;
-    -moz-transition: opacity 0.5s ease-in-out;
     transition: opacity 0.5s ease-in-out;
-  }
+}
 
-  .elder-table-row:hover .elder-table-checkbox {
+.elder-table-row:hover .elder-table-checkbox {
     opacity: 0.9;
-  }
+}
 
-  .elder-table-checkbox-visible {
+.elder-table-checkbox-visible {
     opacity: 1;
-  }
+}
 
-  .elder-table-inner {
+.elder-table-inner {
     background-color: var(--md-sys-color-surface-container-lowest);
-  }
-
-  .elder-table-row:hover {
-    background-color: var(--md-sys-color-surface-container);
-    cursor: pointer;
-  }
+}
 
-  .elder-table-row:focus {
+.elder-table-row:focus {
     // Disable browser focus style
     box-shadow: none;
     outline-style: none;
     td {
-      background-color: var(
-        --md-sys-color-primary-container
-      ); // OLD: background-color: mat.m2-get-color-from-palette($accent, default, 0.3);
-      border-bottom: var(
-        --md-sys-color-tertiary-fixed
-      ); // OLD: border-bottom: 1px solid mat.m2-get-color-from-palette($accent, default);
+    background-color: var(--elder-color-highlight-strong);
+    border-bottom: var(--md-sys-color-tertiary-fixed);
     }
-  }
-  .elder-table-row.elder-table-row-activated {
-    //background-color: var(--md-sys-color-surface-dim);
-    background-color: var(--md-sys-color-primary-container);
-  }
+}
+.elder-table-row.elder-table-row-activated {
+    background-color: var(--elder-color-highlight-strong);
+}
 
-  .elder-table-row.elder-table-row-selected {
-    background-color: var(--md-sys-color-primary-container);
-  }
+.elder-table-row.elder-table-row-selected {
+    background-color: var(--elder-color-highlight-variant);
+}
 
-  .elder-mat-table-flat {
+.elder-table-row:hover {
+    background-color: var(--elder-color-highlight-light);
+    cursor: pointer;
+}
+
+.elder-mat-table-flat {
     border: var(--elder-border-light);
-  }
+}
 
-  .elder-table {
+.elder-table {
     background-color: var(--mat-table-background-color);
 
     // Fix line height of paginator section
     .mat-mdc-paginator {
-      .mat-mdc-form-field,
-      .mat-mdc-floating-label {
+    .mat-mdc-form-field,
+    .mat-mdc-floating-label {
         line-height: unset;
-      }
+    }
 
-      .mat-mdc-select {
+    .mat-mdc-select {
         line-height: unset;
-      }
+    }
     }
 
     $pad: 8px;
     $pad-right: 12px;
 
     .elder-mat-inner-table.mat-mdc-table {
-      .mat-mdc-header-cell {
+    .mat-mdc-header-cell {
         padding-left: $pad;
         padding-right: $pad-right;
 
@@ -144,33 +126,33 @@
         hyphens: auto;
 
         &:first-of-type {
-          padding-left: $pad + $pad-right;
+        padding-left: $pad + $pad-right;
         }
 
         &: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']) {
+        &[mat-sort-header]:not([arrowposition='before']) {
             padding-right: $pad;
-          }
+        }
         }
 
         &[mat-sort-header] {
-          &[arrowposition='before'] {
+        &[arrowposition='before'] {
             padding-left: 0px;
-          }
+        }
 
-          &:not([arrowposition='before']) {
+        &:not([arrowposition='before']) {
             padding-right: $pad-right;
-          }
+        }
         }
 
         & > .mat-sort-header-container {
-          display: inline-flex;
+        display: inline-flex;
         }
-      }
+    }
 
-      .mat-mdc-cell {
+    .mat-mdc-cell {
         padding-left: $pad;
         padding-right: $pad-right;
 
@@ -181,40 +163,39 @@
         hyphens: auto;
 
         &:first-of-type {
-          padding-left: $pad + $pad-right;
+        padding-left: $pad + $pad-right;
         }
 
         &:last-of-type {
-          padding-right: $pad;
+        padding-right: $pad;
         }
-      }
+    }
 
-      .mat-mdc-footer-cell {
+    .mat-mdc-footer-cell {
         padding-left: $pad;
         padding-right: $pad-right;
         font-weight: bold;
 
         &:first-of-type {
-          padding-left: $pad + $pad-right;
+        padding-left: $pad + $pad-right;
         }
 
         &:last-of-type {
-          padding-right: $pad;
+        padding-right: $pad;
         }
 
         .mat-mdc-paginator {
-          margin-left: -$pad;
-          margin-right: -$pad;
+        margin-left: -$pad;
+        margin-right: -$pad;
         }
-      }
     }
-  }
+    }
+}
 
-  .mat-mdc-row {
+.mat-mdc-row {
     background-color: var(--md-sys-color-surface-container-lowest);
-  }
+}
 
-  .mat-mdc-header-row {
+.mat-mdc-header-row {
     background: var(--md-sys-color-surface-container-lowest) !important;
-  }
 }

package/src/lib/components/files/drag-n-drop/elder-drop-zone/elder-drop-zone.component.scss

@@ -18,14 +18,14 @@
 }
 
 .elder-drop-zone.is-dragover {
-  border: 4px solid var(--md-sys-color-tertiary-fixed);
-  background-color: var(--md-sys-color-tertiary);
+  border: 4px solid var(--md-sys-color-tertiary);
+  background-color: var(--md-sys-color-tertiary-container);
 
   .elder-drop-zone-icon {
-    color: var(--md-sys-color-tertiary-fixed);
+    color: var(--md-sys-color-tertiary);
   }
 
   .elder-drop-zone-prompt {
-    color: var(--md-sys-color-tertiary-fixed);
+    color: var(--md-sys-color-tertiary);
   }
 }

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

@@ -1,3 +1,4 @@
 .elder-search-panel-container {
   min-width: 250px;
+  border-radius: var(--elder-pane-border-radius);
 }