import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BehaviorSubject, from, Subject } from 'rxjs';
import { debounceTime, filter, switchMap, takeUntil, tap } from 'rxjs/operators';
import { computePosition, flip, shift } from '@floating-ui/dom';
import { RepositionDirective } from '@ironsource/fusion-ui/directives/reposition';
import { TeleportingModule } from '@ironsource/fusion-ui/directives/teleporting';
import { DroppedListComponent } from '@ironsource/fusion-ui/components/dropped-list/v4';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
function TextWithDroppedListComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "fusion-dropped-list", 1);
} if (rf & 2) {
    const ctx_r0 = i0.ɵɵnextContext();
    i0.ɵɵproperty("list", ctx_r0.list);
} }
export class TextWithDroppedListComponent {
    #onDestroy$;
    #hostElement;
    #textLabel;
    #droppedList;
    constructor(hostElementRef) {
        this.hostElementRef = hostElementRef;
        this.size = 'medium';
        this.disabled = false;
        this.list = [];
        /** @ignore */
        this.showedList$ = new BehaviorSubject(false);
        this.#onDestroy$ = new Subject();
        this.#hostElement = this.hostElementRef.nativeElement;
    }
    ngOnInit() {
        this.showedList$
            .asObservable()
            .pipe(takeUntil(this.#onDestroy$), filter(isShow => isShow && !this.list.length), debounceTime(0), tap(() => {
            this.#textLabel = this.#hostElement.querySelector(`.fu-text`);
            this.#droppedList = this.#hostElement.querySelector(`fusion-dropped-list`);
        }), switchMap(() => from(computePosition(this.#textLabel, this.#droppedList, {
            placement: 'bottom',
            middleware: [flip(), shift({ padding: 5 })]
        }))))
            .subscribe(({ x, y }) => {
            this.#droppedList.style.left = x + 'px';
            this.#droppedList.style.top = y + 'px';
        });
    }
    ngOnDestroy() {
        this.#onDestroy$.next();
        this.#onDestroy$.complete();
    }
    static { this.ɵfac = function TextWithDroppedListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TextWithDroppedListComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TextWithDroppedListComponent, selectors: [["fusion-text-with-dropped-list"]], hostAttrs: [1, "fusion-v4"], hostVars: 4, hostBindings: function TextWithDroppedListComponent_HostBindings(rf, ctx) { if (rf & 1) {
            i0.ɵɵlistener("mouseenter", function TextWithDroppedListComponent_mouseenter_HostBindingHandler() { return ctx.showedList$.next(true); })("mouseleave", function TextWithDroppedListComponent_mouseleave_HostBindingHandler() { return ctx.showedList$.next(false); });
        } if (rf & 2) {
            i0.ɵɵclassProp("fu-disabled", ctx.disabled)("fu-small", ctx.size === "small");
        } }, inputs: { size: "size", text: "text", disabled: "disabled", list: "list" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 4, vars: 4, consts: [[1, "fu-text"], [1, "fu-dropped-list", 3, "list"]], template: function TextWithDroppedListComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵtext(1);
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(2, TextWithDroppedListComponent_Conditional_2_Template, 1, 1, "fusion-dropped-list", 1);
            i0.ɵɵpipe(3, "async");
        } if (rf & 2) {
            i0.ɵɵadvance();
            i0.ɵɵtextInterpolate(ctx.text);
            i0.ɵɵadvance();
            i0.ɵɵconditional(i0.ɵɵpipeBind1(3, 2, ctx.showedList$) ? 2 : -1);
        } }, dependencies: [CommonModule, i1.AsyncPipe, TeleportingModule, DroppedListComponent], styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.font-v4-bold[_ngcontent-%COMP%], .font-v4-tab-label-2[_ngcontent-%COMP%], .font-v4-chart-2[_ngcontent-%COMP%], .font-v4-chart-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}.font-v4-semibold[_ngcontent-%COMP%], .font-v4-chip-label[_ngcontent-%COMP%], .font-v4-table-label[_ngcontent-%COMP%], .font-v4-button[_ngcontent-%COMP%], .font-v4-heading-6[_ngcontent-%COMP%], .font-v4-heading-5[_ngcontent-%COMP%], .font-v4-heading-4[_ngcontent-%COMP%], .font-v4-heading-3[_ngcontent-%COMP%], .font-v4-heading-2[_ngcontent-%COMP%], .font-v4-heading-1[_ngcontent-%COMP%], .font-v4-title[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}.font-v4-medium[_ngcontent-%COMP%], .font-v4-tab-label-1[_ngcontent-%COMP%], .font-v4-input-label[_ngcontent-%COMP%], .font-v4-overline[_ngcontent-%COMP%], .font-v4-subtitle-2[_ngcontent-%COMP%], .font-v4-subtitle-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}.font-v4-regular[_ngcontent-%COMP%], .font-v4-caption[_ngcontent-%COMP%], .fu-small[_nghost-%COMP%]   .fu-text[_ngcontent-%COMP%], .font-v4-body-2[_ngcontent-%COMP%], [_nghost-%COMP%]   .fu-text[_ngcontent-%COMP%], .font-v4-body-1[_ngcontent-%COMP%]{font-family:Inter,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}.font-v4-title[_ngcontent-%COMP%]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-v4-heading-1[_ngcontent-%COMP%]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-v4-heading-2[_ngcontent-%COMP%]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-v4-heading-3[_ngcontent-%COMP%]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-v4-heading-4[_ngcontent-%COMP%]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-v4-heading-5[_ngcontent-%COMP%]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-v4-heading-6[_ngcontent-%COMP%]{font-size:.75rem;line-height:.75rem;letter-spacing:0}[_nghost-%COMP%]   .fu-text[_ngcontent-%COMP%], .font-v4-body-1[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.fu-small[_nghost-%COMP%]   .fu-text[_ngcontent-%COMP%], .font-v4-body-2[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-subtitle-1[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-subtitle-2[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-chart-1[_ngcontent-%COMP%]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-v4-chart-2[_ngcontent-%COMP%]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-v4-button[_ngcontent-%COMP%]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-v4-overline[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-v4-caption[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem}.font-v4-table-label[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-v4-input-label[_ngcontent-%COMP%]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-v4-tab-label-1[_ngcontent-%COMP%], .font-v4-tab-label-2[_ngcontent-%COMP%]{font-size:.875rem;line-height:1rem}.font-v4-chip-label[_ngcontent-%COMP%]{font-size:.75rem;line-height:1rem;letter-spacing:normal}[_nghost-%COMP%]   *[_ngcontent-%COMP%]{box-sizing:border-box}[_nghost-%COMP%]{margin:0;padding:0;vertical-align:initial;text-align:initial}@keyframes _ngcontent-%COMP%_rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes _ngcontent-%COMP%_shineAnimation{0%{background-position:-750px 0}to{background-position:750px 0}}[_nghost-%COMP%]{--fu-text-color: var(--text-primary, hsl(0, 0%, 12.5%));--fu-text-disabled-color: var(--text-disabled, hsl(0, 0%, 73.33%));--fu-text-border-width: 1px;--fu-text-border-type: dashed;--fu-text-border-color: var(--text-secondary, hsl(0, 0%, 39.3%));--fu-text-disabled-border-color: var(--text-disabled, hsl(0, 0%, 73.33%));display:flex;width:fit-content;align-items:center;position:relative}[_nghost-%COMP%]   .fu-text[_ngcontent-%COMP%]{color:var(--fu-text-color);border-bottom:var(--fu-text-border-width) var(--fu-text-border-type) var(--fu-text-border-color);cursor:default}.fu-disabled[_nghost-%COMP%]{pointer-events:none}.fu-disabled[_nghost-%COMP%]   .fu-text[_ngcontent-%COMP%]{pointer-events:none;color:var(--fu-text-disabled-color);border-bottom-color:var(--fu-text-disabled-border-color)}[_nghost-%COMP%]   .fu-dropped-list[_ngcontent-%COMP%]{position:absolute;top:calc(100% + 4px);right:var(--fu-dropped-list-right);z-index:2003}"], changeDetection: 0 }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextWithDroppedListComponent, [{
        type: Component,
        args: [{ selector: 'fusion-text-with-dropped-list', standalone: true, host: {
                    class: 'fusion-v4',
                    '[class.fu-disabled]': 'disabled',
                    '[class.fu-small]': 'size === "small"',
                    '(mouseenter)': 'showedList$.next(true)',
                    '(mouseleave)': 'showedList$.next(false)'
                }, imports: [CommonModule, TeleportingModule, RepositionDirective, DroppedListComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fu-text\">{{text}}</div>\n@if (showedList$ | async){\n    <fusion-dropped-list\n            class=\"fu-dropped-list\"\n            [list]=\"list\"\n    />\n}\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap\";.font-v4-bold,.font-v4-tab-label-2,.font-v4-chart-2,.font-v4-chart-1{font-family:Inter,sans-serif;font-weight:700;-webkit-font-smoothing:antialiased}.font-v4-semibold,.font-v4-chip-label,.font-v4-table-label,.font-v4-button,.font-v4-heading-6,.font-v4-heading-5,.font-v4-heading-4,.font-v4-heading-3,.font-v4-heading-2,.font-v4-heading-1,.font-v4-title{font-family:Inter,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased}.font-v4-medium,.font-v4-tab-label-1,.font-v4-input-label,.font-v4-overline,.font-v4-subtitle-2,.font-v4-subtitle-1{font-family:Inter,sans-serif;font-weight:500;-webkit-font-smoothing:antialiased}.font-v4-regular,.font-v4-caption,:host.fu-small .fu-text,.font-v4-body-2,:host .fu-text,.font-v4-body-1{font-family:Inter,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}.font-v4-title{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-v4-heading-1{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-v4-heading-2{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-v4-heading-3{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-v4-heading-4{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-v4-heading-5{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-v4-heading-6{font-size:.75rem;line-height:.75rem;letter-spacing:0}:host .fu-text,.font-v4-body-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}:host.fu-small .fu-text,.font-v4-body-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-subtitle-1{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-v4-subtitle-2{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-v4-chart-1{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-v4-chart-2{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-v4-button{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-v4-overline{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-v4-caption{font-size:.75rem;line-height:1rem}.font-v4-table-label{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-v4-input-label{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-v4-tab-label-1,.font-v4-tab-label-2{font-size:.875rem;line-height:1rem}.font-v4-chip-label{font-size:.75rem;line-height:1rem;letter-spacing:normal}:host *{box-sizing:border-box}:host{margin:0;padding:0;vertical-align:initial;text-align:initial}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes shineAnimation{0%{background-position:-750px 0}to{background-position:750px 0}}:host{--fu-text-color: var(--text-primary, hsl(0, 0%, 12.5%));--fu-text-disabled-color: var(--text-disabled, hsl(0, 0%, 73.33%));--fu-text-border-width: 1px;--fu-text-border-type: dashed;--fu-text-border-color: var(--text-secondary, hsl(0, 0%, 39.3%));--fu-text-disabled-border-color: var(--text-disabled, hsl(0, 0%, 73.33%));display:flex;width:fit-content;align-items:center;position:relative}:host .fu-text{color:var(--fu-text-color);border-bottom:var(--fu-text-border-width) var(--fu-text-border-type) var(--fu-text-border-color);cursor:default}:host.fu-disabled{pointer-events:none}:host.fu-disabled .fu-text{pointer-events:none;color:var(--fu-text-disabled-color);border-bottom-color:var(--fu-text-disabled-border-color)}:host .fu-dropped-list{position:absolute;top:calc(100% + 4px);right:var(--fu-dropped-list-right);z-index:2003}\n"] }]
    }], () => [{ type: i0.ElementRef }], { size: [{
            type: Input
        }], text: [{
            type: Input
        }], disabled: [{
            type: Input
        }], list: [{
            type: Input
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TextWithDroppedListComponent, { className: "TextWithDroppedListComponent", filePath: "text-with-dropped-list.component.ts", lineNumber: 25 }); })();
//# sourceMappingURL=data:application/json;base64, 