@elderbyte/ngx-starter 20.0.0-beta.1 → 20.0.0-beta.3
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.
- package/fesm2022/elderbyte-ngx-starter.mjs +1145 -1107
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/index.d.ts +66 -31
- package/package.json +5 -5
- package/src/lib/components/shell/shell/elder-shell.component.scss +2 -2
- package/src/lib/components/toasts/standard-toast/standard-toast.component.scss +2 -2
- package/theming/abstracts/_elder-design-tokens.scss +6 -6
- package/theming/base/_elder-fixes-base.scss +5 -5
- package/theming/base/_elder-form-base.scss +2 -2
- package/theming/components/_elder-toolbar-theme.scss +11 -11
package/index.d.ts
CHANGED
|
@@ -7885,7 +7885,6 @@ declare class DataViewDndControllerService<T> {
|
|
|
7885
7885
|
* Directive adding drag and drop support on an Elder data view.
|
|
7886
7886
|
*/
|
|
7887
7887
|
declare class ElderDataViewDndDirective<T> {
|
|
7888
|
-
private readonly dndController;
|
|
7889
7888
|
readonly _dataView: IElderDataView<T>;
|
|
7890
7889
|
/***************************************************************************
|
|
7891
7890
|
* *
|
|
@@ -7893,6 +7892,7 @@ declare class ElderDataViewDndDirective<T> {
|
|
|
7893
7892
|
* *
|
|
7894
7893
|
**************************************************************************/
|
|
7895
7894
|
private readonly log;
|
|
7895
|
+
private readonly dndController;
|
|
7896
7896
|
private readonly _dataContext;
|
|
7897
7897
|
private readonly _dropList;
|
|
7898
7898
|
/** Used to disconnect obsolete event bindings. */
|
|
@@ -7918,7 +7918,7 @@ declare class ElderDataViewDndDirective<T> {
|
|
|
7918
7918
|
* Constructor *
|
|
7919
7919
|
* *
|
|
7920
7920
|
**************************************************************************/
|
|
7921
|
-
constructor(
|
|
7921
|
+
constructor(_dataView: IElderDataView<T>);
|
|
7922
7922
|
/***************************************************************************
|
|
7923
7923
|
* *
|
|
7924
7924
|
* Properties *
|
|
@@ -7940,6 +7940,31 @@ declare class ElderDataViewDndDirective<T> {
|
|
|
7940
7940
|
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderDataViewDndDirective<any>, "[elderDataViewDnd]", never, { "canDrag": { "alias": "canDrag"; "required": false; "isSignal": true; }; "dropConnectedTo": { "alias": "dropConnectedTo"; "required": false; "isSignal": true; }; "canDragItemPredicate": { "alias": "canDragItemPredicate"; "required": false; "isSignal": true; }; "canEnterPredicate": { "alias": "canEnterPredicate"; "required": false; "isSignal": true; }; "ignoreSamePositionDrops": { "alias": "ignoreSamePositionDrops"; "required": false; "isSignal": true; }; }, { "itemDropped": "itemDropped"; "dropListEntered": "dropListEntered"; "dropListExited": "dropListExited"; }, never, never, true, never>;
|
|
7941
7941
|
}
|
|
7942
7942
|
|
|
7943
|
+
/**
|
|
7944
|
+
* Directive to group multiple drop data view together.
|
|
7945
|
+
* Placing this directive to any element will automatically connect
|
|
7946
|
+
* all ElderDataViewDndDirective elements beneath it.
|
|
7947
|
+
*/
|
|
7948
|
+
declare class ElderDataViewDndGroupDirective<T> {
|
|
7949
|
+
/***************************************************************************
|
|
7950
|
+
* *
|
|
7951
|
+
* Fields *
|
|
7952
|
+
* *
|
|
7953
|
+
**************************************************************************/
|
|
7954
|
+
private readonly groupController;
|
|
7955
|
+
private readonly log;
|
|
7956
|
+
readonly dropViews: i0.Signal<readonly ElderDataViewDndDirective<T>[]>;
|
|
7957
|
+
readonly itemDropped: OutputRef<DataViewItemDropEvent<T>>;
|
|
7958
|
+
/***************************************************************************
|
|
7959
|
+
* *
|
|
7960
|
+
* Constructor *
|
|
7961
|
+
* *
|
|
7962
|
+
**************************************************************************/
|
|
7963
|
+
constructor();
|
|
7964
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ElderDataViewDndGroupDirective<any>, never>;
|
|
7965
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderDataViewDndGroupDirective<any>, "[elderDataViewDndGroup]", never, {}, { "itemDropped": "itemDropped"; }, ["dropViews"], never, true, [{ directive: typeof i1$1.CdkDropListGroup; inputs: {}; outputs: {}; }]>;
|
|
7966
|
+
}
|
|
7967
|
+
|
|
7943
7968
|
/**
|
|
7944
7969
|
* Controller service for a single DataViewDndGroup.
|
|
7945
7970
|
*/
|
|
@@ -7979,31 +8004,6 @@ declare class DataViewDndGroupControllerService<T> {
|
|
|
7979
8004
|
static ɵprov: i0.ɵɵInjectableDeclaration<DataViewDndGroupControllerService<any>>;
|
|
7980
8005
|
}
|
|
7981
8006
|
|
|
7982
|
-
/**
|
|
7983
|
-
* Directive to group multiple drop data view together.
|
|
7984
|
-
* Placing this directive to any element will automatically connect
|
|
7985
|
-
* all ElderDataViewDndDirective elements beneath it.
|
|
7986
|
-
*/
|
|
7987
|
-
declare class ElderDataViewDndGroupDirective<T> {
|
|
7988
|
-
private readonly groupController;
|
|
7989
|
-
/***************************************************************************
|
|
7990
|
-
* *
|
|
7991
|
-
* Fields *
|
|
7992
|
-
* *
|
|
7993
|
-
**************************************************************************/
|
|
7994
|
-
private readonly log;
|
|
7995
|
-
readonly dropViews: i0.Signal<readonly ElderDataViewDndDirective<T>[]>;
|
|
7996
|
-
readonly itemDropped: OutputRef<DataViewItemDropEvent<T>>;
|
|
7997
|
-
/***************************************************************************
|
|
7998
|
-
* *
|
|
7999
|
-
* Constructor *
|
|
8000
|
-
* *
|
|
8001
|
-
**************************************************************************/
|
|
8002
|
-
constructor(groupController: DataViewDndGroupControllerService<T>);
|
|
8003
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ElderDataViewDndGroupDirective<any>, never>;
|
|
8004
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderDataViewDndGroupDirective<any>, "[elderDataViewDndGroup]", never, {}, { "itemDropped": "itemDropped"; }, ["dropViews"], never, true, [{ directive: typeof i1$1.CdkDropListGroup; inputs: {}; outputs: {}; }]>;
|
|
8005
|
-
}
|
|
8006
|
-
|
|
8007
8007
|
/**
|
|
8008
8008
|
* Support util for updating data view models
|
|
8009
8009
|
* according to drop events.
|
|
@@ -16071,19 +16071,37 @@ declare class ElderUrlFragment {
|
|
|
16071
16071
|
constructor(name: string, fragment: string, color?: string, backgroundColor?: string);
|
|
16072
16072
|
}
|
|
16073
16073
|
|
|
16074
|
+
declare class ElderUrlFragmentSwitcherCtx {
|
|
16075
|
+
readonly availableFragments: ElderUrlFragment[];
|
|
16076
|
+
readonly activeFragment: ElderUrlFragment;
|
|
16077
|
+
constructor(availableFragments: ElderUrlFragment[], activeFragment: ElderUrlFragment);
|
|
16078
|
+
}
|
|
16074
16079
|
declare class ElderUrlFragmentSwitcherComponent implements OnInit {
|
|
16075
|
-
private readonly logger;
|
|
16076
16080
|
/***************************************************************************
|
|
16077
16081
|
* *
|
|
16078
16082
|
* Fields *
|
|
16079
16083
|
* *
|
|
16080
16084
|
**************************************************************************/
|
|
16085
|
+
/**
|
|
16086
|
+
* Disables the component
|
|
16087
|
+
*/
|
|
16081
16088
|
disable: boolean;
|
|
16082
|
-
|
|
16089
|
+
/**
|
|
16090
|
+
* Regex which matches the part of the url which will get replaced
|
|
16091
|
+
*/
|
|
16083
16092
|
urlRegex: RegExp;
|
|
16093
|
+
/**
|
|
16094
|
+
* Index of the regex group which will be replaced
|
|
16095
|
+
*/
|
|
16084
16096
|
regexArrayIndex: number;
|
|
16097
|
+
/**
|
|
16098
|
+
* Window which will open the created url
|
|
16099
|
+
*/
|
|
16085
16100
|
windowOpenIn: string;
|
|
16086
|
-
readonly
|
|
16101
|
+
readonly fragmentContext$: Observable<ElderUrlFragmentSwitcherCtx>;
|
|
16102
|
+
private readonly _activeUrlFragment$;
|
|
16103
|
+
private readonly _urlFragments$;
|
|
16104
|
+
private readonly logger;
|
|
16087
16105
|
/***************************************************************************
|
|
16088
16106
|
* *
|
|
16089
16107
|
* Constructor *
|
|
@@ -16096,14 +16114,31 @@ declare class ElderUrlFragmentSwitcherComponent implements OnInit {
|
|
|
16096
16114
|
* *
|
|
16097
16115
|
**************************************************************************/
|
|
16098
16116
|
ngOnInit(): void;
|
|
16117
|
+
/***************************************************************************
|
|
16118
|
+
* *
|
|
16119
|
+
* Properties *
|
|
16120
|
+
* *
|
|
16121
|
+
**************************************************************************/
|
|
16122
|
+
/**
|
|
16123
|
+
* List of url fragments which can replace a part of the window location
|
|
16124
|
+
*/
|
|
16125
|
+
set urlFragments(urlFragments: ElderUrlFragment[]);
|
|
16126
|
+
get urlFragments(): ElderUrlFragment[];
|
|
16127
|
+
get urlFragments$(): Observable<ElderUrlFragment[]>;
|
|
16099
16128
|
/***************************************************************************
|
|
16100
16129
|
* *
|
|
16101
16130
|
* Public API *
|
|
16102
16131
|
* *
|
|
16103
16132
|
**************************************************************************/
|
|
16104
16133
|
setActiveUrlFragment(urlFragment: string): void;
|
|
16134
|
+
/***************************************************************************
|
|
16135
|
+
* *
|
|
16136
|
+
* Private Methods *
|
|
16137
|
+
* *
|
|
16138
|
+
**************************************************************************/
|
|
16139
|
+
private updateActiveFragment;
|
|
16105
16140
|
static ɵfac: i0.ɵɵFactoryDeclaration<ElderUrlFragmentSwitcherComponent, never>;
|
|
16106
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ElderUrlFragmentSwitcherComponent, "elder-url-fragment-switcher", never, { "disable": { "alias": "disable"; "required": false; }; "
|
|
16141
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ElderUrlFragmentSwitcherComponent, "elder-url-fragment-switcher", never, { "disable": { "alias": "disable"; "required": false; }; "urlRegex": { "alias": "urlRegex"; "required": false; }; "regexArrayIndex": { "alias": "regexArrayIndex"; "required": false; }; "windowOpenIn": { "alias": "windowOpenIn"; "required": false; }; "urlFragments": { "alias": "urlFragments"; "required": false; }; }, {}, never, never, true, never>;
|
|
16107
16142
|
}
|
|
16108
16143
|
|
|
16109
16144
|
declare class ElderUrlFragmentModule {
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elderbyte/ngx-starter",
|
|
3
|
-
"version": "20.0.0-beta.
|
|
3
|
+
"version": "20.0.0-beta.3",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@angular/core": "^
|
|
6
|
-
"@angular/common": "^
|
|
7
|
-
"@angular/material": "^
|
|
5
|
+
"@angular/core": "^19.0.0 || ^20.0.0",
|
|
6
|
+
"@angular/common": "^19.0.0 || ^20.0.0",
|
|
7
|
+
"@angular/material": "^19.0.0 || ^20.0.0",
|
|
8
8
|
"@ngx-translate/core": "^16.0.3",
|
|
9
9
|
"rxjs": "^6.5.3 || ^7.5.0",
|
|
10
10
|
"@elderbyte/ts-logger": "^0.1.0",
|
|
11
|
-
"@elderbyte/ngx-simple-webstorage": "^
|
|
11
|
+
"@elderbyte/ngx-simple-webstorage": "^19.0.0 || ^20.0.0",
|
|
12
12
|
"@js-joda/core": "^5.5.3",
|
|
13
13
|
"@js-temporal/polyfill": "^0.4.4"
|
|
14
14
|
},
|
|
@@ -27,7 +27,7 @@ mat-sidenav-container {
|
|
|
27
27
|
|
|
28
28
|
.mat-icon {
|
|
29
29
|
--mat-icon-button-icon-size: 48px !important;
|
|
30
|
-
height: var(--
|
|
31
|
-
width: var(--
|
|
30
|
+
height: var(--mat-icon-button-icon-size);
|
|
31
|
+
width: var(--mat-icon-button-icon-size);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
|
|
5
5
|
&.elder-toast-type-warn {
|
|
6
6
|
--elder-toast-message-color-title: var(--elder-toast-message-color-title-warn);
|
|
7
|
-
--
|
|
7
|
+
--mat-button-filled-container-color: var(--md-sys-color-tertiary);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
&.elder-toast-type-error {
|
|
11
11
|
--elder-toast-message-color-title: var(--elder-toast-message-color-title-error);
|
|
12
|
-
--
|
|
12
|
+
--mat-button-filled-container-color: var(--md-sys-color-error);
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
button {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
--mat-divider-color: var(--md-sys-color-outline-variant); // make divider color lighter
|
|
33
33
|
--mat-sidenav-container-elevation-shadow: var(--mat-app-elevation-shadow-level-16);
|
|
34
34
|
--mat-sidenav-container-background-color: var(--mat-app-background-color);
|
|
35
|
-
--
|
|
35
|
+
--mat-dialog-container-color: var(--md-sys-color-surface-container-lowest);
|
|
36
36
|
--mat-tab-divider-height: 0; // remove tab header divider
|
|
37
37
|
--mat-menu-container-color: var(--md-sys-color-surface-container-lowest);
|
|
38
38
|
--mat-tree-container-background-color: transparent;
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
--md-sys-typescale-title-large: 400 1.3125rem / 1.625rem Roboto, sans-serif;
|
|
44
44
|
|
|
45
45
|
// import fix for overflow of mat-icons, default is 40px in m3, in m2 it was 48px
|
|
46
|
-
--
|
|
46
|
+
--mat-icon-button-state-layer-size: 48px;
|
|
47
47
|
|
|
48
48
|
// add shadow to dialog to improve dark mode
|
|
49
49
|
--mat-dialog-container-elevation-shadow: var(--mat-app-elevation-shadow-level-12);
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
--elder-pane-gap-narrow: #{map.get(config.$sizes, sm)};
|
|
86
86
|
--elder-pane-padding: var(--elder-pane-padding-default);
|
|
87
87
|
--elder-pane-gap: var(--elder-pane-gap-default);
|
|
88
|
-
--elder-pane-border-radius: var(--
|
|
88
|
+
--elder-pane-border-radius: var(--mat-card-outlined-container-shape, 12px);
|
|
89
89
|
--elder-pane-bg-color: var(--md-sys-color-surface-container-lowest);
|
|
90
90
|
--elder-round-corner-side-padding: 10px;
|
|
91
91
|
|
|
@@ -93,8 +93,8 @@
|
|
|
93
93
|
--elder-card-header-padding: 15px 15px 5px 15px;
|
|
94
94
|
|
|
95
95
|
// cards, table etc bg
|
|
96
|
-
--
|
|
97
|
-
--
|
|
96
|
+
--mat-card-elevated-container-color: var(--md-sys-color-surface-container-lowest);
|
|
97
|
+
--mat-card-outlined-container-color: var(--mat-card-elevated-container-color);
|
|
98
98
|
--mat-table-background-color: var(--md-sys-color-surface-container-lowest);
|
|
99
99
|
--mat-paginator-container-background-color: var(--mat-table-background-color);
|
|
100
100
|
--elder-grid-background-color: var(--mat-table-background-color);
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
--md-sys-color-inverse-primary: var(--md-sys-color-primary-container);
|
|
217
217
|
--md-sys-color-surface-tint: var(--elder-gold-dark);
|
|
218
218
|
--elder-dark-gray: var(--md-sys-color-surface-container);
|
|
219
|
-
--
|
|
219
|
+
--mat-chip-outline-color: rgba(255, 255, 255, 0.3);
|
|
220
220
|
--elder-dark-mode-color-primary: var(--md-sys-color-primary);
|
|
221
221
|
--elder-dark-mode-color-on-primary: var(--md-sys-color-on-primary);
|
|
222
222
|
--elder-dark-mode-color-surface: var(--md-sys-color-surface);
|
|
@@ -150,14 +150,14 @@
|
|
|
150
150
|
|
|
151
151
|
&.elder-light-theme .mdc-linear-progress__buffer-bar {
|
|
152
152
|
--mat-progress-bar-track-color: #f8f8f8;
|
|
153
|
-
--
|
|
153
|
+
--mat-progress-bar-track-color: var(--md-sys-color-secondary-fixed-dim);
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
&.elder-light-theme elder-data-transfer-aggregate .mdc-linear-progress__buffer-bar {
|
|
157
|
-
--
|
|
157
|
+
--mat-progress-bar-track-color: var(--elder-gold-semi-light);
|
|
158
158
|
}
|
|
159
159
|
&.elder-dark-theme elder-data-transfer-aggregate .mdc-linear-progress__buffer-bar {
|
|
160
|
-
--
|
|
160
|
+
--mat-progress-bar-track-color: var(--md-sys-color-tertiary-container);
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
/* Fix: Use secondary color on accent buttons and slide toggles.
|
|
@@ -175,8 +175,8 @@
|
|
|
175
175
|
&.elder-light-theme {
|
|
176
176
|
.mat-accent.mat-mdc-slide-toggle {
|
|
177
177
|
--md-sys-color-on-tertiary: white;
|
|
178
|
-
// --
|
|
179
|
-
// --
|
|
178
|
+
// --mat-slide-toggle-selected-focus-handle-color: color-mix(in hsl, var(--md-sys-color-tertiary), black 16%);
|
|
179
|
+
// --mat-slide-toggle-selected-hover-handle-color: color-mix(in hsl, var(--md-sys-color-tertiary), black 16%);
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
182
|
|
|
@@ -350,8 +350,8 @@
|
|
|
350
350
|
*,
|
|
351
351
|
.mat-icon {
|
|
352
352
|
color: var(--md-sys-color-inverse-on-surface);
|
|
353
|
-
--
|
|
354
|
-
--
|
|
353
|
+
--mat-form-field-outlined-input-text-color: var(--md-sys-color-inverse-on-surface) !important;
|
|
354
|
+
--mat-form-field-outlined-caret-color: var(--md-sys-color-inverse-on-surface) !important;
|
|
355
355
|
}
|
|
356
356
|
}
|
|
357
357
|
}
|
|
@@ -77,16 +77,16 @@
|
|
|
77
77
|
--mat-button-text-state-layer-color: var(--md-sys-color-on-surface);
|
|
78
78
|
.mat-toolbar.mat-primary .mat-mdc-unelevated-button:not(:disabled) {
|
|
79
79
|
--mat-button-filled-state-layer-color: var(--md-sys-color-primary);
|
|
80
|
-
--mat-filled-
|
|
81
|
-
--
|
|
80
|
+
--mat-button-filled-label-text-color: var(--md-sys-color-primary);
|
|
81
|
+
--mat-button-filled-container-color: var(--md-sys-color-on-primary);
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
&.elder-dark-theme {
|
|
86
86
|
.mat-toolbar.mat-primary .mat-mdc-unelevated-button:not(:disabled) {
|
|
87
|
-
--
|
|
88
|
-
--mat-filled-
|
|
89
|
-
--
|
|
87
|
+
--mat-button-filled-container-color: var(--md-sys-color-primary);
|
|
88
|
+
--mat-button-filled-state-layer-color: var(--md-sys-color-on-primary);
|
|
89
|
+
--mat-button-filled-label-text-color: var(--md-sys-color-on-primary);
|
|
90
90
|
.mdc-button__label {
|
|
91
91
|
color: var(--md-sys-color-on-primary) !important;
|
|
92
92
|
}
|
|
@@ -98,14 +98,14 @@
|
|
|
98
98
|
// support accent and warn button colors in toolbar
|
|
99
99
|
.mat-toolbar .mat-mdc-unelevated-button:not(:disabled) {
|
|
100
100
|
&.mat-warn {
|
|
101
|
-
--
|
|
102
|
-
--
|
|
103
|
-
--
|
|
101
|
+
--mat-button-filled-container-color: var(--md-sys-color-error);
|
|
102
|
+
--mat-button-filled-label-text-color: var(--md-sys-color-on-error);
|
|
103
|
+
--mat-button-filled-state-layer-color: var(--md-sys-color-on-error);
|
|
104
104
|
}
|
|
105
105
|
&.mat-accent {
|
|
106
|
-
--
|
|
107
|
-
--
|
|
108
|
-
--
|
|
106
|
+
--mat-button-filled-container-color: var(--md-sys-color-tertiary);
|
|
107
|
+
--mat-button-filled-label-text-color: var(--md-sys-color-on-tertiary);
|
|
108
|
+
--mat-button-filled-state-layer-color: var(--md-sys-color-on-tertiary);
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
}
|