@lukfel/ng-scaffold 21.1.40 → 21.1.43

package/README.md

@@ -67,12 +67,14 @@ import { ScaffoldService } from '@lukfel/ng-scaffold';
 
 export class AppComponent {
 
-  public scaffoldConfig: ScaffoldConfig = {
+  private scaffoldService = inject(ScaffoldService);
+
+  private scaffoldConfig: ScaffoldConfig = {
     // Create your own config or generate it at https://lukfel.github.io/ng-scaffold
     headerConfig: { enable: true, title: 'Scaffold works!' }
   };
 
-  constructor(private scaffoldService: ScaffoldService) {
+  constructor() {
     this.scaffoldService.scaffoldConfig = this.scaffoldConfig;
   }
 }
@@ -212,7 +214,10 @@ There are two ways to listen to scaffold user events (button clicks, input chang
 ### (Recommended) Option 1 – Subscribe to Event Observables
 Subscribe to the event Observables and listen to changes
 ```ts
-constructor(private scaffoldService: ScaffoldService, private router: Router) {
+private scaffoldService = inject(ScaffoldService);
+private router = inject(Router);
+
+constructor() {
   // Listen to click events (header menu and navbar buttons - click)
   this.scaffoldService.buttonClickEventValue$.subscribe((id: string) => {
     this.router.navigate([id]);
@@ -284,7 +289,7 @@ import { Logger } from '@lukfel/ng-scaffold';
 
 export class AppComponent {
 
-  constructor(private logger: Logger) {}
+  private logger = inject(Logger);
   
   // Generic api call with logging
   public apiCallWithLogging(): void {
@@ -305,7 +310,7 @@ import { SnackbarService } from '@lukfel/ng-scaffold';
 
 export class AppComponent {
 
-  constructor(private snackbarService: SnackbarService) {}
+  private snackbarService = inject(SnackbarService);
   
   // Generic api call with snackbar response
   public apiCallWithSnackbarResponse(): void {
@@ -326,7 +331,7 @@ import { DialogService } from '@lukfel/ng-scaffold';
 
 export class AppComponent {
 
-  constructor(private dialogService: DialogService) {}
+  private dialogService = inject(DialogService);
   
   // Generic api call with a subsequent confirmation dialog
   public apiCallWithDialogConfirmation(): void {
@@ -352,7 +357,9 @@ import { BreakpointService } from '@lukfel/ng-scaffold';
 
 export class AppComponent {
 
-  constructor(private breakpointService: BreakpointService) {
+  private breakpointService = inject(BreakpointService);
+
+  constructor() {
     this.breakpointService.breakpoint$.subscribe((result: BreakpointState) => {
       // Check which breakpoint is active
       if (result.breakpoints[Breakpoints.XSmall]) {
@@ -379,8 +386,10 @@ import { ThemeService } from '@lukfel/ng-scaffold';
 
 export class AppComponent {
 
+  private themeService = inject(ThemeService);
+
   constructor(private themeService: ThemeService) {
-    this.themeService.setTheme('my-theme2', true);    // the second parameter allows to persists the theme in the LocalStorage (using the built in LocalStorageService)
+    this.themeService.setTheme('my-theme2', true);    // set theme and store in local storage (using the built in LocalStorageService)
   }
 }
 ```
@@ -403,31 +412,31 @@ import { ListComponent } from '@lukfel/ng-scaffold';
 ```ts
 import { Button, ListConfig, ListHeader, ListItem } from '@lukfel/ng-scaffold';
 
-public listConfig: ListConfig = {   // (Optional) list config
+public listConfig = signal<ListConfig>({    // (Optional) list config
   enableSelection: true,
   enableDragging: true,
   initialSortToken: 'title',
   initialSortAsc: true,
   showDividers: true
-}
+});
 
-public listHeader: ListHeader = {   // (Optional) list header
+public listHeader = signal<ListHeader>({    // (Optional) list header
   matIcon: 'sort',
   items: [
     { title: 'Items', sortToken: 'title' }
   ]
-};
+});
 
-public listItems: ListItem[] = [
+public listItems = signal<ListItem[]>([
   { id: 1, svgIcon: 'logo', title: 'Item 2', subtitle: 'I am disabled', disabled: true },
   { id: 0, avatar: 'assets/img/logos/ic_launcher-web.png', title: 'Item 1', subtitle: 'I am clickable', clickable: true },
   { id: 2, matIcon: 'person', title: 'Item 3', subtitle: 'I have no edit buton', hiddenButtonIds: ['edit'] },
-];
+]);
 
-public buttons: Button[] = [        // (Optional) list buttons
+public buttons = signal<Button[]>([         // (Optional) list buttons
   { id: 'edit', matIcon: 'edit' },
   { id: 'delete', matIcon: 'delete', cssClass: 'warn' }
-];
+]);
 
 // (Optional) Handle sort events
 public onListSortChange(event: { sortToken: string, sortAsc: boolean }): void {
@@ -455,10 +464,10 @@ public onListItemClick(item: ListItem): void {
 
 ```html
 <lf-list
-  [config]="listConfig"
-  [header]="listHeader"
-  [items]="listItems"
-  [buttons]="listButtons"
+  [config]="listConfig()"
+  [header]="listHeader()"
+  [items]="listItems()"
+  [buttons]="listButtons()"
   (sortChangeEvent)="onListSortChange($event)"
   (selectionChangeEvent)="onListSelectionChange()"
   (buttonClickEvent)="onListButtonClick($event)"
@@ -518,7 +527,7 @@ import { PlaceholderComponent } from '@lukfel/ng-scaffold';
 ```ts
 import { PlaceholderConfig } from '@lukfel/ng-scaffold';
 
-public placeholderConfig: PlaceholderConfig = {
+public placeholderConfig = signal<PlaceholderConfig>({
   matIcon: 'widgets',
   title: 'Title',
   message: 'This is a placeholder message.',
@@ -526,7 +535,7 @@ public placeholderConfig: PlaceholderConfig = {
     id: 'placeholder',
     label: 'ACTION'
   }
-}
+});
 
 public onPlaceholderButtonClick(): void {
   // handle placeholder click
@@ -535,7 +544,7 @@ public onPlaceholderButtonClick(): void {
 
 ```html
 <lf-placeholder
-  [placeholderConfig]="placeholderConfig"
+  [placeholderConfig]="placeholderConfig()"
   (buttonClickEvent)="onPlaceholderButtonClick()"></lf-placeholder>
 ```
 
@@ -548,8 +557,7 @@ Intercept HTTP Calls and automatically show a loading spinner.
 * **Note:** The loading spinner can also be manually shown by udpating the value for `scaffoldConfig.loading` in the `ScaffoldService`
 
 ```ts
-import { ScaffoldLoadingInterceptor, ScaffoldComponent } from '@lukfel/ng-scaffold';
-import { isDevMode } from '@angular/core';
+import { ScaffoldLoadingInterceptor } from '@lukfel/ng-scaffold';
 
   ...
   providers: [

package/fesm2022/{lukfel-ng-scaffold-confirm-dialog.component-CPAkFqh1.mjs → lukfel-ng-scaffold-confirm-dialog.component-CMryk2MU.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, signal, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i2 from '@angular/material/button';
+import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -11,7 +11,7 @@ class ConfirmDialogComponent {
         this.config = signal(this.data, ...(ngDevMode ? [{ debugName: "config" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ConfirmDialogComponent, isStandalone: true, selector: "lf-confirm-dialog", ngImport: i0, template: "@if (config(); as config) {\r\n  @if (config.title) {\r\n    <h2 mat-dialog-title>{{ config.title }}</h2>\r\n  }\r\n\r\n  <mat-dialog-content>\r\n    @if (config.message) {\r\n      <p>{{ config.message }}</p>\r\n    }\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\">\r\n    @if (config.closeLabel) {\r\n      <button mat-button [mat-dialog-close]=\"false\">\r\n        {{ config.closeLabel }}\r\n      </button>\r\n    }\r\n    @if (config.confirmLabel) {\r\n      <button mat-button color=\"primary\" [mat-dialog-close]=\"true\">\r\n        {{ config.confirmLabel }}\r\n      </button>\r\n    }\r\n  </mat-dialog-actions>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ConfirmDialogComponent, isStandalone: true, selector: "lf-confirm-dialog", ngImport: i0, template: "@if (config(); as config) {\r\n  @if (config.title) {\r\n    <h2 mat-dialog-title>{{ config.title }}</h2>\r\n  }\r\n\r\n  <mat-dialog-content>\r\n    @if (config.message) {\r\n      <p>{{ config.message }}</p>\r\n    }\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\">\r\n    @if (config.closeLabel) {\r\n      <button mat-button [mat-dialog-close]=\"false\">\r\n        {{ config.closeLabel }}\r\n      </button>\r\n    }\r\n    @if (config.confirmLabel) {\r\n      <button mat-button color=\"primary\" [mat-dialog-close]=\"true\">\r\n        {{ config.confirmLabel }}\r\n      </button>\r\n    }\r\n  </mat-dialog-actions>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
@@ -22,4 +22,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }] });
 
 export { ConfirmDialogComponent };
-//# sourceMappingURL=lukfel-ng-scaffold-confirm-dialog.component-CPAkFqh1.mjs.map
+//# sourceMappingURL=lukfel-ng-scaffold-confirm-dialog.component-CMryk2MU.mjs.map

package/fesm2022/{lukfel-ng-scaffold-confirm-dialog.component-CPAkFqh1.mjs.map → lukfel-ng-scaffold-confirm-dialog.component-CMryk2MU.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"lukfel-ng-scaffold-confirm-dialog.component-CPAkFqh1.mjs","sources":["../../../projects/ng-scaffold/src/lib/shared/components/dialogs/confirm-dialog/confirm-dialog.component.ts","../../../projects/ng-scaffold/src/lib/shared/components/dialogs/confirm-dialog/confirm-dialog.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';\r\nimport { ConfirmDialogConfig } from '../../../../models';\r\n\r\n@Component({\r\n  selector: 'lf-confirm-dialog',\r\n  templateUrl: './confirm-dialog.component.html',\r\n  styleUrls: ['./confirm-dialog.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [\r\n    MatDialogModule,\r\n    MatButtonModule\r\n  ]\r\n})\r\nexport class ConfirmDialogComponent {\r\n  \r\n   private data = inject<ConfirmDialogConfig>(MAT_DIALOG_DATA);\r\n   public config = signal<ConfirmDialogConfig>(this.data);\r\n\r\n}\r\n","@if (config(); as config) {\r\n  @if (config.title) {\r\n    <h2 mat-dialog-title>{{ config.title }}</h2>\r\n  }\r\n\r\n  <mat-dialog-content>\r\n    @if (config.message) {\r\n      <p>{{ config.message }}</p>\r\n    }\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\">\r\n    @if (config.closeLabel) {\r\n      <button mat-button [mat-dialog-close]=\"false\">\r\n        {{ config.closeLabel }}\r\n      </button>\r\n    }\r\n    @if (config.confirmLabel) {\r\n      <button mat-button color=\"primary\" [mat-dialog-close]=\"true\">\r\n        {{ config.confirmLabel }}\r\n      </button>\r\n    }\r\n  </mat-dialog-actions>\r\n}\r\n"],"names":[],"mappings":";;;;;;;MAgBa,sBAAsB,CAAA;AAXnC,IAAA,WAAA,GAAA;AAaW,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAsB,eAAe,CAAC;AACpD,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAsB,IAAI,CAAC,IAAI,kDAAC;AAExD,IAAA;8GALY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChBnC,gpBAwBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDZI,eAAe,+nBACf,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,SAAA,EAAA,QAAA,EAAA,iOAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGN,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAXlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,mBAGZ,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EAAA,OAAA,EACP;wBACP,eAAe;wBACf;AACD,qBAAA,EAAA,QAAA,EAAA,gpBAAA,EAAA;;;;;"}
+{"version":3,"file":"lukfel-ng-scaffold-confirm-dialog.component-CMryk2MU.mjs","sources":["../../../projects/ng-scaffold/src/lib/shared/components/dialogs/confirm-dialog/confirm-dialog.component.ts","../../../projects/ng-scaffold/src/lib/shared/components/dialogs/confirm-dialog/confirm-dialog.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';\r\nimport { ConfirmDialogConfig } from '../../../../models';\r\n\r\n@Component({\r\n  selector: 'lf-confirm-dialog',\r\n  templateUrl: './confirm-dialog.component.html',\r\n  styleUrls: ['./confirm-dialog.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  standalone: true,\r\n  imports: [\r\n    MatDialogModule,\r\n    MatButtonModule\r\n  ]\r\n})\r\nexport class ConfirmDialogComponent {\r\n  \r\n   private data = inject<ConfirmDialogConfig>(MAT_DIALOG_DATA);\r\n   public config = signal<ConfirmDialogConfig>(this.data);\r\n\r\n}\r\n","@if (config(); as config) {\r\n  @if (config.title) {\r\n    <h2 mat-dialog-title>{{ config.title }}</h2>\r\n  }\r\n\r\n  <mat-dialog-content>\r\n    @if (config.message) {\r\n      <p>{{ config.message }}</p>\r\n    }\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\">\r\n    @if (config.closeLabel) {\r\n      <button mat-button [mat-dialog-close]=\"false\">\r\n        {{ config.closeLabel }}\r\n      </button>\r\n    }\r\n    @if (config.confirmLabel) {\r\n      <button mat-button color=\"primary\" [mat-dialog-close]=\"true\">\r\n        {{ config.confirmLabel }}\r\n      </button>\r\n    }\r\n  </mat-dialog-actions>\r\n}\r\n"],"names":["i2"],"mappings":";;;;;;;MAgBa,sBAAsB,CAAA;AAXnC,IAAA,WAAA,GAAA;AAaW,QAAA,IAAA,CAAA,IAAI,GAAG,MAAM,CAAsB,eAAe,CAAC;AACpD,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAsB,IAAI,CAAC,IAAI,kDAAC;AAExD,IAAA;8GALY,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EChBnC,gpBAwBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDZI,eAAe,+nBACf,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,SAAA,EAAA,QAAA,EAAA,iOAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,QAAA,EAAA,CAAA,WAAA,EAAA,WAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAGN,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAXlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,mBAGZ,uBAAuB,CAAC,MAAM,EAAA,UAAA,EACnC,IAAI,EAAA,OAAA,EACP;wBACP,eAAe;wBACf;AACD,qBAAA,EAAA,QAAA,EAAA,gpBAAA,EAAA;;;;;"}