@festo-ui/angular 8.3.0-dev.664 → 8.3.0-dev.667

package/README.md

@@ -49,15 +49,14 @@ If you only want to load the styles for popovers or image gallery you can use fo
 
 ### Modules
 
-After installation you have to import the **FestoAngularModule** and the **BrowserAnimationsModule** to your root module (called `app.module.ts` in the majority of projects). Have a look at the following example:
+After installation you have to import the **FestoAngularModule** to your root module (called `app.module.ts` in the majority of projects). Have a look at the following example:
 
 ```typescript
 import { FestoAngularModule } from '@festo-ui/angular';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, FestoAngularModule, AppRoutingModule],
+  imports: [BrowserModule, FormsModule, ReactiveFormsModule, FestoAngularModule, AppRoutingModule],
   providers: []
 })
 export class AppModule {}

package/fesm2022/festo-ui-angular.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, Component, ContentChild, SimpleChange, ContentChildren, Input, EventEmitter, Output, HostListener, Directive, HostBinding, Optional, TemplateRef, Injector, Injectable, ViewChild, Pipe, DOCUMENT, Inject, ChangeDetectionStrategy, inject, ViewContainerRef, ElementRef, NgModule, forwardRef, CUSTOM_ELEMENTS_SCHEMA, LOCALE_ID, SecurityContext } from '@angular/core';
+import { ViewEncapsulation, Component, ContentChild, SimpleChange, ContentChildren, Input, EventEmitter, Output, HostListener, Directive, HostBinding, Optional, TemplateRef, Injector, Injectable, ViewChild, Pipe, signal, output, DOCUMENT, Inject, ChangeDetectionStrategy, inject, ViewContainerRef, ElementRef, NgModule, forwardRef, CUSTOM_ELEMENTS_SCHEMA, LOCALE_ID, SecurityContext } from '@angular/core';
 import { Subject, BehaviorSubject, noop, Subscription } from 'rxjs';
 import * as i1 from '@angular/router';
 import { RouterModule, NavigationStart } from '@angular/router';
@@ -12,7 +12,6 @@ import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import SimpleBar from 'simplebar';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import * as i1$3 from '@angular/platform-browser';
-import { trigger, state, transition, style, animate, sequence } from '@angular/animations';
 import { ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
 import * as i1$4 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
@@ -1666,15 +1665,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
 
 class FngSnackbarComponent {
     constructor() {
-        this.data = {};
-        this.close = new EventEmitter();
-        this.action = new EventEmitter();
-        this.blockDisplay = 'block';
-        this.animationState = 'init';
+        this.data = signal({}, ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.close = output();
+        this.action = output();
+        this.isShown = signal(false, ...(ngDevMode ? [{ debugName: "isShown" }] : []));
+        this.stackIndex = signal(0, ...(ngDevMode ? [{ debugName: "stackIndex" }] : []));
+    }
+    get transform() {
+        // calculate the translateY values based on stack index
+        const stackIndex = this.stackIndex();
+        // when entering, the snackbar will animate up to this value
+        const enteringValue = stackIndex * 24;
+        // when leaving, the snackbar will animate back to this value
+        const leavingValue = (stackIndex - 1) * 24;
+        return this.isShown()
+            ? `translateY(-${enteringValue}px)`
+            : `translateY(-${leavingValue}px)`;
     }
     ngAfterViewInit() {
-        if (this.data && this.data.disappearAfter) {
-            this.timeout = setTimeout(() => this.onClose(), this.data.disappearAfter);
+        // delay to allow for initial rendering before showing
+        setTimeout(() => {
+            this.isShown.set(true);
+        }, 100);
+        const data = this.data();
+        if (data && data.disappearAfter) {
+            this.timeout = setTimeout(() => this.onClose(), data.disappearAfter);
         }
     }
     ngOnDestroy() {
@@ -1686,59 +1701,19 @@ class FngSnackbarComponent {
         this.action.emit();
     }
     onClose() {
-        this.close.emit();
+        this.isShown.set(false);
+        // delay to allow for animation before emitting close event
+        setTimeout(() => {
+            this.close.emit();
+        }, 300);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FngSnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FngSnackbarComponent, isStandalone: true, selector: "fng-snackbar", inputs: { data: "data" }, outputs: { close: "close", action: "action" }, host: { properties: { "style.display": "this.blockDisplay", "@appearDisappear": "this.animationState" } }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'fwe-snackbar': true,\n    'fwe-snackbar-b': data?.variant === 'b',\n    'fwe-snackbar-c': data?.variant === 'c',\n    'fwe-snackbar-info': data?.type === 'info',\n    'fwe-snackbar-warning': data?.type === 'warning',\n    'fwe-snackbar-error': data?.type === 'error',\n    'fwe-snackbar-shadow': data?.darkBackground\n  }\"\n  >\n  <span>{{ data?.text }}</span>\n  @if (data?.action) {\n    <button aria-label=\"UserAction\" type=\"button\" class=\"fwe-snackbar-link-btn\" (click)=\"onAction()\">\n      {{ data?.action }}\n    </button>\n  }\n\n  @if (data?.action && data?.showClose) {\n    <div class=\"fwe-snackbar-separator\"></div>\n  }\n\n  @if (data?.showClose) {\n    <button aria-label=\"Close\" type=\"button\" class=\"fwe-snackbar-close-btn\" (click)=\"onClose()\">\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  }\n</div>\n", styles: [".fwe-snackbar{pointer-events:all}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
-            trigger('appearDisappear', [
-                state('init', style({ opacity: 0 })),
-                state('first', style({
-                    opacity: 1,
-                    transform: 'translateY(0)'
-                })),
-                state('fadeIn', style({ opacity: '1' })),
-                transition('void => fadeIn', [style({ opacity: 0 }), animate('0.6s ease-out')]),
-                transition('void => first', [style({ transform: 'translateY(100px)' }), animate('0.6s ease-out')]),
-                transition(':leave', sequence([
-                    style({ 'margin-bottom': '24px' }),
-                    animate('0.3s ease-out', style({ opacity: 0 })),
-                    animate('0.3s ease-out', style({ height: '0px', 'margin-bottom': '0px' }))
-                ]))
-            ])
-        ], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FngSnackbarComponent, isStandalone: true, selector: "fng-snackbar", outputs: { close: "close", action: "action" }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'fwe-snackbar': true,\n    'fwe-snackbar-b': data()?.variant === 'b',\n    'fwe-snackbar-c': data()?.variant === 'c',\n    'fwe-snackbar-info': data()?.type === 'info',\n    'fwe-snackbar-warning': data()?.type === 'warning',\n    'fwe-snackbar-error': data()?.type === 'error',\n    'fwe-snackbar-shadow': data()?.darkBackground,\n    'fng-snackbar-entering': isShown(),\n    'fng-snackbar-leaving': !isShown(),\n    'fng-snackbar-first': stackIndex() === 0\n  }\"\n  [style.transform]=\"transform\"\n  >\n  <span>{{ data()?.text }}</span>\n  @if (data()?.action) {\n    <button aria-label=\"UserAction\" type=\"button\" class=\"fwe-snackbar-link-btn\" (click)=\"onAction()\">\n      {{ data()?.action }}\n    </button>\n  }\n\n  @if (data()?.action && data()?.showClose) {\n    <div class=\"fwe-snackbar-separator\"></div>\n  }\n\n  @if (data()?.showClose) {\n    <button aria-label=\"Close\" type=\"button\" class=\"fwe-snackbar-close-btn\" (click)=\"onClose()\">\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  }\n</div>\n", styles: [":host{display:block}.fwe-snackbar{pointer-events:all;transition:transform .3s ease-out,opacity .25s ease-out;opacity:0;margin-bottom:0!important}.fwe-snackbar.fng-snackbar-first{margin-bottom:24px!important;opacity:1;transform:translateY(100px)}.fwe-snackbar.fng-snackbar-entering{opacity:1}.fwe-snackbar.fng-snackbar-leaving{opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FngSnackbarComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'fng-snackbar', encapsulation: ViewEncapsulation.None, animations: [
-                        trigger('appearDisappear', [
-                            state('init', style({ opacity: 0 })),
-                            state('first', style({
-                                opacity: 1,
-                                transform: 'translateY(0)'
-                            })),
-                            state('fadeIn', style({ opacity: '1' })),
-                            transition('void => fadeIn', [style({ opacity: 0 }), animate('0.6s ease-out')]),
-                            transition('void => first', [style({ transform: 'translateY(100px)' }), animate('0.6s ease-out')]),
-                            transition(':leave', sequence([
-                                style({ 'margin-bottom': '24px' }),
-                                animate('0.3s ease-out', style({ opacity: 0 })),
-                                animate('0.3s ease-out', style({ height: '0px', 'margin-bottom': '0px' }))
-                            ]))
-                        ])
-                    ], template: "<div\n  [ngClass]=\"{\n    'fwe-snackbar': true,\n    'fwe-snackbar-b': data?.variant === 'b',\n    'fwe-snackbar-c': data?.variant === 'c',\n    'fwe-snackbar-info': data?.type === 'info',\n    'fwe-snackbar-warning': data?.type === 'warning',\n    'fwe-snackbar-error': data?.type === 'error',\n    'fwe-snackbar-shadow': data?.darkBackground\n  }\"\n  >\n  <span>{{ data?.text }}</span>\n  @if (data?.action) {\n    <button aria-label=\"UserAction\" type=\"button\" class=\"fwe-snackbar-link-btn\" (click)=\"onAction()\">\n      {{ data?.action }}\n    </button>\n  }\n\n  @if (data?.action && data?.showClose) {\n    <div class=\"fwe-snackbar-separator\"></div>\n  }\n\n  @if (data?.showClose) {\n    <button aria-label=\"Close\" type=\"button\" class=\"fwe-snackbar-close-btn\" (click)=\"onClose()\">\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  }\n</div>\n", styles: [".fwe-snackbar{pointer-events:all}\n"] }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], close: [{
-                type: Output
-            }], action: [{
-                type: Output
-            }], blockDisplay: [{
-                type: HostBinding,
-                args: ['style.display']
-            }], animationState: [{
-                type: HostBinding,
-                args: ['@appearDisappear']
-            }] } });
+            args: [{ imports: [CommonModule], selector: 'fng-snackbar', encapsulation: ViewEncapsulation.None, template: "<div\n  [ngClass]=\"{\n    'fwe-snackbar': true,\n    'fwe-snackbar-b': data()?.variant === 'b',\n    'fwe-snackbar-c': data()?.variant === 'c',\n    'fwe-snackbar-info': data()?.type === 'info',\n    'fwe-snackbar-warning': data()?.type === 'warning',\n    'fwe-snackbar-error': data()?.type === 'error',\n    'fwe-snackbar-shadow': data()?.darkBackground,\n    'fng-snackbar-entering': isShown(),\n    'fng-snackbar-leaving': !isShown(),\n    'fng-snackbar-first': stackIndex() === 0\n  }\"\n  [style.transform]=\"transform\"\n  >\n  <span>{{ data()?.text }}</span>\n  @if (data()?.action) {\n    <button aria-label=\"UserAction\" type=\"button\" class=\"fwe-snackbar-link-btn\" (click)=\"onAction()\">\n      {{ data()?.action }}\n    </button>\n  }\n\n  @if (data()?.action && data()?.showClose) {\n    <div class=\"fwe-snackbar-separator\"></div>\n  }\n\n  @if (data()?.showClose) {\n    <button aria-label=\"Close\" type=\"button\" class=\"fwe-snackbar-close-btn\" (click)=\"onClose()\">\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  }\n</div>\n", styles: [":host{display:block}.fwe-snackbar{pointer-events:all;transition:transform .3s ease-out,opacity .25s ease-out;opacity:0;margin-bottom:0!important}.fwe-snackbar.fng-snackbar-first{margin-bottom:24px!important;opacity:1;transform:translateY(100px)}.fwe-snackbar.fng-snackbar-entering{opacity:1}.fwe-snackbar.fng-snackbar-leaving{opacity:0}\n"] }]
+        }] });
 
 class FngSnackbarService {
     constructor() {
@@ -1784,17 +1759,16 @@ class FngSnackbarContainerDirective {
         const complete = new Subject();
         const componentRef = this.viewContainerRef.createComponent(FngSnackbarComponent);
         const componentInstance = componentRef.instance;
-        componentInstance.data = { ...this.fngSnackbarContainer, ...snackDescription.data };
-        componentInstance.animationState = this.snacks.length === 0 ? 'first' : 'fadeIn';
+        componentInstance.data.set({ ...this.fngSnackbarContainer, ...snackDescription.data });
         const snackbarRef = { componentRef, complete };
-        componentInstance.close.pipe(takeUntil(complete)).subscribe(() => {
+        componentInstance.close.subscribe(() => {
             this.remove(snackbarRef);
             if (snackDescription.closeCallback) {
                 snackDescription.closeCallback();
             }
         });
-        componentInstance.action.pipe(takeUntil(complete)).subscribe(() => {
-            if (componentInstance.data?.closeOnAction) {
+        componentInstance.action.subscribe(() => {
+            if (componentInstance.data()?.closeOnAction) {
                 this.remove(snackbarRef);
             }
             if (snackDescription.actionCallback) {
@@ -1802,12 +1776,14 @@ class FngSnackbarContainerDirective {
             }
         });
         this.snacks.push(snackbarRef);
+        this.updateStackIndices();
         snackDescription.resolve(snackbarRef.componentRef);
     }
     remove(snackbarRef) {
         const index = this.snacks.indexOf(snackbarRef);
         if (index !== -1) {
             const deletedSnackbarRef = this.snacks.splice(index, 1);
+            this.updateStackIndices();
             if (deletedSnackbarRef != null && deletedSnackbarRef.length > 0) {
                 const deletedSnackbar = deletedSnackbarRef[0];
                 if (deletedSnackbar.complete != null) {
@@ -1821,6 +1797,11 @@ class FngSnackbarContainerDirective {
             }
         }
     }
+    updateStackIndices() {
+        this.snacks.forEach((snack, index) => {
+            snack.componentRef.instance.stackIndex.set(this.snacks.length - index - 1);
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FngSnackbarContainerDirective, deps: [{ token: i0.ViewContainerRef }, { token: FngSnackbarService }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: FngSnackbarContainerDirective, isStandalone: true, selector: "[fngSnackbarContainer]", inputs: { fngSnackbarContainer: "fngSnackbarContainer" }, ngImport: i0 }); }
 }