@skyux/core 14.0.0-alpha.5 → 14.0.0-alpha.7

package/fesm2022/skyux-core.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { NgModule, Injectable, inject, RendererFactory2, NgZone, DOCUMENT, EventEmitter, Output, Input, Directive, EnvironmentInjector, createEnvironmentInjector, createComponent, ChangeDetectorRef, ElementRef, ViewContainerRef, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, input, effect, Optional, Inject, ApplicationRef, afterNextRender, Injector, Pipe, HostBinding, Renderer2, HostListener } from '@angular/core';
+import { NgModule, Injectable, inject, RendererFactory2, NgZone, DOCUMENT, EventEmitter, Output, Input, Directive, ElementRef, input, output, signal, effect, ChangeDetectionStrategy, Component, provideEnvironmentInitializer, DestroyRef, 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';
+import * as i1$1 from '@angular/common';
+import { DOCUMENT as DOCUMENT$1, CommonModule } from '@angular/common';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule, SkyIntlNumberFormatStyle, SkyIntlNumberFormatter } from '@skyux/i18n';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import { Router, NavigationStart } from '@angular/router';
 import * as i1$2 from '@angular/platform-browser';
 
@@ -1042,6 +1042,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 }]
         }] });
 
+/**
+ * @internal
+ */
+const SKY_ANIMATIONS_DISABLED_CLASS_NAME = 'sky-animations-disabled';
+
+/**
+ * @internal
+ */
+function _skyAnimationsDisabled() {
+    return inject(DOCUMENT).body.classList.contains(SKY_ANIMATIONS_DISABLED_CLASS_NAME);
+}
+
+/**
+ * @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 synchronously whenever the `transitionTrigger` input changes.
+ *
+ * Consumers **must** call `cssPropertyToTrack()` to specify which CSS
+ * property to monitor before any transition occurs on the host element.
+ */
+class _SkyAnimationTransitionHandlerDirective {
+    #elementRef;
+    #propertyName;
+    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 synchronously instead.
+         */
+        this.transitionTrigger = input.required(...(ngDevMode ? [{ debugName: "transitionTrigger" }] : []));
+        /**
+         * Emits when the tracked CSS property's `transitionend` event fires
+         * on the host element, or synchronously when animations are disabled.
+         */
+        this.transitionEnd = output();
+        this.#propertyName = signal(undefined, ...(ngDevMode ? [{ debugName: "#propertyName" }] : []));
+        if (_skyAnimationsDisabled()) {
+            let initialized = false;
+            effect(() => {
+                this.transitionTrigger();
+                if (initialized) {
+                    this.transitionEnd.emit();
+                }
+                initialized = true;
+            });
+        }
+    }
+    /**
+     * Sets the CSS property name to monitor for `transitionend` events
+     * (e.g. `'opacity'`, `'max-height'`). This must be called before a
+     * transition occurs; otherwise an error is thrown when the host
+     * element's `transitionend` event fires.
+     */
+    cssPropertyToTrack(propertyName) {
+        this.#propertyName.set(propertyName);
+    }
+    onTransitionEnd(evt) {
+        if (evt.target !== this.#elementRef.nativeElement) {
+            return;
+        }
+        if (!this.#propertyName()) {
+            throw new Error(`SkyAnimationTransitionHandler: No CSS property specified for transition tracking on element ` +
+                `'<${this.#elementRef.nativeElement.tagName.toLowerCase()}>'. ` +
+                `Call 'cssPropertyToTrack()' with a valid CSS property name before a transition occurs.`);
+        }
+        if (evt.propertyName === this.#propertyName()) {
+            this.transitionEnd.emit();
+            evt.stopPropagation();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: _SkyAnimationTransitionHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: _SkyAnimationTransitionHandlerDirective, isStandalone: true, inputs: { transitionTrigger: { classPropertyName: "transitionTrigger", publicName: "transitionTrigger", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { transitionEnd: "transitionEnd" }, host: { listeners: { "transitionend": "onTransitionEnd($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: _SkyAnimationTransitionHandlerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '(transitionend)': 'onTransitionEnd($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { transitionTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionTrigger", required: true }] }], transitionEnd: [{ type: i0.Output, args: ["transitionEnd"] }] } });
+
+/**
+ * @internal
+ *
+ * Animates content open and closed by sliding the host element's
+ * height.
+ */
+class _SkyAnimationSlideComponent {
+    constructor() {
+        this.opened = input.required(...(ngDevMode ? [{ debugName: "opened" }] : []));
+        inject(_SkyAnimationTransitionHandlerDirective).cssPropertyToTrack('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: _SkyAnimationTransitionHandlerDirective, 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: _SkyAnimationSlideComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.sky-animation-slide-in]': '!opened()',
+                        '[class.sky-animation-slide-out]': 'opened()',
+                    }, hostDirectives: [
+                        {
+                            directive: _SkyAnimationTransitionHandlerDirective,
+                            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"] }]
+        }], ctorParameters: () => [], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: true }] }] } });
+
+/**
+ * Disables CSS transitions and animations for SKY UX components.
+ *
+ * Use this in unit tests or in applications that need to suppress
+ * motion globally. Provide once at the root level only.
+ *
+ * @example
+ * ```typescript
+ * TestBed.configureTestingModule({
+ *   imports: [MyComponent],
+ *   providers: [provideNoopSkyAnimations()],
+ * });
+ * ```
+ */
+function provideNoopSkyAnimations() {
+    return provideEnvironmentInitializer(() => {
+        const doc = inject(DOCUMENT$1);
+        const destroyRef = inject(DestroyRef);
+        doc.body.classList.add(SKY_ANIMATIONS_DISABLED_CLASS_NAME);
+        destroyRef.onDestroy(() => {
+            doc.body.classList.remove(SKY_ANIMATIONS_DISABLED_CLASS_NAME);
+        });
+    });
+}
+
 /**
  * @internal
  * An API to provide information about a parent component's content to child components.
@@ -4732,11 +4872,11 @@ class Version {
 /**
  * Represents the version of @skyux/core.
  */
-const VERSION = new Version('14.0.0-alpha.5');
+const VERSION = new Version('14.0.0-alpha.7');
 
 /**
  * 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, 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, _SkyAnimationSlideComponent, _SkyAnimationTransitionHandlerDirective, provideNoopSkyAnimations, provideSkyBreakpointObserver, SkyAffixDirective as λ1, SkyIdDirective as λ2, SkyViewkeeperDirective as λ3, SkyTrimDirective as λ4 };
 //# sourceMappingURL=skyux-core.mjs.map