@taiga-ui/kit
Version:
Taiga UI Angular main components kit
77 lines (72 loc) • 5.26 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Directive, Output, signal, Component, ChangeDetectionStrategy } from '@angular/core';
import { tuiPx } from '@taiga-ui/cdk/utils/miscellaneous';
import { WaMutationObserverService, WA_MUTATION_OBSERVER_INIT } from '@ng-web-apis/mutation-observer';
import { WaResizeObserverService } from '@ng-web-apis/resize-observer';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { merge, debounceTime, map, distinctUntilChanged } from 'rxjs';
class TuiElasticContainerDirective {
constructor() {
this.el = tuiInjectElement();
this.tuiElasticContainer = merge(inject(WaResizeObserverService, { self: true }), inject(WaMutationObserverService, { self: true })).pipe(debounceTime(0), map(() => this.el.clientHeight - 1), distinctUntilChanged());
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiElasticContainerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiElasticContainerDirective, isStandalone: true, selector: "[tuiElasticContainer]", outputs: { tuiElasticContainer: "tuiElasticContainer" }, providers: [
WaResizeObserverService,
WaMutationObserverService,
{
provide: WA_MUTATION_OBSERVER_INIT,
useValue: {
childList: true,
characterData: true,
subtree: true,
},
},
], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiElasticContainerDirective, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: '[tuiElasticContainer]',
providers: [
WaResizeObserverService,
WaMutationObserverService,
{
provide: WA_MUTATION_OBSERVER_INIT,
useValue: {
childList: true,
characterData: true,
subtree: true,
},
},
],
}]
}], propDecorators: { tuiElasticContainer: [{
type: Output
}] } });
class TuiElasticContainer {
constructor() {
this.height = signal('');
this.transitions = signal(0);
}
onAnimation(name, count) {
if (name === 'height') {
this.transitions.update((value) => value + count);
}
}
updateHeight(height) {
this.height.set(tuiPx(height));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiElasticContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiElasticContainer, isStandalone: true, selector: "tui-elastic-container", host: { properties: { "style.block-size": "transitions() ? \"auto\" : height()" } }, ngImport: i0, template: "<div\n class=\"t-wrapper\"\n (transitioncancel)=\"onAnimation($any($event).propertyName, -1)\"\n (transitionend)=\"onAnimation($any($event).propertyName, -1)\"\n (transitionstart)=\"onAnimation($any($event).propertyName, 1)\"\n (tuiElasticContainer)=\"updateHeight($event)\"\n>\n <ng-content />\n</div>\n", styles: [":host{transition-property:height;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:block;overflow:hidden}.t-wrapper{padding-block-start:1px;margin-block-start:-1px}\n"], dependencies: [{ kind: "directive", type: TuiElasticContainerDirective, selector: "[tuiElasticContainer]", outputs: ["tuiElasticContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiElasticContainer, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-elastic-container', imports: [TuiElasticContainerDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[style.block-size]': 'transitions() ? "auto" : height()' }, template: "<div\n class=\"t-wrapper\"\n (transitioncancel)=\"onAnimation($any($event).propertyName, -1)\"\n (transitionend)=\"onAnimation($any($event).propertyName, -1)\"\n (transitionstart)=\"onAnimation($any($event).propertyName, 1)\"\n (tuiElasticContainer)=\"updateHeight($event)\"\n>\n <ng-content />\n</div>\n", styles: [":host{transition-property:height;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:block;overflow:hidden}.t-wrapper{padding-block-start:1px;margin-block-start:-1px}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TuiElasticContainer, TuiElasticContainerDirective };
//# sourceMappingURL=taiga-ui-kit-components-elastic-container.mjs.map