@js-sugar/angular
Version:
JS-Sugar core package (Angular)
55 lines • 7.44 kB
JavaScript
import { Directive, Input } from '@angular/core';
import { animate, style } from '@angular/animations';
import * as i0 from "@angular/core";
import * as i1 from "@angular/animations";
export class CollapseDirective {
constructor(_el, _builder, _renderer) {
this._el = _el;
this._builder = _builder;
this.timing = '100ms ease-in';
this.collapsed = false;
_renderer.setStyle(_el.nativeElement, 'overflow-y', 'hidden');
}
ngOnChanges(changes) {
if (changes['collapsed']?.firstChange === false) {
this._collapseElement(this.collapsed);
}
}
ngOnInit() {
this._collapseElement(this.collapsed, 0);
}
_collapseElement(collapse, timing) {
timing = timing != undefined ? timing : this.timing;
const expandMeta = [
style({ height: 0 }),
animate(timing, style({ height: '*' })),
];
const collapseMeta = [
style({ height: '*' }),
animate(timing, style({ height: 0 })),
];
if (this._player) {
this._player.destroy();
}
this._player = this._builder.build(collapse ? collapseMeta : expandMeta).create(this._el.nativeElement);
this._player.play();
}
ngOnDestroy() {
this._player?.destroy();
}
}
CollapseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CollapseDirective, deps: [{ token: i0.ElementRef }, { token: i1.AnimationBuilder }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
CollapseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: CollapseDirective, selector: "[jssCollapse]", inputs: { timing: "timing", collapsed: ["jssCollapse", "collapsed"] }, exportAs: ["jssCollapse"], usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: CollapseDirective, decorators: [{
type: Directive,
args: [{
selector: '[jssCollapse]',
exportAs: 'jssCollapse',
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.AnimationBuilder }, { type: i0.Renderer2 }]; }, propDecorators: { timing: [{
type: Input
}], collapsed: [{
type: Input,
args: ['jssCollapse']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGFwc2UuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci9zcmMvbGliL2NvbXBvbmVudHMvY29sbGFwc2UvY29sbGFwc2UuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFzRSxNQUFNLGVBQWUsQ0FBQztBQUNySCxPQUFPLEVBQUUsT0FBTyxFQUF3RCxLQUFLLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBTTNHLE1BQU0sT0FBTyxpQkFBaUI7SUFPMUIsWUFDWSxHQUFlLEVBQ2YsUUFBMEIsRUFDbEMsU0FBb0I7UUFGWixRQUFHLEdBQUgsR0FBRyxDQUFZO1FBQ2YsYUFBUSxHQUFSLFFBQVEsQ0FBa0I7UUFQN0IsV0FBTSxHQUFvQixlQUFlLENBQUM7UUFFN0IsY0FBUyxHQUFHLEtBQUssQ0FBQztRQU9wQyxTQUFTLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxhQUFhLEVBQUUsWUFBWSxFQUFFLFFBQVEsQ0FBQyxDQUFDO0lBQ2xFLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDOUIsSUFBRyxPQUFPLENBQUMsV0FBVyxDQUFDLEVBQUUsV0FBVyxLQUFLLEtBQUssRUFBRTtZQUM1QyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFBO1NBQ3hDO0lBQ0wsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUMsQ0FBQTtJQUM1QyxDQUFDO0lBRU8sZ0JBQWdCLENBQUMsUUFBaUIsRUFBRSxNQUF3QjtRQUNoRSxNQUFNLEdBQUcsTUFBTSxJQUFJLFNBQVMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQ3BELE1BQU0sVUFBVSxHQUF3QjtZQUNwQyxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsQ0FBQyxFQUFFLENBQUM7WUFDcEIsT0FBTyxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLENBQUMsQ0FBQztTQUMxQyxDQUFDO1FBRUYsTUFBTSxZQUFZLEdBQXdCO1lBQ3RDLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQztZQUN0QixPQUFPLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDO1NBQ3hDLENBQUM7UUFFRixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUU7WUFDZCxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sRUFBRSxDQUFDO1NBQzFCO1FBRUQsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDeEcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBRUQsV0FBVztRQUNQLElBQUksQ0FBQyxPQUFPLEVBQUUsT0FBTyxFQUFFLENBQUM7SUFDNUIsQ0FBQzs7OEdBOUNRLGlCQUFpQjtrR0FBakIsaUJBQWlCOzJGQUFqQixpQkFBaUI7a0JBSjdCLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFFBQVEsRUFBRSxhQUFhO2lCQUMxQjt3SkFHWSxNQUFNO3NCQUFkLEtBQUs7Z0JBRWdCLFNBQVM7c0JBQTlCLEtBQUs7dUJBQUMsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSW5wdXQsIE9uSW5pdCwgRWxlbWVudFJlZiwgUmVuZGVyZXIyLCBPbkRlc3Ryb3ksIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBhbmltYXRlLCBBbmltYXRpb25CdWlsZGVyLCBBbmltYXRpb25NZXRhZGF0YSwgQW5pbWF0aW9uUGxheWVyLCBzdHlsZSB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xyXG5cclxuQERpcmVjdGl2ZSh7XHJcbiAgICBzZWxlY3RvcjogJ1tqc3NDb2xsYXBzZV0nLFxyXG4gICAgZXhwb3J0QXM6ICdqc3NDb2xsYXBzZScsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDb2xsYXBzZURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95LCBPbkNoYW5nZXMge1xyXG4gICAgLyoqIEFuaW1hdGlvbiB0aW1pbmcgKi9cclxuICAgIEBJbnB1dCgpIHRpbWluZzogc3RyaW5nIHwgbnVtYmVyID0gJzEwMG1zIGVhc2UtaW4nO1xyXG4gICAgLyoqIENvbGxhcHNlIHN0YXRlICovXHJcbiAgICBASW5wdXQoJ2pzc0NvbGxhcHNlJykgY29sbGFwc2VkID0gZmFsc2U7XHJcbiAgICBwcml2YXRlIF9wbGF5ZXI/OiBBbmltYXRpb25QbGF5ZXI7XHJcblxyXG4gICAgY29uc3RydWN0b3IoXHJcbiAgICAgICAgcHJpdmF0ZSBfZWw6IEVsZW1lbnRSZWYsXHJcbiAgICAgICAgcHJpdmF0ZSBfYnVpbGRlcjogQW5pbWF0aW9uQnVpbGRlcixcclxuICAgICAgICBfcmVuZGVyZXI6IFJlbmRlcmVyMikge1xyXG4gICAgICAgIF9yZW5kZXJlci5zZXRTdHlsZShfZWwubmF0aXZlRWxlbWVudCwgJ292ZXJmbG93LXknLCAnaGlkZGVuJyk7XHJcbiAgICB9XHJcblxyXG4gICAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xyXG4gICAgICAgIGlmKGNoYW5nZXNbJ2NvbGxhcHNlZCddPy5maXJzdENoYW5nZSA9PT0gZmFsc2UpIHtcclxuICAgICAgICAgICAgdGhpcy5fY29sbGFwc2VFbGVtZW50KHRoaXMuY29sbGFwc2VkKVxyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLl9jb2xsYXBzZUVsZW1lbnQodGhpcy5jb2xsYXBzZWQsIDApXHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBfY29sbGFwc2VFbGVtZW50KGNvbGxhcHNlOiBib29sZWFuLCB0aW1pbmc/OiBzdHJpbmcgfCBudW1iZXIpIHtcclxuICAgICAgICB0aW1pbmcgPSB0aW1pbmcgIT0gdW5kZWZpbmVkID8gdGltaW5nIDogdGhpcy50aW1pbmc7XHJcbiAgICAgICAgY29uc3QgZXhwYW5kTWV0YTogQW5pbWF0aW9uTWV0YWRhdGFbXSA9IFtcclxuICAgICAgICAgICAgc3R5bGUoeyBoZWlnaHQ6IDAgfSksXHJcbiAgICAgICAgICAgIGFuaW1hdGUodGltaW5nLCBzdHlsZSh7IGhlaWdodDogJyonIH0pKSxcclxuICAgICAgICBdO1xyXG5cclxuICAgICAgICBjb25zdCBjb2xsYXBzZU1ldGE6IEFuaW1hdGlvbk1ldGFkYXRhW10gPSBbXHJcbiAgICAgICAgICAgIHN0eWxlKHsgaGVpZ2h0OiAnKicgfSksXHJcbiAgICAgICAgICAgIGFuaW1hdGUodGltaW5nLCBzdHlsZSh7IGhlaWdodDogMCB9KSksXHJcbiAgICAgICAgXTtcclxuXHJcbiAgICAgICAgaWYgKHRoaXMuX3BsYXllcikge1xyXG4gICAgICAgICAgICB0aGlzLl9wbGF5ZXIuZGVzdHJveSgpO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgdGhpcy5fcGxheWVyID0gdGhpcy5fYnVpbGRlci5idWlsZChjb2xsYXBzZSA/IGNvbGxhcHNlTWV0YSA6IGV4cGFuZE1ldGEpLmNyZWF0ZSh0aGlzLl9lbC5uYXRpdmVFbGVtZW50KTtcclxuICAgICAgICB0aGlzLl9wbGF5ZXIucGxheSgpO1xyXG4gICAgfVxyXG5cclxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuX3BsYXllcj8uZGVzdHJveSgpO1xyXG4gICAgfVxyXG59XHJcbiJdfQ==