@lukfel/ng-scaffold 21.1.13 → 21.1.14

package/README.md

@@ -22,28 +22,39 @@ ng add @lukfel/ng-scaffold
 ```
 
 The ng add command will additionally try to perform the following actions:
-* Import `ScaffoldModule`
+* Import `ScaffoldComponent` in root
 * Inject `ScaffoldService` and initialize `ScaffoldConfig`
-* Wrap template with `<lf-scaffold>` 
+* Wrap template with `<lf-scaffold>`
 * Include styles
 
 
-## Module
-Import the `ScaffoldModule` into your `app.module.ts` file.
+## Component
+Import the `ScaffoldComponent` into your `app.module.ts` or `app.component.ts` (standalone).
 
-* **Note:** (Optional) The library includes a built-in logging service called `Logger`, which logs library debugging events when a `ScaffoldLibraryConfig` is provided and `debugging` is set to `true`. Logging is automatically disabled in production mode when `production` is set to `true`.
+```ts
+import { ScaffoldComponent } from '@lukfel/ng-scaffold';
+
+  ...
+  imports: [
+    ScaffoldComponent
+  ]
+```
+
+### (Optional) Provider
+The library uses the built-in logging service `Logger` to log debugging events when a `ScaffoldLibraryConfig` is provided and `debugging` is set to `true`. Logging is automatically disabled in production mode when `production` is set to `true`.
 
 ```ts
-import { ScaffoldModule } from '@lukfel/ng-scaffold';
+import { provideScaffold } from '@lukfel/ng-scaffold';
 import { isDevMode } from '@angular/core';
 
-@NgModule({
   ...
-  imports: [
-    ScaffoldModule.forRoot({ production: !isDevMode(), debugging: isDevMode() }),    // Omit .forRoot(...) if logging is not required
+  providers: [
+    provideScaffold({
+      production: !isDevMode(),
+      debugging: isDevMode(),
+      outlineIcons: true
+    })
   ]
-})
-export class AppModule { }
 ```
 
 
@@ -59,7 +70,7 @@ export class AppComponent {
 
   public scaffoldConfig: ScaffoldConfig = {
     // Create your own config or generate it at https://lukfel.github.io/ng-scaffold
-    headerConfig: { enable: true, title: 'Scaffold works!', gradient: true }
+    headerConfig: { enable: true, title: 'Scaffold works!' }
   };
 
   constructor(private scaffoldService: ScaffoldService) {
@@ -265,8 +276,9 @@ This library includes several utility services:
 - **`LocalStorageService`** – Handle local storage
 
 ### Logger
-Logs internal library information if `debugging` is `true` and hides application logs during production if `production` is `true`.
-* **Note:** `ScaffoldLibraryConfig` must be set during initialization ``ScaffoldModule.forRoot( { production: !isDevMode(), debugging: isDevMode() } )``
+Logs information during development and hides all logs during production.
+
+* **Note:** Use the provoder `provideScaffold({ production: !isDevMode() })` to disable logs in production
 
 ```ts
 import { Logger } from '@lukfel/ng-scaffold';
@@ -378,9 +390,9 @@ export class AppComponent {
 
 
 ## (Optional) Standalone Components
-In addition to the components provided by default by the the `ScaffoldModule` there are several standalone components that can be utilized.
+In addition to the scaffold components provided by default by the the `ScaffoldComponent` there are several standalone components that can be utilized.
 
-* **Note:** Standalone components must be imported manually and are not part of the `ScaffoldModule` import
+* **Note:** Standalone components must be imported manually and are not part of the `ScaffoldComponent` import
 
 ### List
 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.
@@ -537,14 +549,10 @@ 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, ScaffoldModule } from '@lukfel/ng-scaffold';
+import { ScaffoldLoadingInterceptor, ScaffoldComponent } from '@lukfel/ng-scaffold';
 import { isDevMode } from '@angular/core';
 
-@NgModule({
   ...
-  imports: [
-    ScaffoldModule.forRoot({ production: !isDevMode(), debugging: isDevMode() }),    // Omit .forRoot(...) if logging is not required
-  ],
   providers: [
     {
       provide: HTTP_INTERCEPTORS,
@@ -552,6 +560,4 @@ import { isDevMode } from '@angular/core';
       multi: true
     }
   ]
-})
-export class AppModule { }
 ```

package/fesm2022/lukfel-ng-scaffold-confirm-dialog.component-D92LeRJW.mjs

@@ -0,0 +1,24 @@
+import * as i0 from '@angular/core';
+import { inject, Component } from '@angular/core';
+import * as i2 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';
+
+class ConfirmDialogComponent {
+    constructor() {
+        this.config = inject(MAT_DIALOG_DATA);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ConfirmDialogComponent, isStandalone: true, selector: "lf-confirm-dialog", ngImport: i0, template: "@if (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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-confirm-dialog', standalone: true, imports: [
+                        MatDialogModule,
+                        MatButtonModule
+                    ], template: "@if (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" }]
+        }] });
+
+export { ConfirmDialogComponent };
+//# sourceMappingURL=lukfel-ng-scaffold-confirm-dialog.component-D92LeRJW.mjs.map

package/fesm2022/lukfel-ng-scaffold-confirm-dialog.component-D92LeRJW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lukfel-ng-scaffold-confirm-dialog.component-D92LeRJW.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 { Component, inject } 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  standalone: true,\r\n  imports: [\r\n    MatDialogModule,\r\n    MatButtonModule\r\n  ]\r\n})\r\nexport class ConfirmDialogComponent {\r\n  public config = inject<ConfirmDialogConfig>(MAT_DIALOG_DATA);\r\n\r\n}\r\n","@if (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":";;;;;;;MAea,sBAAsB,CAAA;AAVnC,IAAA,WAAA,GAAA;AAWS,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAsB,eAAe,CAAC;AAE7D,IAAA;8GAHY,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,ECfnC,moBAwBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDbI,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,CAAA,CAAA;;2FAGN,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAVlC,SAAS;+BACE,mBAAmB,EAAA,UAAA,EAGjB,IAAI,EAAA,OAAA,EACP;wBACP,eAAe;wBACf;AACD,qBAAA,EAAA,QAAA,EAAA,moBAAA,EAAA;;;;;"}

package/fesm2022/lukfel-ng-scaffold-loading-overlay.component-cOyltHTs.mjs

@@ -0,0 +1,34 @@
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Component } from '@angular/core';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { CONFIG, ScaffoldService } from './lukfel-ng-scaffold.mjs';
+
+class LoadingOverlayComponent {
+    constructor() {
+        this.libraryConfig = inject(CONFIG, { optional: true });
+        this.scaffoldService = inject(ScaffoldService);
+        this.portal = null;
+        this.loadingOverlayConfig = null;
+    }
+    ngOnInit() {
+        this.loadingOverlayConfig = this.scaffoldService.scaffoldConfig?.loadingOverlayConfig || null;
+        if (this.loadingOverlayConfig?.customComponent) {
+            this.portal = new ComponentPortal(this.loadingOverlayConfig?.customComponent);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LoadingOverlayComponent, isStandalone: true, selector: "lf-loading-overlay", ngImport: i0, template: "@if (!portal) {\r\n  <div\r\n    [ngClass]=\"loadingOverlayConfig?.cssClass\"\r\n    [class.lf-gradient-spinner]=\"loadingOverlayConfig?.gradient\">\r\n    <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n  </div>\r\n} @else {\r\n  <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));-webkit-mask:radial-gradient(farthest-side,transparent 77%,black 78%);mask:radial-gradient(farthest-side,transparent 77%,black 78%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lf-loading-overlay', standalone: true, imports: [
+                        CommonModule,
+                        MatProgressSpinner
+                    ], template: "@if (!portal) {\r\n  <div\r\n    [ngClass]=\"loadingOverlayConfig?.cssClass\"\r\n    [class.lf-gradient-spinner]=\"loadingOverlayConfig?.gradient\">\r\n    <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n  </div>\r\n} @else {\r\n  <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n}\r\n", styles: [".lf-gradient-spinner{position:relative;display:inline-block}.lf-gradient-spinner mat-progress-spinner,.lf-gradient-spinner mat-spinner{opacity:0}.lf-gradient-spinner:before{content:\"\";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--color-primary),var(--color-accent));-webkit-mask:radial-gradient(farthest-side,transparent 77%,black 78%);mask:radial-gradient(farthest-side,transparent 77%,black 78%);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
+export { LoadingOverlayComponent };
+//# sourceMappingURL=lukfel-ng-scaffold-loading-overlay.component-cOyltHTs.mjs.map

package/fesm2022/lukfel-ng-scaffold-loading-overlay.component-cOyltHTs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lukfel-ng-scaffold-loading-overlay.component-cOyltHTs.mjs","sources":["../../../projects/ng-scaffold/src/lib/components/loading-overlay/loading-overlay.component.ts","../../../projects/ng-scaffold/src/lib/components/loading-overlay/loading-overlay.component.html"],"sourcesContent":["import { ComponentPortal } from '@angular/cdk/portal';\r\nimport { CommonModule } from '@angular/common';\r\nimport { Component, inject, OnInit } from '@angular/core';\r\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\r\nimport { CONFIG } from '../../scaffold.config';\r\nimport { LoadingOverlayConfig, ScaffoldLibraryConfig } from '../../models';\r\nimport { ScaffoldService } from '../../services';\r\n\r\n@Component({\r\n    selector: 'lf-loading-overlay',\r\n    templateUrl: './loading-overlay.component.html',\r\n    styleUrls: ['./loading-overlay.component.scss'],\r\n    standalone: true,\r\n    imports: [\r\n        CommonModule,\r\n        MatProgressSpinner\r\n    ]\r\n})\r\nexport class LoadingOverlayComponent implements OnInit {\r\n\r\n    public libraryConfig = inject<ScaffoldLibraryConfig>(CONFIG, { optional: true });\r\n\r\n    private scaffoldService = inject(ScaffoldService);\r\n\r\n\r\n    public portal: ComponentPortal<any> | null = null;\r\n    public loadingOverlayConfig: LoadingOverlayConfig | null = null;\r\n\r\n\r\n    ngOnInit(): void {\r\n        this.loadingOverlayConfig = this.scaffoldService.scaffoldConfig?.loadingOverlayConfig || null;\r\n\r\n        if (this.loadingOverlayConfig?.customComponent) {\r\n            this.portal = new ComponentPortal(this.loadingOverlayConfig?.customComponent);\r\n        }\r\n    }\r\n}\r\n","@if (!portal) {\r\n  <div\r\n    [ngClass]=\"loadingOverlayConfig?.cssClass\"\r\n    [class.lf-gradient-spinner]=\"loadingOverlayConfig?.gradient\">\r\n    <mat-progress-spinner mode=\"indeterminate\"></mat-progress-spinner>\r\n  </div>\r\n} @else {\r\n  <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\r\n}\r\n"],"names":[],"mappings":";;;;;;;;MAkBa,uBAAuB,CAAA;AAVpC,IAAA,WAAA,GAAA;QAYW,IAAA,CAAA,aAAa,GAAG,MAAM,CAAwB,MAAM,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAExE,QAAA,IAAA,CAAA,eAAe,GAAG,MAAM,CAAC,eAAe,CAAC;QAG1C,IAAA,CAAA,MAAM,GAAgC,IAAI;QAC1C,IAAA,CAAA,oBAAoB,GAAgC,IAAI;AAUlE,IAAA;IAPG,QAAQ,GAAA;AACJ,QAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,oBAAoB,IAAI,IAAI;AAE7F,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE,eAAe,EAAE;AAC5C,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,oBAAoB,EAAE,eAAe,CAAC;QACjF;IACJ;8GAjBS,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClBpC,kUASA,EAAA,MAAA,EAAA,CAAA,kgBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDKQ,YAAY,6HACZ,kBAAkB,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAGb,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAVnC,SAAS;+BACI,oBAAoB,EAAA,UAAA,EAGlB,IAAI,EAAA,OAAA,EACP;wBACL,YAAY;wBACZ;AACH,qBAAA,EAAA,QAAA,EAAA,kUAAA,EAAA,MAAA,EAAA,CAAA,kgBAAA,CAAA,EAAA;;;;;"}