@ynmstudio/utils
Version:
YNM Utilities for Angular
78 lines (74 loc) • 3.25 kB
JavaScript
import * as i0 from '@angular/core';
import { input, signal, inject, ElementRef, HostBinding, Directive } from '@angular/core';
import { trigger, transition, style, group, animate, query, animateChild } from '@angular/animations';
const smoothHeight = trigger('grow', [
transition('void <=> *', []),
transition('* <=> *', [
style({ height: '{{startHeight}}px' }),
group([
animate('.5s ease'),
query('@showHide', animateChild(), { optional: true }),
]),
], {
params: { startHeight: 0 },
}),
]);
const showHide = trigger('showHide', [
transition(':enter', [
query('figure', [
style({ opacity: 0 }),
animate('.3s', style({ opacity: 1 })),
]),
query('.news-item--content > *, .news-item--footer', [
style({ opacity: 0, transform: 'translateY(8px)' }),
animate('.7s cubic-bezier(0.2, 1.3, 0.7, 1)', style({ opacity: 1, transform: 'translateY(0)' })),
]),
]),
transition(':leave', [
group([
query('.news-item--content > *, .news-item--footer', [
animate('.3s cubic-bezier(0.2, 1.3, 0.7, 1)', style({ opacity: 0 })),
]),
query('figure', [animate('.3s', style({ opacity: 0 }))]),
]),
]),
]);
class SmoothHeightDirective {
constructor() {
this.smoothHeight = input();
this.pulse = signal(false);
this.startHeight = signal(0);
this.host = inject(ElementRef);
}
get grow() {
return { value: this.pulse(), params: { startHeight: this.startHeight() } };
}
setStartHeight() {
this.startHeight.set(this.host.nativeElement.clientHeight);
}
ngOnChanges(changes) {
this.setStartHeight();
this.pulse.set(!this.pulse());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SmoothHeightDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.13", type: SmoothHeightDirective, isStandalone: true, selector: "[smoothHeight]", inputs: { smoothHeight: { classPropertyName: "smoothHeight", publicName: "smoothHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"block\"", "style.overflow": "\"clip\"", "@grow": "this.grow" } }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SmoothHeightDirective, decorators: [{
type: Directive,
args: [{
selector: '[smoothHeight]',
standalone: true,
host: {
'[style.display]': '"block"',
'[style.overflow]': '"clip"',
},
}]
}], propDecorators: { grow: [{
type: HostBinding,
args: ['@grow']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { SmoothHeightDirective, showHide, smoothHeight };
//# sourceMappingURL=ynmstudio-utils-directives-smooth-height.mjs.map