ngx-semantic 2.0.7-beta.1 → 2.0.7-beta.2

package/fesm2022/ngx-semantic-modules-transition.mjs

@@ -0,0 +1,721 @@
+import { style, animate, keyframes, AnimationBuilder } from '@angular/animations';
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, NgZone, ChangeDetectorRef, EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { ClassUtils, InputBoolean } from 'ngx-semantic/core/util';
+
+/**
+ * Helpers for Semantic UI–style transition names and durations.
+ * @see https://semantic-ui.com/modules/transition.html
+ */
+function durationToCss(d) {
+    if (typeof d === 'number') {
+        return Number.isFinite(d) ? `${d}ms` : '500ms';
+    }
+    const s = String(d).trim();
+    if (!s) {
+        return '500ms';
+    }
+    if (/^\d+(\.\d+)?(ms|s)$/i.test(s)) {
+        return s;
+    }
+    if (/^\d+(\.\d+)?$/.test(s)) {
+        return `${s}ms`;
+    }
+    return s;
+}
+function parseTransitionName(raw) {
+    const s = raw.trim().toLowerCase().replace(/\s+/g, ' ');
+    let explicitDirection = null;
+    let base = s;
+    if (base.endsWith(' in')) {
+        explicitDirection = 'in';
+        base = base.slice(0, -3).trim();
+    }
+    else if (base.endsWith(' out')) {
+        explicitDirection = 'out';
+        base = base.slice(0, -4).trim();
+    }
+    return { baseName: base, explicitDirection };
+}
+/**
+ * Resolves whether the next run should play an inward or outward transition.
+ */
+function resolveTransitionDirection(explicitFromName, mode, targetVisible) {
+    if (explicitFromName === 'in' || explicitFromName === 'out') {
+        return explicitFromName;
+    }
+    if (mode === 'in') {
+        return 'in';
+    }
+    if (mode === 'out') {
+        return 'out';
+    }
+    return targetVisible ? 'in' : 'out';
+}
+const STATIC_NAMES = new Set([
+    'jiggle',
+    'flash',
+    'shake',
+    'pulse',
+    'tada',
+    'bounce',
+    'glow'
+]);
+function isStaticTransitionName(baseName) {
+    return STATIC_NAMES.has(baseName);
+}
+
+/**
+ * Angular animation metadata approximating Semantic UI transition behaviors.
+ * @see https://semantic-ui.com/modules/transition.html
+ */
+const EASE = 'cubic-bezier(0.4, 0, 0.2, 1)';
+const MOTIONS = {
+    scale: {
+        enter: d => [
+            style({ opacity: 0, transform: 'scale(0)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'scale(1)' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'scale(1)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'scale(0)' }))
+        ]
+    },
+    zoom: {
+        enter: d => [
+            style({ opacity: 0, transform: 'scale(0.35)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'scale(1)' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'scale(1)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'scale(0.35)' }))
+        ]
+    },
+    fade: {
+        enter: d => [
+            style({ opacity: 0, offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1 }))
+        ],
+        leave: d => [
+            style({ opacity: 1, offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0 }))
+        ]
+    },
+    'fade up': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateY(0.75rem)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateY(0.75rem)' }))
+        ]
+    },
+    'fade down': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateY(-0.75rem)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateY(-0.75rem)' }))
+        ]
+    },
+    'fade left': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateX(0.75rem)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateX(0.75rem)' }))
+        ]
+    },
+    'fade right': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateX(-0.75rem)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateX(-0.75rem)' }))
+        ]
+    },
+    'horizontal flip': {
+        enter: d => [
+            style({
+                opacity: 0,
+                transform: 'perspective(600px) rotateY(-90deg)',
+                offset: 0
+            }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'perspective(600px) rotateY(0deg)' }))
+        ],
+        leave: d => [
+            style({
+                opacity: 1,
+                transform: 'perspective(600px) rotateY(0deg)',
+                offset: 0
+            }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'perspective(600px) rotateY(90deg)' }))
+        ]
+    },
+    'vertical flip': {
+        enter: d => [
+            style({
+                opacity: 0,
+                transform: 'perspective(600px) rotateX(-90deg)',
+                offset: 0
+            }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'perspective(600px) rotateX(0deg)' }))
+        ],
+        leave: d => [
+            style({
+                opacity: 1,
+                transform: 'perspective(600px) rotateX(0deg)',
+                offset: 0
+            }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'perspective(600px) rotateX(90deg)' }))
+        ]
+    },
+    drop: {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateY(-120%)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateY(-120%)' }))
+        ]
+    },
+    'fly left': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateX(120%)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateX(-120%)' }))
+        ]
+    },
+    'fly right': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateX(-120%)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateX(120%)' }))
+        ]
+    },
+    'fly up': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateY(120%)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateY(-120%)' }))
+        ]
+    },
+    'fly down': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateY(-120%)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateY(120%)' }))
+        ]
+    },
+    'swing left': {
+        enter: d => [
+            style({ opacity: 0, transform: 'rotate(-12deg)', transformOrigin: 'top center', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'rotate(12deg)', transformOrigin: 'top center' }))
+        ]
+    },
+    'swing right': {
+        enter: d => [
+            style({ opacity: 0, transform: 'rotate(12deg)', transformOrigin: 'top center', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'rotate(-12deg)', transformOrigin: 'top center' }))
+        ]
+    },
+    'swing up': {
+        enter: d => [
+            style({ opacity: 0, transform: 'rotate(-10deg)', transformOrigin: 'bottom center', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'rotate(10deg)', transformOrigin: 'bottom center' }))
+        ]
+    },
+    'swing down': {
+        enter: d => [
+            style({ opacity: 0, transform: 'rotate(10deg)', transformOrigin: 'top center', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'rotate(-10deg)', transformOrigin: 'top center' }))
+        ]
+    },
+    browse: {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateX(-1rem) skewX(-6deg)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateX(1rem) skewX(6deg)' }))
+        ]
+    },
+    'browse right': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateX(1rem) skewX(6deg)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateX(-1rem) skewX(-6deg)' }))
+        ]
+    },
+    'slide down': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateY(-100%)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateY(-100%)' }))
+        ]
+    },
+    'slide up': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateY(100%)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateY(100%)' }))
+        ]
+    },
+    'slide left': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateX(100%)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateX(-100%)' }))
+        ]
+    },
+    'slide right': {
+        enter: d => [
+            style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 1, transform: 'none' }))
+        ],
+        leave: d => [
+            style({ opacity: 1, transform: 'none', offset: 0 }),
+            animate(`${d} ${EASE}`, style({ opacity: 0, transform: 'translateX(100%)' }))
+        ]
+    }
+};
+const DEFAULT_MOTION = MOTIONS.fade;
+function getMotionForVisibility(baseName) {
+    if (isStaticTransitionName(baseName)) {
+        return DEFAULT_MOTION;
+    }
+    return MOTIONS[baseName] ?? DEFAULT_MOTION;
+}
+function buildEnterSteps(baseName, durationCss) {
+    return getMotionForVisibility(baseName).enter(durationCss);
+}
+function buildLeaveSteps(baseName, durationCss) {
+    return getMotionForVisibility(baseName).leave(durationCss);
+}
+function buildStaticSteps(baseName, durationCss) {
+    if (!isStaticTransitionName(baseName)) {
+        return null;
+    }
+    switch (baseName) {
+        case 'pulse':
+            return [
+                style({ transform: 'scale(1)', offset: 0 }),
+                animate(`${durationCss} ${EASE}`, keyframes([
+                    style({ transform: 'scale(1)', offset: 0 }),
+                    style({ transform: 'scale(1.06)', offset: 0.5 }),
+                    style({ transform: 'scale(1)', offset: 1 })
+                ]))
+            ];
+        case 'shake':
+            return [
+                animate(`${durationCss} ${EASE}`, keyframes([
+                    style({ transform: 'translateX(0)', offset: 0 }),
+                    style({ transform: 'translateX(-0.5rem)', offset: 0.2 }),
+                    style({ transform: 'translateX(0.5rem)', offset: 0.4 }),
+                    style({ transform: 'translateX(-0.35rem)', offset: 0.6 }),
+                    style({ transform: 'translateX(0.35rem)', offset: 0.8 }),
+                    style({ transform: 'translateX(0)', offset: 1 })
+                ]))
+            ];
+        case 'jiggle':
+            return [
+                animate(`${durationCss} ${EASE}`, keyframes([
+                    style({ transform: 'rotate(0deg)', offset: 0 }),
+                    style({ transform: 'rotate(-2.5deg)', offset: 0.25 }),
+                    style({ transform: 'rotate(2.5deg)', offset: 0.5 }),
+                    style({ transform: 'rotate(-1.5deg)', offset: 0.75 }),
+                    style({ transform: 'rotate(0deg)', offset: 1 })
+                ]))
+            ];
+        case 'flash':
+            return [
+                animate(`${durationCss} linear`, keyframes([
+                    style({ opacity: 1, offset: 0 }),
+                    style({ opacity: 0.2, offset: 0.5 }),
+                    style({ opacity: 1, offset: 1 })
+                ]))
+            ];
+        case 'tada':
+            return [
+                animate(`${durationCss} ${EASE}`, keyframes([
+                    style({ transform: 'scale(1) rotate(0deg)', offset: 0 }),
+                    style({ transform: 'scale(0.92) rotate(-2deg)', offset: 0.1 }),
+                    style({ transform: 'scale(1.08) rotate(2deg)', offset: 0.3 }),
+                    style({ transform: 'scale(1.02) rotate(-1deg)', offset: 0.5 }),
+                    style({ transform: 'scale(1) rotate(0deg)', offset: 1 })
+                ]))
+            ];
+        case 'bounce':
+            return [
+                animate(`${durationCss} ${EASE}`, keyframes([
+                    style({ transform: 'translateY(0)', offset: 0 }),
+                    style({ transform: 'translateY(-0.6rem)', offset: 0.35 }),
+                    style({ transform: 'translateY(0)', offset: 0.55 }),
+                    style({ transform: 'translateY(-0.25rem)', offset: 0.7 }),
+                    style({ transform: 'translateY(0)', offset: 0.85 }),
+                    style({ transform: 'translateY(0)', offset: 1 })
+                ]))
+            ];
+        case 'glow':
+            return [
+                animate(`${durationCss} ${EASE}`, keyframes([
+                    style({ boxShadow: '0 0 0 0 rgba(100, 180, 255, 0)', offset: 0 }),
+                    style({ boxShadow: '0 0 1.25rem 0.25rem rgba(100, 180, 255, 0.45)', offset: 0.5 }),
+                    style({ boxShadow: '0 0 0 0 rgba(100, 180, 255, 0)', offset: 1 })
+                ]))
+            ];
+        default:
+            return null;
+    }
+}
+function listRegisteredMotionKeys() {
+    return Object.keys(MOTIONS);
+}
+
+class SuiTransitionComponent {
+    constructor() {
+        this.builder = inject(AnimationBuilder);
+        this.el = inject((ElementRef));
+        this.renderer = inject(Renderer2);
+        this.zone = inject(NgZone);
+        this.cdr = inject(ChangeDetectorRef);
+        /** Semantic animation name, e.g. `fade up`, `horizontal flip`, `pulse`. Optional ` in` / ` out` suffix. */
+        this.suiAnimation = 'fade';
+        /** Duration in ms or CSS time string (e.g. `500`, `500ms`, `0.5s`). */
+        this.suiDuration = 500;
+        /** When not forced by the animation string, controls automatic in vs out (default mirrors Semantic `auto`). */
+        this.suiDirection = 'auto';
+        /** Whether the host is shown (after transitions complete). Two-way bindable. */
+        this.suiVisible = true;
+        /** Increment to replay the current **static** animation (`pulse`, `shake`, …). */
+        this.suiPlay = 0;
+        /** Disables animations; visibility updates apply immediately. */
+        this.suiDisabled = false;
+        this.suiVisibleChange = new EventEmitter();
+        /** Fires when a transition begins (visibility or static). */
+        this.suiAnimationStart = new EventEmitter();
+        /** Fires when a transition finishes. */
+        this.suiAnimationComplete = new EventEmitter();
+        /** After an inward transition that ends visible. */
+        this.suiOnShow = new EventEmitter();
+        /** After an outward transition that ends hidden. */
+        this.suiOnHide = new EventEmitter();
+        /** Mirrors Semantic UI state classes. */
+        this.animating = false;
+        /** Final hidden state (opacity/visibility), not necessarily DOM removal. */
+        this.hidden = false;
+        this.hostClassList = '';
+        this.player = null;
+        this.initialized = false;
+        this.lastVisible = true;
+        this.lastPlay = 0;
+    }
+    ngOnChanges(changes) {
+        if (changes['suiPlay']) {
+            if (changes['suiPlay'].firstChange) {
+                this.lastPlay = this.suiPlay;
+            }
+            else if (this.suiPlay !== this.lastPlay) {
+                this.lastPlay = this.suiPlay;
+                this.runStaticAnimation();
+            }
+        }
+        if (changes['suiVisible']) {
+            const cur = this.suiVisible;
+            if (!this.initialized) {
+                this.initialized = true;
+                this.lastVisible = cur;
+                this.applyImmediateVisibility(cur);
+                this.syncHostClasses();
+                return;
+            }
+            if (cur !== this.lastVisible) {
+                this.lastVisible = cur;
+                this.runVisibilityTransition(cur);
+            }
+        }
+        if (changes['suiAnimation'] ||
+            changes['suiDuration'] ||
+            changes['suiDirection'] ||
+            changes['suiDisabled']) {
+            this.syncHostClasses();
+        }
+    }
+    ngOnDestroy() {
+        this.destroyPlayer();
+    }
+    /** Show with the current animation settings. */
+    show() {
+        this.setVisible(true);
+    }
+    /** Hide with the current animation settings. */
+    hide() {
+        this.setVisible(false);
+    }
+    /** Toggle visibility. */
+    toggle() {
+        this.setVisible(!this.suiVisible);
+    }
+    /** Stop the active animation (Semantic `stop` / `stop all` style: clears current player). */
+    stop() {
+        this.destroyPlayer();
+        this.animating = false;
+        this.syncHostClasses();
+        this.cdr.markForCheck();
+    }
+    /** Run a static attention animation if `suiAnimation` is static; no-op otherwise. */
+    playStatic() {
+        this.runStaticAnimation();
+    }
+    setVisible(value) {
+        if (this.suiVisible === value) {
+            return;
+        }
+        this.suiVisible = value;
+        this.suiVisibleChange.emit(value);
+        if (!this.initialized) {
+            this.initialized = true;
+            this.lastVisible = value;
+            this.applyImmediateVisibility(value);
+            this.syncHostClasses();
+            this.cdr.markForCheck();
+            return;
+        }
+        this.lastVisible = value;
+        this.runVisibilityTransition(value);
+        this.cdr.markForCheck();
+    }
+    runVisibilityTransition(targetVisible) {
+        if (this.suiDisabled) {
+            this.suiAnimationStart.emit();
+            this.applyImmediateVisibility(targetVisible);
+            this.emitVisibilityCallbacks(targetVisible);
+            this.cdr.markForCheck();
+            return;
+        }
+        const { baseName, explicitDirection } = parseTransitionName(this.suiAnimation);
+        const direction = resolveTransitionDirection(explicitDirection, this.suiDirection, targetVisible);
+        const motionBase = isStaticTransitionName(baseName) ? 'fade' : baseName;
+        const durationCss = durationToCss(this.suiDuration);
+        const steps = direction === 'in'
+            ? buildEnterSteps(motionBase, durationCss)
+            : buildLeaveSteps(motionBase, durationCss);
+        this.playSteps(steps, targetVisible);
+    }
+    runStaticAnimation() {
+        const { baseName } = parseTransitionName(this.suiAnimation);
+        if (!isStaticTransitionName(baseName) || this.suiDisabled) {
+            return;
+        }
+        const steps = buildStaticSteps(baseName, durationToCss(this.suiDuration));
+        if (!steps) {
+            return;
+        }
+        this.playSteps(steps, true, true);
+    }
+    playSteps(steps, endingVisible, isStatic = false) {
+        this.destroyPlayer();
+        this.animating = true;
+        this.suiAnimationStart.emit();
+        this.syncHostClasses();
+        this.cdr.markForCheck();
+        const factory = this.builder.build(steps);
+        const player = factory.create(this.el.nativeElement);
+        this.player = player;
+        player.onDone(() => {
+            this.zone.run(() => {
+                this.player = null;
+                this.animating = false;
+                if (endingVisible) {
+                    this.applyVisibleEndState();
+                    this.hidden = false;
+                }
+                else {
+                    this.applyHiddenEndState();
+                    this.hidden = true;
+                }
+                this.suiAnimationComplete.emit();
+                if (!isStatic) {
+                    if (endingVisible) {
+                        this.suiOnShow.emit();
+                    }
+                    else {
+                        this.suiOnHide.emit();
+                    }
+                }
+                this.syncHostClasses();
+                this.cdr.markForCheck();
+            });
+        });
+        player.play();
+    }
+    emitVisibilityCallbacks(targetVisible) {
+        this.suiAnimationComplete.emit();
+        if (targetVisible) {
+            this.suiOnShow.emit();
+        }
+        else {
+            this.suiOnHide.emit();
+        }
+    }
+    applyImmediateVisibility(visible) {
+        this.destroyPlayer();
+        this.animating = false;
+        if (visible) {
+            this.applyVisibleEndState();
+            this.hidden = false;
+        }
+        else {
+            this.applyHiddenEndState();
+            this.hidden = true;
+        }
+        this.syncHostClasses();
+    }
+    applyVisibleEndState() {
+        const el = this.el.nativeElement;
+        this.renderer.setStyle(el, 'opacity', '1');
+        this.renderer.setStyle(el, 'visibility', 'visible');
+        this.renderer.removeStyle(el, 'transform');
+        this.renderer.removeStyle(el, 'transform-origin');
+        this.renderer.removeStyle(el, 'box-shadow');
+    }
+    applyHiddenEndState() {
+        const el = this.el.nativeElement;
+        this.renderer.setStyle(el, 'opacity', '0');
+        this.renderer.setStyle(el, 'visibility', 'hidden');
+        this.renderer.removeStyle(el, 'transform');
+        this.renderer.removeStyle(el, 'transform-origin');
+    }
+    destroyPlayer() {
+        if (this.player) {
+            this.player.destroy();
+            this.player = null;
+        }
+    }
+    syncHostClasses() {
+        const { baseName } = parseTransitionName(this.suiAnimation);
+        const tokens = ClassUtils.combineToClass([
+            'transition',
+            ...baseName.split(' '),
+            ClassUtils.getPropClass(this.animating, 'animating'),
+            ClassUtils.getPropClass(this.suiDisabled, 'disabled'),
+            ClassUtils.getPropClass(!this.hidden, 'visible'),
+            ClassUtils.getPropClass(this.hidden, 'hidden')
+        ]);
+        this.hostClassList = ClassUtils.removeExcessWhitespace(tokens);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiTransitionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SuiTransitionComponent, isStandalone: true, selector: "sui-transition", inputs: { suiAnimation: "suiAnimation", suiDuration: "suiDuration", suiDirection: "suiDirection", suiVisible: "suiVisible", suiPlay: "suiPlay", suiDisabled: "suiDisabled" }, outputs: { suiVisibleChange: "suiVisibleChange", suiAnimationStart: "suiAnimationStart", suiAnimationComplete: "suiAnimationComplete", suiOnShow: "suiOnShow", suiOnHide: "suiOnHide" }, host: { properties: { "class": "hostClassList" } }, exportAs: ["suiTransition"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+__decorate([
+    InputBoolean()
+], SuiTransitionComponent.prototype, "suiVisible", void 0);
+__decorate([
+    InputBoolean()
+], SuiTransitionComponent.prototype, "suiDisabled", void 0);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiTransitionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'sui-transition',
+                    exportAs: 'suiTransition',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    host: {
+                        '[class]': 'hostClassList'
+                    }
+                }]
+        }], propDecorators: { suiAnimation: [{
+                type: Input
+            }], suiDuration: [{
+                type: Input
+            }], suiDirection: [{
+                type: Input
+            }], suiVisible: [{
+                type: Input
+            }], suiPlay: [{
+                type: Input
+            }], suiDisabled: [{
+                type: Input
+            }], suiVisibleChange: [{
+                type: Output
+            }], suiAnimationStart: [{
+                type: Output
+            }], suiAnimationComplete: [{
+                type: Output
+            }], suiOnShow: [{
+                type: Output
+            }], suiOnHide: [{
+                type: Output
+            }] } });
+
+class SuiTransitionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiTransitionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: SuiTransitionModule, imports: [SuiTransitionComponent], exports: [SuiTransitionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiTransitionModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SuiTransitionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SuiTransitionComponent],
+                    exports: [SuiTransitionComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SuiTransitionComponent, SuiTransitionModule, buildEnterSteps, buildLeaveSteps, buildStaticSteps, durationToCss, getMotionForVisibility, isStaticTransitionName, listRegisteredMotionKeys, parseTransitionName, resolveTransitionDirection };
+//# sourceMappingURL=ngx-semantic-modules-transition.mjs.map