import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, HostBinding, ChangeDetectionStrategy, Component, numberAttribute, booleanAttribute, ViewChild, ContentChildren } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import * as i5 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import * as i4 from '@eui/components/eui-button';
import { EUI_BUTTON } from '@eui/components/eui-button';
import * as i3 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i1 from '@angular/forms';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
import { A11yModule } from '@angular/cdk/a11y';
import * as i1$1 from '@eui/components/eui-avatar';
import { EUI_AVATAR } from '@eui/components/eui-avatar';
import * as i2 from '@eui/components/eui-textarea';
import { EUI_TEXTAREA } from '@eui/components/eui-textarea';

/**
 * @description
 * `eui-comment-textarea` component providing an input area for composing and submitting comments.
 * Displays user avatar alongside textarea with send and cancel action buttons.
 * Implements reactive forms for comment input with automatic reset after submission or cancellation.
 * Includes accessibility features through Angular CDK A11y module with focus trapping.
 * Used within eui-comment-thread for adding new comments or replies.
 *
 * @usageNotes
 * ```html
 * <eui-comment-textarea
 *   [currentAuthorAvatarUrl]="currentUser.avatar"
 *   [placeholder]="'Add your comment...'"
 *   (commentSend)="onSubmit($event)"
 *   (commentCancel)="onCancel()">
 * </eui-comment-textarea>
 * ```
 *
 * ### Accessibility
 * - Focus is automatically trapped within the textarea using `cdkTrapFocus`
 * - Focus is captured on component initialization with `cdkTrapFocusAutoCapture`
 * - Send and Cancel buttons are keyboard accessible
 * - Placeholder text supports translation for internationalization
 *
 * ### Notes
 * - Form automatically resets after sending or canceling a comment
 * - Textarea auto-resizes based on content using `autoResize` directive
 * - Uses reactive forms for robust form state management
 * - Avatar is optional and can be omitted by not providing `currentAuthorAvatarUrl`
 */
class EuiCommentTextareaComponent {
    constructor() {
        /**
         * URL path to the current user's avatar image.
         * Displayed alongside the textarea to identify the commenter.
         * Optional.
         */
        this.currentAuthorAvatarUrl = null;
        /**
         * Placeholder text displayed in the textarea when empty.
         * Supports translation keys for internationalization.
         * @default 'eui.ANSWER'
         */
        this.placeholder = 'eui.ANSWER';
        /**
         * Emitted when the user cancels comment input.
         * Payload: void
         * Triggered when user clicks cancel button. Automatically resets the form.
         */
        this.commentCancel = new EventEmitter();
        /**
         * Emitted when the user submits a comment.
         * Payload: string - the comment text entered by the user
         * Triggered when user clicks send button. Automatically resets the form after emission.
         */
        this.commentSend = new EventEmitter();
        this.form = new FormGroup({
            comment: new FormControl(null),
        });
    }
    get cssClasses() {
        return [
            'eui-comment-textarea',
        ].join(' ').trim();
    }
    onCommentCancel() {
        this.form.reset();
        this.commentCancel.emit();
    }
    onCommentSend() {
        this.commentSend.emit(this.form.get('comment').value);
        this.form.reset();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiCommentTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiCommentTextareaComponent, isStandalone: true, selector: "eui-comment-textarea", inputs: { currentAuthorAvatarUrl: "currentAuthorAvatarUrl", placeholder: "placeholder" }, outputs: { commentCancel: "commentCancel", commentSend: "commentSend" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<div class=\"eui-u-flex\">\n    <eui-avatar euiSizeXS>\n        <eui-avatar-image [imageUrl]=\"currentAuthorAvatarUrl\"></eui-avatar-image>\n    </eui-avatar>\n    <form class=\"comment-form\" [formGroup]=\"form\">\n        <textarea class=\"eui-u-ml-xs\" euiTextArea formControlName=\"comment\" [placeholder]=\"placeholder | translate\" autoResize></textarea>\n    </form>\n</div>\n<div class=\"eui-u-flex eui-u-flex-justify-content-end eui-u-pt-2xs\">\n    <button class=\"eui-u-mr-2xs\" euiButton euiBasicButton euiSizeS (buttonClick)=\"onCommentCancel()\">\n        {{ 'eui.CANCEL' | translate }}\n    </button>\n    <button euiButton euiPrimary euiSizeS (buttonClick)=\"onCommentSend()\">\n        {{ 'eui.SEND' | translate }}\n    </button>\n</div>\n", styles: [".eui-21 :host.eui-comment-thread ul{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item{margin-bottom:var(--eui-s-3xs)}.eui-21 :host.eui-comment-item .comment-item__row{align-items:center;display:flex;width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container{padding-left:var(--eui-s-3xs);width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment{padding-left:var(--eui-s-3xl)}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-source{display:none}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-actions{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item .comment-item__sub-comment-list{list-style:none;padding:0;margin:0}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host.eui-comment-textarea .comment-form{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: A11yModule }, { kind: "component", type: i2.EuiTextareaComponent, selector: "textarea[euiTextArea]", inputs: ["disabled", "readonly", "id", "isInvalid", "e2eAttr"], outputs: ["rowsChange"] }, { kind: "directive", type: i2.AutoResizeDirective, selector: "textarea[autoResize]", inputs: ["autoResize", "minRows", "maxRows"] }, { kind: "component", type: i1$1.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i1$1.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiCommentTextareaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-comment-textarea', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        TranslateModule,
                        ReactiveFormsModule,
                        A11yModule,
                        ...EUI_TEXTAREA,
                        ...EUI_AVATAR,
                        ...EUI_BUTTON,
                    ], template: "<div class=\"eui-u-flex\">\n    <eui-avatar euiSizeXS>\n        <eui-avatar-image [imageUrl]=\"currentAuthorAvatarUrl\"></eui-avatar-image>\n    </eui-avatar>\n    <form class=\"comment-form\" [formGroup]=\"form\">\n        <textarea class=\"eui-u-ml-xs\" euiTextArea formControlName=\"comment\" [placeholder]=\"placeholder | translate\" autoResize></textarea>\n    </form>\n</div>\n<div class=\"eui-u-flex eui-u-flex-justify-content-end eui-u-pt-2xs\">\n    <button class=\"eui-u-mr-2xs\" euiButton euiBasicButton euiSizeS (buttonClick)=\"onCommentCancel()\">\n        {{ 'eui.CANCEL' | translate }}\n    </button>\n    <button euiButton euiPrimary euiSizeS (buttonClick)=\"onCommentSend()\">\n        {{ 'eui.SEND' | translate }}\n    </button>\n</div>\n", styles: [".eui-21 :host.eui-comment-thread ul{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item{margin-bottom:var(--eui-s-3xs)}.eui-21 :host.eui-comment-item .comment-item__row{align-items:center;display:flex;width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container{padding-left:var(--eui-s-3xs);width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment{padding-left:var(--eui-s-3xl)}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-source{display:none}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-actions{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item .comment-item__sub-comment-list{list-style:none;padding:0;margin:0}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host.eui-comment-textarea .comment-form{width:100%}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], currentAuthorAvatarUrl: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], commentCancel: [{
                type: Output
            }], commentSend: [{
                type: Output
            }] } });

/**
 * @description
 * Individual comment item component displaying a single comment with author information, timestamp, and nested replies.
 * Provides automatic text truncation with expand/collapse functionality for long comments.
 * Supports nested comment threads with collapsible child comments and integrated reply textarea.
 * Displays author avatar, name, creation timestamp, and optional action buttons.
 * Automatically counts and manages child comment items through content projection.
 *
 * @usageNotes
 * ```html
 * <eui-comment-item
 *   [authorName]="'Jane Smith'"
 *   [authorAvatarUrl]="'path/to/avatar.jpg'"
 *   [createdAt]="'1 day ago'"
 *   [currentAuthorAvatarUrl]="currentUser.avatar"
 *   [commentCharLimit]="300"
 *   (commentSend)="onReply($event)">
 *   This is the comment text that will be automatically truncated if it exceeds the character limit.
 *   <eui-comment-item-right-actions>
 *     <button euiIconButton euiBasicButton icon="eui-edit"></button>
 *   </eui-comment-item-right-actions>
 * </eui-comment-item>
 * ```
 *
 * ### Accessibility
 * - "Read more" and "Read less" links are keyboard accessible with proper focus management
 * - Reply link is accessible via keyboard navigation
 * - Nested comment structure uses semantic `<ul>` and `<li>` elements
 * - Avatar component includes proper alt text support
 *
 * ### Notes
 * - Comment text is automatically truncated based on `commentCharLimit` (default: 500 characters)
 * - Nested `eui-comment-item` elements are automatically counted and displayed
 * - Reply textarea appears inline when user clicks "Answer" link
 * - Use `eui-comment-item-right-actions` for action buttons like edit or delete
 */
class EuiCommentItemComponent {
    constructor() {
        this.role = 'listitem';
        /**
         * URL path to the comment author's avatar image.
         * Displayed alongside the comment to identify the author.
         * Optional.
         */
        this.authorAvatarUrl = null;
        /**
         * Name of the comment author.
         * Displayed as the comment header to identify who wrote the comment.
         * Optional.
         */
        this.authorName = null;
        /**
         * Timestamp or date string indicating when the comment was created.
         * Displayed in the comment header for temporal context.
         * Optional.
         */
        this.createdAt = null;
        /**
         * URL path to the current user's avatar image.
         * Used for the reply textarea to identify the replying user.
         * Optional.
         */
        this.currentAuthorAvatarUrl = null;
        /**
         * Indicates whether this comment has nested child comments.
         * When true, displays collapse/expand controls for child comments.
         * @default false
         */
        this.hasChildren = false;
        /**
         * Controls the expanded/collapsed state of nested child comments.
         * When true, child comments are visible; when false, they are hidden.
         * @default false
         */
        this.isOpen = false;
        /**
         * Maximum character length before comment text is truncated.
         * Comments exceeding this limit show "Read more" link to expand full text.
         * @default 500
         */
        this.commentCharLimit = 500;
        /**
         * Emitted when the user cancels reply input.
         * Payload: void
         * Triggered when user clicks cancel button in the reply textarea.
         */
        this.commentCancel = new EventEmitter();
        /**
         * Emitted when the user submits a reply comment.
         * Payload: string - the reply comment text entered by the user
         * Triggered when user clicks send button in the reply textarea.
         */
        this.commentSend = new EventEmitter();
        this.isVisibleReplyInput = false;
        this.fullText = '';
        this.truncatedText = '';
        this.isTruncated = false;
        this.isExpanded = false;
    }
    /** @internal */
    get cssClasses() {
        return ['eui-comment-item'].join(' ').trim();
    }
    get nbSubCommentItems() {
        return this.subCommentItems.length;
    }
    ngAfterContentInit() {
        const source = this.comment.nativeElement.textContent?.trim() ?? '';
        this.fullText = source;
        if (source.length > this.commentCharLimit) {
            this.truncatedText = source.slice(0, this.commentCharLimit);
            this.isTruncated = true;
        }
        else {
            this.truncatedText = source;
        }
    }
    toggleExpanded(e) {
        this.isExpanded = !this.isExpanded;
        e.preventDefault();
    }
    onToggleReplyInput(e) {
        this.isVisibleReplyInput = !this.isVisibleReplyInput;
        e.preventDefault();
    }
    onToggleOpen() {
        this.isOpen = !this.isOpen;
    }
    onCommentCancel() {
        this.commentCancel.emit();
    }
    onCommentSend(comment) {
        this.commentSend.emit(comment);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiCommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiCommentItemComponent, isStandalone: true, selector: "eui-comment-item", inputs: { authorAvatarUrl: "authorAvatarUrl", authorName: "authorName", createdAt: "createdAt", currentAuthorAvatarUrl: "currentAuthorAvatarUrl", hasChildren: ["hasChildren", "hasChildren", booleanAttribute], isOpen: ["isOpen", "isOpen", booleanAttribute], commentCharLimit: ["commentCharLimit", "commentCharLimit", numberAttribute] }, outputs: { commentCancel: "commentCancel", commentSend: "commentSend" }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, queries: [{ propertyName: "subCommentItems", predicate: EuiCommentItemComponent }], viewQueries: [{ propertyName: "comment", first: true, predicate: ["comment"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"comment-item__row\">\n        <div class=\"comment-item__content-container\">\n            <div class=\"avatar eui-u-flex eui-u-flex-justify-content-between\">\n                <eui-avatar euiSizeXS>\n                    <eui-avatar-image [imageUrl]=\"authorAvatarUrl\"></eui-avatar-image>\n                    <eui-avatar-content>\n                        <eui-avatar-content-label>\n                            {{ authorName }} <span class=\"eui-u-c-neutral-110 eui-u-f-m eui-u-text-smaller\">{{ createdAt }}</span>\n                        </eui-avatar-content-label>\n                    </eui-avatar-content>\n                </eui-avatar>\n\n                <ng-content select=\"eui-comment-item-right-actions\" />\n            </div>\n\n            <div class=\"comment\">\n                <div class=\"comment-source\" #comment>\n                    <ng-content></ng-content>\n                </div>\n\n                <div class=\"ellipsis-wrapper\">\n                    {{ isExpanded ? fullText : truncatedText }} @if (!isExpanded && isTruncated) { <span>\u2026</span> } \n                    @if (isTruncated) {\n                        <a href=\"#\" (click)=\"toggleExpanded($event)\" class=\"eui-u-text-link\">{{ isExpanded ? ('eui.READ-LESS' | translate) : ('eui.READ-MORE' | translate) }}</a>\n                    }\n                </div>\n\n                <ul class=\"comment-actions eui-u-flex\">\n                    <li><a href=\"#\" class=\"eui-u-text-link\" (click)=\"onToggleReplyInput($event)\">{{ 'eui.ANSWER' | translate }}</a></li>\n                </ul>\n            </div>\n\n            <div class=\"comment-item__footer-container\">\n                @if (isVisibleReplyInput) {\n                    <div class=\"eui-u-pt-s\">\n                        <eui-comment-textarea\n                            [currentAuthorAvatarUrl]=\"currentAuthorAvatarUrl\"\n                            [placeholder]=\"'eui.TO-ANSWER'\"\n                            (commentCancel)=\"onCommentCancel()\"\n                            (commentSend)=\"onCommentSend($event)\" />\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n\n    @if (nbSubCommentItems > 0) {\n        <div class=\"expander-container\">\n            @if (isOpen) {\n                <button euiButton euiBasicButton euiPrimary euiSizeS (buttonClick)=\"onToggleOpen()\">\n                    <eui-icon-svg icon=\"eui-chevron-up\" />\n                    {{ nbSubCommentItems }} {{ (nbSubCommentItems > 1 ? 'eui.ANSWERS' : 'eui.ANSWER') | translate }}\n                </button>\n                <ul class=\"comment-item__sub-comment-list\">\n                    <ng-content select=\"eui-comment-item\"></ng-content>\n                </ul>\n            } @else {\n                <button euiButton euiBasicButton euiPrimary euiSizeS (buttonClick)=\"onToggleOpen()\">\n                    <eui-icon-svg icon=\"eui-chevron-down\" />\n                    >{{ nbSubCommentItems }} {{ (nbSubCommentItems > 1 ? 'eui.ANSWERS' : 'eui.ANSWER') | translate }}\n                </button>\n            }\n        </div>\n    }\n", styles: [".eui-21 :host.eui-comment-thread ul{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item{margin-bottom:var(--eui-s-3xs)}.eui-21 :host.eui-comment-item .comment-item__row{align-items:center;display:flex;width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container{padding-left:var(--eui-s-3xs);width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment{padding-left:var(--eui-s-3xl)}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-source{display:none}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-actions{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item .comment-item__sub-comment-list{list-style:none;padding:0;margin:0}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host.eui-comment-textarea .comment-form{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: i1$1.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "hasNoBackground", "isReverse", "colorPalette"] }, { kind: "component", type: i1$1.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i1$1.EuiAvatarContentComponent, selector: "eui-avatar-content" }, { kind: "component", type: i1$1.EuiAvatarContentLabelComponent, selector: "eui-avatar-content-label" }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: EuiCommentTextareaComponent, selector: "eui-comment-textarea", inputs: ["currentAuthorAvatarUrl", "placeholder"], outputs: ["commentCancel", "commentSend"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiCommentItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-comment-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        TranslateModule,
                        ...EUI_AVATAR,
                        ...EUI_BUTTON,
                        ...EUI_ICON,
                        EuiCommentTextareaComponent,
                    ], template: "<div class=\"comment-item__row\">\n        <div class=\"comment-item__content-container\">\n            <div class=\"avatar eui-u-flex eui-u-flex-justify-content-between\">\n                <eui-avatar euiSizeXS>\n                    <eui-avatar-image [imageUrl]=\"authorAvatarUrl\"></eui-avatar-image>\n                    <eui-avatar-content>\n                        <eui-avatar-content-label>\n                            {{ authorName }} <span class=\"eui-u-c-neutral-110 eui-u-f-m eui-u-text-smaller\">{{ createdAt }}</span>\n                        </eui-avatar-content-label>\n                    </eui-avatar-content>\n                </eui-avatar>\n\n                <ng-content select=\"eui-comment-item-right-actions\" />\n            </div>\n\n            <div class=\"comment\">\n                <div class=\"comment-source\" #comment>\n                    <ng-content></ng-content>\n                </div>\n\n                <div class=\"ellipsis-wrapper\">\n                    {{ isExpanded ? fullText : truncatedText }} @if (!isExpanded && isTruncated) { <span>\u2026</span> } \n                    @if (isTruncated) {\n                        <a href=\"#\" (click)=\"toggleExpanded($event)\" class=\"eui-u-text-link\">{{ isExpanded ? ('eui.READ-LESS' | translate) : ('eui.READ-MORE' | translate) }}</a>\n                    }\n                </div>\n\n                <ul class=\"comment-actions eui-u-flex\">\n                    <li><a href=\"#\" class=\"eui-u-text-link\" (click)=\"onToggleReplyInput($event)\">{{ 'eui.ANSWER' | translate }}</a></li>\n                </ul>\n            </div>\n\n            <div class=\"comment-item__footer-container\">\n                @if (isVisibleReplyInput) {\n                    <div class=\"eui-u-pt-s\">\n                        <eui-comment-textarea\n                            [currentAuthorAvatarUrl]=\"currentAuthorAvatarUrl\"\n                            [placeholder]=\"'eui.TO-ANSWER'\"\n                            (commentCancel)=\"onCommentCancel()\"\n                            (commentSend)=\"onCommentSend($event)\" />\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n\n    @if (nbSubCommentItems > 0) {\n        <div class=\"expander-container\">\n            @if (isOpen) {\n                <button euiButton euiBasicButton euiPrimary euiSizeS (buttonClick)=\"onToggleOpen()\">\n                    <eui-icon-svg icon=\"eui-chevron-up\" />\n                    {{ nbSubCommentItems }} {{ (nbSubCommentItems > 1 ? 'eui.ANSWERS' : 'eui.ANSWER') | translate }}\n                </button>\n                <ul class=\"comment-item__sub-comment-list\">\n                    <ng-content select=\"eui-comment-item\"></ng-content>\n                </ul>\n            } @else {\n                <button euiButton euiBasicButton euiPrimary euiSizeS (buttonClick)=\"onToggleOpen()\">\n                    <eui-icon-svg icon=\"eui-chevron-down\" />\n                    >{{ nbSubCommentItems }} {{ (nbSubCommentItems > 1 ? 'eui.ANSWERS' : 'eui.ANSWER') | translate }}\n                </button>\n            }\n        </div>\n    }\n", styles: [".eui-21 :host.eui-comment-thread ul{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item{margin-bottom:var(--eui-s-3xs)}.eui-21 :host.eui-comment-item .comment-item__row{align-items:center;display:flex;width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container{padding-left:var(--eui-s-3xs);width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment{padding-left:var(--eui-s-3xl)}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-source{display:none}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-actions{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item .comment-item__sub-comment-list{list-style:none;padding:0;margin:0}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host.eui-comment-textarea .comment-form{width:100%}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], authorAvatarUrl: [{
                type: Input
            }], authorName: [{
                type: Input
            }], createdAt: [{
                type: Input
            }], currentAuthorAvatarUrl: [{
                type: Input
            }], hasChildren: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isOpen: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], commentCharLimit: [{
                type: Input,
                args: [{ transform: numberAttribute }]
            }], commentCancel: [{
                type: Output
            }], commentSend: [{
                type: Output
            }], subCommentItems: [{
                type: ContentChildren,
                args: [EuiCommentItemComponent]
            }], comment: [{
                type: ViewChild,
                args: ['comment', { static: true }]
            }] } });

/**
 * @description
 * `eui-comment-thread` component for displaying nested conversations with reply functionality.
 * Provides a collapsible container for comment items with integrated textarea for adding new comments.
 * Supports flexible textarea positioning (top or bottom) and optional collapse/expand behavior.
 * Automatically counts and manages child comment items through content projection.
 * Typically used for discussion threads, feedback sections, or collaborative commenting features.
 *
 * @usageNotes
 * ```html
 * <eui-comment-thread
 *   [currentAuthorAvatarUrl]="currentUser.avatar"
 *   [isOpen]="true"
 *   (commentSend)="onAddComment($event)">
 *   <eui-comment-item
 *     [authorName]="'John Doe'"
 *     [authorAvatarUrl]="'path/to/avatar.jpg'"
 *     [createdAt]="'2 hours ago'">
 *     This is a comment text.
 *   </eui-comment-item>
 * </eui-comment-thread>
 * ```
 *
 * ### Accessibility
 * - Collapse/expand buttons include proper ARIA labels through translation keys
 * - Comment count is announced to screen readers (singular/plural forms)
 * - Nested comment structure maintains semantic HTML with proper list elements
 *
 * ### Notes
 * - Use `textareaPosition` to control whether new comments appear above or below existing ones
 * - Set `isCollapsable` to false for always-visible comment threads
 * - The component automatically counts child `eui-comment-item` elements
 */
class EuiCommentThreadComponent {
    constructor() {
        /**
         * Placeholder text displayed in the comment textarea when empty.
         * Supports translation keys for internationalization.
         * @default 'eui.ADD-A-COMMENT'
         */
        this.placeholder = 'eui.ADD-A-COMMENT';
        /**
         * Position of the comment textarea relative to the comment items.
         * When 'top', textarea appears above comments; when 'bottom', below comments.
         * @default 'top'
         */
        this.textareaPosition = 'top';
        /**
         * Controls visibility of the comment textarea.
         * When false, hides the textarea preventing new comment input.
         * @default true
         */
        this.hasTextarea = true;
        /**
         * URL path to the current user's avatar image.
         * Displayed alongside the comment textarea to identify the commenter.
         * Optional.
         */
        this.currentAuthorAvatarUrl = null;
        /**
         * Controls the expanded/collapsed state of the comment thread.
         * When true, thread is expanded showing all comments; when false, thread is collapsed.
         * @default false
         */
        this.isOpen = false;
        /**
         * Enables collapse/expand functionality for the comment thread.
         * When true, displays toggle control; when false, thread remains static.
         * @default true
         */
        this.isCollapsable = true;
        /**
         * Emitted when the user cancels comment input.
         * Payload: void
         * Triggered when user clicks cancel button in the comment textarea.
         */
        this.commentCancel = new EventEmitter();
        /**
         * Emitted when the user submits a new comment.
         * Payload: string - the comment text entered by the user
         * Triggered when user clicks send button in the comment textarea.
         */
        this.commentSend = new EventEmitter();
    }
    get cssClasses() {
        return [
            'eui-comment-thread',
        ]
            .join(' ')
            .trim();
    }
    get nbSubCommentItems() {
        return this.subCommentItems.length;
    }
    onCommentCancel() {
        this.commentCancel.emit();
    }
    onCommentSend(comment) {
        this.commentSend.emit(comment);
    }
    onToggleOpen() {
        this.isOpen = !this.isOpen;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiCommentThreadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiCommentThreadComponent, isStandalone: true, selector: "eui-comment-thread", inputs: { placeholder: "placeholder", textareaPosition: "textareaPosition", hasTextarea: ["hasTextarea", "hasTextarea", booleanAttribute], currentAuthorAvatarUrl: "currentAuthorAvatarUrl", isOpen: ["isOpen", "isOpen", booleanAttribute], isCollapsable: ["isCollapsable", "isCollapsable", booleanAttribute] }, outputs: { commentCancel: "commentCancel", commentSend: "commentSend" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "subCommentItems", predicate: EuiCommentItemComponent }], ngImport: i0, template: "@if (textareaPosition === 'top' && hasTextarea) {\n    <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n}\n\n@if (nbSubCommentItems > 0) {\n    <div class=\"expander-container\">\n        @if (isOpen) {\n            @if (isCollapsable) {\n                <button euiButton euiBasicButton euiPrimary euiSizeS (buttonClick)=\"onToggleOpen()\">\n                    <eui-icon-svg icon=\"eui-chevron-up\" />\n                    {{ nbSubCommentItems }} {{ (nbSubCommentItems > 1 ? 'eui.ANSWERS' : 'eui.ANSWER') | translate }}\n                </button>\n            }\n            <ul>\n                <ng-content></ng-content>\n            </ul>\n        } @else {\n            <button euiButton euiBasicButton euiPrimary euiSizeS (buttonClick)=\"onToggleOpen()\">\n                <eui-icon-svg icon=\"eui-chevron-down\" />\n                {{ nbSubCommentItems }} {{ (nbSubCommentItems > 1 ? 'eui.ANSWERS' : 'eui.ANSWER') | translate }}\n            </button>\n        }\n    </div>\n}\n\n@if (textareaPosition === 'bottom' && hasTextarea) {\n    <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n}\n\n<ng-template #control>\n    <eui-comment-textarea\n        [currentAuthorAvatarUrl]=\"currentAuthorAvatarUrl\"\n        [placeholder]=\"placeholder | translate\"\n        (commentCancel)=\"onCommentCancel()\"\n        (commentSend)=\"onCommentSend($event)\" />\n</ng-template>\n", styles: [".eui-21 :host.eui-comment-thread ul{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item{margin-bottom:var(--eui-s-3xs)}.eui-21 :host.eui-comment-item .comment-item__row{align-items:center;display:flex;width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container{padding-left:var(--eui-s-3xs);width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment{padding-left:var(--eui-s-3xl)}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-source{display:none}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-actions{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item .comment-item__sub-comment-list{list-style:none;padding:0;margin:0}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host.eui-comment-textarea .comment-form{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: EuiCommentTextareaComponent, selector: "eui-comment-textarea", inputs: ["currentAuthorAvatarUrl", "placeholder"], outputs: ["commentCancel", "commentSend"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiCommentThreadComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-comment-thread', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        TranslateModule,
                        NgTemplateOutlet,
                        ...EUI_BUTTON,
                        ...EUI_ICON,
                        EuiCommentTextareaComponent,
                    ], template: "@if (textareaPosition === 'top' && hasTextarea) {\n    <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n}\n\n@if (nbSubCommentItems > 0) {\n    <div class=\"expander-container\">\n        @if (isOpen) {\n            @if (isCollapsable) {\n                <button euiButton euiBasicButton euiPrimary euiSizeS (buttonClick)=\"onToggleOpen()\">\n                    <eui-icon-svg icon=\"eui-chevron-up\" />\n                    {{ nbSubCommentItems }} {{ (nbSubCommentItems > 1 ? 'eui.ANSWERS' : 'eui.ANSWER') | translate }}\n                </button>\n            }\n            <ul>\n                <ng-content></ng-content>\n            </ul>\n        } @else {\n            <button euiButton euiBasicButton euiPrimary euiSizeS (buttonClick)=\"onToggleOpen()\">\n                <eui-icon-svg icon=\"eui-chevron-down\" />\n                {{ nbSubCommentItems }} {{ (nbSubCommentItems > 1 ? 'eui.ANSWERS' : 'eui.ANSWER') | translate }}\n            </button>\n        }\n    </div>\n}\n\n@if (textareaPosition === 'bottom' && hasTextarea) {\n    <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n}\n\n<ng-template #control>\n    <eui-comment-textarea\n        [currentAuthorAvatarUrl]=\"currentAuthorAvatarUrl\"\n        [placeholder]=\"placeholder | translate\"\n        (commentCancel)=\"onCommentCancel()\"\n        (commentSend)=\"onCommentSend($event)\" />\n</ng-template>\n", styles: [".eui-21 :host.eui-comment-thread ul{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item{margin-bottom:var(--eui-s-3xs)}.eui-21 :host.eui-comment-item .comment-item__row{align-items:center;display:flex;width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container{padding-left:var(--eui-s-3xs);width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment{padding-left:var(--eui-s-3xl)}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-source{display:none}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-actions{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item .comment-item__sub-comment-list{list-style:none;padding:0;margin:0}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host.eui-comment-textarea .comment-form{width:100%}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], placeholder: [{
                type: Input
            }], textareaPosition: [{
                type: Input
            }], hasTextarea: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], currentAuthorAvatarUrl: [{
                type: Input
            }], isOpen: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isCollapsable: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], commentCancel: [{
                type: Output
            }], commentSend: [{
                type: Output
            }], subCommentItems: [{
                type: ContentChildren,
                args: [EuiCommentItemComponent]
            }] } });

/**
 * @description
 * Container component for right-aligned action buttons within a comment item.
 * Provides a designated area for actions like edit, delete, reply, or other comment-specific operations.
 * Content is projected via ng-content allowing flexible composition of action buttons.
 * Automatically applies appropriate positioning and spacing for right-aligned actions.
 * Used within eui-comment-item to organize action controls.
 *
 * @usageNotes
 * ```html
 * <eui-comment-item [authorName]="'John Doe'">
 *   Comment text here
 *   <eui-comment-item-right-actions>
 *     <button euiIconButton euiBasicButton icon="eui-edit"></button>
 *     <button euiIconButton euiBasicButton icon="eui-delete"></button>
 *   </eui-comment-item-right-actions>
 * </eui-comment-item>
 * ```
 *
 * ### Accessibility
 * - Ensure projected buttons have proper ARIA labels or accessible text
 * - Icon buttons should include `aria-label` attributes for screen readers
 * - Maintain logical tab order for keyboard navigation
 *
 * ### Notes
 * - Must be used as a child of `eui-comment-item` component
 * - Accepts any content via content projection (buttons, dropdowns, etc.)
 * - Automatically positioned in the top-right corner of the comment header
 * - Commonly used for edit, delete, flag, or more actions menu
 */
class EuiCommentItemRightActionsComponent {
    get cssClasses() {
        return ['eui-comment-item-right-actions'].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiCommentItemRightActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiCommentItemRightActionsComponent, isStandalone: true, selector: "eui-comment-item-right-actions", host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<ng-content />\n", styles: [".eui-21 :host.eui-comment-thread ul{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item{margin-bottom:var(--eui-s-3xs)}.eui-21 :host.eui-comment-item .comment-item__row{align-items:center;display:flex;width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container{padding-left:var(--eui-s-3xs);width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment{padding-left:var(--eui-s-3xl)}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-source{display:none}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-actions{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item .comment-item__sub-comment-list{list-style:none;padding:0;margin:0}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host.eui-comment-textarea .comment-form{width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiCommentItemRightActionsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-comment-item-right-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [".eui-21 :host.eui-comment-thread ul{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item{margin-bottom:var(--eui-s-3xs)}.eui-21 :host.eui-comment-item .comment-item__row{align-items:center;display:flex;width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container{padding-left:var(--eui-s-3xs);width:100%}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment{padding-left:var(--eui-s-3xl)}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-source{display:none}.eui-21 :host.eui-comment-item .comment-item__row .comment-item__content-container .comment .comment-actions{list-style:none;padding:0;margin:0}.eui-21 :host.eui-comment-item .comment-item__sub-comment-list{list-style:none;padding:0;margin:0}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .comment-item__row,.eui-21 :host-context(.eui-comment-item) ::ng-deep .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item .eui-comment-item>li .expander-container{padding-left:2rem}.eui-21 :host.eui-comment-textarea .comment-form{width:100%}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }] } });

const EUI_COMMENT_THREAD = [
    EuiCommentThreadComponent,
    EuiCommentItemComponent,
    EuiCommentTextareaComponent,
    EuiCommentItemRightActionsComponent,
];

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

export { EUI_COMMENT_THREAD, EuiCommentItemComponent, EuiCommentItemRightActionsComponent, EuiCommentTextareaComponent, EuiCommentThreadComponent };
//# sourceMappingURL=eui-components-eui-comment-thread.mjs.map
