import { Clipboard } from '@angular/cdk/clipboard';
import { ChangeDetectorRef, Component, ElementRef, input, inject } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FieldLabelComponent } from '../../../components/field-label/field-label.component';
import { ChipsModule } from '@seniorsistemas/angular-components/chips';
import { TranslateModule } from '@ngx-translate/core';
import { TooltipDirective } from '@seniorsistemas/angular-components/tooltip';
import * as i0 from "@angular/core";
import * as i1 from "@seniorsistemas/angular-components/chips";
import * as i2 from "@angular/forms";
import * as i3 from "@ngx-translate/core";
export class ChipsFieldComponent {
    clipboard = inject(Clipboard);
    changeDetectorRef = inject(ChangeDetectorRef);
    elementRef = inject(ElementRef);
    field = input.required();
    formControl = input.required();
    feedbackMessageVisible = false;
    copyButtonVisible = true;
    inputRef = null;
    onCopyFieldContent() {
        if (this.formControl().value) {
            this.copyButtonVisible = false;
            this.feedbackMessageVisible = true;
            setTimeout(() => {
                this.feedbackMessageVisible = false;
                this.copyButtonVisible = true;
            }, 3000);
            const content = this.formControl().value.join(this.field().separator || '\n');
            this.clipboard.copy(content);
            if (this.field().onCopy) {
                this.field().onCopy?.(content);
            }
        }
    }
    ngAfterViewInit() {
        this.setInputRef();
        this.changeDetectorRef.detectChanges();
    }
    setInputRef() {
        this.inputRef = this.elementRef.nativeElement.querySelector('input');
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipsFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChipsFieldComponent, isStandalone: true, selector: "ng-component", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let _field = field();\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef\"\n    ></s-field-label>\n}\n\n<div class=\"chips-field-wrapper\">\n    <div style=\"width: 100%\">\n        @if (_field.keyFilter) {\n            <s-chips\n                [inputId]=\"_field.id || _field.name\"\n                [formControl]=\"formControl()\"\n                [placeholder]=\"_field.placeholder\"\n                [allowDuplicated]=\"false\"\n                [addOnTab]=\"true\"\n                [addOnBlur]=\"true\"\n                (onAdd)=\"_field.onAdd ? _field.onAdd($event) : null\"\n                (onRemove)=\"_field.onRemove ? _field.onRemove($event) : null\"\n                (onChipClick)=\"_field.onChipClick ? _field.onChipClick($event) : null\"\n                (onFocus)=\"_field.onFocus ? _field.onFocus($event) : null\"\n                (onBlur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n                [keyFilter]=\"_field.keyFilter\"\n            >\n                <ng-template\n                    let-item\n                    pTemplate=\"item\"\n                >\n                    <span\n                        class=\"chip-content\"\n                        [sTooltip]=\"item\"\n                    >\n                        {{ item }}\n                    </span>\n                </ng-template>\n            </s-chips>\n        } @else {\n            <s-chips\n                [inputId]=\"_field.id || _field.name\"\n                [formControl]=\"formControl()\"\n                [placeholder]=\"_field.placeholder\"\n                [allowDuplicated]=\"false\"\n                [addOnTab]=\"true\"\n                [addOnBlur]=\"true\"\n                (onAdd)=\"_field.onAdd ? _field.onAdd($event) : null\"\n                (onRemove)=\"_field.onRemove ? _field.onRemove($event) : null\"\n                (onChipClick)=\"_field.onChipClick ? _field.onChipClick($event) : null\"\n                (onFocus)=\"_field.onFocus ? _field.onFocus($event) : null\"\n                (onBlur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            >\n                <ng-template\n                    let-item\n                    pTemplate=\"item\"\n                >\n                    <span\n                        class=\"chip-content\"\n                        [sTooltip]=\"item\"\n                    >\n                        {{ item }}\n                    </span>\n                </ng-template>\n            </s-chips>\n        }\n    </div>\n\n    @if (_field.showCopyButton && formControl().value?.length > 0 && copyButtonVisible) {\n        <button\n            class=\"copy-content-button\"\n            (click)=\"onCopyFieldContent()\"\n        >\n            {{ 'platform.angular_components.copy_field_content' | translate }}\n        </button>\n    }\n\n    @if (feedbackMessageVisible) {\n        <span class=\"feedback-message\">\n            {{ 'platform.angular_components.copied_to_clipboard' | translate }}\n        </span>\n    }\n</div>\n\n", styles: [".chips-field-wrapper{align-items:flex-start;display:flex;flex-direction:column}.chips-field-wrapper .chip-content{display:block;overflow:hidden;padding-right:1rem;text-overflow:ellipsis}.chips-field-wrapper .copy-content-button{background-color:transparent;border:none;color:#2a6496;cursor:pointer;margin-top:8px}.chips-field-wrapper .feedback-message{color:#0c9348;display:block;margin-top:8px;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "ngmodule", type: ChipsModule }, { kind: "component", type: i1.ChipsComponent, selector: "s-chips", inputs: ["disabled", "field", "value", "placeholder", "max", "maxLength", "inputId", "allowDuplicated", "caseSensitiveDuplication", "addOnTab", "addOnBlur", "separator", "autofocus", "infoLabel", "keyFilter", "showTooltip", "maxLengthRenderWithoutTooltip"], outputs: ["added", "removed", "focused", "focusLost", "chipClicked", "valueChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipsFieldComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [FieldLabelComponent, ChipsModule, ReactiveFormsModule, TranslateModule, TooltipDirective], template: "@let _field = field();\n@if (inputRef) {\n    <s-field-label\n        [field]=\"_field\"\n        [fieldContainerRef]=\"inputRef\"\n    ></s-field-label>\n}\n\n<div class=\"chips-field-wrapper\">\n    <div style=\"width: 100%\">\n        @if (_field.keyFilter) {\n            <s-chips\n                [inputId]=\"_field.id || _field.name\"\n                [formControl]=\"formControl()\"\n                [placeholder]=\"_field.placeholder\"\n                [allowDuplicated]=\"false\"\n                [addOnTab]=\"true\"\n                [addOnBlur]=\"true\"\n                (onAdd)=\"_field.onAdd ? _field.onAdd($event) : null\"\n                (onRemove)=\"_field.onRemove ? _field.onRemove($event) : null\"\n                (onChipClick)=\"_field.onChipClick ? _field.onChipClick($event) : null\"\n                (onFocus)=\"_field.onFocus ? _field.onFocus($event) : null\"\n                (onBlur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n                [keyFilter]=\"_field.keyFilter\"\n            >\n                <ng-template\n                    let-item\n                    pTemplate=\"item\"\n                >\n                    <span\n                        class=\"chip-content\"\n                        [sTooltip]=\"item\"\n                    >\n                        {{ item }}\n                    </span>\n                </ng-template>\n            </s-chips>\n        } @else {\n            <s-chips\n                [inputId]=\"_field.id || _field.name\"\n                [formControl]=\"formControl()\"\n                [placeholder]=\"_field.placeholder\"\n                [allowDuplicated]=\"false\"\n                [addOnTab]=\"true\"\n                [addOnBlur]=\"true\"\n                (onAdd)=\"_field.onAdd ? _field.onAdd($event) : null\"\n                (onRemove)=\"_field.onRemove ? _field.onRemove($event) : null\"\n                (onChipClick)=\"_field.onChipClick ? _field.onChipClick($event) : null\"\n                (onFocus)=\"_field.onFocus ? _field.onFocus($event) : null\"\n                (onBlur)=\"_field.onBlur ? _field.onBlur($event) : null\"\n            >\n                <ng-template\n                    let-item\n                    pTemplate=\"item\"\n                >\n                    <span\n                        class=\"chip-content\"\n                        [sTooltip]=\"item\"\n                    >\n                        {{ item }}\n                    </span>\n                </ng-template>\n            </s-chips>\n        }\n    </div>\n\n    @if (_field.showCopyButton && formControl().value?.length > 0 && copyButtonVisible) {\n        <button\n            class=\"copy-content-button\"\n            (click)=\"onCopyFieldContent()\"\n        >\n            {{ 'platform.angular_components.copy_field_content' | translate }}\n        </button>\n    }\n\n    @if (feedbackMessageVisible) {\n        <span class=\"feedback-message\">\n            {{ 'platform.angular_components.copied_to_clipboard' | translate }}\n        </span>\n    }\n</div>\n\n", styles: [".chips-field-wrapper{align-items:flex-start;display:flex;flex-direction:column}.chips-field-wrapper .chip-content{display:block;overflow:hidden;padding-right:1rem;text-overflow:ellipsis}.chips-field-wrapper .copy-content-button{background-color:transparent;border:none;color:#2a6496;cursor:pointer;margin-top:8px}.chips-field-wrapper .feedback-message{color:#0c9348;display:block;margin-top:8px;-webkit-user-select:none;user-select:none}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 