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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/fesm2022/elderbyte-ngx-starter.mjs +41 -57
  2. package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
  3. package/lib/components/data-view/base/elder-data-view-base.d.ts +14 -0
  4. package/lib/components/shell/shell/elder-shell.component.d.ts +9 -1
  5. package/package.json +1 -1
  6. package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss +1 -0
  7. package/src/lib/components/data-view/table/elder-table/elder-table.component.scss +4 -4
  8. package/theming/style-tweaks/_elder-style-fixes.scss +1 -1
  9. package/theming/system/_elder-design-tokens.scss +30 -4
  10. package/theming/utility-classes/_elder-common-helpers.scss +9 -0
  11. package/lib/components/m3-sidenav/m3-sidenav.component.d.ts +0 -5
package/lib/components/data-view/base/elder-data-view-base.d.ts CHANGED
@@ -37,10 +37,12 @@ export declare abstract class ElderDataViewBaseComponent implements IElderDataVi
37
37
  */
38
38
  private _dense;
39
39
  /**
40
+ * @deprecated This property is no longer relevant, since we always render the elements as embedded.
40
41
  * The appearance of the surrounding card container.
41
42
  */
42
43
  private _appearance;
43
44
  /**
45
+ * @deprecated This property is no longer relevant, since we always render the elements as embedded.
44
46
  * If true, this table is in embedded mode.
45
47
  * No borders / floating visible so that the table can be embedded into another container
46
48
  */
@@ -101,9 +103,21 @@ export declare abstract class ElderDataViewBaseComponent implements IElderDataVi
101
103
  * @deprecated Switch to appearance="raised"
102
104
  */
103
105
  set float(value: BooleanInput);
106
+ /**
107
+ * @deprecated , since we always render the elements as embedded.
108
+ */
104
109
  set appearance(value: MatCardAppearance);
110
+ /**
111
+ * @deprecated , since we always render the elements as embedded.
112
+ */
105
113
  get appearance(): MatCardAppearance;
114
+ /**
115
+ * @deprecated , since we always render the elements as embedded.
116
+ */
106
117
  set embedded(value: boolean | '');
118
+ /**
119
+ * @deprecated , since we always render the elements as embedded.
120
+ */
107
121
  get embedded(): boolean | '';
108
122
  /***************************************************************************
109
123
  * *
package/lib/components/shell/shell/elder-shell.component.d.ts CHANGED
@@ -28,6 +28,13 @@ export declare class ElderShellCenterDirective {
28
28
  static ɵfac: i0.ɵɵFactoryDeclaration<ElderShellCenterDirective, never>;
29
29
  static ɵdir: i0.ɵɵDirectiveDeclaration<ElderShellCenterDirective, "[elderShellCenter]", never, {}, {}, never, never, true, never>;
30
30
  }
31
+ export declare class ElderShellInnerSideNavDirective {
32
+ templateRef: TemplateRef<any>;
33
+ viewContainer: ViewContainerRef;
34
+ constructor(templateRef: TemplateRef<any>, viewContainer: ViewContainerRef);
35
+ static ɵfac: i0.ɵɵFactoryDeclaration<ElderShellInnerSideNavDirective, never>;
36
+ static ɵdir: i0.ɵɵDirectiveDeclaration<ElderShellInnerSideNavDirective, "[elderShellInnerSideNav]", never, {}, {}, never, never, true, never>;
37
+ }
31
38
  export declare class ElderShellComponent implements OnInit, OnDestroy {
32
39
  private shellService;
33
40
  private outletDrawerService;
@@ -47,6 +54,7 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
47
54
  sideContentLeft: TemplateRef<any>;
48
55
  sideContentRight: TemplateRef<any>;
49
56
  centerContent: TemplateRef<any>;
57
+ innerSideNav: TemplateRef<any>;
50
58
  rightSideDrawer: MatSidenav;
51
59
  rightSideOutletName: string;
52
60
  leftSideContentOpen$: Observable<boolean>;
@@ -97,5 +105,5 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
97
105
  private isContained;
98
106
  private checkSoon;
99
107
  static ɵfac: i0.ɵɵFactoryDeclaration<ElderShellComponent, never>;
100
- static ɵcmp: i0.ɵɵComponentDeclaration<ElderShellComponent, "elder-shell", never, { "sideNavToggleEnabled": { "alias": "sideNavToggleEnabled"; "required": false; }; "leftSideAutoFocus": { "alias": "leftSideAutoFocus"; "required": false; }; "rightSideAutoFocus": { "alias": "rightSideAutoFocus"; "required": false; }; "color": { "alias": "color"; "required": false; }; "menuColor": { "alias": "menuColor"; "required": false; }; "menuIconColor": { "alias": "menuIconColor"; "required": false; }; }, {}, ["sideContentLeft", "sideContentRight", "centerContent"], never, true, never>;
108
+ static ɵcmp: i0.ɵɵComponentDeclaration<ElderShellComponent, "elder-shell", never, { "sideNavToggleEnabled": { "alias": "sideNavToggleEnabled"; "required": false; }; "leftSideAutoFocus": { "alias": "leftSideAutoFocus"; "required": false; }; "rightSideAutoFocus": { "alias": "rightSideAutoFocus"; "required": false; }; "color": { "alias": "color"; "required": false; }; "menuColor": { "alias": "menuColor"; "required": false; }; "menuIconColor": { "alias": "menuIconColor"; "required": false; }; }, {}, ["sideContentLeft", "sideContentRight", "centerContent", "innerSideNav"], ["[innerSideNav]"], true, never>;
101
109
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elderbyte/ngx-starter",
3
- "version": "19.1.0-beta.3",
3
+ "version": "19.1.0-beta.5",
4
4
  "peerDependencies": {
5
5
  "@angular/core": "^18.0.0 || ^19.0.0",
6
6
  "@angular/common": "^18.0.0 || ^19.0.0",
package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss CHANGED
@@ -5,6 +5,7 @@ $elder-tile-padding: 8px;
5
5
  @mixin theme($theme) {
6
6
  .elder-grid-container {
7
7
  border-radius: var(--elder-border-radius-sm);
8
+ background-color: var(--elder-grid-background-color);
8
9
  }
9
10
 
10
11
  mat-card:has(> .elder-grid-container) {
package/src/lib/components/data-view/table/elder-table/elder-table.component.scss CHANGED
@@ -83,7 +83,7 @@
83
83
  }
84
84
 
85
85
  .elder-table-row:hover {
86
- background-color: var(--md-sys-color-surface-container);
86
+ background-color: var(--elder-color-highlight-dim);
87
87
  cursor: pointer;
88
88
  }
89
89
 
@@ -93,7 +93,7 @@
93
93
  outline-style: none;
94
94
  td {
95
95
  background-color: var(
96
- --md-sys-color-primary-container
96
+ --elder-color-highlight
97
97
  ); // OLD: background-color: mat.m2-get-color-from-palette($accent, default, 0.3);
98
98
  border-bottom: var(
99
99
  --md-sys-color-tertiary-fixed
@@ -102,11 +102,11 @@
102
102
  }
103
103
  .elder-table-row.elder-table-row-activated {
104
104
  //background-color: var(--md-sys-color-surface-dim);
105
- background-color: var(--md-sys-color-primary-container);
105
+ background-color: var(--elder-color-highlight);
106
106
  }
107
107
 
108
108
  .elder-table-row.elder-table-row-selected {
109
- background-color: var(--md-sys-color-primary-container);
109
+ background-color: var(--elder-color-highlight);
110
110
  }
111
111
 
112
112
  .elder-mat-table-flat {
package/theming/style-tweaks/_elder-style-fixes.scss CHANGED
@@ -376,6 +376,6 @@
376
376
 
377
377
  &.elder-light-theme,
378
378
  &.elder-dark-theme {
379
- --mdc-linear-progress-track-color: var(--md-sys-color-secondary-fixed-dim);
379
+ --mdc-linear-progress-track-color: var(--elder-color-highlight-dim);
380
380
  }
381
381
  }
package/theming/system/_elder-design-tokens.scss CHANGED
@@ -39,11 +39,12 @@
39
39
  // card header
40
40
  --elder-card-header-padding: 15px 15px 5px 15px;
41
41
 
42
- // cards white bg
42
+ // cards, table etc bg
43
43
  --mdc-elevated-card-container-color: var(--md-sys-color-surface-container-lowest);
44
44
  --mdc-outlined-card-container-color: var(--mdc-elevated-card-container-color);
45
45
  --mat-table-background-color: var(--md-sys-color-surface-container-lowest);
46
46
  --mat-paginator-container-background-color: var(--mat-table-background-color);
47
+ --elder-grid-background-color: var(--mat-table-background-color);
47
48
 
48
49
  // elder toast messages
49
50
  --elder-toast-message-color-title-default: var(--md-sys-color-inverse-on-surface);
@@ -54,22 +55,47 @@
54
55
  --elder-toolbar-main-nav-button-color: var(--md-sys-color-on-primary);
55
56
  --elder-toolbar-main-nav-button-container-bg-color: var(--md-sys-color-primary);
56
57
 
58
+ // custom colors
59
+ --elder-blue: rgb(11, 40, 79);
60
+ --elder-gold: rgb(182, 159, 106);
61
+ --elder-gold-darkest: #423d32;
62
+ --elder-gold-semi-dark: #7f7054;
63
+
64
+ --elder-color-highlight: var(--md-sys-color-primary-container);
65
+ --elder-color-highlight-dim: rgb(232, 239, 255);
66
+
67
+ // missing md3 color
68
+ --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
69
+
70
+ &.elder-dark-theme {
71
+ }
72
+
57
73
  // light theme overwrites
58
74
  &.elder-light-theme {
59
- --md-sys-color-primary: rgb(11, 40, 79);
60
- --md-sys-color-tertiary: rgb(182, 159, 106);
75
+ --md-sys-color-primary: var(--elder-blue);
76
+ --md-sys-color-tertiary: var(--elder-gold);
61
77
  }
62
78
 
63
79
  // dark theme overwrites
64
80
  &.elder-dark-theme {
65
- --md-sys-color-primary-container: #826e38; // lighten up dark mode container color
81
+ //--md-sys-color-primary-container: #d2cab4; // lighten up dark mode container color
82
+ --md-sys-color-primary-container: var(--elder-gold-semi-dark);
83
+ --md-sys-color-primary-fixed-dim: var(--elder-gold-darkest);
84
+ --elder-color-highlight-dim: var(--elder-gold-darkest);
85
+ --elder-color-highlight: var(--elder-gold-semi-dark);
86
+ --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
87
+ --md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-surface);
66
88
  --md-sys-color-tertiary-container: var(--md-sys-color-primary-container);
67
89
  --md-sys-color-surface-container-highest: #191919;
68
90
  --md-sys-color-surface-container-lowest: #262626;
69
91
  --md-sys-color-error: #FF999F;
92
+ --md-sys-color-inverse-primary: var(--md-sys-color-primary-container);
93
+ --md-sys-color-surface-tint: var(--elder-gold-darkest);
70
94
  --elder-dark-gray: var(--md-sys-color-surface-container);
71
95
  --mdc-chip-outline-color: rgba(255, 255, 255, 0.3);
72
96
 
97
+
98
+
73
99
  // dark mode specific colors
74
100
  --elder-dark-mode-color-primary: var(--md-sys-color-primary);
75
101
  --elder-dark-mode-color-on-primary: var(--md-sys-color-on-primary);
package/theming/utility-classes/_elder-common-helpers.scss CHANGED
@@ -8,4 +8,13 @@
8
8
  .p-pane {
9
9
  padding: var(--elder-pane-padding);
10
10
  }
11
+ .text-center {
12
+ text-align: center;
13
+ }
14
+ .overflow-hidden {
15
+ overflow: hidden;
16
+ }
17
+ .overflow-auto {
18
+ overflow: auto;
19
+ }
11
20
  }
package/lib/components/m3-sidenav/m3-sidenav.component.d.ts DELETED
@@ -1,5 +0,0 @@
1
- import * as i0 from "@angular/core";
2
- export declare class M3SidenavComponent {
3
- static ɵfac: i0.ɵɵFactoryDeclaration<M3SidenavComponent, never>;
4
- static ɵcmp: i0.ɵɵComponentDeclaration<M3SidenavComponent, "elder-m3-sidenav", never, {}, {}, never, never, true, never>;
5
- }