ca-components 2.1.152 → 2.1.161

package/lib/components/ca-comments/ca-comments.component.html

@@ -1,695 +0,0 @@
-@let sortedComments = _comments | caSortComments: sortDirection : isDarkmode;
-@let searchTerm = searchCommentFormControl.value;
-@let searchedComments =
-    sortedComments | caHighlightComment: searchTerm : isDarkmode;
-@let searchContentCount = searchedComments?.length;
-@let hasSearchContent = !!searchContentCount;
-
-@if (isDarkmode) {
-    @let isPopoverOpen = popover?.isOpen();
-
-    <div
-        #popover="ngbPopover"
-        class="w-26 h-26 d-flex justify-content-center align-items-center c-pointer br-2"
-        autoClose="outside"
-        [ngbPopover]="dropdownPopover"
-        [popoverClass]="'popover-main'"
-        [placement]="ePosition.BOTTOM_RIGHT"
-        [container]="'body'"
-        [ngClass]="
-            isPopoverOpen
-                ? 'active background-black'
-                : 'background-hover-dark-2 svg-hover-black'
-        "
-    >
-        <div
-            class="position-relative d-flex justify-content-center align-items-center m-auto"
-            ngbTooltip
-            [tooltipBackground]="eColor.BLACK"
-            [tooltipColor]="eColor.WHITE"
-            [mainCaTooltip]="eSharedString.COMMENT"
-            [position]="ePosition.BOTTOM"
-        >
-            <span
-                class="comments-count z-0 position-absolute text-size-9 ca-font-semi-bold"
-                [ngClass]="
-                    isPopoverOpen ? 'text-color-black-2' : 'text-color-white'
-                "
-            >
-                {{ commentCount }}
-            </span>
-
-            <svg-icon
-                class="svg-size-18"
-                [ngClass]="isPopoverOpen ? 'svg-fill-white-4' : 'svg-fill-grey'"
-                [src]="sharedSvgRoutes.COMMENT_ICON"
-            ></svg-icon>
-        </div>
-    </div>
-} @else {
-    <ng-container *ngTemplateOutlet="commentsTemplate"></ng-container>
-}
-
-<ng-template #commentsTemplate>
-    @let tooltipBackground = isDarkmode ? eColor.LIGHT_GREY : eColor.BLACK;
-    @let tooltipColor = isDarkmode ? eColor.DARK_GREY : eColor.WHITE;
-
-    <div
-        class="comments-container br-3"
-        [class.p-4]="!isModal"
-        [class.background-black-2]="isDarkmode"
-        [style]="{
-            width: isDarkmode ? '260px' : '100%',
-            'max-height': isDarkmode ? '306px' : '100%',
-        }"
-    >
-        <div class="d-flex flex-column">
-            @let isHiddenSort = (!isDarkmode && !_comments.length) || isModal;
-
-            @if (!isHiddenSort) {
-                <div class="d-flex" [ngStyle]="{ order: isDarkmode ? 0 : 2 }">
-                    <div class="w-100" [class.h-32]="!isDarkmode">
-                        <div
-                            class="d-flex justify-content-between align-items-center"
-                            [class.m-t-4]="!isDarkmode"
-                        >
-                            <div
-                                class="d-flex justify-content-center align-items-center ca-font-extra-bold font-size-11 m-x-4"
-                            >
-                                @let title =
-                                    (isDarkmode
-                                        ? eSharedString.COMMENT
-                                        : eGeneralActions.SORT_BY
-                                    ) | uppercase;
-                                @let resultTitle =
-                                    searchContentCount +
-                                        eStringPlaceholder.WHITESPACE +
-                                        eSharedString.RESULTS | uppercase;
-
-                                <span
-                                    class="m-y-2 m-r-4"
-                                    [class]="
-                                        isDarkmode
-                                            ? 'text-color-white'
-                                            : 'text-color-grey'
-                                    "
-                                    >{{
-                                        searchTerm && !isDarkmode
-                                            ? resultTitle
-                                            : title
-                                    }}
-                                </span>
-
-                                @if (isDarkmode) {
-                                    <span
-                                        class="d-flex align-items-center justify-content-center min-w-18 h-18 text-color-white br-60 background-black p-x-5"
-                                        >{{ commentCount }}
-                                    </span>
-                                }
-                            </div>
-
-                            @if (_comments.length) {
-                                @let sortByColorClass =
-                                    isDarkmode
-                                        ? 'text-color-white'
-                                        : 'text-color-black';
-
-                                <div
-                                    class="d-flex justify-content-center align-items-center p-l-6 br-2"
-                                    [class]="
-                                        isDarkmode
-                                            ? 'background-hover-black'
-                                            : 'background-hover-bw2'
-                                    "
-                                    #sortByTooltip="ngbTooltip"
-                                    ngbTooltip
-                                    [tooltipBackground]="tooltipBackground"
-                                    [tooltipColor]="tooltipColor"
-                                    [mainCaTooltip]="eGeneralActions.SORT_BY"
-                                    [position]="ePosition.BOTTOM"
-                                >
-                                    <span
-                                        class="text-size-14 ca-font-medium m-r-4"
-                                        [ngClass]="sortByColorClass"
-                                    >
-                                        {{ eSharedString.DATE }}
-                                    </span>
-
-                                    @let isDescending =
-                                        sortDirection === eSharedString.DSC;
-                                    @let animationStateSort =
-                                        sortDirection === eSharedString.DSC
-                                            ? eAnimationState.DEFAULT
-                                            : eAnimationState.ROTATED;
-                                    @let sortTooltipText =
-                                        isDescending
-                                            ? eSharedString.DESCENDING
-                                            : eSharedString.ASCENDING;
-
-                                    <div
-                                        class="h-18 w-18 d-flex justify-content-center align-items-center background-hover-blue-21 svg-hover-blue-17 br-1 c-pointer"
-                                        ngbTooltip
-                                        [tooltipBackground]="tooltipBackground"
-                                        [tooltipColor]="tooltipColor"
-                                        [mainCaTooltip]="sortTooltipText"
-                                        [position]="ePosition.BOTTOM"
-                                        (shown)="sortByTooltip?.close()"
-                                        (click)="onToggleSort()"
-                                    >
-                                        <svg-icon
-                                            class="d-flex svg-size-14 svg-fill-blue-13"
-                                            [src]="
-                                                'arrow_sort'
-                                                    | caSvg
-                                                        : eSharedString.COMMON_LOWERCASE
-                                            "
-                                            [class.svg-fill-blue-13]="
-                                                commentCount
-                                            "
-                                            [@rotatedState]="animationStateSort"
-                                        ></svg-icon>
-                                    </div>
-                                </div>
-                            }
-                        </div>
-
-                        @if (!isDarkmode) {
-                            <div
-                                class="w-100 h-1 background-bw-9 margin-2"
-                            ></div>
-                        }
-                    </div>
-                </div>
-            }
-
-            <div [ngStyle]="{ order: 1 }">
-                <ng-content></ng-content>
-            </div>
-
-            @if (isSearchDisplayed && _comments.length) {
-                <div
-                    class="search d-flex align-items-center justify-content-start background-black background-hover-grey-2 m-y-4 br-2"
-                    [class.search-dark]="isDarkmode"
-                    [ngStyle]="{ order: isDarkmode ? 2 : 0 }"
-                >
-                    <div
-                        class="d-flex align-items-center justify-content-center margin-4"
-                    >
-                        <svg-icon
-                            class="d-flex svg-size-14 svg-fill-light-grey-2 c-pointer"
-                            [src]="
-                                'search' | caSvg: eSharedString.COMMON_LOWERCASE
-                            "
-                        ></svg-icon>
-                    </div>
-                    <div
-                        class="divider w-1 background-light-gray-2 m-y-3 m-r-4"
-                    ></div>
-                    <div
-                        class="w-100 d-flex align-items-center justify-content-center"
-                    >
-                        @let searchPlaceholder =
-                            isDarkmode ? 'Find Title' : 'Find Comment';
-
-                        <input
-                            class="w-100 background-transparent text-size-11 m-r-2 p-2"
-                            [placeholder]="searchPlaceholder"
-                            minlength="1"
-                            required
-                            [formControl]="searchCommentFormControl"
-                        />
-
-                        @let iconColor =
-                            isDarkmode ? 'svg-fill-bw-9' : 'svg-fill-black-2';
-                        <div
-                            class="cancel-search h-14 w-14 d-flex justify-content-center align-items-center br-1 margin-4 c-pointer"
-                            (mousedown)="onClearSearch($event)"
-                        >
-                            <svg-icon
-                                class="d-flex svg-size-7"
-                                [class]="[iconColor]"
-                                [src]="
-                                    'ic_x'
-                                        | caSvg: eSharedString.COMMON_LOWERCASE
-                                "
-                            ></svg-icon>
-                        </div>
-                    </div>
-                </div>
-            }
-        </div>
-
-        <!-- text-color-blue-19 text-hover-white  -->
-        @if (isDarkmode) {
-            <div class="w-100 h-1 background-black br-1 m-t-4"></div>
-
-            <div
-                class="d-flex justify-content-between align-items-center background-hover-blue-21 svg-hover-blue-17 c-pointer br-2 m-t-4"
-                (click)="onAddNewComment()"
-            >
-                <span
-                    class="text-size-11 text-color-white ca-font-bold p-y-4 p-x-4 text-uppercase"
-                    >New Comment
-                </span>
-
-                <div
-                    class="h-14 w-14 d-flex justify-content-center align-items-center margin-6 svg-fill-blue-13"
-                >
-                    <svg-icon
-                        class="d-flex svg-size-14 c-pointer"
-                        [src]="
-                            'ic_plus' | caSvg: eSharedString.COMMON_LOWERCASE
-                        "
-                    ></svg-icon>
-                </div>
-            </div>
-        }
-
-        @if (_comments.length) {
-            <div
-                class="comments-wrapper c-pointer"
-                [style]="{
-                    'max-height': isDarkmode
-                        ? '210px'
-                        : isModal
-                          ? '148px'
-                          : '100%',
-                }"
-            >
-                @if (hasSearchContent) {
-                    @for (
-                        comment of searchedComments;
-                        let index = $index;
-                        track index
-                    ) {
-                        @let isCommentExpanded =
-                            comment?.id === commentExpanded?.id;
-                        @let isEditMode = comment?.id === commentAddOrEdit?.id;
-                        @let companyUser = comment?.companyUser;
-                        @let isCurrentUser =
-                            companyUser | caIsCurrentUser: _currentUser;
-                        <div
-                            class="comment p-x-4 p-y-2 m-t-2 br-2"
-                            [class]="{
-                                'background-black-2': isDarkmode,
-                                'background-hover-black':
-                                    !isEditMode && isDarkmode,
-                                'background-bw-9': isEditMode && isDarkmode,
-                                'background-hover-bw2':
-                                    !isEditMode && !isDarkmode,
-                                'background-black-3': isEditMode && !isDarkmode,
-                            }"
-                        >
-                            <div class="position-relative">
-                                <div
-                                    class="d-flex justify-content-between align-items-center p-t-1"
-                                >
-                                    <div
-                                        class="d-flex justify-content-start align-items-center"
-                                    >
-                                        <!-- TODO Change colors or something -->
-                                        @let companyUserFullname =
-                                            (companyUser?.fullName ||
-                                                companyUser?.name) ??
-                                            eStringPlaceholder.EMPTY;
-
-                                        @let nameInitials =
-                                            companyUserFullname | nameInitials;
-                                        <app-ca-profile-image
-                                            [avatarColor]="{
-                                                background: '#DFC2F9',
-                                                color: '#9E47EC66',
-                                            }"
-                                            [avatarImg]="
-                                                companyUser?.avatarFile?.url
-                                            "
-                                            [textShortName]="nameInitials"
-                                            [isRound]="!comment.isDriver"
-                                            [size]="22"
-                                        ></app-ca-profile-image>
-                                        <div
-                                            class="m-x-4 m-y-2 text-size-11"
-                                        >
-                                            <div>
-                                                <span
-                                                    class="ca-font-semi-bold"
-                                                    [class]="{
-                                                        'text-color-black':
-                                                            isEditMode &&
-                                                            isDarkmode,
-                                                        'text-color-white':
-                                                            (!isEditMode &&
-                                                                isDarkmode) ||
-                                                            (isEditMode &&
-                                                                !isDarkmode),
-                                                    }"
-                                                    [innerHtml]="
-                                                        companyUserFullname
-                                                            | caHighlightSingleString
-                                                                : searchTerm
-                                                            | safeHtml
-                                                    "
-                                                >
-                                                    {{
-                                                        companyUserFullname
-                                                    }}</span
-                                                >
-                                                @let youOrMe =
-                                                    isDarkmode
-                                                        ? '(Me)'
-                                                        : '(You)';
-                                                @let orange =
-                                                    isDarkmode
-                                                        ? 'text-color-orange-3'
-                                                        : 'text-color-orange-2';
-                                                @if (
-                                                    isCurrentUser && !isEditMode
-                                                ) {
-                                                    <span
-                                                        class="ca-font-bold m-x-4"
-                                                        [class]="orange"
-                                                        >{{ youOrMe }}</span
-                                                    >
-                                                }
-                                            </div>
-                                            <div
-                                                class="text-size-11 text-color-grey"
-                                            >
-                                                @if (isEditMode) {
-                                                    @if (comment?.isNew) {
-                                                        New Comment
-                                                    } @else {
-                                                        Edit Comment
-                                                    }
-                                                } @else {
-                                                    <span>{{
-                                                        comment.createdAt
-                                                            | dateFromStringPipe
-                                                                : eDateTimeFormats.DATE_TIME
-                                                    }}</span>
-                                                    @if (comment?.isEdited) {
-                                                        @let editedTextColor =
-                                                            isDarkmode
-                                                                ? 'text-color-blue-19'
-                                                                : 'text-color-blue-13';
-
-                                                        <span
-                                                            class="ca-font-medium m-l-4"
-                                                            [ngClass]="
-                                                                editedTextColor
-                                                            "
-                                                        >
-                                                            • Edited
-                                                        </span>
-                                                    }
-                                                }
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div
-                                        class="d-flex justify-content-start align-items-center"
-                                    >
-                                        @if (isEditMode) {
-                                            @let backgroundHover =
-                                                isDarkmode
-                                                    ? 'background-hover-black'
-                                                    : 'background-hover-white';
-                                            @let iconFill =
-                                                isDarkmode
-                                                    ? 'svg-fill-bw-9'
-                                                    : 'svg-fill-black-9';
-                                            @let actionClasses =
-                                                [
-                                                    'background-grey',
-                                                    backgroundHover,
-                                                    iconFill,
-                                                ];
-                                            <div
-                                                class="icon-hover h-18 w-18 d-flex justify-content-center align-items-center br-1 m-x-2"
-                                                ngbTooltip
-                                                [tooltipBackground]="
-                                                    tooltipBackground
-                                                "
-                                                [tooltipColor]="tooltipColor"
-                                                [mainCaTooltip]="
-                                                    eGeneralActions.CONFIRM
-                                                "
-                                                [position]="ePosition.TOP"
-                                                [class]="actionClasses"
-                                                (click)="
-                                                    confirmComment(comment)
-                                                "
-                                            >
-                                                <svg-icon
-                                                    class="d-flex svg-size-12 c-pointer"
-                                                    [src]="
-                                                        'ic_confirm'
-                                                            | caSvg
-                                                                : eSharedString.COMMON_LOWERCASE
-                                                    "
-                                                ></svg-icon>
-                                            </div>
-                                            <div
-                                                class="icon-hover h-18 w-18 d-flex justify-content-center align-items-center br-1 m-x-2"
-                                                ngbTooltip
-                                                [tooltipBackground]="
-                                                    tooltipBackground
-                                                "
-                                                [tooltipColor]="tooltipColor"
-                                                [mainCaTooltip]="
-                                                    eGeneralActions.CANCEL
-                                                "
-                                                [position]="ePosition.TOP"
-                                                [class]="actionClasses"
-                                                (click)="
-                                                    clearCommentAddOrEdit()
-                                                "
-                                            >
-                                                <svg-icon
-                                                    class="d-flex svg-size-10 c-pointer"
-                                                    [src]="
-                                                        'ic_x'
-                                                            | caSvg
-                                                                : eSharedString.COMMON_LOWERCASE
-                                                    "
-                                                ></svg-icon>
-                                            </div>
-                                        } @else {
-                                            @if (isCurrentUser) {
-                                                @let iconHoverFill =
-                                                    isDarkmode
-                                                        ? 'svg-hover-bw-9'
-                                                        : 'svg-hover-black';
-                                                @let iconBackgroundHover =
-                                                    isDarkmode
-                                                        ? 'background-hover-grey-2'
-                                                        : 'background-hover-dark-2';
-
-                                                <div
-                                                    class="action-icon h-18 w-18 justify-content-center align-items-center br-1 m-x-2"
-                                                    ngbTooltip
-                                                    [tooltipBackground]="
-                                                        tooltipBackground
-                                                    "
-                                                    [tooltipColor]="
-                                                        tooltipColor
-                                                    "
-                                                    [mainCaTooltip]="
-                                                        eGeneralActions.EDIT
-                                                    "
-                                                    [position]="ePosition.TOP"
-                                                    [class]="[
-                                                        'svg-fill-grey',
-                                                        iconHoverFill,
-                                                        iconBackgroundHover,
-                                                    ]"
-                                                    (click)="
-                                                        onEditComment(comment)
-                                                    "
-                                                >
-                                                    <svg-icon
-                                                        class="d-flex svg-size-12 c-pointer"
-                                                        [src]="
-                                                            'ic_edit'
-                                                                | caSvg
-                                                                    : eSharedString.COMMON_LOWERCASE
-                                                        "
-                                                    ></svg-icon>
-                                                </div>
-                                                @let trashIconBackground =
-                                                    isDarkmode
-                                                        ? 'background-hover-grey-2'
-                                                        : 'background-hover-red-15';
-                                                @let trashIconHover =
-                                                    isDarkmode
-                                                        ? 'svg-hover-bw-9'
-                                                        : 'svg-hover-red-14';
-                                                <div
-                                                    class="action-icon h-18 w-18 justify-content-center align-items-center br-1 m-x-2"
-                                                    ngbTooltip
-                                                    [tooltipBackground]="
-                                                        tooltipBackground
-                                                    "
-                                                    [tooltipColor]="
-                                                        tooltipColor
-                                                    "
-                                                    [mainCaTooltip]="
-                                                        eGeneralActions.DELETE
-                                                    "
-                                                    [position]="ePosition.TOP"
-                                                    [class]="[
-                                                        'svg-fill-grey',
-                                                        trashIconBackground,
-                                                        trashIconHover,
-                                                    ]"
-                                                    (click)="
-                                                        onDeleteComment(comment)
-                                                    "
-                                                >
-                                                    <svg-icon
-                                                        class="d-flex svg-size-12 c-pointer"
-                                                        [src]="
-                                                            'ic_trash'
-                                                                | caSvg
-                                                                    : eSharedString.COMMON_LOWERCASE
-                                                        "
-                                                    ></svg-icon>
-                                                </div>
-                                            }
-                                            @if (isDarkmode) {
-                                                @let animationStateArrow =
-                                                    isCommentExpanded
-                                                        ? eAnimationState.ROTATED
-                                                        : eAnimationState.DEFAULT;
-                                                @let tooltipText =
-                                                    isCommentExpanded
-                                                        ? eGeneralActions.COLLAPSE
-                                                        : eGeneralActions.EXPAND;
-                                                <div
-                                                    class="action-icon h-18 w-18 justify-content-center align-items-center background-hover-grey-2 m-l-2 br-1"
-                                                    ngbTooltip
-                                                    [tooltipBackground]="
-                                                        tooltipBackground
-                                                    "
-                                                    [tooltipColor]="
-                                                        tooltipColor
-                                                    "
-                                                    [mainCaTooltip]="
-                                                        tooltipText
-                                                    "
-                                                    [position]="ePosition.TOP"
-                                                    (click)="
-                                                        onExpandComment(comment)
-                                                    "
-                                                >
-                                                    <svg-icon
-                                                        class="d-flex svg-size-12 svg-hover-bw-9 c-pointer"
-                                                        [src]="
-                                                            'ic_arrow_down'
-                                                                | caSvg
-                                                                    : eSharedString.COMMON_LOWERCASE
-                                                        "
-                                                        [class.svg-fill-white]="
-                                                            isCommentExpanded
-                                                        "
-                                                        [@rotatedState]="
-                                                            animationStateArrow
-                                                        "
-                                                    ></svg-icon>
-                                                </div>
-                                            }
-                                        }
-                                    </div>
-                                </div>
-                                @let isExpanded =
-                                    isCommentExpanded || !isDarkmode;
-                                @let commentHeight =
-                                    isExpanded ? 'auto' : '18px';
-
-                                @if (isEditMode) {
-                                    <div>
-                                        <textarea
-                                            class="w-100 background-transparent text-color-black text-size-11 p-x-2"
-                                            placeholder="Write comment"
-                                            maxlength="112"
-                                            [class]="
-                                                isDarkmode
-                                                    ? 'text-color-black'
-                                                    : 'text-color-white'
-                                            "
-                                            [formControl]="
-                                                commentContentFormControl
-                                            "
-                                        ></textarea>
-                                    </div>
-                                } @else {
-                                    <div
-                                        class="text-size-11 p-x-2"
-                                        [class]="{
-                                            'text-color-black':
-                                                isEditMode && isDarkmode,
-                                            'text-color-white':
-                                                (!isEditMode && isDarkmode) ||
-                                                (isEditMode && !isDarkmode),
-                                            'h-18': !isExpanded,
-                                        }"
-                                        [innerHtml]="
-                                            comment?.commentContent ??
-                                                eStringPlaceholder.EMPTY
-                                                | safeHtml
-                                        "
-                                        [ngStyle]="{
-                                            height: commentHeight,
-                                        }"
-                                        [class.comment-content]="!isExpanded"
-                                    ></div>
-                                }
-                            </div>
-                        </div>
-                    }
-                } @else {
-                    @if (isDarkmode) {
-                        <div
-                            class="w-100 d-flex justify-content-center align-items-center background-black p-y-15 m-t-4"
-                        >
-                            <span class="text-color-bw6-2 ca-font-extra-bold">
-                                No Results
-                            </span>
-                        </div>
-                    }
-                }
-            </div>
-        } @else {
-            @let emptyStateContainerClass =
-                isDarkmode ? 'h-80 background-black' : 'h-160';
-            @let subtleIllustrationTextClass =
-                isDarkmode
-                    ? 'text-size-20 text-color-bw6-2 ca-font-extra-bold'
-                    : 'text-size-28 text-color-bw-9 ca-font-bold text-uppercase';
-            @let emptyStateTextClass =
-                isDarkmode
-                    ? 'text-size-20 text-color-bw6-2 ca-font-extra-bold'
-                    : 'text-size-28 text-color-bw-9';
-            @let emptyStateText = isDarkmode ? 'Empty State' : '(Empty State)';
-
-            <div
-                class="d-flex flex-column align-items-center justify-content-center w-100 m-t-4"
-                [ngClass]="emptyStateContainerClass"
-            >
-                <div
-                    class="text-center"
-                    [ngClass]="subtleIllustrationTextClass"
-                >
-                    Subtle Illustration
-                </div>
-                <div class="text-center" [ngClass]="emptyStateTextClass">
-                    {{ emptyStateText }}
-                </div>
-            </div>
-        }
-    </div>
-</ng-template>
-
-<ng-template #dropdownPopover>
-    <ng-container *ngTemplateOutlet="commentsTemplate"></ng-container>
-</ng-template>