@skyux/core 14.0.0-alpha.9 → 14.0.0-beta.1

package/fesm2022/skyux-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, inject, RendererFactory2, NgZone, DOCUMENT, EventEmitter, Output, Input, Directive, effect, ElementRef, input, output, signal, DestroyRef, ChangeDetectionStrategy, Component, provideEnvironmentInitializer, EnvironmentInjector, createEnvironmentInjector, createComponent, ChangeDetectorRef, ViewContainerRef, ViewChild, InjectionToken, Optional, Inject, ApplicationRef, afterNextRender, Injector, Pipe, HostBinding, Renderer2, HostListener } from '@angular/core';
+import { NgModule, Injectable, inject, RendererFactory2, NgZone, DOCUMENT, EventEmitter, Output, Input, Directive, effect, untracked, input, booleanAttribute, output, ElementRef, DestroyRef, signal, computed, ChangeDetectionStrategy, Component, provideEnvironmentInitializer, EnvironmentInjector, createEnvironmentInjector, createComponent, ChangeDetectorRef, ViewContainerRef, ViewChild, InjectionToken, Optional, Inject, ApplicationRef, afterNextRender, Injector, Pipe, HostBinding, Renderer2, HostListener } from '@angular/core';
 import { Subject, Subscription, ReplaySubject, fromEvent, of, Observable, filter, map, distinctUntilChanged, shareReplay, observeOn, animationFrameScheduler, takeUntil as takeUntil$1, BehaviorSubject, combineLatestWith, switchMap, concat, debounceTime as debounceTime$1 } from 'rxjs';
 import { takeUntil, debounceTime, take } from 'rxjs/operators';
 import { ViewportRuler } from '@angular/cdk/overlay';
@@ -1043,26 +1043,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
         }] });
 
 /**
- * @internal
+ * Watches the host element for disabled CSS animations. When the trigger
+ * signal changes and the element's `animation-name` is `'none'` or its
+ * `animation-duration` resolves to `0` or less, the emitter fires via a
+ * microtask.
  */
-const SKY_ANIMATIONS_DISABLED_CLASS_NAME = 'sky-animations-disabled';
-
+function watchForDisabledCssAnimations(args) {
+    emitWhenMotionDisabled(args, (style) => {
+        return (allValuesEqual(style.animationName, 'none') ||
+            allDurationsNonPositive(style.animationDuration));
+    });
+}
 /**
- * @internal
+ * Watches the host element for disabled CSS transitions. When the trigger
+ * signal changes and the tracked property's transition is disabled
+ * (e.g. `transition-property: none` or its paired duration resolves to
+ * `0` or less), the emitter fires via a microtask.
  */
-function _skyAnimationsDisabled() {
-    return inject(DOCUMENT).body.classList.contains(SKY_ANIMATIONS_DISABLED_CLASS_NAME);
+function watchForDisabledCssTransitions(args) {
+    const { propertyToTrack, ...watchArgs } = args;
+    emitWhenMotionDisabled(watchArgs, (style) => {
+        if (allValuesEqual(style.transitionProperty, 'none')) {
+            return true;
+        }
+        const trackedProperty = propertyToTrack();
+        if (!trackedProperty) {
+            return allDurationsNonPositive(style.transitionDuration);
+        }
+        return isTransitionDisabledForProperty({
+            trackedProperty,
+            transitionDuration: style.transitionDuration,
+            transitionProperty: style.transitionProperty,
+        });
+    });
 }
-
 /**
- * Mimics a CSS motion end event (`animationend`/`transitionend`) when
- * CSS motion is disabled.
- *
- * Registers an effect that watches the provided trigger signal and, after the
- * first change, emits on a microtask when the host element is visible. This
- * preserves async timing that callers expect from real motion end events.
+ * Creates an effect that watches a trigger signal and emits via a microtask
+ * when the host element's CSS motion is disabled. By default, skips the
+ * initial effect run to match native CSS behavior. When `emitOnAnimateEnter`
+ * is `true`, the first run is not skipped, allowing emission for elements
+ * that use `animate.enter` (where DOM insertion is the animation event).
  */
-function mimicCssMotionEvent(elementRef, destroyRef, triggerSignal, output) {
+function emitWhenMotionDisabled(args, isMotionDisabled) {
+    const { destroyRef, elementRef, emitOnAnimateEnter, emitter, trigger } = args;
     const el = elementRef.nativeElement;
     let destroyed = false;
     let initialized = false;
@@ -1070,28 +1093,127 @@ function mimicCssMotionEvent(elementRef, destroyRef, triggerSignal, output) {
         destroyed = true;
     });
     effect(() => {
-        triggerSignal();
-        // CSS animation/transition events do not fire when the element is `display: none`.
-        if (initialized && getComputedStyle(el).display !== 'none') {
+        trigger();
+        // On the first run, check if emitOnAnimateEnter opts out of skipping.
+        if (!initialized && emitOnAnimateEnter) {
+            initialized = untracked(() => emitOnAnimateEnter());
+        }
+        const style = getComputedStyle(el);
+        const isRendered = style.display !== 'none';
+        // By default, skip the first effect run (and unrendered elements) to match
+        // native CSS behavior. When emitOnAnimateEnter is true, the first run is
+        // treated as initialized, allowing emission for enter animations.
+        if (initialized && isRendered && untracked(() => isMotionDisabled(style))) {
             // Defer the emit to a microtask so it fires after the current
             // change detection pass, matching real transition timing.
             queueMicrotask(() => {
                 if (!destroyed) {
-                    output.emit();
+                    emitter.emit();
                 }
             });
         }
         initialized = true;
     });
 }
+/**
+ * Returns `true` if every entry in a comma-separated list equals `target`.
+ */
+function allValuesEqual(csv, target) {
+    return csv.split(',').every((v) => v.trim() === target);
+}
+/**
+ * Returns `true` if every entry in a comma-separated CSS duration list resolves to `0` or less.
+ */
+function allDurationsNonPositive(value) {
+    return value.split(',').every((d) => parseFloat(d.trim()) <= 0);
+}
+/**
+ * Returns `true` if the tracked property's paired duration is `0` or less,
+ * or if the property isn't listed. Per the CSS spec, durations cycle over
+ * the property list.
+ */
+function isTransitionDisabledForProperty(args) {
+    const { trackedProperty, transitionDuration, transitionProperty } = args;
+    const properties = transitionProperty.split(',').map((p) => p.trim());
+    const durations = transitionDuration.split(',').map((d) => d.trim());
+    let index = properties.indexOf(trackedProperty);
+    // If the tracked property is not explicitly listed, fall back to an `all`
+    // entry if present. Per CSS, `transition-property: all` applies to every
+    // property and uses its paired duration.
+    if (index === -1) {
+        const allIndex = properties.findIndex((p) => p.toLowerCase() === 'all');
+        if (allIndex === -1) {
+            return true;
+        }
+        index = allIndex;
+    }
+    const duration = durations[index % durations.length];
+    return parseFloat(duration) <= 0;
+}
+
+/**
+ * @internal
+ *
+ * Listens for CSS `animationend` events on the host element and emits
+ * an `animationEnd` output when an animation completes. When the
+ * element's CSS animation is disabled (e.g. `animation-name: none`
+ * or `animation-duration: 0s`), the output emits via a microtask
+ * whenever the `animationTrigger` input changes.
+ */
+class _SkyAnimationEndHandlerDirective {
+    constructor() {
+        /**
+         * When `true` and the host element uses `animate.enter`, the
+         * disabled-animation fallback emits `animationEnd` on the initial
+         * render. Use this when the element's insertion into the DOM is
+         * the animation event.
+         */
+        this.emitOnAnimateEnter = input(false, { ...(ngDevMode ? { debugName: "emitOnAnimateEnter" } : {}), transform: booleanAttribute });
+        /**
+         * Drives animation lifecycle tracking on the host element. When the
+         * value changes and the CSS animation is disabled, `animationEnd`
+         * emits via a microtask.
+         */
+        this.animationTrigger = input.required(...(ngDevMode ? [{ debugName: "animationTrigger" }] : []));
+        /**
+         * Emits when an `animationend` event fires on the host element, or via a
+         * microtask when the CSS animation is disabled.
+         */
+        this.animationEnd = output();
+        watchForDisabledCssAnimations({
+            destroyRef: inject(DestroyRef),
+            elementRef: inject(ElementRef),
+            emitOnAnimateEnter: this.emitOnAnimateEnter,
+            emitter: this.animationEnd,
+            trigger: this.animationTrigger,
+        });
+    }
+    onAnimationEnd(evt) {
+        this.animationEnd.emit();
+        evt.stopPropagation();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: _SkyAnimationEndHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: _SkyAnimationEndHandlerDirective, isStandalone: true, selector: "[skyAnimationEndHandler]", inputs: { emitOnAnimateEnter: { classPropertyName: "emitOnAnimateEnter", publicName: "emitOnAnimateEnter", isSignal: true, isRequired: false, transformFunction: null }, animationTrigger: { classPropertyName: "animationTrigger", publicName: "animationTrigger", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { animationEnd: "animationEnd" }, host: { listeners: { "animationend": "onAnimationEnd($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: _SkyAnimationEndHandlerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[skyAnimationEndHandler]',
+                    host: {
+                        '(animationend)': 'onAnimationEnd($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { emitOnAnimateEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitOnAnimateEnter", required: false }] }], animationTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationTrigger", required: true }] }], animationEnd: [{ type: i0.Output, args: ["animationEnd"] }] } });
 
 /**
  * @internal
  *
  * Listens for CSS `transitionend` events on the host element and emits
  * a `transitionEnd` output when the tracked CSS property finishes
- * transitioning. When animations are globally disabled, the output
- * emits via a microtask whenever the `transitionTrigger` input changes.
+ * transitioning. When the element's CSS transition is disabled
+ * (e.g. `transition-property: none` or `transition-duration: 0s`), the
+ * output emits via a microtask whenever the `transitionTrigger` input
+ * changes.
  *
  * The CSS property to monitor can be set via the `transitionPropertyToTrack`
  * input (for template usage) or by calling `setPropertyToTrack()`
@@ -1100,13 +1222,14 @@ function mimicCssMotionEvent(elementRef, destroyRef, triggerSignal, output) {
 class _SkyTransitionEndHandlerDirective {
     #elementRef;
     #propertyNameOverride;
+    #propertyToTrack;
     constructor() {
         this.#elementRef = inject((ElementRef));
         /**
          * Drives the CSS transition on the host element. When the value
-         * changes and animations are enabled, a CSS transition runs and
-         * `transitionEnd` emits on completion. When animations are
-         * disabled, `transitionEnd` emits via a microtask instead.
+         * changes and a CSS transition runs, `transitionEnd` emits on
+         * completion. When the transition is disabled, `transitionEnd`
+         * emits via a microtask instead.
          */
         this.transitionTrigger = input.required(...(ngDevMode ? [{ debugName: "transitionTrigger" }] : []));
         /**
@@ -1117,13 +1240,19 @@ class _SkyTransitionEndHandlerDirective {
         this.transitionPropertyToTrack = input(...(ngDevMode ? [undefined, { debugName: "transitionPropertyToTrack" }] : []));
         /**
          * Emits when the tracked CSS property's `transitionend` event fires
-         * on the host element, or via a microtask when animations are disabled.
+         * on the host element, or via a microtask when the CSS transition is
+         * disabled.
          */
         this.transitionEnd = output();
         this.#propertyNameOverride = signal(undefined, ...(ngDevMode ? [{ debugName: "#propertyNameOverride" }] : []));
-        if (_skyAnimationsDisabled()) {
-            mimicCssMotionEvent(this.#elementRef, inject(DestroyRef), this.transitionTrigger, this.transitionEnd);
-        }
+        this.#propertyToTrack = computed(() => this.transitionPropertyToTrack() ?? this.#propertyNameOverride(), ...(ngDevMode ? [{ debugName: "#propertyToTrack" }] : []));
+        watchForDisabledCssTransitions({
+            destroyRef: inject(DestroyRef),
+            elementRef: this.#elementRef,
+            emitter: this.transitionEnd,
+            propertyToTrack: this.#propertyToTrack,
+            trigger: this.transitionTrigger,
+        });
     }
     /**
      * Sets the CSS property name to monitor for `transitionend` events
@@ -1137,7 +1266,7 @@ class _SkyTransitionEndHandlerDirective {
         if (evt.target !== this.#elementRef.nativeElement) {
             return;
         }
-        const propertyName = this.transitionPropertyToTrack() ?? this.#propertyNameOverride();
+        const propertyName = this.#propertyToTrack();
         if (!propertyName) {
             throw new Error(`SkyTransitionEndHandler: No CSS property specified for transition tracking on element ` +
                 `'<${this.#elementRef.nativeElement.tagName.toLowerCase()}>'. ` +
@@ -1173,7 +1302,7 @@ class _SkyAnimationSlideComponent {
         inject(_SkyTransitionEndHandlerDirective).setPropertyToTrack('visibility');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: _SkyAnimationSlideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: _SkyAnimationSlideComponent, isStandalone: true, selector: "sky-animation-slide", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.sky-animation-slide-in": "!opened()", "class.sky-animation-slide-out": "opened()" } }, hostDirectives: [{ directive: _SkyTransitionEndHandlerDirective, inputs: ["transitionTrigger", "opened"], outputs: ["transitionEnd", "transitionEnd"] }], ngImport: i0, template: '<div class="sky-animation-slide-content"><ng-content /></div>', isInline: true, styles: [":host{display:grid;grid-template-rows:0fr;overflow:hidden;transition-property:grid-template-rows,visibility;transition-duration:var(--sky-transition-time-short);transition-timing-function:ease-in}:host.sky-animation-slide-in{grid-template-rows:0fr;visibility:hidden}:host.sky-animation-slide-out{grid-template-rows:1fr;visibility:visible}:host>.sky-animation-slide-content{min-height:0;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: _SkyAnimationSlideComponent, isStandalone: true, selector: "sky-animation-slide", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.sky-animation-slide-in": "!opened()", "class.sky-animation-slide-out": "opened()" } }, hostDirectives: [{ directive: _SkyTransitionEndHandlerDirective, inputs: ["transitionTrigger", "opened"], outputs: ["transitionEnd", "transitionEnd"] }], ngImport: i0, template: '<div class="sky-animation-slide-content"><ng-content /></div>', isInline: true, styles: [":host{display:grid;grid-template-rows:0fr;overflow:hidden;transition-property:grid-template-rows,visibility;transition-duration:var(--sky-global-duration-short);transition-timing-function:ease-in}:host.sky-animation-slide-in{grid-template-rows:0fr;visibility:hidden}:host.sky-animation-slide-out{grid-template-rows:1fr;visibility:visible}:host>.sky-animation-slide-content{min-height:0;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: _SkyAnimationSlideComponent, decorators: [{
             type: Component,
@@ -1186,9 +1315,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                             inputs: ['transitionTrigger: opened'],
                             outputs: ['transitionEnd'],
                         },
-                    ], selector: 'sky-animation-slide', template: '<div class="sky-animation-slide-content"><ng-content /></div>', styles: [":host{display:grid;grid-template-rows:0fr;overflow:hidden;transition-property:grid-template-rows,visibility;transition-duration:var(--sky-transition-time-short);transition-timing-function:ease-in}:host.sky-animation-slide-in{grid-template-rows:0fr;visibility:hidden}:host.sky-animation-slide-out{grid-template-rows:1fr;visibility:visible}:host>.sky-animation-slide-content{min-height:0;overflow:hidden}\n"] }]
+                    ], selector: 'sky-animation-slide', template: '<div class="sky-animation-slide-content"><ng-content /></div>', styles: [":host{display:grid;grid-template-rows:0fr;overflow:hidden;transition-property:grid-template-rows,visibility;transition-duration:var(--sky-global-duration-short);transition-timing-function:ease-in}:host.sky-animation-slide-in{grid-template-rows:0fr;visibility:hidden}:host.sky-animation-slide-out{grid-template-rows:1fr;visibility:visible}:host>.sky-animation-slide-content{min-height:0;overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: true }] }] } });
 
+/**
+ * @internal
+ */
+const SKY_ANIMATIONS_DISABLED_CLASS_NAME = 'sky-animations-disabled';
+
 /**
  * Disables CSS transitions and animations for SKY UX components.
  *
@@ -4904,11 +5038,11 @@ class Version {
 /**
  * Represents the version of @skyux/core.
  */
-const VERSION = new Version('14.0.0-alpha.9');
+const VERSION = new Version('14.0.0-beta.1');
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NumericOptions, SKY_BREAKPOINTS, SKY_BREAKPOINT_OBSERVER, SKY_HELP_GLOBAL_OPTIONS, SKY_LOG_LEVEL, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyContainerBreakpointObserver, SkyContentInfoProvider, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDefaultInputProvider, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLegacyService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyFileReaderService, SkyHelpService, SkyIdModule, SkyIdService, SkyLayoutHostDirective, SkyLayoutHostService, SkyLiveAnnouncerService, SkyLogLevel, SkyLogModule, SkyLogService, SkyMediaBreakpointObserver, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayLegacyService, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyResponsiveHostDirective, SkyScreenReaderLabelDirective, SkyScrollShadowDirective, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeper, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, VERSION, _SkyAnimationSlideComponent, _SkyTransitionEndHandlerDirective, provideNoopSkyAnimations, provideSkyBreakpointObserver, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
+export { NumericOptions, SKY_BREAKPOINTS, SKY_BREAKPOINT_OBSERVER, SKY_HELP_GLOBAL_OPTIONS, SKY_LOG_LEVEL, SKY_STACKING_CONTEXT, SkyAffixAutoFitContext, SkyAffixModule, SkyAffixService, SkyAffixer, SkyAppFormat, SkyAppTitleService, SkyAppWindowRef, SkyContainerBreakpointObserver, SkyContentInfoProvider, SkyCoreAdapterModule, SkyCoreAdapterService, SkyDefaultInputProvider, SkyDockItem, SkyDockLocation, SkyDockModule, SkyDockService, SkyDynamicComponentLegacyService, SkyDynamicComponentLocation, SkyDynamicComponentModule, SkyDynamicComponentService, SkyFileReaderService, SkyHelpService, SkyIdModule, SkyIdService, SkyLayoutHostDirective, SkyLayoutHostService, SkyLiveAnnouncerService, SkyLogLevel, SkyLogModule, SkyLogService, SkyMediaBreakpointObserver, SkyMediaBreakpoints, SkyMediaQueryModule, SkyMediaQueryService, SkyMutationObserverService, SkyNumericModule, SkyNumericPipe, SkyNumericService, SkyOverlayInstance, SkyOverlayLegacyService, SkyOverlayModule, SkyOverlayService, SkyPercentPipe, SkyPercentPipeModule, SkyResizeObserverMediaQueryService, SkyResizeObserverService, SkyResponsiveHostDirective, SkyScreenReaderLabelDirective, SkyScrollShadowDirective, SkyScrollableHostService, SkyTrimModule, SkyUIConfigService, SkyViewkeeper, SkyViewkeeperHostOptions, SkyViewkeeperModule, SkyViewkeeperService, VERSION, _SkyAnimationEndHandlerDirective, _SkyAnimationSlideComponent, _SkyTransitionEndHandlerDirective, provideNoopSkyAnimations, provideSkyBreakpointObserver, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
 //# sourceMappingURL=skyux-core.mjs.map