@taiga-ui/kit
Version:
Taiga UI Angular main components kit
79 lines (74 loc) • 5.44 kB
JavaScript
import { __decorate } from 'tslib';
import * as i0 from '@angular/core';
import { inject, Directive, Output, Component, ChangeDetectionStrategy } from '@angular/core';
import { shouldCall } from '@taiga-ui/event-plugins';
import { MutationObserverService, WA_MUTATION_OBSERVER_INIT } from '@ng-web-apis/mutation-observer';
import { ResizeObserverService } 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(ResizeObserverService, { self: true }), inject(MutationObserverService, { 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: [
ResizeObserverService,
MutationObserverService,
{
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: [
ResizeObserverService,
MutationObserverService,
{
provide: WA_MUTATION_OBSERVER_INIT,
useValue: {
childList: true,
characterData: true,
subtree: true,
},
},
],
}]
}], propDecorators: { tuiElasticContainer: [{
type: Output
}] } });
class TuiElasticContainer {
constructor() {
this.height = NaN;
this.transitions = 0;
}
onAnimation(_name, count) {
this.transitions += count;
}
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.height.px": "height", "class._transitioning": "transitions" } }, ngImport: i0, template: "<div\n class=\"t-wrapper\"\n (transitioncancel.silent)=\"onAnimation($any($event).propertyName, -1)\"\n (transitionend.silent)=\"onAnimation($any($event).propertyName, -1)\"\n (transitionstart.silent)=\"onAnimation($any($event).propertyName, 1)\"\n (tuiElasticContainer)=\"height = $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}:host._transitioning{block-size:auto!important}.t-wrapper{padding-top:1px;margin-top:-1px}\n"], dependencies: [{ kind: "directive", type: TuiElasticContainerDirective, selector: "[tuiElasticContainer]", outputs: ["tuiElasticContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
__decorate([
shouldCall((name) => name === 'height')
], TuiElasticContainer.prototype, "onAnimation", null);
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.height.px]': 'height',
'[class._transitioning]': 'transitions',
}, template: "<div\n class=\"t-wrapper\"\n (transitioncancel.silent)=\"onAnimation($any($event).propertyName, -1)\"\n (transitionend.silent)=\"onAnimation($any($event).propertyName, -1)\"\n (transitionstart.silent)=\"onAnimation($any($event).propertyName, 1)\"\n (tuiElasticContainer)=\"height = $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}:host._transitioning{block-size:auto!important}.t-wrapper{padding-top:1px;margin-top:-1px}\n"] }]
}], propDecorators: { onAnimation: [] } });
/**
* Generated bundle index. Do not edit.
*/
export { TuiElasticContainer, TuiElasticContainerDirective };
//# sourceMappingURL=taiga-ui-kit-components-elastic-container.mjs.map