@lukfel/ng-scaffold 21.1.43 → 21.1.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukfel/ng-scaffold",
-  "version": "21.1.43",
+  "version": "21.1.44",
   "description": "This Angular library provides a basic UI scaffold and services for modern web and mobile apps",
   "license": "MIT",
   "author": {
@@ -14,8 +14,7 @@
   "peerDependencies": {
     "@angular/common": "^21.0.8",
     "@angular/core": "^21.0.8",
-    "@angular/material": "^21.0.6",
-    "@angular/animations": "^21.0.8"
+    "@angular/material": "^21.0.6"
   },
   "exports": {
     "./styles": {

package/styles/_animations.scss

@@ -0,0 +1,63 @@
+// Slide up — enter from bottom, leave to bottom
+// Used by: bottom-bar, navbar (mobile)
+.lf-anim-slide-up-enter {
+  animation: lf-slide-up 200ms linear forwards;
+}
+@keyframes lf-slide-up {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+.lf-anim-slide-up-leave {
+  animation: lf-slide-up-out 200ms linear forwards;
+}
+@keyframes lf-slide-up-out {
+  from { transform: translateY(0); }
+  to   { transform: translateY(100%); }
+}
+
+// Slide down — enter from top, leave to top
+// Used by: header
+.lf-anim-slide-down-enter {
+  animation: lf-slide-down 200ms ease-out forwards;
+}
+@keyframes lf-slide-down {
+  from { transform: translateY(-100%); }
+  to   { transform: translateY(0); }
+}
+
+.lf-anim-slide-down-leave {
+  animation: lf-slide-down-out 200ms ease-in forwards;
+}
+@keyframes lf-slide-down-out {
+  from { transform: translateY(0); }
+  to   { transform: translateY(-100%); }
+}
+
+// Slide from left — enter from left, leave to left
+// Used by: navbar (desktop)
+.lf-anim-slide-left-enter {
+  animation: lf-slide-left 200ms linear forwards;
+}
+@keyframes lf-slide-left {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(0); }
+}
+
+.lf-anim-slide-left-leave {
+  animation: lf-slide-left-out 200ms linear forwards;
+}
+@keyframes lf-slide-left-out {
+  from { transform: translateX(0); }
+  to   { transform: translateX(-100%); }
+}
+
+// Scale in — enter with scale
+// Used by: notification
+.lf-anim-scale-enter {
+  animation: lf-scale-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
+}
+@keyframes lf-scale-in {
+  from { opacity: 0; transform: scale(0.5); }
+  to   { opacity: 1; transform: scale(1); }
+}

package/styles/_variables.scss

@@ -1,5 +1,6 @@
 :root {
     --transition: 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+    --border-radius: 4px;
 
     --loading-overlay-z-index: 1001;
 
@@ -53,12 +54,20 @@
     --placeholder-message-font-size: 16px;
 
     --list-item-height: 72px;
-    --list-item-border-radius: 4px;
+    --list-item-border-radius: var(--border-radius);
     --list-item-sort-icon-size: 16px;
     --list-item-avatar-size: 48px;
     --list-item-title-width: 200px;
     --list-item-title-wrapper-width: 80px;
     --list-item-checkbox-width: 40px;
 
+    --notification-max-width: 50vw;
+    --notification-min-width: 384px;
+    --notification-min-height: 48px;
+    --notification-fixed-margin: 24px;
+    --notification-static-margin: 0 0 16px 0;
+    --notification-padding: 16px 16px;
+    --notification-padding-minimal: 8px 16px;
+
     --color-gray: rgba(128, 128, 128, 0.8);
 }

package/styles/style.scss

@@ -1,6 +1,7 @@
 @import './_theme.scss';
 @import './_classes';
 @import './_variables';
+@import './_animations';
 @import './fonts/material-icons.scss';
 @import './fonts/roboto-font.scss';
 

package/types/lukfel-ng-scaffold.d.ts

@@ -258,6 +258,36 @@ declare class ScaffoldComponent implements OnInit, OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScaffoldComponent, "lf-scaffold", never, {}, { "headerButtonClickEvent": "headerButtonClickEvent"; "headerInputSubmitEvent": "headerInputSubmitEvent"; "headerInputChangeEvent": "headerInputChangeEvent"; "navbarButtonClickEvent": "navbarButtonClickEvent"; "floatingButtonClickEvent": "floatingButtonClickEvent"; "bottomBarButtonClickEvent": "bottomBarButtonClickEvent"; }, never, ["[drawerContent]", "*"], true, never>;
 }
 
+declare class ColorPickerComponent {
+    libraryConfig: ScaffoldLibraryConfig | null;
+    readonly color: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly matIcon: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly tooltip: _angular_core.InputSignal<string | undefined>;
+    readonly colorChangeEvent: _angular_core.OutputEmitterRef<string>;
+    selectedColor: _angular_core.WritableSignal<string>;
+    labelColor: _angular_core.Signal<string>;
+    selectColor(event: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "lf-color-picker", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "matIcon": { "alias": "matIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, { "colorChangeEvent": "colorChangeEvent"; }, never, never, true, never>;
+}
+
+declare class FileUploadComponent {
+    libraryConfig: ScaffoldLibraryConfig | null;
+    private logger;
+    readonly color: _angular_core.InputSignal<"primary" | "accent" | "warn">;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly matIcon: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly accept: _angular_core.InputSignal<string | undefined>;
+    readonly tooltip: _angular_core.InputSignal<string | undefined>;
+    readonly fileChangeEvent: _angular_core.OutputEmitterRef<File>;
+    selectFile(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileUploadComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileUploadComponent, "lf-file-upload", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "matIcon": { "alias": "matIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, { "fileChangeEvent": "fileChangeEvent"; }, never, never, true, never>;
+}
+
 declare class ListItemAvatarDirective {
     templateRef: TemplateRef<any>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListItemAvatarDirective, never>;
@@ -332,34 +362,22 @@ declare class ListComponent implements OnInit, OnChanges {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListComponent, "lf-list", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "groupedItems": { "alias": "groupedItems"; "required": false; "isSignal": true; }; "buttons": { "alias": "buttons"; "required": false; "isSignal": true; }; "dropListId": { "alias": "dropListId"; "required": false; "isSignal": true; }; "connectedDropListIds": { "alias": "connectedDropListIds"; "required": false; "isSignal": true; }; "allSelected": { "alias": "allSelected"; "required": false; "isSignal": true; }; }, { "sortChangeEvent": "sortChangeEvent"; "selectionChangeEvent": "selectionChangeEvent"; "itemClickEvent": "itemClickEvent"; "itemDropEvent": "itemDropEvent"; "buttonClickEvent": "buttonClickEvent"; "allSelected": "allSelectedChange"; }, ["avatarTemplate", "titleTemplate", "subtitleTemplate", "buttonsTemplate"], never, true, never>;
 }
 
-declare class FileUploadComponent {
-    libraryConfig: ScaffoldLibraryConfig | null;
-    private logger;
+declare class NotificationComponent {
+    private breakpointService;
     readonly color: _angular_core.InputSignal<"primary" | "accent" | "warn">;
-    readonly label: _angular_core.InputSignal<string | undefined>;
-    readonly matIcon: _angular_core.InputSignal<string | undefined>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly accept: _angular_core.InputSignal<string | undefined>;
-    readonly tooltip: _angular_core.InputSignal<string | undefined>;
-    readonly fileChangeEvent: _angular_core.OutputEmitterRef<File>;
-    selectFile(event: Event): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FileUploadComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FileUploadComponent, "lf-file-upload", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "matIcon": { "alias": "matIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, { "fileChangeEvent": "fileChangeEvent"; }, never, never, true, never>;
-}
-
-declare class ColorPickerComponent {
-    libraryConfig: ScaffoldLibraryConfig | null;
-    readonly color: _angular_core.InputSignal<string>;
-    readonly label: _angular_core.InputSignal<string | undefined>;
-    readonly matIcon: _angular_core.InputSignal<string | undefined>;
-    readonly disabled: _angular_core.InputSignal<boolean>;
-    readonly tooltip: _angular_core.InputSignal<string | undefined>;
-    readonly colorChangeEvent: _angular_core.OutputEmitterRef<string>;
-    selectedColor: _angular_core.WritableSignal<string>;
-    labelColor: _angular_core.Signal<string>;
-    selectColor(event: string): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorPickerComponent, "lf-color-picker", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "matIcon": { "alias": "matIcon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; }, { "colorChangeEvent": "colorChangeEvent"; }, never, never, true, never>;
+    readonly message: _angular_core.InputSignal<string>;
+    readonly link: _angular_core.InputSignal<string>;
+    readonly linkText: _angular_core.InputSignal<string>;
+    readonly action: _angular_core.InputSignal<string>;
+    readonly matIcon: _angular_core.InputSignal<string>;
+    readonly svgIcon: _angular_core.InputSignal<string>;
+    readonly static: _angular_core.InputSignal<boolean>;
+    readonly minimal: _angular_core.InputSignal<boolean>;
+    readonly cssClass: _angular_core.InputSignal<string>;
+    readonly clickEvent: _angular_core.OutputEmitterRef<void>;
+    isMobile: _angular_core.Signal<boolean | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NotificationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NotificationComponent, "lf-notification", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "linkText": { "alias": "linkText"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; "matIcon": { "alias": "matIcon"; "required": false; "isSignal": true; }; "svgIcon": { "alias": "svgIcon"; "required": false; "isSignal": true; }; "static": { "alias": "static"; "required": false; "isSignal": true; }; "minimal": { "alias": "minimal"; "required": false; "isSignal": true; }; "cssClass": { "alias": "cssClass"; "required": false; "isSignal": true; }; }, { "clickEvent": "clickEvent"; }, never, never, true, never>;
 }
 
 declare class PlaceholderComponent {
@@ -616,5 +634,5 @@ declare class ScaffoldLoadingInterceptor implements HttpInterceptor {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ScaffoldLoadingInterceptor>;
 }
 
-export { BreakpointService, CONFIG, ColorPickerComponent, DialogService, FileUploadComponent, ListComponent, ListItemAvatarDirective, ListItemButtonsDirective, ListItemSubtitleDirective, ListItemTitleDirective, LocalStorageService, Logger, OverlayService, PlaceholderComponent, RouterService, ScaffoldComponent, ScaffoldLoadingInterceptor, ScaffoldService, SeoService, SnackbarService, ThemeService, provideScaffold };
+export { BreakpointService, CONFIG, ColorPickerComponent, DialogService, FileUploadComponent, ListComponent, ListItemAvatarDirective, ListItemButtonsDirective, ListItemSubtitleDirective, ListItemTitleDirective, LocalStorageService, Logger, NotificationComponent, OverlayService, PlaceholderComponent, RouterService, ScaffoldComponent, ScaffoldLoadingInterceptor, ScaffoldService, SeoService, SnackbarService, ThemeService, provideScaffold };
 export type { BottomBarConfig, Button, ConfirmDialogConfig, ContentTitleCardConfig, DrawerConfig, FloatingButtonConfig, FooterConfig, HeaderConfig, HeaderInputConfig, HeaderResponsiveConfig, ListConfig, ListHeader, ListItem, LoadingOverlayConfig, MenuButton, NavbarConfig, NavigationLink, PlaceholderConfig, ScaffoldConfig, ScaffoldLibraryConfig, SeoConfig };