@lukfel/ng-scaffold 20.0.58 → 20.0.59
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/README.md
CHANGED
|
@@ -59,6 +59,7 @@ export class AppComponent {
|
|
|
59
59
|
|
|
60
60
|
public scaffoldConfig: ScaffoldConfig = {
|
|
61
61
|
// Create your own config or generate it at https://lukfel.github.io/ng-scaffold
|
|
62
|
+
headerConfig: { enable: true, title: 'Scaffold works!' }
|
|
62
63
|
};
|
|
63
64
|
|
|
64
65
|
constructor(private scaffoldService: ScaffoldService) {
|
|
@@ -119,13 +120,13 @@ Wrap your application’s content inside the `lf-scaffold` component in `app.com
|
|
|
119
120
|
|
|
120
121
|
|
|
121
122
|
## Styling
|
|
122
|
-
Import the styles in your `styles.scss` and apply
|
|
123
|
+
Import the styles in your `styles.scss` and apply the default theme.
|
|
123
124
|
|
|
124
125
|
* **Note:** The library’s styles include Material icons and Roboto font styles.
|
|
125
126
|
|
|
126
127
|
```scss
|
|
127
128
|
@use "@lukfel/ng-scaffold/styles" as lf;
|
|
128
|
-
@include lf.scaffold-theme(); //
|
|
129
|
+
@include lf.scaffold-theme(); // Include default theme
|
|
129
130
|
```
|
|
130
131
|
|
|
131
132
|
### (Optional) Custom Themes
|
|
@@ -135,14 +136,15 @@ To customize the default theme, define a new theme map specifying `primary`, `ac
|
|
|
135
136
|
@use "@lukfel/ng-scaffold/styles" as lf;
|
|
136
137
|
@use '@angular/material' as mat;
|
|
137
138
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
139
|
+
// Define theme (use Material palettes or create your own)
|
|
140
|
+
$base-theme: (
|
|
141
|
+
primary: mat.m2-define-palette(mat.$m2-pink-palette),
|
|
142
|
+
accent: mat.m2-define-palette(mat.$m2-blue-palette),
|
|
143
|
+
warn: mat.m2-define-palette(mat.$m2-red-palette),
|
|
142
144
|
dark: false
|
|
143
145
|
);
|
|
144
146
|
|
|
145
|
-
@include lf.scaffold-theme($
|
|
147
|
+
@include lf.scaffold-theme($base-theme);
|
|
146
148
|
```
|
|
147
149
|
|
|
148
150
|
### (Optional) Multiple Themes
|
|
@@ -154,21 +156,23 @@ To switch between multiple themes dynamically, define additional themes using `l
|
|
|
154
156
|
@use "@lukfel/ng-scaffold/styles" as lf;
|
|
155
157
|
@use '@angular/material' as mat;
|
|
156
158
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
159
|
+
// Define themes (use Material palettes or create your own)
|
|
160
|
+
$base-theme: (
|
|
161
|
+
primary: mat.m2-define-palette(mat.$m2-pink-palette),
|
|
162
|
+
accent: mat.m2-define-palette(mat.$m2-blue-palette),
|
|
163
|
+
warn: mat.m2-define-palette(mat.$m2-red-palette),
|
|
161
164
|
dark: false
|
|
162
165
|
);
|
|
163
166
|
|
|
164
|
-
$
|
|
165
|
-
primary: mat.define-palette(mat.$
|
|
166
|
-
accent: mat.define-palette(mat.$
|
|
167
|
-
dark:
|
|
167
|
+
$theme2: (
|
|
168
|
+
primary: mat.m2-define-palette(mat.$m2-pink-palette),
|
|
169
|
+
accent: mat.m2-define-palette(mat.$m2-blue-palette),
|
|
170
|
+
dark: true
|
|
168
171
|
);
|
|
169
172
|
|
|
170
|
-
|
|
171
|
-
@include lf.scaffold-
|
|
173
|
+
// Include themes (use ThemeService to switch between themes)
|
|
174
|
+
@include lf.scaffold-theme($base-theme);
|
|
175
|
+
@include lf.scaffold-colors($theme2, 'theme2');
|
|
172
176
|
```
|
|
173
177
|
|
|
174
178
|
### (Optional) Custom Typography
|
|
@@ -180,15 +184,15 @@ To change the default typography from Roboto, pass an additional parameter ``fon
|
|
|
180
184
|
@use "@lukfel/ng-scaffold/styles" as lf;
|
|
181
185
|
@use '@angular/material' as mat;
|
|
182
186
|
|
|
183
|
-
$
|
|
184
|
-
primary: mat.define-palette(mat.$pink-palette),
|
|
185
|
-
accent: mat.define-palette(mat.$blue-palette),
|
|
186
|
-
warn: mat.define-palette(mat.$red-palette),
|
|
187
|
+
$base-theme: (
|
|
188
|
+
primary: mat.m2-define-palette(mat.$m2-pink-palette),
|
|
189
|
+
accent: mat.m2-define-palette(mat.$m2-blue-palette),
|
|
190
|
+
warn: mat.m2-define-palette(mat.$m2-red-palette),
|
|
187
191
|
dark: false,
|
|
188
192
|
font-family: 'Comic Sans'
|
|
189
193
|
);
|
|
190
194
|
|
|
191
|
-
@include lf.scaffold-theme($
|
|
195
|
+
@include lf.scaffold-theme($base-theme);
|
|
192
196
|
|
|
193
197
|
body {
|
|
194
198
|
font-family: "Comic Sans MS" !important;
|
|
@@ -379,7 +383,7 @@ export class AppComponent {
|
|
|
379
383
|
|
|
380
384
|
|
|
381
385
|
|
|
382
|
-
## Standalone Components
|
|
386
|
+
## (Optional) Standalone Components
|
|
383
387
|
In addition to the components provided by default by the the `ScaffoldModule` there are several standalone components that can be utilized.
|
|
384
388
|
|
|
385
389
|
* **Note:** Standalone components must be imported manually and are not part of the `ScaffoldModule` import
|
|
@@ -394,7 +398,7 @@ import { ListComponent } from '@lukfel/ng-scaffold';
|
|
|
394
398
|
```ts
|
|
395
399
|
import { Button, ListConfig, ListHeader, ListItem } from '@lukfel/ng-scaffold';
|
|
396
400
|
|
|
397
|
-
public listConfig: ListConfig = {
|
|
401
|
+
public listConfig: ListConfig = { // (Optional) list config
|
|
398
402
|
enableSelection: true,
|
|
399
403
|
enableDragging: true,
|
|
400
404
|
initialSortToken: 'title',
|
|
@@ -402,7 +406,7 @@ public listConfig: ListConfig = {
|
|
|
402
406
|
showDividers: true
|
|
403
407
|
}
|
|
404
408
|
|
|
405
|
-
public listHeader: ListHeader = {
|
|
409
|
+
public listHeader: ListHeader = { // (Optional) list header
|
|
406
410
|
matIcon: 'sort',
|
|
407
411
|
items: [
|
|
408
412
|
{ title: 'Items', sortToken: 'title' }
|
|
@@ -415,12 +419,12 @@ public listItems: ListItem[] = [
|
|
|
415
419
|
{ id: 2, matIcon: 'person', title: 'Item 3', subtitle: 'I have no edit buton', hiddenButtonIds: ['edit'] },
|
|
416
420
|
];
|
|
417
421
|
|
|
418
|
-
public buttons: Button[] = [
|
|
422
|
+
public buttons: Button[] = [ // (Optional) list buttons
|
|
419
423
|
{ id: 'edit', matIcon: 'edit' },
|
|
420
424
|
{ id: 'delete', matIcon: 'delete', cssClass: 'warn' }
|
|
421
425
|
];
|
|
422
426
|
|
|
423
|
-
// Handle sort events
|
|
427
|
+
// (Optional) Handle sort events
|
|
424
428
|
public onListSortChange(event: { sortToken: string, sortAsc: boolean }): void {
|
|
425
429
|
if (event?.sortToken === 'title') {
|
|
426
430
|
this.listItems.sort((a, b) => {
|
package/package.json
CHANGED
|
@@ -7,7 +7,6 @@ exports.addConfig = addConfig;
|
|
|
7
7
|
const ts = require("typescript");
|
|
8
8
|
function addConfig() {
|
|
9
9
|
return (tree, context) => {
|
|
10
|
-
var _a, _b;
|
|
11
10
|
context.logger.info('[Config] Searching for root component ...');
|
|
12
11
|
const possiblePaths = [
|
|
13
12
|
'src/app/app.component.ts',
|
|
@@ -39,18 +38,15 @@ function addConfig() {
|
|
|
39
38
|
context.logger.warn('[Config] Could not find any class in the root component. Skipping.');
|
|
40
39
|
return tree;
|
|
41
40
|
}
|
|
42
|
-
const className = (_b = (_a = classNode.name) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '<unknown>';
|
|
43
|
-
context.logger.info(`[Config] Modifying class ${className}`);
|
|
44
|
-
// Always inject ScaffoldService at class level
|
|
45
41
|
const lastProperty = classNode.members.filter(ts.isPropertyDeclaration).pop();
|
|
46
42
|
const insertPos = lastProperty ? lastProperty.getEnd() : classNode.members.pos;
|
|
47
43
|
recorder.insertLeft(insertPos, `
|
|
48
44
|
private scaffoldService = inject(ScaffoldService);
|
|
49
45
|
private scaffoldConfig: ScaffoldConfig = {
|
|
50
46
|
// Create your own config or generate it at https://lukfel.github.io/ng-scaffold
|
|
47
|
+
headerConfig: { enable: true, title: 'Scaffold works!' }
|
|
51
48
|
};
|
|
52
49
|
`);
|
|
53
|
-
// Ensure constructor exists and sets scaffoldConfig
|
|
54
50
|
const constructorNode = classNode.members.find(ts.isConstructorDeclaration);
|
|
55
51
|
if (constructorNode) {
|
|
56
52
|
const bodyText = constructorNode.body.getFullText(sourceFile);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"add-config.js","sourceRoot":"","sources":["../../../../projects/ng-scaffold/schematics/ng-add/add-config.ts"],"names":[],"mappings":";AAAA;;GAEG;;AAKH,
|
|
1
|
+
{"version":3,"file":"add-config.js","sourceRoot":"","sources":["../../../../projects/ng-scaffold/schematics/ng-add/add-config.ts"],"names":[],"mappings":"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"}
|
|
@@ -27,7 +27,7 @@ function addStyles() {
|
|
|
27
27
|
@use "@lukfel/ng-scaffold/styles" as lf;
|
|
28
28
|
@use '@angular/material' as mat;
|
|
29
29
|
|
|
30
|
-
// Define themes (
|
|
30
|
+
// Define themes (use Material palettes or create your own)
|
|
31
31
|
$base-theme: (
|
|
32
32
|
primary: mat.m2-define-palette(mat.$m2-pink-palette),
|
|
33
33
|
accent: mat.m2-define-palette(mat.$m2-blue-palette),
|