@elderbyte/ngx-starter 19.6.2 → 19.7.0
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 +1224 -1247
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/common/data/datasource/data-source.d.ts +1 -1
- package/lib/components/badge/elder-badge/elder-badge.component.d.ts +3 -0
- package/lib/components/chips/elder-chip-label.directive.d.ts +15 -36
- package/lib/components/chips/elder-chips.module.d.ts +1 -1
- package/lib/components/forms/directives/checkbox/elder-triple-state-checkbox-controller.d.ts +4 -2
- package/lib/components/forms/directives/checkbox/elder-triple-state-checkbox.directive.d.ts +9 -3
- package/lib/components/select/multi/elder-multi-select-chips/select-chip-spec.d.ts +2 -1
- package/package.json +1 -1
- package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss +2 -1
- package/src/lib/components/data-view/grid/elder-tile/elder-tile.component.scss +5 -15
- package/theming/abstracts/_elder-design-tokens.scss +16 -26
- package/theming/abstracts/_elder-scss-variables.scss +16 -17
- package/theming/components/_elder-chip-theme.scss +77 -139
|
@@ -5,7 +5,7 @@ import { Page, Pageable } from '../page';
|
|
|
5
5
|
import { TokenChunkRequest } from '../token-chunk-request';
|
|
6
6
|
import { ContinuableListing } from '../continuable-listing';
|
|
7
7
|
import { DataSourceChangeEvent } from './data-source-change-event';
|
|
8
|
-
import { LocalListDataSource } from
|
|
8
|
+
import { LocalListDataSource } from './local/local-list-data-source';
|
|
9
9
|
/***************************************************************************
|
|
10
10
|
* *
|
|
11
11
|
* Data Fetcher APIs *
|
|
@@ -48,6 +48,9 @@ export declare class ElderBadgeComponent {
|
|
|
48
48
|
readonly templates$: Observable<TemplateWrapper>;
|
|
49
49
|
private readonly chipTemplate$;
|
|
50
50
|
private readonly chipAvatarTemplate$;
|
|
51
|
+
/**
|
|
52
|
+
* @deprecated No longer supported - has no effect
|
|
53
|
+
*/
|
|
51
54
|
appearance: ElderChipAppearance;
|
|
52
55
|
/***************************************************************************
|
|
53
56
|
* *
|
|
@@ -1,57 +1,36 @@
|
|
|
1
|
-
import { OnInit } from '@angular/core';
|
|
2
|
-
import { MatChip } from '@angular/material/chips';
|
|
3
1
|
import { ThemePalette } from '@angular/material/core';
|
|
4
2
|
import * as i0 from "@angular/core";
|
|
5
|
-
export
|
|
6
|
-
export type
|
|
3
|
+
export declare const elderChipColorNames: readonly ["white", "grey", "blue", "turquoise", "green", "orange", "yellow", "red", "purple", "pink"];
|
|
4
|
+
export type ElderNamedColor = (typeof elderChipColorNames)[number] | undefined;
|
|
5
|
+
export declare const elderChipColorStates: readonly ["open", "inProgress", "completed", "warn", "error", "other"];
|
|
6
|
+
export type ElderStateColor = (typeof elderChipColorStates)[number] | undefined;
|
|
7
|
+
export declare const elderChipColorLevels: readonly ["low", "medium", "high", "critical"];
|
|
8
|
+
export type ElderLevelColor = (typeof elderChipColorLevels)[number] | undefined;
|
|
7
9
|
export type ElderChipAppearance = 'md3' | 'legacy';
|
|
8
|
-
export declare class ElderChipLabelDirective
|
|
9
|
-
private readonly matChip;
|
|
10
|
+
export declare class ElderChipLabelDirective {
|
|
10
11
|
/***************************************************************************
|
|
11
12
|
* *
|
|
12
13
|
* Fields *
|
|
13
14
|
* *
|
|
14
15
|
**************************************************************************/
|
|
15
16
|
private readonly baseClass;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
/***************************************************************************
|
|
22
|
-
* *
|
|
23
|
-
* Constructor *
|
|
24
|
-
* *
|
|
25
|
-
**************************************************************************/
|
|
26
|
-
constructor(matChip: MatChip);
|
|
27
|
-
ngOnInit(): void;
|
|
28
|
-
/***************************************************************************
|
|
29
|
-
* *
|
|
30
|
-
* Host Bindings *
|
|
31
|
-
* *
|
|
32
|
-
**************************************************************************/
|
|
33
|
-
get classes(): string;
|
|
34
|
-
/***************************************************************************
|
|
35
|
-
* *
|
|
36
|
-
* Properties *
|
|
37
|
-
* *
|
|
38
|
-
**************************************************************************/
|
|
39
|
-
set appearance(appearance: ElderChipAppearance);
|
|
40
|
-
set themeColor(themeColor: ThemePalette);
|
|
41
|
-
set stateColor(stateColor: ElderStateColor);
|
|
42
|
-
set levelColor(levelColor: ElderLevelColor);
|
|
17
|
+
readonly stateColor: import("@angular/core").InputSignal<ElderStateColor>;
|
|
18
|
+
readonly levelColor: import("@angular/core").InputSignal<ElderLevelColor>;
|
|
19
|
+
readonly namedColor: import("@angular/core").InputSignal<ElderNamedColor>;
|
|
20
|
+
readonly themeColor: import("@angular/core").InputSignal<ThemePalette>;
|
|
21
|
+
readonly cssClasses: import("@angular/core").Signal<string>;
|
|
43
22
|
/***************************************************************************
|
|
44
23
|
* *
|
|
45
24
|
* Private methods *
|
|
46
25
|
* *
|
|
47
26
|
**************************************************************************/
|
|
48
|
-
private refreshClasses;
|
|
49
27
|
private buildClassesString;
|
|
50
28
|
private buildClasses;
|
|
51
29
|
private resolveColorClass;
|
|
30
|
+
private getNamedColorClass;
|
|
52
31
|
private getLevelColorClass;
|
|
53
32
|
private getStateColorClass;
|
|
54
33
|
private getThemeColorClass;
|
|
55
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipLabelDirective,
|
|
56
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipLabelDirective, "[elderChipLabel]", never, { "
|
|
34
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipLabelDirective, never>;
|
|
35
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderChipLabelDirective, "[elderChipLabel]", never, { "stateColor": { "alias": "stateColor"; "required": false; "isSignal": true; }; "levelColor": { "alias": "levelColor"; "required": false; "isSignal": true; }; "namedColor": { "alias": "namedColor"; "required": false; "isSignal": true; }; "themeColor": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
57
36
|
}
|
|
@@ -4,7 +4,7 @@ import * as i2 from "@ngx-translate/core";
|
|
|
4
4
|
import * as i3 from "@angular/material/chips";
|
|
5
5
|
import * as i4 from "@angular/cdk/a11y";
|
|
6
6
|
import * as i5 from "./elder-chip-label.directive";
|
|
7
|
-
export { ElderChipLabelDirective } from './elder-chip-label.directive';
|
|
7
|
+
export { ElderChipLabelDirective, elderChipColorStates, elderChipColorLevels, elderChipColorNames, } from './elder-chip-label.directive';
|
|
8
8
|
export declare class ElderChipsModule {
|
|
9
9
|
static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipsModule, never>;
|
|
10
10
|
static ɵmod: i0.ɵɵNgModuleDeclaration<ElderChipsModule, never, [typeof i1.CommonModule, typeof i2.TranslateModule, typeof i3.MatChipsModule, typeof i4.A11yModule, typeof i5.ElderChipLabelDirective], [typeof i5.ElderChipLabelDirective]>;
|
package/lib/components/forms/directives/checkbox/elder-triple-state-checkbox-controller.d.ts
CHANGED
|
@@ -8,25 +8,27 @@ export declare enum TripleCheckboxState {
|
|
|
8
8
|
}
|
|
9
9
|
export declare class ElderTripleStateCheckboxController {
|
|
10
10
|
private readonly checkbox;
|
|
11
|
-
private readonly ngModel
|
|
11
|
+
private readonly ngModel?;
|
|
12
12
|
/***************************************************************************
|
|
13
13
|
* *
|
|
14
14
|
* Fields *
|
|
15
15
|
* *
|
|
16
16
|
**************************************************************************/
|
|
17
17
|
private readonly _stateChange;
|
|
18
|
+
private readonly _valueChange;
|
|
18
19
|
/***************************************************************************
|
|
19
20
|
* *
|
|
20
21
|
* Constructor *
|
|
21
22
|
* *
|
|
22
23
|
**************************************************************************/
|
|
23
|
-
constructor(checkbox: MatCheckbox, ngModel
|
|
24
|
+
constructor(checkbox: MatCheckbox, ngModel?: NgModel);
|
|
24
25
|
/***************************************************************************
|
|
25
26
|
* *
|
|
26
27
|
* Properties *
|
|
27
28
|
* *
|
|
28
29
|
**************************************************************************/
|
|
29
30
|
get stateChange(): Observable<TripleCheckboxState>;
|
|
31
|
+
get valueChange(): Observable<boolean | undefined>;
|
|
30
32
|
/***************************************************************************
|
|
31
33
|
* *
|
|
32
34
|
* Public API *
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { OnInit } from '@angular/core';
|
|
1
|
+
import { OnInit, EventEmitter } from '@angular/core';
|
|
2
2
|
import { MatCheckbox } from '@angular/material/checkbox';
|
|
3
3
|
import { NgModel } from '@angular/forms';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
@@ -11,6 +11,12 @@ export declare class ElderTripleStateCheckboxDirective implements OnInit {
|
|
|
11
11
|
**************************************************************************/
|
|
12
12
|
private readonly log;
|
|
13
13
|
private readonly controller;
|
|
14
|
+
/***************************************************************************
|
|
15
|
+
* *
|
|
16
|
+
* Properties *
|
|
17
|
+
* *
|
|
18
|
+
**************************************************************************/
|
|
19
|
+
valueChange: EventEmitter<boolean>;
|
|
14
20
|
/***************************************************************************
|
|
15
21
|
* *
|
|
16
22
|
* Constructor *
|
|
@@ -29,6 +35,6 @@ export declare class ElderTripleStateCheckboxDirective implements OnInit {
|
|
|
29
35
|
* *
|
|
30
36
|
**************************************************************************/
|
|
31
37
|
toggleNextState(): void;
|
|
32
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<ElderTripleStateCheckboxDirective,
|
|
33
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderTripleStateCheckboxDirective, "mat-checkbox[elderTripleStateCheckbox]", never, {}, {}, never, never, true, never>;
|
|
38
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ElderTripleStateCheckboxDirective, [null, { optional: true; }]>;
|
|
39
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderTripleStateCheckboxDirective, "mat-checkbox[elderTripleStateCheckbox]", never, {}, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
34
40
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ThemePalette } from '@angular/material/core';
|
|
2
|
-
import { ElderLevelColor, ElderStateColor } from '../../../chips/elder-chip-label.directive';
|
|
2
|
+
import { ElderLevelColor, ElderNamedColor, ElderStateColor } from '../../../chips/elder-chip-label.directive';
|
|
3
3
|
export declare class SelectChipSpecUtil {
|
|
4
4
|
static readonly DefaultChipSpec: SelectChipSpec;
|
|
5
5
|
}
|
|
@@ -13,6 +13,7 @@ export interface ChipColorSpec {
|
|
|
13
13
|
themeColor?: ThemePalette;
|
|
14
14
|
stateColor?: ElderStateColor;
|
|
15
15
|
levelColor?: ElderLevelColor;
|
|
16
|
+
namedColor?: ElderNamedColor;
|
|
16
17
|
}
|
|
17
18
|
export interface ChipAvatarSpec {
|
|
18
19
|
/**
|
package/package.json
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
$elder-tile-padding: 8px;
|
|
2
2
|
|
|
3
3
|
.elder-grid-tile {
|
|
4
|
-
// margin: 0 $elder-tile-padding;
|
|
5
4
|
width: 100%;
|
|
6
5
|
height: 100%;
|
|
7
6
|
cursor: pointer;
|
|
7
|
+
overflow: hidden;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.elder-grid-tile-row {
|
|
11
11
|
display: grid;
|
|
12
12
|
align-items: start;
|
|
13
13
|
justify-items: start;
|
|
14
|
+
overflow: hidden;
|
|
14
15
|
|
|
15
16
|
padding: $elder-tile-padding ($elder-tile-padding * 2);
|
|
16
17
|
|
|
@@ -3,22 +3,16 @@
|
|
|
3
3
|
background-color: var(--md-sys-color-surface-container-low);
|
|
4
4
|
text-align: left;
|
|
5
5
|
overflow: hidden;
|
|
6
|
-
transition:
|
|
7
|
-
box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
|
|
8
|
-
border 0.25s linear;
|
|
9
6
|
}
|
|
10
7
|
|
|
11
8
|
.elder-tile:hover {
|
|
12
|
-
|
|
13
|
-
border-color: var(--md-sys-color-primary);
|
|
9
|
+
border-color: var(--elder-color-highlight-hover);
|
|
14
10
|
}
|
|
15
11
|
|
|
16
12
|
.elder-tile-content {
|
|
17
13
|
position: relative;
|
|
18
14
|
width: 100%;
|
|
19
15
|
height: 100%;
|
|
20
|
-
|
|
21
|
-
border-radius: var(--elder-pane-border-radius);
|
|
22
16
|
}
|
|
23
17
|
|
|
24
18
|
.elder-tile-content:hover .elder-selection-overlay {
|
|
@@ -26,11 +20,6 @@
|
|
|
26
20
|
background-color: rgba(white, 0.08);
|
|
27
21
|
}
|
|
28
22
|
|
|
29
|
-
.elder-tile:active {
|
|
30
|
-
z-index: 100;
|
|
31
|
-
box-shadow: var(--elder-box-shadow-default);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
23
|
.elder-selection-overlay {
|
|
35
24
|
position: absolute;
|
|
36
25
|
left: 0;
|
|
@@ -87,7 +76,8 @@
|
|
|
87
76
|
// Disable browser focus style
|
|
88
77
|
// box-shadow: color-mix(in rgb, 80%, black);
|
|
89
78
|
//background-color: color-mix(in sRGB, var(--elder-color-highlight-strong) 80%, black)
|
|
90
|
-
|
|
79
|
+
border: 2px solid var(--elder-color-highlight-focus);
|
|
80
|
+
outline: none;
|
|
91
81
|
|
|
92
82
|
// background-color: var(--elder-color-highlight-strong);
|
|
93
83
|
}
|
|
@@ -96,13 +86,13 @@
|
|
|
96
86
|
// Disable browser focus style
|
|
97
87
|
// box-shadow: color-mix(in rgb, 80%, black);
|
|
98
88
|
//background-color: color-mix(in sRGB, var(--elder-color-highlight-strong) 80%, black)
|
|
99
|
-
|
|
89
|
+
border: 2px solid var(--elder-color-highlight-focus);
|
|
100
90
|
// background-color: var(--elder-color-highlight-strong);
|
|
101
91
|
}
|
|
102
92
|
|
|
103
93
|
.elder-tile.activated {
|
|
104
94
|
// background-color: var(--elder-color-highlight-strong);
|
|
105
|
-
|
|
95
|
+
border: 2px dashed var(--elder-color-highlight-focus);
|
|
106
96
|
.elder-tile-overlay {
|
|
107
97
|
// opacity: 1;
|
|
108
98
|
// background-color: color-mix(in sRGB, var(--elder-color-highlight-strong), transparent 70%);
|
|
@@ -124,11 +124,8 @@
|
|
|
124
124
|
--elder-color-highlight-light: #ebebeb;
|
|
125
125
|
--elder-color-highlight-variant: var(--md-sys-color-secondary-fixed);
|
|
126
126
|
|
|
127
|
-
--elder-color-highlight-focus: color-
|
|
128
|
-
|
|
129
|
-
var(--elder-color-highlight-strong) 80%,
|
|
130
|
-
black
|
|
131
|
-
);
|
|
127
|
+
--elder-color-highlight-focus: var(--md-sys-color-primary);
|
|
128
|
+
--elder-color-highlight-hover: color-mix(in sRGB, var(--md-sys-color-primary) 60%, white);
|
|
132
129
|
|
|
133
130
|
// missing md3 color
|
|
134
131
|
--md-sys-color-on-primary-fixed-dim: var(--md-sys-color-on-primary-fixed);
|
|
@@ -169,24 +166,23 @@
|
|
|
169
166
|
|
|
170
167
|
// chip colors light
|
|
171
168
|
&.elder-light-theme {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
169
|
+
// Base colors
|
|
170
|
+
@each $key, $value in config.$named-colors {
|
|
171
|
+
--elder-named-color-#{$key}: #{$value};
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
// "on" (darker) variants
|
|
175
|
+
@each $key, $value in config.$named-colors-darker {
|
|
176
|
+
--elder-named-color-on-#{$key}: #{$value};
|
|
177
|
+
}
|
|
179
178
|
}
|
|
180
179
|
|
|
181
180
|
// chip colors dark
|
|
182
181
|
&.elder-dark-theme {
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
--elder-chip-color-state-warn: #{map.get(config.$chip-colors-dark, state-warn)};
|
|
188
|
-
--elder-chip-color-state-error: #{map.get(config.$chip-colors-dark, state-error)};
|
|
189
|
-
--elder-chip-color-state-other: #{map.get(config.$chip-colors-dark, state-other)};
|
|
182
|
+
// Base colors
|
|
183
|
+
@each $key, $value in config.$named-colors-darker {
|
|
184
|
+
--elder-named-color-#{$key}: #{$value};
|
|
185
|
+
}
|
|
190
186
|
}
|
|
191
187
|
|
|
192
188
|
&.elder-dark-theme {
|
|
@@ -196,7 +192,7 @@
|
|
|
196
192
|
|
|
197
193
|
&.elder-dark-theme {
|
|
198
194
|
// dark theme blue
|
|
199
|
-
--md-sys-color-primary: hsl(222,
|
|
195
|
+
--md-sys-color-primary: hsl(222, 50%, 65%); // dim primary color
|
|
200
196
|
}
|
|
201
197
|
|
|
202
198
|
// dark theme overwrites
|
|
@@ -208,12 +204,6 @@
|
|
|
208
204
|
--elder-color-highlight-strong: var(--elder-gold-semi-dark);
|
|
209
205
|
--elder-color-highlight-variant: var(--elder-gold-dark);
|
|
210
206
|
|
|
211
|
-
--elder-color-highlight-focus: color-mix(
|
|
212
|
-
in sRGB,
|
|
213
|
-
var(--elder-color-highlight-strong) 70%,
|
|
214
|
-
white
|
|
215
|
-
);
|
|
216
|
-
|
|
217
207
|
--md-sys-color-tertiary-container: var(--elder-gold-semi-dark);
|
|
218
208
|
--md-sys-color-surface-container-highest: #181818;
|
|
219
209
|
--md-sys-color-surface-container: #1e1f20;
|
|
@@ -34,25 +34,24 @@ $custom-colors: (
|
|
|
34
34
|
elder-gold-light: #f0e9d8,
|
|
35
35
|
);
|
|
36
36
|
|
|
37
|
-
$
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
37
|
+
$named-colors: (
|
|
38
|
+
'white': #e1e1e1,
|
|
39
|
+
'grey': #cecbca,
|
|
40
|
+
'blue': #bddcf3,
|
|
41
|
+
'turquoise': #b0e6ef,
|
|
42
|
+
'green': #b1ddce,
|
|
43
|
+
'orange': #f4dab8,
|
|
44
|
+
'yellow': #f3e7ad,
|
|
45
|
+
'red': #e6b6b6,
|
|
46
|
+
'purple': #cdc7e5,
|
|
47
|
+
'pink': #eec2ea,
|
|
45
48
|
);
|
|
46
49
|
|
|
47
|
-
$
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
state-warn: color.adjust(map.get($chip-colors, state-warn), $lightness: -45%),
|
|
53
|
-
state-error: color.adjust(map.get($chip-colors, state-error), $lightness: -45%),
|
|
54
|
-
state-other: color.adjust(map.get($chip-colors, state-other), $lightness: -45%),
|
|
55
|
-
);
|
|
50
|
+
$named-colors-darker: ();
|
|
51
|
+
@each $key, $value in $named-colors {
|
|
52
|
+
$darkened: color.adjust($value, $lightness: -45%);
|
|
53
|
+
$named-colors-darker: map.set($named-colors-darker, $key, $darkened);
|
|
54
|
+
}
|
|
56
55
|
|
|
57
56
|
$palettes: (
|
|
58
57
|
primary: (
|