@clr/angular
Version:
Angular components for Clarity
58 lines • 8 kB
JavaScript
/*
* Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import { animate, style, transition, trigger } from '@angular/animations';
import { Component, HostBinding, HostListener, Input } from '@angular/core';
import { DomAdapter } from '../../dom-adapter/dom-adapter';
import * as i0 from "@angular/core";
import * as i1 from "../../dom-adapter/dom-adapter";
export class ClrExpandableAnimation {
constructor(element, domAdapter) {
this.element = element;
this.domAdapter = domAdapter;
this.startHeight = 0;
}
get expandAnimation() {
return { value: this.clrExpandTrigger, params: { startHeight: this.startHeight } };
}
animationDone() {
// A "safe" auto-update of the height ensuring basic OOTB user experience .
// Prone to small jumps in initial animation height if data was changed in the meantime, window was resized, etc.
// For optimal behavior call manually updateStartHeight() from the parent component before initiating the update.
this.updateStartHeight();
}
updateStartHeight() {
this.startHeight = this.domAdapter.computedHeight(this.element.nativeElement) || 0;
}
}
ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: i1.DomAdapter }], target: i0.ɵɵFactoryTarget.Component });
ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block;overflow:hidden}\n"], animations: [
trigger('expandAnimation', [
transition('true <=> false', [
style({ height: '{{startHeight}}px' }),
animate('0.2s ease-in-out', style({ height: '*' })),
]),
]),
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrExpandableAnimation, decorators: [{
type: Component,
args: [{ selector: 'clr-expandable-animation', template: `<ng-content></ng-content>`, animations: [
trigger('expandAnimation', [
transition('true <=> false', [
style({ height: '{{startHeight}}px' }),
animate('0.2s ease-in-out', style({ height: '*' })),
]),
]),
], providers: [DomAdapter], styles: [":host{display:block;overflow:hidden}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DomAdapter }]; }, propDecorators: { clrExpandTrigger: [{
type: Input
}], expandAnimation: [{
type: HostBinding,
args: ['@expandAnimation']
}], animationDone: [{
type: HostListener,
args: ['@expandAnimation.done']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5kYWJsZS1hbmltYXRpb24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyL3NyYy91dGlscy9hbmltYXRpb25zL2V4cGFuZGFibGUtYW5pbWF0aW9uL2V4cGFuZGFibGUtYW5pbWF0aW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7O0dBSUc7QUFFSCxPQUFPLEVBQUUsT0FBTyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDMUUsT0FBTyxFQUFFLFNBQVMsRUFBYyxXQUFXLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUV4RixPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sK0JBQStCLENBQUM7OztBQXVCM0QsTUFBTSxPQUFPLHNCQUFzQjtJQUtqQyxZQUFvQixPQUFtQixFQUFVLFVBQXNCO1FBQW5ELFlBQU8sR0FBUCxPQUFPLENBQVk7UUFBVSxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBRnZFLGdCQUFXLEdBQUcsQ0FBQyxDQUFDO0lBRTBELENBQUM7SUFFM0UsSUFDSSxlQUFlO1FBQ2pCLE9BQU8sRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixFQUFFLE1BQU0sRUFBRSxFQUFFLFdBQVcsRUFBRSxJQUFJLENBQUMsV0FBVyxFQUFFLEVBQUUsQ0FBQztJQUNyRixDQUFDO0lBR0QsYUFBYTtRQUNYLDJFQUEyRTtRQUMzRSxpSEFBaUg7UUFDakgsaUhBQWlIO1FBQ2pILElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxpQkFBaUI7UUFDZixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3JGLENBQUM7O21IQXRCVSxzQkFBc0I7dUdBQXRCLHNCQUFzQixzT0FGdEIsQ0FBQyxVQUFVLENBQUMsMEJBakJiLDJCQUEyQixrRkFTekI7UUFDVixPQUFPLENBQUMsaUJBQWlCLEVBQUU7WUFDekIsVUFBVSxDQUFDLGdCQUFnQixFQUFFO2dCQUMzQixLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsbUJBQW1CLEVBQUUsQ0FBQztnQkFDdEMsT0FBTyxDQUFDLGtCQUFrQixFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDO2FBQ3BELENBQUM7U0FDSCxDQUFDO0tBQ0g7MkZBR1Usc0JBQXNCO2tCQXJCbEMsU0FBUzsrQkFDRSwwQkFBMEIsWUFDMUIsMkJBQTJCLGNBU3pCO3dCQUNWLE9BQU8sQ0FBQyxpQkFBaUIsRUFBRTs0QkFDekIsVUFBVSxDQUFDLGdCQUFnQixFQUFFO2dDQUMzQixLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsbUJBQW1CLEVBQUUsQ0FBQztnQ0FDdEMsT0FBTyxDQUFDLGtCQUFrQixFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQyxDQUFDOzZCQUNwRCxDQUFDO3lCQUNILENBQUM7cUJBQ0gsYUFDVSxDQUFDLFVBQVUsQ0FBQzswSEFHZCxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBT0YsZUFBZTtzQkFEbEIsV0FBVzt1QkFBQyxrQkFBa0I7Z0JBTS9CLGFBQWE7c0JBRFosWUFBWTt1QkFBQyx1QkFBdUIiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuICogQ29weXJpZ2h0IChjKSAyMDE2LTIwMjMgVk13YXJlLCBJbmMuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKiBUaGlzIHNvZnR3YXJlIGlzIHJlbGVhc2VkIHVuZGVyIE1JVCBsaWNlbnNlLlxuICogVGhlIGZ1bGwgbGljZW5zZSBpbmZvcm1hdGlvbiBjYW4gYmUgZm91bmQgaW4gTElDRU5TRSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBwcm9qZWN0LlxuICovXG5cbmltcG9ydCB7IGFuaW1hdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBIb3N0TGlzdGVuZXIsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IERvbUFkYXB0ZXIgfSBmcm9tICcuLi8uLi9kb20tYWRhcHRlci9kb20tYWRhcHRlcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Nsci1leHBhbmRhYmxlLWFuaW1hdGlvbicsXG4gIHRlbXBsYXRlOiBgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PmAsXG4gIHN0eWxlczogW1xuICAgIGBcbiAgICAgIDpob3N0IHtcbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICB9XG4gICAgYCxcbiAgXSxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ2V4cGFuZEFuaW1hdGlvbicsIFtcbiAgICAgIHRyYW5zaXRpb24oJ3RydWUgPD0+IGZhbHNlJywgW1xuICAgICAgICBzdHlsZSh7IGhlaWdodDogJ3t7c3RhcnRIZWlnaHR9fXB4JyB9KSxcbiAgICAgICAgYW5pbWF0ZSgnMC4ycyBlYXNlLWluLW91dCcsIHN0eWxlKHsgaGVpZ2h0OiAnKicgfSkpLFxuICAgICAgXSksXG4gICAgXSksXG4gIF0sXG4gIHByb3ZpZGVyczogW0RvbUFkYXB0ZXJdLFxufSlcbmV4cG9ydCBjbGFzcyBDbHJFeHBhbmRhYmxlQW5pbWF0aW9uIHtcbiAgQElucHV0KCkgY2xyRXhwYW5kVHJpZ2dlcjogYW55O1xuXG4gIHN0YXJ0SGVpZ2h0ID0gMDtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnQ6IEVsZW1lbnRSZWYsIHByaXZhdGUgZG9tQWRhcHRlcjogRG9tQWRhcHRlcikge31cblxuICBASG9zdEJpbmRpbmcoJ0BleHBhbmRBbmltYXRpb24nKVxuICBnZXQgZXhwYW5kQW5pbWF0aW9uKCkge1xuICAgIHJldHVybiB7IHZhbHVlOiB0aGlzLmNsckV4cGFuZFRyaWdnZXIsIHBhcmFtczogeyBzdGFydEhlaWdodDogdGhpcy5zdGFydEhlaWdodCB9IH07XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdAZXhwYW5kQW5pbWF0aW9uLmRvbmUnKVxuICBhbmltYXRpb25Eb25lKCkge1xuICAgIC8vIEEgXCJzYWZlXCIgYXV0by11cGRhdGUgb2YgdGhlIGhlaWdodCBlbnN1cmluZyBiYXNpYyBPT1RCIHVzZXIgZXhwZXJpZW5jZSAuXG4gICAgLy8gUHJvbmUgdG8gc21hbGwganVtcHMgaW4gaW5pdGlhbCBhbmltYXRpb24gaGVpZ2h0IGlmIGRhdGEgd2FzIGNoYW5nZWQgaW4gdGhlIG1lYW50aW1lLCB3aW5kb3cgd2FzIHJlc2l6ZWQsIGV0Yy5cbiAgICAvLyBGb3Igb3B0aW1hbCBiZWhhdmlvciBjYWxsIG1hbnVhbGx5IHVwZGF0ZVN0YXJ0SGVpZ2h0KCkgZnJvbSB0aGUgcGFyZW50IGNvbXBvbmVudCBiZWZvcmUgaW5pdGlhdGluZyB0aGUgdXBkYXRlLlxuICAgIHRoaXMudXBkYXRlU3RhcnRIZWlnaHQoKTtcbiAgfVxuXG4gIHVwZGF0ZVN0YXJ0SGVpZ2h0KCkge1xuICAgIHRoaXMuc3RhcnRIZWlnaHQgPSB0aGlzLmRvbUFkYXB0ZXIuY29tcHV0ZWRIZWlnaHQodGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQpIHx8IDA7XG4gIH1cbn1cbiJdfQ==