import * as i0 from '@angular/core';
import { EventEmitter, Directive, Input, Output } from '@angular/core';
import { BehaviorSubject, Subject, fromEvent } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

class TagBaseComponent {
    set configuration(value) {
        if (!!value) {
            this.id = value.id;
            this.icon = value.icon;
            this.flag = value.flag;
            this.image = value.image;
            this.title = value.title;
            this.close = value.close;
            this.disabled = value.disabled;
            this.role = value.role;
            this.selected = value.selected;
            this.tooltipContent = value.tooltipContent ?? value.title;
            this.tooltipWidth = value.tooltipWidth;
            this._tag = value;
        }
    }
    /** @internal */
    set role(role) {
        this.changeHostClass('tag-filter', role === 'filter');
    }
    /** @internal */
    set close(close) {
        this._close = close;
        this.changeHostClass('with-closed-icon', close);
    }
    get close() {
        return this._close;
    }
    /** @internal */
    set disabled(disabled) {
        this._disabled = disabled;
        this.changeHostClass('disabled', disabled);
    }
    get disabled() {
        return this._disabled;
    }
    /** @internal */
    set selected(selected) {
        this.changeHostClass('selected', selected);
        this._selected = selected;
    }
    get selected() {
        return this._selected;
    }
    constructor(element, renderer) {
        this.element = element;
        this.renderer = renderer;
        /** @internal */
        this.closeIconName$ = new BehaviorSubject('');
        /** @internal */
        this.onDestroy$ = new Subject();
        // when using tags inside an isClickOutside directive,
        // the click from the onremove will cause isClickOutside to trigger as an outside click
        // due to the tag being already removed from the DOM tree when the click reaches isClickOutside
        // in which case we want to set suppressClickOnRemove as true
        /** @internal */
        this.suppressClickOnRemove = false;
        // eslint-disable-next-line
        this.onRemove = new EventEmitter();
        /** @internal */
        // eslint-disable-next-line
        this.selectedChange = new EventEmitter();
    }
    ngOnInit() {
        this.width = this.element.nativeElement.offsetWidth;
        if (!this.close && !this.disabled) {
            this.setClickListener();
        }
    }
    ngOnDestroy() {
        this.onDestroy$.next();
        this.onDestroy$.complete();
    }
    /** @internal */
    closeClicked($event) {
        if (!this.removeEventOnly) {
            this.renderer.removeChild(this.renderer.parentNode(this.element.nativeElement), this.element.nativeElement);
        }
        this.onRemove.emit(this._tag);
        if (this.suppressClickOnRemove) {
            $event.stopPropagation();
        }
    }
    /** @internal */
    setClickListener() {
        this.onDestroy$.next();
        fromEvent(this.element.nativeElement, 'click')
            .pipe(takeUntil(this.onDestroy$))
            .subscribe(_ => {
            this.selected = !this.selected;
            this.selectedChange.emit({
                id: this.id,
                selected: this.selected
            });
        });
    }
    /** @internal */
    changeHostClass(className, add) {
        const classAction = add ? 'addClass' : 'removeClass';
        this.renderer[classAction](this.element.nativeElement, className);
    }
    static { this.ɵfac = function TagBaseComponent_Factory(t) { return new (t || TagBaseComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2)); }; }
    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TagBaseComponent, inputs: { configuration: "configuration", removeEventOnly: "removeEventOnly", id: "id", icon: "icon", flag: "flag", image: "image", title: "title", tooltipContent: "tooltipContent", suppressClickOnRemove: "suppressClickOnRemove", role: "role", close: "close", disabled: "disabled", selected: "selected" }, outputs: { onRemove: "onRemove", selectedChange: "selectedChange" } }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TagBaseComponent, [{
        type: Directive
    }], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], { configuration: [{
            type: Input
        }], removeEventOnly: [{
            type: Input
        }], id: [{
            type: Input
        }], icon: [{
            type: Input
        }], flag: [{
            type: Input
        }], image: [{
            type: Input
        }], title: [{
            type: Input
        }], tooltipContent: [{
            type: Input
        }], suppressClickOnRemove: [{
            type: Input
        }], role: [{
            type: Input
        }], close: [{
            type: Input
        }], disabled: [{
            type: Input
        }], selected: [{
            type: Input
        }], onRemove: [{
            type: Output
        }], selectedChange: [{
            type: Output
        }] }); })();

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

export { TagBaseComponent };
//# sourceMappingURL=ironsource-fusion-ui-components-tag-common-base.mjs.map
