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

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/data-view/table/elder-table/elder-table.component.d.ts

@@ -60,6 +60,7 @@ export declare class ElderTableComponent extends ElderDataViewBaseComponent impl
     pageSizeOptions: number[];
     keepSelection: boolean;
     showFooter: boolean;
+    denseHorizontal: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     canLoadMore$: Observable<boolean>;
     total$: Observable<string>;
     /**
@@ -126,5 +127,5 @@ export declare class ElderTableComponent extends ElderDataViewBaseComponent impl
      **************************************************************************/
     private setupSelectionLifeCycle;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableComponent, [null, { optional: true; }, { optional: true; skipSelf: true; }, { optional: true; }, { optional: true; skipSelf: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderTableComponent, "elder-table", never, { "idField": { "alias": "idField"; "required": false; }; "removingField": { "alias": "removingField"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "keepSelection": { "alias": "keepSelection"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; }, {}, ["columnDefs", "elderColumns", "rowDefs", "toolbarRowTemplateQuery"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderTableComponent, "elder-table", never, { "idField": { "alias": "idField"; "required": false; }; "removingField": { "alias": "removingField"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "keepSelection": { "alias": "keepSelection"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "denseHorizontal": { "alias": "denseHorizontal"; "required": false; "isSignal": true; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; }, {}, ["columnDefs", "elderColumns", "rowDefs", "toolbarRowTemplateQuery"], 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.3",
+  "version": "19.1.0-beta.30",
   "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

@@ -9,18 +9,27 @@
   -webkit-overflow-scrolling: touch;
 }
 
-.scroll-fix {
-  min-width: 0;
-  min-height: 0;
-}
-
 .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;
+.data-transfer-aggregate-container {
+  background-color: var(--md-sys-color-surface-container-low);
+  height: var(--mat-toolbar-standard-height);
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  white-space: nowrap;
+  height: var(--mat-toolbar-standard-height);
+
+  font-family: var(--mat-toolbar-title-text-font, var(--mat-app-title-large-font));
+  font-size: var(--mat-toolbar-title-text-size, var(--mat-app-title-large-size));
+  line-height: var(--mat-toolbar-title-text-line-height, var(--mat-app-title-large-line-height));
+  font-weight: var(--mat-toolbar-title-text-weight, var(--mat-app-title-large-weight));
+  letter-spacing: var(--mat-toolbar-title-text-tracking, var(--mat-app-title-large-tracking));
 }

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

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

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,220 +1,6 @@
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-}
-
-@mixin theme($theme) {
-  & {
-    --mat-paginator-container-background-color: var(--md-sys-color-surface-container-low);
-  }
-
-  .elder-mat-inner-table {
-    width: 100%;
-  }
-
-  .elder-table-row.dense {
-    height: 42px !important;
-  }
-
-  .elder-mat-table-container {
-    border-radius: var(--elder-border-radius-sm);
-    overflow: hidden;
-  }
-
-  /**
- * Style for the select column
- */
-  .mat-column-select {
-    overflow: initial;
-    min-width: 72px;
-    max-width: 5%;
-    width: 72px;
-  }
-
-  .elder-row-removing {
-    text-decoration: line-through;
-  }
-
-  .elder-row-hidden {
-    display: none;
-  }
-
-  /******************************
-  Clickable row
-  *******************************/
-
-  .elder-table-row {
-    cursor: pointer;
-  }
-
+:host {
   /** https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 **/
   // firefox-scroll-fix
-  :host {
-    min-width: 0;
-    min-height: 0;
-  }
-
-  .elder-table-hint {
-    color: gray;
-  }
-
-  .elder-table-footer {
-    height: 44px;
-  }
-
-  .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 {
-    opacity: 0.9;
-  }
-
-  .elder-table-checkbox-visible {
-    opacity: 1;
-  }
-
-  .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 {
-    // 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);
-    }
-  }
-  .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-selected {
-    background-color: var(--md-sys-color-primary-container);
-  }
-
-  .elder-mat-table-flat {
-    border: var(--elder-border-light);
-  }
-
-  .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 {
-        line-height: unset;
-      }
-
-      .mat-mdc-select {
-        line-height: unset;
-      }
-    }
-
-    $pad: 8px;
-    $pad-right: 12px;
-
-    .elder-mat-inner-table.mat-mdc-table {
-      .mat-mdc-header-cell {
-        padding-left: $pad;
-        padding-right: $pad-right;
-
-        // configure automatic wrapping of too long strings
-        overflow-wrap: normal;
-        word-wrap: normal;
-        word-break: normal;
-        white-space: unset;
-        hyphens: auto;
-
-        &:first-of-type {
-          padding-left: $pad + $pad-right;
-        }
-
-        &:last-of-type {
-          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;
-          }
-        }
-
-        &[mat-sort-header] {
-          &[arrowposition='before'] {
-            padding-left: 0px;
-          }
-
-          &:not([arrowposition='before']) {
-            padding-right: $pad-right;
-          }
-        }
-
-        & > .mat-sort-header-container {
-          display: inline-flex;
-        }
-      }
-
-      .mat-mdc-cell {
-        padding-left: $pad;
-        padding-right: $pad-right;
-
-        overflow-wrap: normal;
-        word-wrap: normal;
-        word-break: normal;
-        white-space: unset;
-        hyphens: auto;
-
-        &:first-of-type {
-          padding-left: $pad + $pad-right;
-        }
-
-        &:last-of-type {
-          padding-right: $pad;
-        }
-      }
-
-      .mat-mdc-footer-cell {
-        padding-left: $pad;
-        padding-right: $pad-right;
-        font-weight: bold;
-
-        &:first-of-type {
-          padding-left: $pad + $pad-right;
-        }
-
-        &:last-of-type {
-          padding-right: $pad;
-        }
-
-        .mat-mdc-paginator {
-          margin-left: -$pad;
-          margin-right: -$pad;
-        }
-      }
-    }
-  }
-
-  .mat-mdc-row {
-    background-color: var(--md-sys-color-surface-container-lowest);
-  }
-
-  .mat-mdc-header-row {
-    background: var(--md-sys-color-surface-container-lowest) !important;
-  }
+  min-width: 0;
+  min-height: 0;
 }

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

package/src/lib/components/labels/labels-input/labels-input.component.scss

@@ -1,3 +0,0 @@
-.full-width {
-  width: 100%;
-}

package/src/lib/components/navigation/nav/nav-group/elder-nav-group.component.scss

@@ -1,16 +1,14 @@
-@use '@angular/material' as mat;
-
 .nav-group-button-closed {
   padding-left: 16px;
 }
 
 .nav-group {
-  min-height: 48px;
+  min-height: var(--elder-nav-item-height);
 }
 
 .nav-group-button {
   padding-right: 16px;
-  min-height: 48px;
+  min-height: var(--elder-nav-item-height);
   font-size: 16px;
   font-weight: 400;
   border-radius: var(--elder-border-radius-sm);
@@ -28,5 +26,22 @@
 
 .nav-group-items-container {
   overflow: hidden;
-  // padding-left: 15px;
+}
+
+.nav-group-button:hover {
+  background-color: var(--elder-nav-link-hover-color);
+  transition: background-color 0.5s;
+}
+
+// .nav-group-button:not(.nav-group-button-open) {
+//   .mat-icon {
+//     color: var(--md-sys-color-on-surface);
+//   }
+// }
+
+.nav-group-button-open {
+  padding-left: 11px !important; // -5 to counter border-left
+  // .mat-icon {
+  //   color: var(--md-sys-color-primary);
+  // }
 }