@lukfel/ng-scaffold 22.1.9 → 22.1.13

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.
@@ -35,7 +35,8 @@ import * as i2$2 from '@angular/material/form-field';
35
35
  import { MatFormFieldModule } from '@angular/material/form-field';
36
36
  import * as i3$2 from '@angular/material/input';
37
37
  import { MatInputModule } from '@angular/material/input';
38
- import { MatProgressSpinner } from '@angular/material/progress-spinner';
38
+ import * as i3$4 from '@angular/material/progress-spinner';
39
+ import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
39
40
  import * as i2$3 from '@angular/cdk/drag-drop';
40
41
  import { transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
41
42
  import * as i4 from '@angular/material/checkbox';
@@ -1828,6 +1829,8 @@ class NotificationComponent {
1828
1829
  this.breakpointService = inject(BreakpointService);
1829
1830
  this.color = input('primary', /* @ts-ignore */
1830
1831
  ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
1832
+ this.title = input('', /* @ts-ignore */
1833
+ ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
1831
1834
  this.message = input('', /* @ts-ignore */
1832
1835
  ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
1833
1836
  this.link = input('', /* @ts-ignore */
@@ -1844,18 +1847,24 @@ class NotificationComponent {
1844
1847
  ...(ngDevMode ? [{ debugName: "static" }] : /* istanbul ignore next */ []));
1845
1848
  this.minimal = input(false, /* @ts-ignore */
1846
1849
  ...(ngDevMode ? [{ debugName: "minimal" }] : /* istanbul ignore next */ []));
1850
+ this.gradient = input(false, /* @ts-ignore */
1851
+ ...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
1852
+ this.loading = input(false, /* @ts-ignore */
1853
+ ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
1854
+ this.disabled = input(false, /* @ts-ignore */
1855
+ ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
1847
1856
  this.cssClass = input('', /* @ts-ignore */
1848
1857
  ...(ngDevMode ? [{ debugName: "cssClass" }] : /* istanbul ignore next */ []));
1849
1858
  this.clickEvent = output();
1850
1859
  this.isMobile = toSignal(this.breakpointService.breakpoint$.pipe(map((state) => state.breakpoints[Breakpoints.XSmall])));
1851
1860
  }
1852
1861
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1853
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NotificationComponent, isStandalone: true, selector: "lf-notification", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, linkText: { classPropertyName: "linkText", publicName: "linkText", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, static: { classPropertyName: "static", publicName: "static", isSignal: true, isRequired: false, transformFunction: null }, minimal: { classPropertyName: "minimal", publicName: "minimal", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div\r\n class=\"lf-notification\"\r\n [class.mat-elevation-z2]=\"!static()\"\r\n [class.lf-notification-fixed]=\"!static()\"\r\n [class.lf-notification-static]=\"static()\"\r\n [class.lf-notification-minimal]=\"minimal()\"\r\n [class.lf-mobile]=\"isMobile()\"\r\n [class]=\"[cssClass(), color()]\"\r\n animate.enter=\"lf-anim-scale-enter\">\r\n <div\r\n class=\"lf-notification-content flex-row-nowrap gap-2\"\r\n [class.justify-center]=\"minimal()\"\r\n [class.justify-between]=\"!minimal()\"\r\n [class.flex-col]=\"isMobile()\"\r\n [class.align-center]=\"!isMobile()\"\r\n [class.align-start]=\"isMobile()\">\r\n <span\r\n class=\"lf-notification-message flex-row-nowrap align-center justify-start\"\r\n [class.gap-4]=\"!isMobile()\"\r\n [class.gap-2]=\"isMobile()\">\r\n @if (matIcon()) {\r\n <mat-icon class=\"flex-none\" [color]=\"color()\">{{ matIcon() }}</mat-icon>\r\n }\r\n <span [class.ml-1]=\"!matIcon()\">\r\n {{ message() }}\r\n @if (link() && linkText()) {\r\n <a class=\"lf-notification-link\" [href]=\"link()\">{{ linkText() }}</a>\r\n }\r\n </span>\r\n </span>\r\n\r\n @if (action(); as action) {\r\n <button\r\n mat-flat-button\r\n class=\"lf-notification-action\"\r\n type=\"button\"\r\n [class.align-self-end]=\"isMobile()\"\r\n [color]=\"color()\"\r\n (click)=\"clickEvent.emit()\">\r\n {{ action }}\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".lf-notification{overflow:hidden;padding:var(--notification-padding);box-sizing:border-box;border-radius:var(--border-radius);color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));background-color:var(--mat-snack-bar-container-color, var(--mat-sys-inverse-surface));outline-width:2px;outline-style:solid;outline-color:transparent}.lf-notification.lf-mobile.lf-notification-fixed{position:fixed;inset:auto 0 0;max-width:100vw!important;min-width:0!important}.lf-notification.lf-notification-fixed{z-index:1000;position:fixed;inset:auto 0 0 auto;display:inline-table;max-width:var(--notification-max-width);min-width:var(--notification-min-width);margin:var(--notification-fixed-margin)}.lf-notification.lf-notification-static{margin:var(--notification-static-margin)}.lf-notification.lf-notification-minimal{padding:var(--notification-padding-minimal);outline:none!important;margin:0!important}.lf-notification.primary{color:unset!important;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);outline-color:var(--color-primary-200)}.lf-notification.primary .lf-notification-link{color:unset!important}.lf-notification.accent{color:unset!important;background-color:color-mix(in srgb,var(--color-accent) 12%,transparent);outline-color:var(--color-accent-200)}.lf-notification.accent .lf-notification-link{color:unset!important}.lf-notification.warn{color:unset!important;background-color:color-mix(in srgb,var(--color-warn) 12%,transparent);outline-color:var(--color-warn-200)}.lf-notification.warn .lf-notification-link{color:unset!important}.lf-notification .lf-notification-content .lf-notification-message{font-size:var(--notification-font-size)}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-link{color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));text-decoration:underline}.lf-notification .lf-notification-content .lf-notification-action{min-width:unset!important;flex-shrink:0;margin:-8px 0 -8px 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1862
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NotificationComponent, isStandalone: true, selector: "lf-notification", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, linkText: { classPropertyName: "linkText", publicName: "linkText", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, svgIcon: { classPropertyName: "svgIcon", publicName: "svgIcon", isSignal: true, isRequired: false, transformFunction: null }, static: { classPropertyName: "static", publicName: "static", isSignal: true, isRequired: false, transformFunction: null }, minimal: { classPropertyName: "minimal", publicName: "minimal", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickEvent: "clickEvent" }, ngImport: i0, template: "<div\r\n class=\"lf-notification\"\r\n [class.mat-elevation-z2]=\"!static()\"\r\n [class.lf-notification-fixed]=\"!static()\"\r\n [class.lf-notification-static]=\"static()\"\r\n [class.lf-notification-minimal]=\"minimal()\"\r\n [class.lf-notification-gradient]=\"gradient()\"\r\n [class.lf-mobile]=\"isMobile()\"\r\n [class]=\"[cssClass(), color()]\"\r\n animate.enter=\"lf-anim-scale-enter\">\r\n <div\r\n class=\"lf-notification-content flex-row-nowrap gap-2\"\r\n [class.justify-center]=\"minimal()\"\r\n [class.justify-between]=\"!minimal()\"\r\n [class.flex-col]=\"isMobile()\"\r\n [class.align-center]=\"!isMobile()\"\r\n [class.align-start]=\"isMobile()\">\r\n <span\r\n class=\"lf-notification-message flex-row-nowrap justify-start\"\r\n [class.gap-4]=\"!isMobile()\"\r\n [class.gap-2]=\"isMobile()\">\r\n <!-- The spinner takes the icon's own 24px box, so swapping them shifts no text -->\r\n @if (loading()) {\r\n <mat-spinner class=\"flex-none\" [diameter]=\"24\"></mat-spinner>\r\n } @else if (matIcon()) {\r\n <mat-icon class=\"flex-none\" [color]=\"color()\">{{ matIcon() }}</mat-icon>\r\n }\r\n <span class=\"flex-col\" [class.ml-1]=\"!matIcon() && !loading()\">\r\n @if (title()) {\r\n <span class=\"lf-notification-title\">{{ title() }}</span>\r\n }\r\n <span>\r\n {{ message() }}\r\n @if (link() && linkText()) {\r\n <a class=\"lf-notification-link\" [href]=\"link()\">{{ linkText() }}</a>\r\n }\r\n </span>\r\n <div class=\"lf-notification-body\"><ng-content></ng-content></div>\r\n </span>\r\n </span>\r\n\r\n @if (action(); as action) {\r\n <button\r\n mat-flat-button\r\n class=\"lf-notification-action\"\r\n type=\"button\"\r\n [class.align-self-end]=\"isMobile()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || loading()\"\r\n (click)=\"clickEvent.emit()\">\r\n {{ action }}\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".lf-notification{overflow:hidden;padding:var(--notification-padding);box-sizing:border-box;border-radius:var(--border-radius);color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));background-color:var(--mat-snack-bar-container-color, var(--mat-sys-inverse-surface));outline-width:2px;outline-style:solid;outline-color:transparent}.lf-notification.lf-mobile.lf-notification-fixed{position:fixed;inset:auto 0 0;max-width:100vw!important;min-width:0!important}.lf-notification.lf-notification-fixed{z-index:1000;position:fixed;inset:auto 0 0 auto;display:inline-table;max-width:var(--notification-max-width);min-width:var(--notification-min-width);margin:var(--notification-fixed-margin)}.lf-notification.lf-notification-static{margin:var(--notification-static-margin)}.lf-notification.lf-notification-minimal{padding:var(--notification-padding-minimal);outline:none!important;margin:0!important}.lf-notification.primary{color:unset!important;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);outline-color:color-mix(in srgb,var(--color-primary) 50%,transparent)}.lf-notification.primary .lf-notification-link{color:unset!important}.lf-notification.accent{color:unset!important;background-color:color-mix(in srgb,var(--color-accent) 12%,transparent);outline-color:color-mix(in srgb,var(--color-accent) 50%,transparent)}.lf-notification.accent .lf-notification-link{color:unset!important}.lf-notification.warn{color:unset!important;background-color:color-mix(in srgb,var(--color-warn) 12%,transparent);outline-color:color-mix(in srgb,var(--color-warn) 50%,transparent)}.lf-notification.warn .lf-notification-link{color:unset!important}.lf-notification.lf-notification-gradient{position:relative;outline:none;background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 12%,transparent),color-mix(in srgb,var(--color-accent) 12%,transparent))}.lf-notification.lf-notification-gradient:before{content:\"\";position:absolute;inset:0;padding:2px;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor}.lf-notification.lf-notification-gradient ::ng-deep .lf-notification-body .mat-mdc-text-field-wrapper{background-color:var(--mat-app-background-color, var(--mat-sys-surface, #fff));border-radius:var(--border-radius)}.lf-notification .lf-notification-content .lf-notification-message{font-size:var(--notification-font-size);align-items:center}.lf-notification .lf-notification-content .lf-notification-message:has(.lf-notification-body:not(:empty)){align-items:flex-start}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-title{font-weight:500}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-body{width:100%}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-body:empty{display:none}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-body:not(:empty){margin-top:4px}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-link{color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));text-decoration:underline}.lf-notification .lf-notification-content .lf-notification-action{min-width:unset!important;flex-shrink:0;margin:-8px 0 -8px 8px}.lf-notification.lf-mobile .lf-notification-content:has(.lf-notification-body:not(:empty)) .lf-notification-action{margin-top:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1854
1863
  }
1855
1864
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NotificationComponent, decorators: [{
1856
1865
  type: Component,
1857
- args: [{ selector: 'lf-notification', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule], template: "<div\r\n class=\"lf-notification\"\r\n [class.mat-elevation-z2]=\"!static()\"\r\n [class.lf-notification-fixed]=\"!static()\"\r\n [class.lf-notification-static]=\"static()\"\r\n [class.lf-notification-minimal]=\"minimal()\"\r\n [class.lf-mobile]=\"isMobile()\"\r\n [class]=\"[cssClass(), color()]\"\r\n animate.enter=\"lf-anim-scale-enter\">\r\n <div\r\n class=\"lf-notification-content flex-row-nowrap gap-2\"\r\n [class.justify-center]=\"minimal()\"\r\n [class.justify-between]=\"!minimal()\"\r\n [class.flex-col]=\"isMobile()\"\r\n [class.align-center]=\"!isMobile()\"\r\n [class.align-start]=\"isMobile()\">\r\n <span\r\n class=\"lf-notification-message flex-row-nowrap align-center justify-start\"\r\n [class.gap-4]=\"!isMobile()\"\r\n [class.gap-2]=\"isMobile()\">\r\n @if (matIcon()) {\r\n <mat-icon class=\"flex-none\" [color]=\"color()\">{{ matIcon() }}</mat-icon>\r\n }\r\n <span [class.ml-1]=\"!matIcon()\">\r\n {{ message() }}\r\n @if (link() && linkText()) {\r\n <a class=\"lf-notification-link\" [href]=\"link()\">{{ linkText() }}</a>\r\n }\r\n </span>\r\n </span>\r\n\r\n @if (action(); as action) {\r\n <button\r\n mat-flat-button\r\n class=\"lf-notification-action\"\r\n type=\"button\"\r\n [class.align-self-end]=\"isMobile()\"\r\n [color]=\"color()\"\r\n (click)=\"clickEvent.emit()\">\r\n {{ action }}\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".lf-notification{overflow:hidden;padding:var(--notification-padding);box-sizing:border-box;border-radius:var(--border-radius);color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));background-color:var(--mat-snack-bar-container-color, var(--mat-sys-inverse-surface));outline-width:2px;outline-style:solid;outline-color:transparent}.lf-notification.lf-mobile.lf-notification-fixed{position:fixed;inset:auto 0 0;max-width:100vw!important;min-width:0!important}.lf-notification.lf-notification-fixed{z-index:1000;position:fixed;inset:auto 0 0 auto;display:inline-table;max-width:var(--notification-max-width);min-width:var(--notification-min-width);margin:var(--notification-fixed-margin)}.lf-notification.lf-notification-static{margin:var(--notification-static-margin)}.lf-notification.lf-notification-minimal{padding:var(--notification-padding-minimal);outline:none!important;margin:0!important}.lf-notification.primary{color:unset!important;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);outline-color:var(--color-primary-200)}.lf-notification.primary .lf-notification-link{color:unset!important}.lf-notification.accent{color:unset!important;background-color:color-mix(in srgb,var(--color-accent) 12%,transparent);outline-color:var(--color-accent-200)}.lf-notification.accent .lf-notification-link{color:unset!important}.lf-notification.warn{color:unset!important;background-color:color-mix(in srgb,var(--color-warn) 12%,transparent);outline-color:var(--color-warn-200)}.lf-notification.warn .lf-notification-link{color:unset!important}.lf-notification .lf-notification-content .lf-notification-message{font-size:var(--notification-font-size)}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-link{color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));text-decoration:underline}.lf-notification .lf-notification-content .lf-notification-action{min-width:unset!important;flex-shrink:0;margin:-8px 0 -8px 8px}\n"] }]
1858
- }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], linkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkText", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], svgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgIcon", required: false }] }], static: [{ type: i0.Input, args: [{ isSignal: true, alias: "static", required: false }] }], minimal: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimal", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], clickEvent: [{ type: i0.Output, args: ["clickEvent"] }] } });
1866
+ args: [{ selector: 'lf-notification', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule, MatProgressSpinnerModule], template: "<div\r\n class=\"lf-notification\"\r\n [class.mat-elevation-z2]=\"!static()\"\r\n [class.lf-notification-fixed]=\"!static()\"\r\n [class.lf-notification-static]=\"static()\"\r\n [class.lf-notification-minimal]=\"minimal()\"\r\n [class.lf-notification-gradient]=\"gradient()\"\r\n [class.lf-mobile]=\"isMobile()\"\r\n [class]=\"[cssClass(), color()]\"\r\n animate.enter=\"lf-anim-scale-enter\">\r\n <div\r\n class=\"lf-notification-content flex-row-nowrap gap-2\"\r\n [class.justify-center]=\"minimal()\"\r\n [class.justify-between]=\"!minimal()\"\r\n [class.flex-col]=\"isMobile()\"\r\n [class.align-center]=\"!isMobile()\"\r\n [class.align-start]=\"isMobile()\">\r\n <span\r\n class=\"lf-notification-message flex-row-nowrap justify-start\"\r\n [class.gap-4]=\"!isMobile()\"\r\n [class.gap-2]=\"isMobile()\">\r\n <!-- The spinner takes the icon's own 24px box, so swapping them shifts no text -->\r\n @if (loading()) {\r\n <mat-spinner class=\"flex-none\" [diameter]=\"24\"></mat-spinner>\r\n } @else if (matIcon()) {\r\n <mat-icon class=\"flex-none\" [color]=\"color()\">{{ matIcon() }}</mat-icon>\r\n }\r\n <span class=\"flex-col\" [class.ml-1]=\"!matIcon() && !loading()\">\r\n @if (title()) {\r\n <span class=\"lf-notification-title\">{{ title() }}</span>\r\n }\r\n <span>\r\n {{ message() }}\r\n @if (link() && linkText()) {\r\n <a class=\"lf-notification-link\" [href]=\"link()\">{{ linkText() }}</a>\r\n }\r\n </span>\r\n <div class=\"lf-notification-body\"><ng-content></ng-content></div>\r\n </span>\r\n </span>\r\n\r\n @if (action(); as action) {\r\n <button\r\n mat-flat-button\r\n class=\"lf-notification-action\"\r\n type=\"button\"\r\n [class.align-self-end]=\"isMobile()\"\r\n [color]=\"color()\"\r\n [disabled]=\"disabled() || loading()\"\r\n (click)=\"clickEvent.emit()\">\r\n {{ action }}\r\n </button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".lf-notification{overflow:hidden;padding:var(--notification-padding);box-sizing:border-box;border-radius:var(--border-radius);color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));background-color:var(--mat-snack-bar-container-color, var(--mat-sys-inverse-surface));outline-width:2px;outline-style:solid;outline-color:transparent}.lf-notification.lf-mobile.lf-notification-fixed{position:fixed;inset:auto 0 0;max-width:100vw!important;min-width:0!important}.lf-notification.lf-notification-fixed{z-index:1000;position:fixed;inset:auto 0 0 auto;display:inline-table;max-width:var(--notification-max-width);min-width:var(--notification-min-width);margin:var(--notification-fixed-margin)}.lf-notification.lf-notification-static{margin:var(--notification-static-margin)}.lf-notification.lf-notification-minimal{padding:var(--notification-padding-minimal);outline:none!important;margin:0!important}.lf-notification.primary{color:unset!important;background-color:color-mix(in srgb,var(--color-primary) 12%,transparent);outline-color:color-mix(in srgb,var(--color-primary) 50%,transparent)}.lf-notification.primary .lf-notification-link{color:unset!important}.lf-notification.accent{color:unset!important;background-color:color-mix(in srgb,var(--color-accent) 12%,transparent);outline-color:color-mix(in srgb,var(--color-accent) 50%,transparent)}.lf-notification.accent .lf-notification-link{color:unset!important}.lf-notification.warn{color:unset!important;background-color:color-mix(in srgb,var(--color-warn) 12%,transparent);outline-color:color-mix(in srgb,var(--color-warn) 50%,transparent)}.lf-notification.warn .lf-notification-link{color:unset!important}.lf-notification.lf-notification-gradient{position:relative;outline:none;background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary) 12%,transparent),color-mix(in srgb,var(--color-accent) 12%,transparent))}.lf-notification.lf-notification-gradient:before{content:\"\";position:absolute;inset:0;padding:2px;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor}.lf-notification.lf-notification-gradient ::ng-deep .lf-notification-body .mat-mdc-text-field-wrapper{background-color:var(--mat-app-background-color, var(--mat-sys-surface, #fff));border-radius:var(--border-radius)}.lf-notification .lf-notification-content .lf-notification-message{font-size:var(--notification-font-size);align-items:center}.lf-notification .lf-notification-content .lf-notification-message:has(.lf-notification-body:not(:empty)){align-items:flex-start}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-title{font-weight:500}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-body{width:100%}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-body:empty{display:none}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-body:not(:empty){margin-top:4px}.lf-notification .lf-notification-content .lf-notification-message .lf-notification-link{color:var(--mat-snack-bar-supporting-text-color, var(--mat-sys-inverse-on-surface));text-decoration:underline}.lf-notification .lf-notification-content .lf-notification-action{min-width:unset!important;flex-shrink:0;margin:-8px 0 -8px 8px}.lf-notification.lf-mobile .lf-notification-content:has(.lf-notification-body:not(:empty)) .lf-notification-action{margin-top:4px}\n"] }]
1867
+ }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], linkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkText", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], matIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "matIcon", required: false }] }], svgIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "svgIcon", required: false }] }], static: [{ type: i0.Input, args: [{ isSignal: true, alias: "static", required: false }] }], minimal: [{ type: i0.Input, args: [{ isSignal: true, alias: "minimal", required: false }] }], gradient: [{ type: i0.Input, args: [{ isSignal: true, alias: "gradient", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], clickEvent: [{ type: i0.Output, args: ["clickEvent"] }] } });
1859
1868
 
1860
1869
  class PlaceholderComponent {
1861
1870
  constructor() {