@lukfel/ng-scaffold 20.0.56 → 20.0.58
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 +7 -7
- package/fesm2022/lukfel-ng-scaffold.mjs +27 -41
- package/fesm2022/lukfel-ng-scaffold.mjs.map +1 -1
- package/index.d.ts +2 -7
- package/package.json +1 -1
- package/schematics/ng-add/add-config.js +18 -21
- package/schematics/ng-add/add-config.js.map +1 -1
- package/schematics/ng-add/add-module.js +8 -2
- package/schematics/ng-add/add-module.js.map +1 -1
- package/schematics/ng-add/add-template.d.ts +1 -1
- package/schematics/ng-add/add-template.js +9 -7
- package/schematics/ng-add/add-template.js.map +1 -1
- package/styles/_classes.scss +1 -1
- package/styles/_variables.scss +61 -58
- package/styles/style.scss +2 -1
package/README.md
CHANGED
|
@@ -67,7 +67,7 @@ export class AppComponent {
|
|
|
67
67
|
}
|
|
68
68
|
```
|
|
69
69
|
|
|
70
|
-
### Update Configuration
|
|
70
|
+
### (Optional) Update Configuration
|
|
71
71
|
The `ScaffoldService` provides `updateScaffoldProperty()` to partially update the `ScaffoldConfig` in a type-safe way. It performs an immutable update, creating a new configuration object with the updated property and emits the new state.
|
|
72
72
|
|
|
73
73
|
```ts
|
|
@@ -128,7 +128,7 @@ Import the styles in your `styles.scss` and apply a default theme.
|
|
|
128
128
|
@include lf.scaffold-theme(); // include a default theme
|
|
129
129
|
```
|
|
130
130
|
|
|
131
|
-
### Custom Themes
|
|
131
|
+
### (Optional) Custom Themes
|
|
132
132
|
To customize the default theme, define a new theme map specifying `primary`, `accent`, and `warn` colors using Material palettes. Enabling the `dark` option applies a dark theme. Pass your custom theme to `lf.scaffold-theme($my-theme)`.
|
|
133
133
|
|
|
134
134
|
```scss
|
|
@@ -145,7 +145,7 @@ $my-theme: (
|
|
|
145
145
|
@include lf.scaffold-theme($my-theme);
|
|
146
146
|
```
|
|
147
147
|
|
|
148
|
-
### Multiple Themes
|
|
148
|
+
### (Optional) Multiple Themes
|
|
149
149
|
To switch between multiple themes dynamically, define additional themes using `lf.scaffold-colors($theme, 'theme-class')`, then apply the class to the `<body class="theme-class">` tag.
|
|
150
150
|
|
|
151
151
|
* **Note:** The `ThemeService` allows dynamic theme switching.
|
|
@@ -171,7 +171,7 @@ $my-theme2: (
|
|
|
171
171
|
@include lf.scaffold-colors($my-theme2, 'my-theme2'); // Set additional themes with lf.scaffold-colors(...)
|
|
172
172
|
```
|
|
173
173
|
|
|
174
|
-
### Custom Typography
|
|
174
|
+
### (Optional) Custom Typography
|
|
175
175
|
To change the default typography from Roboto, pass an additional parameter ``font-family`` in the theme map.
|
|
176
176
|
|
|
177
177
|
* **Note:** Don't forget to also import and set the font-family in the styles.
|
|
@@ -201,7 +201,7 @@ body {
|
|
|
201
201
|
## Events
|
|
202
202
|
There are two ways to listen to scaffold user events (button clicks, input changes, ...):
|
|
203
203
|
|
|
204
|
-
### Option 1
|
|
204
|
+
### (Recommended) Option 1 – Subscribe to Event Observables
|
|
205
205
|
Subscribe to the event Observables and listen to changes
|
|
206
206
|
```ts
|
|
207
207
|
constructor(private scaffoldService: ScaffoldService, private router: Router) {
|
|
@@ -254,7 +254,7 @@ public navbarButtonClickEvent(id: string): void {
|
|
|
254
254
|
|
|
255
255
|
|
|
256
256
|
|
|
257
|
-
## Additional Services
|
|
257
|
+
## (Optional) Additional Services
|
|
258
258
|
This library includes several utility services:
|
|
259
259
|
|
|
260
260
|
- **`Logger`** – Development-only logging
|
|
@@ -513,7 +513,7 @@ public onPlaceholderButtonClick(): void {
|
|
|
513
513
|
|
|
514
514
|
|
|
515
515
|
|
|
516
|
-
## Interceptors
|
|
516
|
+
## (Optional) Interceptors
|
|
517
517
|
Intercept HTTP Calls and automatically show a loading spinner.
|
|
518
518
|
|
|
519
519
|
* **Note:** The loading spinner can also be manually shown by udpating the value for `scaffoldConfig.loading` in the `ScaffoldService`
|