@elderbyte/ngx-starter 20.0.0-beta.1 → 20.0.0-beta.2
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 +1085 -1085
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/index.d.ts +27 -27
- package/package.json +1 -1
- 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.
|
package/package.json
CHANGED
|
@@ -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
|
}
|