@lukfel/ng-scaffold 21.1.29 → 21.1.31

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

@@ -7,8 +7,8 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 
 class ConfirmDialogComponent {
     constructor() {
-        this.configData = inject(MAT_DIALOG_DATA);
-        this.config = signal(this.configData, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.data = inject(MAT_DIALOG_DATA);
+        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 }); }
@@ -22,4 +22,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }] });
 
 export { ConfirmDialogComponent };
-//# sourceMappingURL=lukfel-ng-scaffold-confirm-dialog.component-Cj5E5jtW.mjs.map
+//# sourceMappingURL=lukfel-ng-scaffold-confirm-dialog.component-CPAkFqh1.mjs.map

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

@@ -0,0 +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;;;;;"}

package/fesm2022/lukfel-ng-scaffold.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, Injectable, PLATFORM_ID, DOCUMENT, input, output, ChangeDetectionStrategy, Component, viewChild, computed, model, effect, signal, TemplateRef, Directive, contentChild } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, PLATFORM_ID, DOCUMENT, input, output, ChangeDetectionStrategy, Component, viewChild, computed, model, effect, signal, TemplateRef, Directive, contentChild, linkedSignal } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
@@ -79,7 +79,7 @@ class DialogService {
      * @returns an asynchronous boolean response
      */
     async openConfirmDialog(config) {
-        const { ConfirmDialogComponent } = await import('./lukfel-ng-scaffold-confirm-dialog.component-Cj5E5jtW.mjs');
+        const { ConfirmDialogComponent } = await import('./lukfel-ng-scaffold-confirm-dialog.component-CPAkFqh1.mjs');
         const dialogRef = this.matDialog.open(ConfirmDialogComponent, {
             autoFocus: false,
             maxWidth: '368px',
@@ -597,11 +597,12 @@ class SnackbarService {
         this.SNACKBAR_POSITION_HORIZONTAL = 'center';
         this.SNACKBAR_POSITION_VERTICAL = 'bottom';
         this.actionConfig = {
+            duration: this.SNACKBAR_DURATION,
             horizontalPosition: this.SNACKBAR_POSITION_HORIZONTAL,
             verticalPosition: this.SNACKBAR_POSITION_VERTICAL
         };
         this.defaultConfig = {
-            duration: this.SNACKBAR_DURATION,
+            duration: (this.SNACKBAR_DURATION / 2),
             horizontalPosition: this.SNACKBAR_POSITION_HORIZONTAL,
             verticalPosition: this.SNACKBAR_POSITION_VERTICAL
         };
@@ -1488,35 +1489,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 class ColorPickerComponent {
     constructor() {
         this.libraryConfig = inject(CONFIG, { optional: true });
-        this.logger = inject(Logger);
         this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
         this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
         this.matIcon = input(...(ngDevMode ? [undefined, { debugName: "matIcon" }] : []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.tooltip = input(...(ngDevMode ? [undefined, { debugName: "tooltip" }] : []));
         this.colorChangeEvent = output();
-        this.selectedColor = signal('', ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
-        this.backgroundColor = computed(() => {
+        this.selectedColor = linkedSignal(() => {
+            const color = this.color();
+            if (color && color !== 'primary' && color !== 'accent' && color !== 'warn') {
+                return color;
+            }
+            return '';
+        }, ...(ngDevMode ? [{ debugName: "selectedColor" }] : []));
+        this.labelColor = computed(() => {
             const hex = this.selectedColor().replace('#', '');
             const r = parseInt(hex.substr(0, 2), 16);
             const g = parseInt(hex.substr(2, 2), 16);
             const b = parseInt(hex.substr(4, 2), 16);
             const brightness = (r * 299 + g * 587 + b * 114) / 1000;
             return brightness > 128 ? '#000000' : '#ffffff';
-        }, ...(ngDevMode ? [{ debugName: "backgroundColor" }] : []));
-    }
-    ngOnInit() {
-        const color = this.color();
-        if (color && color !== 'primary' && color !== 'accent' && color !== 'warn') {
-            this.selectedColor.set(color);
-        }
+        }, ...(ngDevMode ? [{ debugName: "labelColor" }] : []));
     }
     selectColor(event) {
         this.selectedColor.set(event);
         this.colorChangeEvent.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ColorPickerComponent, isStandalone: true, selector: "lf-color-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChangeEvent: "colorChangeEvent" }, ngImport: i0, template: "<input\r\n  #colorPicker\r\n  type=\"color\"\r\n  onclick=\"this.value = null\"\r\n  [ngModel]=\"selectedColor()\"\r\n  (ngModelChange)=\"selectColor($event)\"\r\n  style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"selectedColor() ? null : color()\"\r\n  [style.background]=\"selectedColor()\"\r\n  [style.color]=\"backgroundColor()\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"colorPicker.click()\"\r\n  [matTooltip]=\"tooltip()\">\r\n  <!-- icon -->\r\n  @if (matIcon()) {\r\n    <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n      {{ matIcon() }}\r\n    </mat-icon>\r\n  }\r\n  <!-- @else if (svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n  } -->\r\n  {{ label() }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: ColorPickerComponent, isStandalone: true, selector: "lf-color-picker", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChangeEvent: "colorChangeEvent" }, ngImport: i0, template: "<input\r\n  #colorPicker\r\n  type=\"color\"\r\n  onclick=\"this.value = null\"\r\n  [ngModel]=\"selectedColor()\"\r\n  (ngModelChange)=\"selectColor($event)\"\r\n  style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"selectedColor() ? null : color()\"\r\n  [style.background]=\"selectedColor()\"\r\n  [style.color]=\"labelColor()\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"colorPicker.click()\"\r\n  [matTooltip]=\"tooltip()\">\r\n  <!-- icon -->\r\n  @if (matIcon()) {\r\n    <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n      {{ matIcon() }}\r\n    </mat-icon>\r\n  }\r\n  <!-- @else if (svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n  } -->\r\n  {{ label() }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -1526,7 +1526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         MatTooltipModule
-                    ], template: "<input\r\n  #colorPicker\r\n  type=\"color\"\r\n  onclick=\"this.value = null\"\r\n  [ngModel]=\"selectedColor()\"\r\n  (ngModelChange)=\"selectColor($event)\"\r\n  style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"selectedColor() ? null : color()\"\r\n  [style.background]=\"selectedColor()\"\r\n  [style.color]=\"backgroundColor()\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"colorPicker.click()\"\r\n  [matTooltip]=\"tooltip()\">\r\n  <!-- icon -->\r\n  @if (matIcon()) {\r\n    <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n      {{ matIcon() }}\r\n    </mat-icon>\r\n  }\r\n  <!-- @else if (svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n  } -->\r\n  {{ label() }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"] }]
+                    ], template: "<input\r\n  #colorPicker\r\n  type=\"color\"\r\n  onclick=\"this.value = null\"\r\n  [ngModel]=\"selectedColor()\"\r\n  (ngModelChange)=\"selectColor($event)\"\r\n  style=\"opacity: 0; position: absolute; width: 0; height: 36px; border: none\" />\r\n\r\n<button\r\n  mat-flat-button\r\n  class=\"lf-button\"\r\n  type=\"button\"\r\n  [color]=\"selectedColor() ? null : color()\"\r\n  [style.background]=\"selectedColor()\"\r\n  [style.color]=\"labelColor()\"\r\n  [disabled]=\"disabled()\"\r\n  (click)=\"colorPicker.click()\"\r\n  [matTooltip]=\"tooltip()\">\r\n  <!-- icon -->\r\n  @if (matIcon()) {\r\n    <mat-icon [class.material-icons-outlined]=\"libraryConfig?.outlineIcons\">\r\n      {{ matIcon() }}\r\n    </mat-icon>\r\n  }\r\n  <!-- @else if (svgIcon) {\r\n    <mat-icon [svgIcon]=\"svgIcon\"></mat-icon>\r\n  } -->\r\n  {{ label() }}\r\n</button>\r\n", styles: [".lf-button{width:inherit}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], colorChangeEvent: [{ type: i0.Output, args: ["colorChangeEvent"] }] } });
 
 class PlaceholderComponent {