@ng-doc/ui-kit/fesm2022/ng-doc-ui-kit-components-expander.mjs

<!-- 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>

import * as i0 from '@angular/core';
import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
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';
    }
    toggle() {
        this.expanded = !this.expanded;
    }
    enter(container, event) {
        setTimeout(() => {
            container
                .animate([
                { opacity: '0', maxHeight: 0 },
                { opacity: '1', maxHeight: container.scrollHeight + 'px' },
            ], {
                duration: 225,
                easing: 'cubic-bezier(0.4,0.0,0.2,1)',
                fill: 'forwards',
            })
                .finished.then(() => event.animationComplete());
        });
    }
    leave(container, event) {
        container
            .animate([
            { opacity: '1', maxHeight: container.offsetHeight + 'px' },
            { opacity: '0', maxHeight: 0 },
        ], {
            duration: 225,
            easing: 'cubic-bezier(0.4,0.0,0.2,1)',
            fill: 'forwards',
        })
            .finished.then(() => event.animationComplete());
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: NgDocExpanderComponent, isStandalone: true, selector: "ng-doc-expander", inputs: { expanded: "expanded", content: "content", collapseMod: "collapseMod" }, ngImport: i0, template: "@if (collapseMod === 'hide') {\n  <div\n    class=\"ng-doc-expander-container\"\n    [attr.inert]=\"expanded ? null : ''\"\n    [class.expanded]=\"expanded\">\n    <div class=\"ng-doc-expander-content\">\n      <ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n    </div>\n  </div>\n} @else {\n  @if (expanded) {\n    <div\n      [attr.inert]=\"expanded ? null : ''\"\n      (animate.enter)=\"enter(container, $event)\"\n      (animate.leave)=\"leave(container, $event)\"\n      #container>\n      <div>\n        <ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n      </div>\n    </div>\n  }\n}\n", styles: [":host{display:block}:host>div{overflow:hidden}:host .ng-doc-expander-container{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows var(--ng-doc-transition)}:host .ng-doc-expander-container.expanded{grid-template-rows:1fr}:host .ng-doc-expander-container.expanded .ng-doc-expander-content{visibility:visible}:host .ng-doc-expander-container .ng-doc-expander-content{min-height:0;transition:visibility var(--ng-doc-transition);visibility:hidden;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: PolymorpheusModule }, { kind: "directive", type: i1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgDocExpanderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ng-doc-expander', changeDetection: ChangeDetectionStrategy.OnPush, imports: [PolymorpheusModule], template: "@if (collapseMod === 'hide') {\n  <div\n    class=\"ng-doc-expander-container\"\n    [attr.inert]=\"expanded ? null : ''\"\n    [class.expanded]=\"expanded\">\n    <div class=\"ng-doc-expander-content\">\n      <ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n    </div>\n  </div>\n} @else {\n  @if (expanded) {\n    <div\n      [attr.inert]=\"expanded ? null : ''\"\n      (animate.enter)=\"enter(container, $event)\"\n      (animate.leave)=\"leave(container, $event)\"\n      #container>\n      <div>\n        <ng-container *polymorpheusOutlet=\"content as text\">{{ text }}</ng-container>\n      </div>\n    </div>\n  }\n}\n", styles: [":host{display:block}:host>div{overflow:hidden}:host .ng-doc-expander-container{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows var(--ng-doc-transition)}:host .ng-doc-expander-container.expanded{grid-template-rows:1fr}:host .ng-doc-expander-container.expanded .ng-doc-expander-content{visibility:visible}:host .ng-doc-expander-container .ng-doc-expander-content{min-height:0;transition:visibility var(--ng-doc-transition);visibility:hidden;overflow:hidden}\n"] }]
        }], propDecorators: { expanded: [{
                type: Input
            }], content: [{
                type: Input,
                args: [{ required: true }]
            }], collapseMod: [{
                type: Input
            }] } });

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

export { NgDocExpanderComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-expander.mjs.map