@anguless/angulux 22.0.0-rc.0

package/fesm2022/anguless-angulux-motion.mjs

@@ -0,0 +1,721 @@
+import * as i0 from '@angular/core';
+import { Injectable, InjectionToken, inject, input, output, computed, signal, effect, afterRenderEffect, untracked, ChangeDetectionStrategy, Component, Directive, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { createMotion, resolveDuration } from '@anguless/angulux-motion';
+import { nextFrame } from '@anguless/angulux-utils';
+import { BaseComponent, PARENT_INSTANCE } from '@anguless/angulux/basecomponent';
+import * as i1 from '@anguless/angulux/bind';
+import { Bind, BindModule } from '@anguless/angulux/bind';
+import { BaseStyle } from '@anguless/angulux/base';
+
+const originalStyles = new WeakMap();
+function applyHiddenStyles(element, strategy) {
+    if (!element)
+        return;
+    if (!originalStyles.has(element)) {
+        originalStyles.set(element, {
+            display: element.style.display,
+            visibility: element.style.visibility,
+            maxHeight: element.style.maxHeight,
+            overflow: element.style.overflow
+        });
+    }
+    switch (strategy) {
+        case 'display':
+            element.style.display = 'none';
+            break;
+        case 'visibility':
+            element.style.visibility = 'hidden';
+            element.style.maxHeight = '0';
+            element.style.overflow = 'hidden';
+            break;
+    }
+}
+function resetStyles(element, strategy) {
+    if (!element)
+        return;
+    const original = originalStyles.get(element) ?? element.style;
+    switch (strategy) {
+        case 'display':
+            element.style.display = original?.display || '';
+            break;
+        case 'visibility':
+            element.style.visibility = original?.visibility || '';
+            element.style.maxHeight = original?.maxHeight || '';
+            element.style.overflow = original?.overflow || '';
+            break;
+    }
+    originalStyles.delete(element);
+}
+
+const style = /*css*/ `
+    .p-motion {
+        display: block;
+    }
+`;
+const classes = {
+    root: 'p-motion'
+};
+class MotionStyle extends BaseStyle {
+    name = 'motion';
+    style = style;
+    classes = classes;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MotionStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MotionStyle });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MotionStyle, decorators: [{
+            type: Injectable
+        }] });
+/**
+ *
+ * Motion and MotionDirective provide an easy way to add motion effects to Angular applications.
+ *
+ * @module motionstyle
+ *
+ */
+var MotionClasses;
+(function (MotionClasses) {
+    /**
+     * Class name of the root element
+     */
+    MotionClasses["root"] = "p-motion";
+})(MotionClasses || (MotionClasses = {}));
+
+const MOTION_INSTANCE = new InjectionToken('MOTION_INSTANCE');
+/**
+ * Motion component is a container to apply motion effects to its content.
+ * @group Components
+ */
+class Motion extends BaseComponent {
+    $pcMotion = inject(MOTION_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    bindDirectiveInstance = inject(Bind, { self: true });
+    onAfterViewChecked() {
+        const options = this.options();
+        const optionsAttrs = options?.root || {};
+        this.bindDirectiveInstance.setAttrs({ ...this.ptms(['host', 'root']), ...optionsAttrs });
+    }
+    _componentStyle = inject(MotionStyle);
+    /******************** Inputs ********************/
+    /**
+     * Whether the element is visible or not.
+     * @group Props
+     */
+    visible = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to mount the element on enter.
+     * @group Props
+     */
+    mountOnEnter = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mountOnEnter" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether to unmount the element on leave.
+     * @group Props
+     */
+    unmountOnLeave = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "unmountOnLeave" }] : /* istanbul ignore next */ []));
+    /**
+     * The name of the motion. It can be a predefined motion name or a custom one.
+     * phases:
+     *     [name]-enter
+     *     [name]-enter-active
+     *     [name]-enter-to
+     *     [name]-leave
+     *     [name]-leave-active
+     *     [name]-leave-to
+     * @group Props
+     */
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * The type of the motion, valid values 'transition' and 'animation'.
+     * @group Props
+     */
+    type = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the motion is safe.
+     * @group Props
+     */
+    safe = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "safe" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the motion is disabled.
+     * @group Props
+     */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the motion should appear.
+     * @group Props
+     */
+    appear = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appear" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the motion should enter.
+     * @group Props
+     */
+    enter = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enter" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the motion should leave.
+     * @group Props
+     */
+    leave = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leave" }] : /* istanbul ignore next */ []));
+    /**
+     * The duration of the motion.
+     * @group Props
+     */
+    duration = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+    /**
+     * The hide strategy of the motion, valid values 'display' and 'visibility'.
+     * @group Props
+     */
+    hideStrategy = input('display', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideStrategy" }] : /* istanbul ignore next */ []));
+    /**
+     * The enter from class of the motion.
+     * @group Props
+     */
+    enterFromClass = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enterFromClass" }] : /* istanbul ignore next */ []));
+    /**
+     * The enter to class of the motion.
+     * @group Props
+     */
+    enterToClass = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enterToClass" }] : /* istanbul ignore next */ []));
+    /**
+     * The enter active class of the motion.
+     * @group Props
+     */
+    enterActiveClass = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enterActiveClass" }] : /* istanbul ignore next */ []));
+    /**
+     * The leave from class of the motion.
+     * @group Props
+     */
+    leaveFromClass = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leaveFromClass" }] : /* istanbul ignore next */ []));
+    /**
+     * The leave to class of the motion.
+     * @group Props
+     */
+    leaveToClass = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leaveToClass" }] : /* istanbul ignore next */ []));
+    /**
+     * The leave active class of the motion.
+     * @group Props
+     */
+    leaveActiveClass = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leaveActiveClass" }] : /* istanbul ignore next */ []));
+    /******************** All Inputs ********************/
+    /**
+     * The motion options.
+     * @group Props
+     */
+    options = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /******************** Outputs ********************/
+    /**
+     * Callback fired before the enter transition/animation starts.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onBeforeEnter = output();
+    /**
+     * Callback fired when the enter transition/animation starts.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onEnter = output();
+    /**
+     * Callback fired after the enter transition/animation ends.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onAfterEnter = output();
+    /**
+     * Callback fired when the enter transition/animation is cancelled.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onEnterCancelled = output();
+    /**
+     * Callback fired before the leave transition/animation starts.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onBeforeLeave = output();
+    /**
+     * Callback fired when the leave transition/animation starts.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onLeave = output();
+    /**
+     * Callback fired after the leave transition/animation ends.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onAfterLeave = output();
+    /**
+     * Callback fired when the leave transition/animation is cancelled.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onLeaveCancelled = output();
+    /******************** Computed ********************/
+    motionOptions = computed(() => {
+        const options = this.options();
+        return {
+            name: options.name ?? this.name(),
+            type: options.type ?? this.type(),
+            safe: options.safe ?? this.safe(),
+            disabled: options.disabled ?? this.disabled(),
+            appear: false,
+            enter: options.enter ?? this.enter(),
+            leave: options.leave ?? this.leave(),
+            duration: options.duration ?? this.duration(),
+            enterClass: {
+                from: options.enterClass?.from ?? (!options.name ? this.enterFromClass() : undefined),
+                to: options.enterClass?.to ?? (!options.name ? this.enterToClass() : undefined),
+                active: options.enterClass?.active ?? (!options.name ? this.enterActiveClass() : undefined)
+            },
+            leaveClass: {
+                from: options.leaveClass?.from ?? (!options.name ? this.leaveFromClass() : undefined),
+                to: options.leaveClass?.to ?? (!options.name ? this.leaveToClass() : undefined),
+                active: options.leaveClass?.active ?? (!options.name ? this.leaveActiveClass() : undefined)
+            },
+            onBeforeEnter: options.onBeforeEnter ?? this.handleBeforeEnter,
+            onEnter: options.onEnter ?? this.handleEnter,
+            onAfterEnter: options.onAfterEnter ?? this.handleAfterEnter,
+            onEnterCancelled: options.onEnterCancelled ?? this.handleEnterCancelled,
+            onBeforeLeave: options.onBeforeLeave ?? this.handleBeforeLeave,
+            onLeave: options.onLeave ?? this.handleLeave,
+            onAfterLeave: options.onAfterLeave ?? this.handleAfterLeave,
+            onLeaveCancelled: options.onLeaveCancelled ?? this.handleLeaveCancelled
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
+    motion;
+    isInitialMount = true;
+    cancelled = false;
+    destroyed = false;
+    rendered = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rendered" }] : /* istanbul ignore next */ []));
+    handleBeforeEnter = (event) => !this.destroyed && this.onBeforeEnter.emit(event);
+    handleEnter = (event) => !this.destroyed && this.onEnter.emit(event);
+    handleAfterEnter = (event) => !this.destroyed && this.onAfterEnter.emit(event);
+    handleEnterCancelled = (event) => !this.destroyed && this.onEnterCancelled.emit(event);
+    handleBeforeLeave = (event) => !this.destroyed && this.onBeforeLeave.emit(event);
+    handleLeave = (event) => !this.destroyed && this.onLeave.emit(event);
+    handleAfterLeave = (event) => !this.destroyed && this.onAfterLeave.emit(event);
+    handleLeaveCancelled = (event) => !this.destroyed && this.onLeaveCancelled.emit(event);
+    constructor() {
+        super();
+        effect(() => {
+            const hideStrategy = this.hideStrategy();
+            if (this.isInitialMount) {
+                applyHiddenStyles(this.$el, hideStrategy);
+                this.rendered.set((this.visible() && this.mountOnEnter()) || !this.mountOnEnter());
+            }
+            else if (this.visible() && !this.rendered()) {
+                applyHiddenStyles(this.$el, hideStrategy);
+                this.rendered.set(true);
+            }
+        });
+        effect(() => {
+            if (!this.motion) {
+                this.motion = createMotion(this.$el, this.motionOptions());
+            }
+            else {
+                // @todo: Update motion options method to update options dynamically
+                //this.motion.update(this.$el, this.motionOptions());
+            }
+        });
+        afterRenderEffect(async () => {
+            if (!this.$el)
+                return;
+            const shouldAppear = this.isInitialMount && this.visible() && this.appear();
+            const hideStrategy = this.hideStrategy();
+            if (this.visible()) {
+                await nextFrame();
+                resetStyles(this.$el, hideStrategy);
+                if (shouldAppear || !this.isInitialMount) {
+                    this.applyMotionDuration('enter');
+                    this.motion?.enter();
+                }
+            }
+            else if (!this.isInitialMount) {
+                await nextFrame();
+                this.applyMotionDuration('leave');
+                this.motion?.leave()?.then(async () => {
+                    if (this.$el && !this.cancelled && !this.visible()) {
+                        applyHiddenStyles(this.$el, hideStrategy);
+                        if (this.unmountOnLeave()) {
+                            await nextFrame();
+                            if (!this.cancelled) {
+                                this.rendered.set(false);
+                            }
+                        }
+                    }
+                });
+            }
+            this.isInitialMount = false;
+        });
+    }
+    applyMotionDuration(phase) {
+        const options = untracked(this.motionOptions);
+        const ms = resolveDuration(options.duration, phase);
+        if (ms == null || !this.$el)
+            return;
+        const el = this.$el;
+        const durationValue = `${ms}ms`;
+        if (options.type === 'transition') {
+            el.style.transitionDuration = durationValue;
+        }
+        else {
+            el.style.animationDuration = durationValue;
+        }
+    }
+    onDestroy() {
+        this.destroyed = true;
+        this.cancelled = true;
+        this.motion?.cancel();
+        this.motion = undefined;
+        resetStyles(this.$el, this.hideStrategy());
+        this.$el?.remove();
+        this.isInitialMount = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Motion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: Motion, isStandalone: true, selector: "agl-motion", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, mountOnEnter: { classPropertyName: "mountOnEnter", publicName: "mountOnEnter", isSignal: true, isRequired: false, transformFunction: null }, unmountOnLeave: { classPropertyName: "unmountOnLeave", publicName: "unmountOnLeave", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, safe: { classPropertyName: "safe", publicName: "safe", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appear: { classPropertyName: "appear", publicName: "appear", isSignal: true, isRequired: false, transformFunction: null }, enter: { classPropertyName: "enter", publicName: "enter", isSignal: true, isRequired: false, transformFunction: null }, leave: { classPropertyName: "leave", publicName: "leave", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, hideStrategy: { classPropertyName: "hideStrategy", publicName: "hideStrategy", isSignal: true, isRequired: false, transformFunction: null }, enterFromClass: { classPropertyName: "enterFromClass", publicName: "enterFromClass", isSignal: true, isRequired: false, transformFunction: null }, enterToClass: { classPropertyName: "enterToClass", publicName: "enterToClass", isSignal: true, isRequired: false, transformFunction: null }, enterActiveClass: { classPropertyName: "enterActiveClass", publicName: "enterActiveClass", isSignal: true, isRequired: false, transformFunction: null }, leaveFromClass: { classPropertyName: "leaveFromClass", publicName: "leaveFromClass", isSignal: true, isRequired: false, transformFunction: null }, leaveToClass: { classPropertyName: "leaveToClass", publicName: "leaveToClass", isSignal: true, isRequired: false, transformFunction: null }, leaveActiveClass: { classPropertyName: "leaveActiveClass", publicName: "leaveActiveClass", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBeforeEnter: "onBeforeEnter", onEnter: "onEnter", onAfterEnter: "onAfterEnter", onEnterCancelled: "onEnterCancelled", onBeforeLeave: "onBeforeLeave", onLeave: "onLeave", onAfterLeave: "onAfterLeave", onLeaveCancelled: "onLeaveCancelled" }, host: { properties: { "class": "cx('root')" } }, providers: [MotionStyle, { provide: MOTION_INSTANCE, useExisting: Motion }, { provide: PARENT_INSTANCE, useExisting: Motion }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
+        @if (rendered()) {
+            <ng-content />
+        }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: BindModule }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Motion, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.Eager,
+                    selector: 'agl-motion',
+                    standalone: true,
+                    imports: [CommonModule, BindModule],
+                    template: `
+        @if (rendered()) {
+            <ng-content />
+        }
+    `,
+                    providers: [MotionStyle, { provide: MOTION_INSTANCE, useExisting: Motion }, { provide: PARENT_INSTANCE, useExisting: Motion }],
+                    host: {
+                        '[class]': "cx('root')"
+                    },
+                    hostDirectives: [Bind]
+                }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], mountOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "mountOnEnter", required: false }] }], unmountOnLeave: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmountOnLeave", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], safe: [{ type: i0.Input, args: [{ isSignal: true, alias: "safe", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appear: [{ type: i0.Input, args: [{ isSignal: true, alias: "appear", required: false }] }], enter: [{ type: i0.Input, args: [{ isSignal: true, alias: "enter", required: false }] }], leave: [{ type: i0.Input, args: [{ isSignal: true, alias: "leave", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], hideStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideStrategy", required: false }] }], enterFromClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterFromClass", required: false }] }], enterToClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterToClass", required: false }] }], enterActiveClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "enterActiveClass", required: false }] }], leaveFromClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "leaveFromClass", required: false }] }], leaveToClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "leaveToClass", required: false }] }], leaveActiveClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "leaveActiveClass", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], onBeforeEnter: [{ type: i0.Output, args: ["onBeforeEnter"] }], onEnter: [{ type: i0.Output, args: ["onEnter"] }], onAfterEnter: [{ type: i0.Output, args: ["onAfterEnter"] }], onEnterCancelled: [{ type: i0.Output, args: ["onEnterCancelled"] }], onBeforeLeave: [{ type: i0.Output, args: ["onBeforeLeave"] }], onLeave: [{ type: i0.Output, args: ["onLeave"] }], onAfterLeave: [{ type: i0.Output, args: ["onAfterLeave"] }], onLeaveCancelled: [{ type: i0.Output, args: ["onLeaveCancelled"] }] } });
+
+const MOTION_DIRECTIVE_INSTANCE = new InjectionToken('MOTION_DIRECTIVE_INSTANCE');
+/**
+ * Motion Directive is directive to apply motion effects to elements.
+ * @group Components
+ */
+class MotionDirective extends BaseComponent {
+    $pcMotionDirective = inject(MOTION_DIRECTIVE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
+    /******************** Inputs ********************/
+    /**
+     * Whether the element is visible or not.
+     * @group Props
+     */
+    visible = input(false, { ...(ngDevMode ? { debugName: "visible" } : /* istanbul ignore next */ {}), alias: 'aglMotion' });
+    /**
+     * The name of the motion. It can be a predefined motion name or a custom one.
+     * phases:
+     *     [name]-enter
+     *     [name]-enter-active
+     *     [name]-enter-to
+     *     [name]-leave
+     *     [name]-leave-active
+     *     [name]-leave-to
+     * @group Props
+     */
+    name = input(undefined, { ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), alias: 'aglMotionName' });
+    /**
+     * The type of the motion, valid values 'transition' and 'animation'.
+     * @group Props
+     */
+    type = input(undefined, { ...(ngDevMode ? { debugName: "type" } : /* istanbul ignore next */ {}), alias: 'aglMotionType' });
+    /**
+     * Whether the motion is safe.
+     * @group Props
+     */
+    safe = input(undefined, { ...(ngDevMode ? { debugName: "safe" } : /* istanbul ignore next */ {}), alias: 'aglMotionSafe' });
+    /**
+     * Whether the motion is disabled.
+     * @group Props
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'aglMotionDisabled' });
+    /**
+     * Whether the motion should appear.
+     * @group Props
+     */
+    appear = input(false, { ...(ngDevMode ? { debugName: "appear" } : /* istanbul ignore next */ {}), alias: 'aglMotionAppear' });
+    /**
+     * Whether the motion should enter.
+     * @group Props
+     */
+    enter = input(true, { ...(ngDevMode ? { debugName: "enter" } : /* istanbul ignore next */ {}), alias: 'aglMotionEnter' });
+    /**
+     * Whether the motion should leave.
+     * @group Props
+     */
+    leave = input(true, { ...(ngDevMode ? { debugName: "leave" } : /* istanbul ignore next */ {}), alias: 'aglMotionLeave' });
+    /**
+     * The duration of the motion.
+     * @group Props
+     */
+    duration = input(undefined, { ...(ngDevMode ? { debugName: "duration" } : /* istanbul ignore next */ {}), alias: 'aglMotionDuration' });
+    /**
+     * The hide strategy of the motion, valid values 'display' and 'visibility'.
+     * @group Props
+     */
+    hideStrategy = input('display', { ...(ngDevMode ? { debugName: "hideStrategy" } : /* istanbul ignore next */ {}), alias: 'aglMotionHideStrategy' });
+    /**
+     * The enter from class of the motion.
+     * @group Props
+     */
+    enterFromClass = input(undefined, { ...(ngDevMode ? { debugName: "enterFromClass" } : /* istanbul ignore next */ {}), alias: 'aglMotionEnterFromClass' });
+    /**
+     * The enter to class of the motion.
+     * @group Props
+     */
+    enterToClass = input(undefined, { ...(ngDevMode ? { debugName: "enterToClass" } : /* istanbul ignore next */ {}), alias: 'aglMotionEnterToClass' });
+    /**
+     * The enter active class of the motion.
+     * @group Props
+     */
+    enterActiveClass = input(undefined, { ...(ngDevMode ? { debugName: "enterActiveClass" } : /* istanbul ignore next */ {}), alias: 'aglMotionEnterActiveClass' });
+    /**
+     * The leave from class of the motion.
+     * @group Props
+     */
+    leaveFromClass = input(undefined, { ...(ngDevMode ? { debugName: "leaveFromClass" } : /* istanbul ignore next */ {}), alias: 'aglMotionLeaveFromClass' });
+    /**
+     * The leave to class of the motion.
+     * @group Props
+     */
+    leaveToClass = input(undefined, { ...(ngDevMode ? { debugName: "leaveToClass" } : /* istanbul ignore next */ {}), alias: 'aglMotionLeaveToClass' });
+    /**
+     * The leave active class of the motion.
+     * @group Props
+     */
+    leaveActiveClass = input(undefined, { ...(ngDevMode ? { debugName: "leaveActiveClass" } : /* istanbul ignore next */ {}), alias: 'aglMotionLeaveActiveClass' });
+    /******************** All Inputs ********************/
+    /**
+     * The motion options.
+     * @group Props
+     */
+    options = input({}, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: 'aglMotionOptions' });
+    /******************** Outputs ********************/
+    /**
+     * Callback fired before the enter transition/animation starts.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onBeforeEnter = output({ alias: 'aglMotionOnBeforeEnter' });
+    /**
+     * Callback fired when the enter transition/animation starts.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onEnter = output({ alias: 'aglMotionOnEnter' });
+    /**
+     * Callback fired after the enter transition/animation ends.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onAfterEnter = output({ alias: 'aglMotionOnAfterEnter' });
+    /**
+     * Callback fired when the enter transition/animation is cancelled.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onEnterCancelled = output({ alias: 'aglMotionOnEnterCancelled' });
+    /**
+     * Callback fired before the leave transition/animation starts.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onBeforeLeave = output({ alias: 'aglMotionOnBeforeLeave' });
+    /**
+     * Callback fired when the leave transition/animation starts.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onLeave = output({ alias: 'aglMotionOnLeave' });
+    /**
+     * Callback fired after the leave transition/animation ends.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onAfterLeave = output({ alias: 'aglMotionOnAfterLeave' });
+    /**
+     * Callback fired when the leave transition/animation is cancelled.
+     * @param {MotionEvent} [event] - The event object containing details about the motion.
+     * @param {Element} event.element - The element being transitioned/animated.
+     * @group Emits
+     */
+    onLeaveCancelled = output({ alias: 'aglMotionOnLeaveCancelled' });
+    /******************** Computed ********************/
+    motionOptions = computed(() => {
+        const options = this.options() ?? {};
+        return {
+            name: options.name ?? this.name(),
+            type: options.type ?? this.type(),
+            safe: options.safe ?? this.safe(),
+            disabled: options.disabled ?? this.disabled(),
+            appear: false,
+            enter: options.enter ?? this.enter(),
+            leave: options.leave ?? this.leave(),
+            duration: options.duration ?? this.duration(),
+            enterClass: {
+                from: options.enterClass?.from ?? (!options.name ? this.enterFromClass() : undefined),
+                to: options.enterClass?.to ?? (!options.name ? this.enterToClass() : undefined),
+                active: options.enterClass?.active ?? (!options.name ? this.enterActiveClass() : undefined)
+            },
+            leaveClass: {
+                from: options.leaveClass?.from ?? (!options.name ? this.leaveFromClass() : undefined),
+                to: options.leaveClass?.to ?? (!options.name ? this.leaveToClass() : undefined),
+                active: options.leaveClass?.active ?? (!options.name ? this.leaveActiveClass() : undefined)
+            },
+            onBeforeEnter: options.onBeforeEnter ?? this.handleBeforeEnter,
+            onEnter: options.onEnter ?? this.handleEnter,
+            onAfterEnter: options.onAfterEnter ?? this.handleAfterEnter,
+            onEnterCancelled: options.onEnterCancelled ?? this.handleEnterCancelled,
+            onBeforeLeave: options.onBeforeLeave ?? this.handleBeforeLeave,
+            onLeave: options.onLeave ?? this.handleLeave,
+            onAfterLeave: options.onAfterLeave ?? this.handleAfterLeave,
+            onLeaveCancelled: options.onLeaveCancelled ?? this.handleLeaveCancelled
+        };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
+    motion;
+    isInitialMount = true;
+    cancelled = false;
+    destroyed = false;
+    handleBeforeEnter = (event) => !this.destroyed && this.onBeforeEnter.emit(event);
+    handleEnter = (event) => !this.destroyed && this.onEnter.emit(event);
+    handleAfterEnter = (event) => !this.destroyed && this.onAfterEnter.emit(event);
+    handleEnterCancelled = (event) => !this.destroyed && this.onEnterCancelled.emit(event);
+    handleBeforeLeave = (event) => !this.destroyed && this.onBeforeLeave.emit(event);
+    handleLeave = (event) => !this.destroyed && this.onLeave.emit(event);
+    handleAfterLeave = (event) => !this.destroyed && this.onAfterLeave.emit(event);
+    handleLeaveCancelled = (event) => !this.destroyed && this.onLeaveCancelled.emit(event);
+    constructor() {
+        super();
+        effect(() => {
+            if (!this.motion) {
+                this.motion = createMotion(this.$el, this.motionOptions());
+            }
+            else {
+                // @todo: Update motion options method to update options dynamically
+                //this.motion.update(this.$el, this.motionOptions());
+            }
+        });
+        afterRenderEffect(() => {
+            if (!this.$el)
+                return;
+            const shouldAppear = this.isInitialMount && this.visible() && this.appear();
+            const hideStrategy = this.hideStrategy();
+            if (this.visible()) {
+                resetStyles(this.$el, hideStrategy);
+                if (shouldAppear || !this.isInitialMount) {
+                    this.applyMotionDuration('enter');
+                    this.motion?.enter();
+                }
+            }
+            else if (!this.isInitialMount) {
+                this.applyMotionDuration('leave');
+                this.motion?.leave()?.then(() => {
+                    if (this.$el && !this.cancelled && !this.visible()) {
+                        applyHiddenStyles(this.$el, hideStrategy);
+                    }
+                });
+            }
+            else {
+                applyHiddenStyles(this.$el, hideStrategy);
+            }
+            this.isInitialMount = false;
+        });
+    }
+    applyMotionDuration(phase) {
+        const options = untracked(this.motionOptions);
+        const ms = resolveDuration(options.duration, phase);
+        if (ms == null || !this.$el)
+            return;
+        const el = this.$el;
+        const durationValue = `${ms}ms`;
+        if (options.type === 'transition') {
+            el.style.transitionDuration = durationValue;
+        }
+        else {
+            el.style.animationDuration = durationValue;
+        }
+    }
+    onDestroy() {
+        this.destroyed = true;
+        this.cancelled = true;
+        this.motion?.cancel();
+        this.motion = undefined;
+        resetStyles(this.$el, this.hideStrategy());
+        this.$el?.remove();
+        this.isInitialMount = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MotionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: MotionDirective, isStandalone: true, selector: "[aglMotion]", inputs: { visible: { classPropertyName: "visible", publicName: "aglMotion", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "aglMotionName", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "aglMotionType", isSignal: true, isRequired: false, transformFunction: null }, safe: { classPropertyName: "safe", publicName: "aglMotionSafe", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "aglMotionDisabled", isSignal: true, isRequired: false, transformFunction: null }, appear: { classPropertyName: "appear", publicName: "aglMotionAppear", isSignal: true, isRequired: false, transformFunction: null }, enter: { classPropertyName: "enter", publicName: "aglMotionEnter", isSignal: true, isRequired: false, transformFunction: null }, leave: { classPropertyName: "leave", publicName: "aglMotionLeave", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "aglMotionDuration", isSignal: true, isRequired: false, transformFunction: null }, hideStrategy: { classPropertyName: "hideStrategy", publicName: "aglMotionHideStrategy", isSignal: true, isRequired: false, transformFunction: null }, enterFromClass: { classPropertyName: "enterFromClass", publicName: "aglMotionEnterFromClass", isSignal: true, isRequired: false, transformFunction: null }, enterToClass: { classPropertyName: "enterToClass", publicName: "aglMotionEnterToClass", isSignal: true, isRequired: false, transformFunction: null }, enterActiveClass: { classPropertyName: "enterActiveClass", publicName: "aglMotionEnterActiveClass", isSignal: true, isRequired: false, transformFunction: null }, leaveFromClass: { classPropertyName: "leaveFromClass", publicName: "aglMotionLeaveFromClass", isSignal: true, isRequired: false, transformFunction: null }, leaveToClass: { classPropertyName: "leaveToClass", publicName: "aglMotionLeaveToClass", isSignal: true, isRequired: false, transformFunction: null }, leaveActiveClass: { classPropertyName: "leaveActiveClass", publicName: "aglMotionLeaveActiveClass", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "aglMotionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBeforeEnter: "aglMotionOnBeforeEnter", onEnter: "aglMotionOnEnter", onAfterEnter: "aglMotionOnAfterEnter", onEnterCancelled: "aglMotionOnEnterCancelled", onBeforeLeave: "aglMotionOnBeforeLeave", onLeave: "aglMotionOnLeave", onAfterLeave: "aglMotionOnAfterLeave", onLeaveCancelled: "aglMotionOnLeaveCancelled" }, providers: [MotionStyle, { provide: MOTION_DIRECTIVE_INSTANCE, useExisting: MotionDirective }, { provide: PARENT_INSTANCE, useExisting: MotionDirective }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MotionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[aglMotion]',
+                    standalone: true,
+                    providers: [MotionStyle, { provide: MOTION_DIRECTIVE_INSTANCE, useExisting: MotionDirective }, { provide: PARENT_INSTANCE, useExisting: MotionDirective }]
+                }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotion", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionName", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionType", required: false }] }], safe: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionSafe", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionDisabled", required: false }] }], appear: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionAppear", required: false }] }], enter: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionEnter", required: false }] }], leave: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionLeave", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionDuration", required: false }] }], hideStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionHideStrategy", required: false }] }], enterFromClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionEnterFromClass", required: false }] }], enterToClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionEnterToClass", required: false }] }], enterActiveClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionEnterActiveClass", required: false }] }], leaveFromClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionLeaveFromClass", required: false }] }], leaveToClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionLeaveToClass", required: false }] }], leaveActiveClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionLeaveActiveClass", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "aglMotionOptions", required: false }] }], onBeforeEnter: [{ type: i0.Output, args: ["aglMotionOnBeforeEnter"] }], onEnter: [{ type: i0.Output, args: ["aglMotionOnEnter"] }], onAfterEnter: [{ type: i0.Output, args: ["aglMotionOnAfterEnter"] }], onEnterCancelled: [{ type: i0.Output, args: ["aglMotionOnEnterCancelled"] }], onBeforeLeave: [{ type: i0.Output, args: ["aglMotionOnBeforeLeave"] }], onLeave: [{ type: i0.Output, args: ["aglMotionOnLeave"] }], onAfterLeave: [{ type: i0.Output, args: ["aglMotionOnAfterLeave"] }], onLeaveCancelled: [{ type: i0.Output, args: ["aglMotionOnLeaveCancelled"] }] } });
+
+class MotionModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MotionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: MotionModule, imports: [Motion, MotionDirective], exports: [Motion, MotionDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MotionModule, imports: [Motion] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MotionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [Motion, MotionDirective],
+                    exports: [Motion, MotionDirective]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Motion, MotionDirective, MotionModule };
+//# sourceMappingURL=anguless-angulux-motion.mjs.map