@tapsellorg/angular-material-library/fesm2022/tapsellorg-angular-material-library-src-lib-animations.mjs

Angular library for Tapsell

import { animation, animate, keyframes, style, trigger, transition, state, group, query, useAnimation } from '@angular/animations';

const popInAnimation = animation(animate('350ms cubic-bezier(0.68, -0.55, 0.27, 1.55)', keyframes([
    style({ opacity: 0, transform: 'scale(0.7)', offset: 0 }),
    style({ opacity: 1, transform: 'scale(1)', offset: 1 }),
])));
const popOutAnimation = animation(animate('350ms cubic-bezier(0.68, -0.55, 0.27, 1.55)', keyframes([
    style({ opacity: 1, transform: 'scale(1)', offset: 0 }),
    style({ opacity: 0, transform: 'scale(0.7)', offset: 1 }),
])));
animation(animate('{{duration}} {{easeingFunction}}', keyframes([
    style({
        opacity: '{{opacity}}',
        width: '0px',
        overflow: 'hidden',
        marginRight: '0px',
        marginLeft: '0px',
        paddingRight: '0px',
        paddingLeft: '0px',
        verticalAlign: 'bottom',
        minWidth: '0px',
        offset: 0,
    }),
    style({
        width: '*',
        overflow: 'hidden',
        opacity: '*',
        marginRight: '*',
        marginLeft: '*',
        paddingRight: '*',
        paddingLeft: '*',
        minWidth: '*',
        verticalAlign: 'bottom',
        offset: 1,
    }),
])), { params: { easeingFunction: 'ease', duration: '300ms', opacity: 0 } });
animation(animate('{{duration}} {{easeingFunction}}', keyframes([
    style({ overflow: 'hidden', verticalAlign: 'bottom', minWidth: '*', offset: 0 }),
    style({
        opacity: 0,
        minWidth: '0px',
        marginRight: '0px',
        marginLeft: '0px',
        width: '0px',
        overflow: 'hidden',
        verticalAlign: 'bottom',
        paddingRight: '0px',
        paddingLeft: '0px',
        offset: 1,
    }),
])), { params: { easeingFunction: 'ease', duration: '300ms' } });
class PghAnimations {
    static { this.fadeInTop = trigger('fadeInTop', [
        transition(':enter', [
            style({ opacity: '0', marginTop: '10px' }),
            animate('.2s ease-in', style({ opacity: '1', marginTop: '0px' })),
        ]),
    ]); }
    static { this.fadeIn = trigger('fadeIn', [
        transition(':enter', [
            style({ opacity: '0' }),
            animate('.2s ease-in', style({ opacity: '1' })),
        ]),
    ]); }
    static { this.fadeInOut = trigger('fadeInOut', [
        transition(':enter', [
            style({ opacity: '0' }),
            animate('.2s ease-in', style({ opacity: '1' })),
        ]),
        transition(':leave', [
            style({ opacity: '1' }),
            animate('.2s ease-out', style({ opacity: '0' })),
        ]),
    ]); }
    static { this.toggleWidth = trigger('toggleWidth', [
        transition(':enter', [
            style({
                opacity: '0',
                width: '0',
                overflow: 'hidden',
                minWidth: '0',
                paddingRight: '0',
                paddingLeft: '0',
            }),
            animate('.2s ease-in', style({ width: '*', opacity: '1', paddingRight: '*', paddingLeft: '*' })),
        ]),
        transition(':leave', [
            style({ overflow: 'hidden' }),
            animate('.2s ease-out', style({ width: '0', paddingRight: '0', paddingLeft: '0', minWidth: '0' })),
        ]),
    ]); }
    static { this.toggleHeightActive = trigger('toggleHeightActive', [
        state('*', style({ overflow: 'hidden' })),
        state('inactive', style({ opacity: 0, height: '0px', overflow: 'hidden' })),
        state('active', style({ height: '*', overflow: 'hidden' })),
        transition('inactive <=> active', animate('200ms ease-in')),
    ]); }
    static { this.smoothHeight = trigger('smoothHeight', [
        transition('void <=> *', []),
        transition('* <=> *', [style({ height: '{{startHeight}}px', opacity: '1' }), animate('{{duration}} ease')], {
            params: { startHeight: 0, duration: '0.4s' },
        }),
    ]); }
    static { this.childrenEnterPopIn = trigger('childrenEnterPopIn', [
        transition('* => *', group([
            query(':enter', [style({ opacity: 0 }), useAnimation(popInAnimation)], { optional: true }),
            query(':leave', [style({ opacity: 1 }), useAnimation(popOutAnimation)], { optional: true }),
        ])),
    ]); }
}

/**
 * Generated bundle index. Do not edit.
 */

export { PghAnimations };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-animations.mjs.map