@lukfel/ng-scaffold 21.1.5 → 21.1.9
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 +24 -3
- package/fesm2022/lukfel-ng-scaffold.mjs +138 -82
- package/fesm2022/lukfel-ng-scaffold.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/_variables.scss +2 -2
- package/types/lukfel-ng-scaffold.d.ts +43 -26
package/README.md
CHANGED
|
@@ -383,7 +383,7 @@ In addition to the components provided by default by the the `ScaffoldModule` th
|
|
|
383
383
|
* **Note:** Standalone components must be imported manually and are not part of the `ScaffoldModule` import
|
|
384
384
|
|
|
385
385
|
### List
|
|
386
|
-
A
|
|
386
|
+
A standalone Material Design inspired list and table hybrid component for displaying structured collections of items. It supports avatars, titles, subtitles, actions, selections and dragging — making it ideal for dashboards, inventories, and administrative views.
|
|
387
387
|
|
|
388
388
|
```ts
|
|
389
389
|
import { ListComponent } from '@lukfel/ng-scaffold';
|
|
@@ -455,7 +455,7 @@ public onListItemClick(item: ListItem): void {
|
|
|
455
455
|
```
|
|
456
456
|
|
|
457
457
|
### File-Upload
|
|
458
|
-
A
|
|
458
|
+
A standalone Material Design styled button for selecting and uploading files. It wraps a hidden native file input and exposes a simple, customizable interface with built-in icon, tooltip, and state management.
|
|
459
459
|
|
|
460
460
|
```ts
|
|
461
461
|
import { FileUploadComponent } from '@lukfel/ng-scaffold';
|
|
@@ -472,11 +472,32 @@ public onFileChange(file: File): void {
|
|
|
472
472
|
color="accent"
|
|
473
473
|
label="Upload File"
|
|
474
474
|
matIcon="upload"
|
|
475
|
-
[disabled]="false"
|
|
476
475
|
accept="*"
|
|
477
476
|
(fileChangeEvent)="onFileChange($event)"></lf-file-upload>
|
|
478
477
|
```
|
|
479
478
|
|
|
479
|
+
### Color-Picker
|
|
480
|
+
A standalone Material Design styled button for picking colors. It wraps a hidden native color input and exposes a simple, customizable interface with built-in icon, tooltip, and state management.
|
|
481
|
+
|
|
482
|
+
```ts
|
|
483
|
+
import { ColorPickerComponent } from '@lukfel/ng-scaffold';
|
|
484
|
+
```
|
|
485
|
+
|
|
486
|
+
```ts
|
|
487
|
+
public onColorChange(color: string): void {
|
|
488
|
+
// handle color pick
|
|
489
|
+
}
|
|
490
|
+
```
|
|
491
|
+
|
|
492
|
+
```html
|
|
493
|
+
<lf-color-picker
|
|
494
|
+
color="accent"
|
|
495
|
+
label="Pick Color"
|
|
496
|
+
matIcon="color_lens"
|
|
497
|
+
accept="*"
|
|
498
|
+
(colorChangeEvent)="onColorChange($event)"></lf-color-picker>
|
|
499
|
+
```
|
|
500
|
+
|
|
480
501
|
### Placeholder
|
|
481
502
|
A versatile UI component designed to display an informative placeholder or empty state when no data is available. It provides a structured layout for an icon, heading, message, and optional action — helping guide users toward the next step.
|
|
482
503
|
|