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

package/fesm2022/skyux-core.mjs

@@ -1062,12 +1062,13 @@ function _skyAnimationsDisabled() {
  * 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.
+ * The CSS property to monitor can be set via the `transitionPropertyToTrack`
+ * input (for template usage) or by calling `setPropertyToTrack()`
+ * (for `hostDirectives` usage).
  */
 class _SkyAnimationTransitionHandlerDirective {
     #elementRef;
-    #propertyName;
+    #propertyNameOverride;
     constructor() {
         this.#elementRef = inject((ElementRef));
         /**
@@ -1077,12 +1078,18 @@ class _SkyAnimationTransitionHandlerDirective {
          * disabled, `transitionEnd` emits synchronously instead.
          */
         this.transitionTrigger = input.required(...(ngDevMode ? [{ debugName: "transitionTrigger" }] : []));
+        /**
+         * The CSS property name to monitor for `transitionend` events
+         * (e.g. `'opacity'`, `'transform'`). Can be set declaratively in
+         * templates.
+         */
+        this.transitionPropertyToTrack = input(...(ngDevMode ? [undefined, { debugName: "transitionPropertyToTrack" }] : []));
         /**
          * 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" }] : []));
+        this.#propertyNameOverride = signal(undefined, ...(ngDevMode ? [{ debugName: "#propertyNameOverride" }] : []));
         if (_skyAnimationsDisabled()) {
             let initialized = false;
             effect(() => {
@@ -1096,38 +1103,39 @@ class _SkyAnimationTransitionHandlerDirective {
     }
     /**
      * 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.
+     * programmatically. Use this when applying the directive via
+     * `hostDirectives`.
      */
-    cssPropertyToTrack(propertyName) {
-        this.#propertyName.set(propertyName);
+    setPropertyToTrack(propertyName) {
+        this.#propertyNameOverride.set(propertyName);
     }
     onTransitionEnd(evt) {
         if (evt.target !== this.#elementRef.nativeElement) {
             return;
         }
-        if (!this.#propertyName()) {
+        const propertyName = this.transitionPropertyToTrack() ?? this.#propertyNameOverride();
+        if (!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.`);
+                `Set the 'transitionPropertyToTrack' input or call 'setPropertyToTrack()' with a valid CSS property name before a transition occurs.`);
         }
-        if (evt.propertyName === this.#propertyName()) {
+        if (evt.propertyName === 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.0", type: _SkyAnimationTransitionHandlerDirective, isStandalone: true, selector: "[skyAnimationTransitionHandler]", inputs: { transitionTrigger: { classPropertyName: "transitionTrigger", publicName: "transitionTrigger", isSignal: true, isRequired: true, transformFunction: null }, transitionPropertyToTrack: { classPropertyName: "transitionPropertyToTrack", publicName: "transitionPropertyToTrack", isSignal: true, isRequired: false, 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: [{
+                    selector: '[skyAnimationTransitionHandler]',
                     host: {
                         '(transitionend)': 'onTransitionEnd($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { transitionTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionTrigger", required: true }] }], transitionEnd: [{ type: i0.Output, args: ["transitionEnd"] }] } });
+        }], ctorParameters: () => [], propDecorators: { transitionTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionTrigger", required: true }] }], transitionPropertyToTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "transitionPropertyToTrack", required: false }] }], transitionEnd: [{ type: i0.Output, args: ["transitionEnd"] }] } });
 
 /**
  * @internal
@@ -1138,7 +1146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class _SkyAnimationSlideComponent {
     constructor() {
         this.opened = input.required(...(ngDevMode ? [{ debugName: "opened" }] : []));
-        inject(_SkyAnimationTransitionHandlerDirective).cssPropertyToTrack('visibility');
+        inject(_SkyAnimationTransitionHandlerDirective).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: _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 }); }
@@ -4872,7 +4880,7 @@ class Version {
 /**
  * Represents the version of @skyux/core.
  */
-const VERSION = new Version('14.0.0-alpha.7');
+const VERSION = new Version('14.0.0-alpha.8');
 
 /**
  * Generated bundle index. Do not edit.