@breadstone/mosaik-elements-angular 0.0.47 → 0.0.48

package/fesm2022/mosaik-elements-angular.mjs

@@ -10,7 +10,7 @@ import { DOCUMENT, NgFor, NgIf, AsyncPipe } from '@angular/common';
 import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 import { OverlayPositionBuilder, Overlay } from '@angular/cdk/overlay';
 import { emit } from '@breadstone/mosaik-elements';
-import * as i1 from '@angular/cdk/layout';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import { ThemeGeneratorServiceLocator, ThemeGenerator, ThemeObserver, ThemeObserverServiceLocator } from '@breadstone/mosaik-themes';
 
 /* eslint-disable prefer-rest-params */
@@ -55281,12 +55281,12 @@ class BreakpointDirective {
      *
      * @public
      */
-    constructor(vcr, templateRef, cdr, breakPointObserver, breakPointRegistry) {
-        this._vcr = vcr;
-        this._templateRef = templateRef;
-        this._cdr = cdr;
-        this._breakPointObserver = breakPointObserver;
-        this._breakPointRegistry = breakPointRegistry;
+    constructor() {
+        this._vcr = inject(ViewContainerRef);
+        this._templateRef = inject((TemplateRef));
+        this._cdr = inject(ChangeDetectorRef);
+        this._breakPointObserver = inject(BreakpointObserver);
+        this._breakPointRegistry = inject(BreakpointRegistry);
         this._breakPointObserverSubscription = null;
         this._view = null;
     }
@@ -55341,15 +55341,22 @@ class BreakpointDirective {
         this.invalidate();
         this._cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: BreakpointDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.ChangeDetectorRef }, { token: i1.BreakpointObserver }, { token: BreakpointRegistry }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: BreakpointDirective, isStandalone: true, selector: "[breakpoint]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: BreakpointDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: BreakpointDirective, isStandalone: true, selector: "[breakpoint]", providers: [
+            BreakpointObserver,
+            BreakpointRegistry
+        ], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: BreakpointDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[breakpoint]'
+                    selector: '[breakpoint]',
+                    providers: [
+                        BreakpointObserver,
+                        BreakpointRegistry
+                    ]
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.ChangeDetectorRef }, { type: i1.BreakpointObserver }, { type: BreakpointRegistry }] });
+        }], ctorParameters: () => [] });
 
 // #region Imports
 // #endregion
@@ -55600,18 +55607,45 @@ class AnimateDirective {
     _registry;
     _element;
     _animationPlayer;
+    _renderer;
     _wasTriggered;
+    _animationOptions;
+    _animation;
     // #endregion
     // #region Ctor
     constructor() {
         this._registry = inject(ANIMATION_REGISTRY);
         this._element = inject(ElementRef);
         this._animationPlayer = inject(AnimationPlayer2);
+        this._renderer = inject(Renderer2);
         this._wasTriggered = false;
+        this._animationOptions = undefined;
+        this._animation = undefined;
     }
     // #endregion
     // #region Properties
-    options;
+    /**
+     * Gets or sets the `animation` property.
+     *
+     * @public
+     */
+    get animation() {
+        return this._animation;
+    }
+    set animation(value) {
+        this._animation = value;
+    }
+    /**
+     * Gets or sets the `options` property.
+     *
+     * @public
+     */
+    get options() {
+        return this._animationOptions;
+    }
+    set options(value) {
+        this._animationOptions = value;
+    }
     // #endregion
     // #region Methods
     /**
@@ -55651,17 +55685,14 @@ class AnimateDirective {
         };
         for (const [k, v] of Object.entries(from)) {
             if (k in el.style) {
-                el.style[k] = v?.toString() ?? '';
+                this._renderer.setStyle(el, k, v);
             }
         }
-        // animate if `to` is provided
-        if (options.to) {
-            if (options.trigger) {
-                options.trigger(() => this.play(options));
-            }
-            else {
-                this.play(options);
-            }
+        if (options.trigger) {
+            options.trigger(() => this.play(options));
+        }
+        else {
+            this.play(options);
         }
     }
     play(options) {
@@ -55674,43 +55705,23 @@ class AnimateDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AnimateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.4", type: AnimateDirective, isStandalone: true, selector: "[mosaikAnimate]", inputs: { options: ["mosaikAnimate", "options", (value) => {
-                    if (typeof value === 'string') {
-                        const animation = inject(ANIMATION_REGISTRY)[value];
-                        if (!animation) {
-                            throw new Error(`Animation "${value}" not found in registry.`);
-                        }
-                        return animation;
-                    }
-                    else if (typeof value === 'object') {
-                        return value;
-                    }
-                    return undefined;
-                }] }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: AnimateDirective, isStandalone: true, selector: "[mosaikAnimate]", inputs: { animation: ["mosaikAnimate", "animation"], options: ["mosaikAnimateOptions", "options"] }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AnimateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mosaikAnimate]'
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{
+        }], ctorParameters: () => [], propDecorators: { animation: [{
                 type: Input,
                 args: [{
                         alias: 'mosaikAnimate',
-                        required: true,
-                        transform: (value) => {
-                            if (typeof value === 'string') {
-                                const animation = inject(ANIMATION_REGISTRY)[value];
-                                if (!animation) {
-                                    throw new Error(`Animation "${value}" not found in registry.`);
-                                }
-                                return animation;
-                            }
-                            else if (typeof value === 'object') {
-                                return value;
-                            }
-                            return undefined;
-                        }
+                        required: true
+                    }]
+            }], options: [{
+                type: Input,
+                args: [{
+                        alias: 'mosaikAnimateOptions'
                     }]
             }] } });