@ng-doc/ui-kit
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
46 lines (42 loc) • 3.28 kB
JavaScript
import * as i0 from '@angular/core';
import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
import { preventInitialChildAnimations, expandCollapseAnimation } from '@ng-doc/ui-kit/animations';
import * as i1 from '@tinkoff/ng-polymorpheus';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
/** Component helps to expand or collapse content */
class NgDocExpanderComponent {
constructor() {
/** Change expand state */
this.expanded = false;
this.collapseMod = 'remove';
/** Closed height could be used to show preview of the content */
this.from = 0;
this.animationDisabled = true;
}
ngAfterViewInit() {
this.animationDisabled = false;
}
toggle() {
this.expanded = !this.expanded;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NgDocExpanderComponent, isStandalone: true, selector: "ng-doc-expander", inputs: { expanded: "expanded", content: "content", collapseMod: "collapseMod", from: "from" }, ngImport: i0, template: "@if (expanded || from || collapseMod === 'hide') {\n <div\n [@.disabled]=\"animationDisabled\"\n [attr.inert]=\"expanded ? null : ''\"\n [@expandCollapse]=\"{ value: expanded, params: { from: from + 'px', opacity: from ? 1 : 0 } }\">\n <ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n </div>\n}\n", styles: [":host{display:block}:host>div{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: PolymorpheusModule }, { kind: "directive", type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], animations: [preventInitialChildAnimations, expandCollapseAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocExpanderComponent, decorators: [{
type: Component,
args: [{ animations: [preventInitialChildAnimations, expandCollapseAnimation], selector: 'ng-doc-expander', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PolymorpheusModule], template: "@if (expanded || from || collapseMod === 'hide') {\n <div\n [@.disabled]=\"animationDisabled\"\n [attr.inert]=\"expanded ? null : ''\"\n [@expandCollapse]=\"{ value: expanded, params: { from: from + 'px', opacity: from ? 1 : 0 } }\">\n <ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n </div>\n}\n", styles: [":host{display:block}:host>div{overflow:hidden}\n"] }]
}], propDecorators: { expanded: [{
type: Input
}], content: [{
type: Input,
args: [{ required: true }]
}], collapseMod: [{
type: Input
}], from: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocExpanderComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-expander.mjs.map