ca-components 2.1.152 → 2.1.161

package/lib/components/ca-right-side-panel/components/ca-right-side-panel-company/ca-right-side-panel-company.component.html

@@ -1,1214 +0,0 @@
-@if (_company) {
-    <div class="company-container">
-        <div class="company-name-container d-flex justify-content-between">
-            <div class="company-name">
-                <p class="company-name-text ca-font-extra-bold">
-                    {{ _company.name }}
-                </p>
-            </div>
-            <div class="company-edit-container d-flex">
-                <svg-icon
-                    class="company-edit-icon d-flex align-items-center justify-content-center svg-size-18"
-                    [src]="'ic_edit' | caSvg: 'right-side-panel'"
-                ></svg-icon>
-                @if (companyIsDivision) {
-                    <svg-icon
-                        class="company-delete-icon d-flex align-items-center justify-content-center svg-size-18"
-                        [src]="'ic_delete' | caSvg: 'right-side-panel'"
-                    ></svg-icon>
-                }
-            </div>
-        </div>
-        <div class="company-logo-container">
-            @if (_company?.logoFile?.url) {
-                <img
-                    [src]="_company?.logoFile?.url"
-                    [alt]="_company.logoFile?.fileName?.substring(0, 1)"
-                    class="sp-company-logo-img"
-                />
-            } @else {
-                <div class="company-no-logo-container">
-                    <div
-                        class="company-no-logo d-flex align-items-center"
-                        [ngClass]="fontSizeLogo"
-                    >
-                        {{ _company?.name }}
-                    </div>
-                </div>
-            }
-        </div>
-
-        <div class="company-info-container">
-            @if (_company?.phone) {
-                <ng-container
-                    *ngTemplateOutlet="
-                        companyInfoTemplate;
-                        context: {
-                            title: CompanyInfoTitle.PHONE,
-                            icon: 'ic_phone' | caSvg: 'input',
-                            text: _company?.phone,
-                        }
-                    "
-                >
-                </ng-container>
-            }
-
-            @if (_company?.fax) {
-                <ng-container
-                    *ngTemplateOutlet="
-                        companyInfoTemplate;
-                        context: {
-                            title: CompanyInfoTitle.FAX,
-                            icon: 'ic_fax' | caSvg: 'right-side-panel',
-                            text: _company?.fax,
-                        }
-                    "
-                >
-                </ng-container>
-            }
-            @if (_company?.email) {
-                <ng-container
-                    *ngTemplateOutlet="
-                        companyInfoTemplate;
-                        context: {
-                            title: CompanyInfoTitle.EMAIL,
-                            icon: 'ic_email' | caSvg: 'input',
-                            text: _company?.email,
-                        }
-                    "
-                >
-                </ng-container>
-            }
-            @if (_company?.webUrl) {
-                <ng-container
-                    *ngTemplateOutlet="
-                        companyInfoTemplate;
-                        context: {
-                            title: CompanyInfoTitle.WEBSITE,
-                            icon: 'ic_website' | caSvg: 'right-side-panel',
-                            text: _company?.webUrl,
-                        }
-                    "
-                >
-                </ng-container>
-            }
-            @if (_company?.address) {
-                <div
-                    class="company-info-item-container d-flex justify-content-between"
-                >
-                    <div class="company-info-item d-flex">
-                        <svg-icon
-                            class="company-info-icon d-flex justify-content-center svg-size-14"
-                            [src]="'ic_address' | caSvg: 'right-side-panel'"
-                        ></svg-icon>
-                        <div>
-                            <div
-                                class="address-first-container d-flex justify-content-between"
-                            >
-                                <p class="company-info-text">
-                                    {{ firstPartAddress }}
-                                </p>
-                                <div
-                                    ngbTooltip
-                                    [mainCaTooltip]="
-                                        textCopied ===
-                                        _company?.address?.address
-                                            ? 'Copied'
-                                            : 'Copy'
-                                    "
-                                    position="bottom"
-                                    [tooltipBackground]="
-                                        textCopied ===
-                                        _company?.address?.address
-                                            ? '#0B49D1'
-                                            : '#424242'
-                                    "
-                                    tooltipColor="#FFFFFF"
-                                    tooltipTextAlign="center"
-                                >
-                                    <svg-icon
-                                        class="company-info-icon info-icon-copy svg-size-12"
-                                        [src]="
-                                            'ic_copy'
-                                                | caSvg: 'right-side-panel'
-                                        "
-                                        (click)="
-                                            copyText(
-                                                $event,
-                                                _company?.address?.address ?? ''
-                                            )
-                                        "
-                                    ></svg-icon>
-                                </div>
-                            </div>
-                            <p class="company-info-text">
-                                {{ secondPartAddress }}
-                            </p>
-                        </div>
-                    </div>
-                    <p class="company-info-title-text">
-                        {{ CompanyInfoTitle.ADDRESS }}
-                    </p>
-                </div>
-            }
-        </div>
-        <div class="horizontal-line"></div>
-
-        <div class="company-info-container pt-8-custom">
-            @if (_company?.usDot) {
-                <div
-                    class="company-info-item-container d-flex justify-content-between align-items-center"
-                >
-                    <div class="company-info-item d-flex">
-                        <p class="company-info-text ca-font-bold">
-                            {{ _company?.usDot }}
-                        </p>
-                        <div
-                            ngbTooltip
-                            [mainCaTooltip]="
-                                textCopied === _company?.usDot
-                                    ? 'Copied'
-                                    : 'Copy'
-                            "
-                            position="bottom"
-                            [tooltipBackground]="
-                                textCopied === _company?.usDot
-                                    ? '#0B49D1'
-                                    : '#424242'
-                            "
-                            tooltipColor="#FFFFFF"
-                            tooltipTextAlign="center"
-                        >
-                            <svg-icon
-                                class="company-info-icon info-icon-copy svg-size-12"
-                                [src]="'ic_copy' | caSvg: 'right-side-panel'"
-                                (click)="
-                                    copyText($event, _company?.usDot ?? '')
-                                "
-                            ></svg-icon>
-                        </div>
-                    </div>
-                    <p class="company-info-title-text">
-                        {{ CompanyInfoTitle.USDOT }}
-                    </p>
-                </div>
-            }
-            @if (_company?.ein) {
-                <div
-                    class="company-info-item-container d-flex justify-content-between align-items-center"
-                >
-                    <div class="company-info-item d-flex">
-                        <p class="company-info-text ca-font-bold">
-                            {{ _company?.ein }}
-                        </p>
-                        <div
-                            ngbTooltip
-                            [mainCaTooltip]="
-                                textCopied === _company?.ein ? 'Copied' : 'Copy'
-                            "
-                            position="bottom"
-                            [tooltipBackground]="
-                                textCopied === _company?.ein
-                                    ? '#0B49D1'
-                                    : '#424242'
-                            "
-                            tooltipColor="#FFFFFF"
-                            tooltipTextAlign="center"
-                        >
-                            <svg-icon
-                                class="company-info-icon info-icon-copy svg-size-12"
-                                [src]="'ic_copy' | caSvg: 'right-side-panel'"
-                                (click)="copyText($event, _company?.ein ?? '')"
-                            ></svg-icon>
-                        </div>
-                    </div>
-                    <p class="company-info-title-text">
-                        {{ CompanyInfoTitle.EIN }}
-                    </p>
-                </div>
-            }
-            @if (_company?.ein) {
-                <div
-                    class="company-info-item-container d-flex justify-content-between align-items-center"
-                >
-                    <div class="company-info-item d-flex">
-                        <p class="company-info-text ca-font-bold">
-                            {{ _company?.mc }}
-                        </p>
-                        <div
-                            ngbTooltip
-                            [mainCaTooltip]="
-                                textCopied === _company?.mc ? 'Copied' : 'Copy'
-                            "
-                            position="bottom"
-                            [tooltipBackground]="
-                                textCopied === _company?.mc
-                                    ? '#0B49D1'
-                                    : '#424242'
-                            "
-                            tooltipColor="#FFFFFF"
-                            tooltipTextAlign="center"
-                        >
-                            <svg-icon
-                                class="company-info-icon info-icon-copy svg-size-12"
-                                [src]="'ic_copy' | caSvg: 'right-side-panel'"
-                                (click)="copyText($event, _company?.mc ?? '')"
-                            ></svg-icon>
-                        </div>
-                    </div>
-                    <p class="company-info-title-text">
-                        {{ CompanyInfoTitle.MC }}
-                    </p>
-                </div>
-            }
-        </div>
-        <div class="horizontal-line"></div>
-
-        <div class="company-additional-info-container">
-            <div
-                class="additional-info-title d-flex justify-content-between"
-                (click)="toggleAdditionalInfo()"
-            >
-                <h2
-                    class="additional-info-title-text ca-font-extra-bold"
-                    [ngClass]="{
-                        'additional-info-title-text-hide':
-                            !isAdditionalInfoOpen,
-                    }"
-                >
-                    Additional Info
-                </h2>
-
-                @if (isAdditionalInfoOpen) {
-                    <p
-                        class="additional-info-btn additional-info-btn-hide ca-font-bold"
-                    >
-                        Hide
-                    </p>
-                    <div
-                        class="additional-info-content-container"
-                        [@showHideCardBody]="isAdditionalInfoOpen"
-                    >
-                        @if (_company?.irp) {
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    companyAdditionalInfoTemplate;
-                                    context: {
-                                        title: CompanyInfoTitle.IRP,
-                                        text: _company?.irp,
-                                    }
-                                "
-                            ></ng-container>
-                        }
-
-                        @if (_company?.ifta) {
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    companyAdditionalInfoTemplate;
-                                    context: {
-                                        title: CompanyInfoTitle.IFTA,
-                                        text: _company?.ifta,
-                                    }
-                                "
-                            ></ng-container>
-                        }
-
-                        @if (_company?.toll) {
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    companyAdditionalInfoTemplate;
-                                    context: {
-                                        title: CompanyInfoTitle.TOLL,
-                                        text: _company?.toll,
-                                    }
-                                "
-                            ></ng-container>
-                        }
-
-                        @if (_company?.scac) {
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    companyAdditionalInfoTemplate;
-                                    context: {
-                                        title: CompanyInfoTitle.SCAC,
-                                        text: _company?.scac,
-                                    }
-                                "
-                            ></ng-container>
-                        }
-
-                        @if (_company?.timeZone?.name) {
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    companyAdditionalInfoTemplate;
-                                    context: {
-                                        title: CompanyInfoTitle.TIME_ZONE,
-                                        text: _company?.timeZone?.name,
-                                    }
-                                "
-                            ></ng-container>
-                        }
-
-                        @if (_company?.currency?.name) {
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    companyAdditionalInfoTemplate;
-                                    context: {
-                                        title: CompanyInfoTitle.CURRENCY,
-                                        text: _company?.currency?.name,
-                                    }
-                                "
-                            ></ng-container>
-                        }
-                    </div>
-                } @else {
-                    <p
-                        class="additional-info-btn additional-info-btn-show ca-font-bold"
-                    >
-                        Show
-                    </p>
-                }
-            </div>
-        </div>
-        @if (_company?.departmentContacts?.length) {
-            <div class="horizontal-line"></div>
-            <div class="company-additional-info-container">
-                <div
-                    class="additional-info-title d-flex justify-content-between align-items-center"
-                >
-                    <div
-                        class="additional-info-title-container d-flex align-items-center"
-                        (click)="toggleDepartmentContact()"
-                    >
-                        <h2
-                            class="additional-info-title-text ca-font-extra-bold"
-                            [ngClass]="{
-                                'additional-info-title-text-hide':
-                                    !isDepartmentContactOpen,
-                            }"
-                        >
-                            Department Contact
-                        </h2>
-                        <p
-                            class="additional-info-title-number ca-font-bold d-flex align-items-center justify-content-center"
-                            [ngClass]="{
-                                'additional-info-title-number-hide':
-                                    !isDepartmentContactOpen,
-                            }"
-                        >
-                            {{ _company?.departmentContacts?.length }}
-                        </p>
-                    </div>
-                    @if (isDepartmentContactOpen) {
-                        @if (isPhoneShown) {
-                            <div
-                                ngbTooltip
-                                mainCaTooltip="Email"
-                                position="bottom"
-                                tooltipBackground="#424242"
-                                tooltipColor="#FFFFFF"
-                                tooltipTextAlign="center"
-                            >
-                                <svg-icon
-                                    class="additional-info-icon-first d-flex align-items-center justify-content-center svg-size-18"
-                                    [src]="'ic_email' | caSvg: 'input'"
-                                    (click)="toggleDepartmentContactView()"
-                                ></svg-icon>
-                            </div>
-                        } @else {
-                            <div
-                                ngbTooltip
-                                mainCaTooltip="Phone"
-                                position="bottom"
-                                tooltipBackground="#424242"
-                                tooltipColor="#FFFFFF"
-                                tooltipTextAlign="center"
-                            >
-                                <svg-icon
-                                    class="additional-info-icon-second info-icon-phone d-flex align-items-center justify-content-center svg-size-18"
-                                    [src]="'ic_phone' | caSvg: 'input'"
-                                    (click)="toggleDepartmentContactView()"
-                                ></svg-icon>
-                            </div>
-                        }
-                    } @else {
-                        <p
-                            class="additional-info-btn additional-info-btn-show ca-font-bold"
-                            (click)="toggleDepartmentContact()"
-                        >
-                            Show
-                        </p>
-                    }
-                </div>
-                @if (isDepartmentContactOpen) {
-                    <div
-                        class="additional-info-content-container"
-                        [@showHideCardBody]="isDepartmentContactOpen"
-                    >
-                        @for (
-                            contact of _company?.departmentContacts;
-                            let indx = $index;
-                            track indx
-                        ) {
-                            <div
-                                class="company-info-item-container d-flex justify-content-between align-items-center"
-                            >
-                                @if (isPhoneShown) {
-                                    <div class="company-info-item d-flex">
-                                        <svg-icon
-                                            class="company-info-icon d-flex align-items-center justify-content-center svg-size-14"
-                                            [src]="'ic_phone' | caSvg: 'input'"
-                                        ></svg-icon>
-                                        <p class="company-info-text">
-                                            {{ contact.phone }}
-                                            @if (contact.extensionPhone) {
-                                                <span class="extension-phone"
-                                                    >x{{
-                                                        contact.extensionPhone
-                                                    }}</span
-                                                >
-                                            }
-                                        </p>
-                                        <div
-                                            ngbTooltip
-                                            [mainCaTooltip]="
-                                                textCopied === contact.phone
-                                                    ? 'Copied'
-                                                    : 'Copy'
-                                            "
-                                            position="bottom"
-                                            [tooltipBackground]="
-                                                textCopied === contact.phone
-                                                    ? '#0B49D1'
-                                                    : '#424242'
-                                            "
-                                            tooltipColor="#FFFFFF"
-                                            tooltipTextAlign="center"
-                                        >
-                                            <svg-icon
-                                                class="company-info-icon info-icon-copy svg-size-12"
-                                                [src]="
-                                                    'ic_copy'
-                                                        | caSvg
-                                                            : 'right-side-panel'
-                                                "
-                                                (click)="
-                                                    copyText(
-                                                        $event,
-                                                        contact?.phone ?? ''
-                                                    )
-                                                "
-                                            ></svg-icon>
-                                        </div>
-                                    </div>
-                                    <p class="company-info-title-text">
-                                        {{ contact?.department?.name }}
-                                    </p>
-                                } @else {
-                                    <div class="company-info-item d-flex">
-                                        <svg-icon
-                                            class="company-info-icon d-flex align-items-center justify-content-center svg-size-14"
-                                            [src]="'ic_email' | caSvg: 'input'"
-                                        ></svg-icon>
-                                        <p class="company-info-text">
-                                            {{ contact.email }}
-                                        </p>
-                                        <div
-                                            ngbTooltip
-                                            [mainCaTooltip]="
-                                                textCopied === contact.email
-                                                    ? 'Copied'
-                                                    : 'Copy'
-                                            "
-                                            position="bottom"
-                                            [tooltipBackground]="
-                                                textCopied === contact.email
-                                                    ? '#0B49D1'
-                                                    : '#424242'
-                                            "
-                                            tooltipColor="#FFFFFF"
-                                            tooltipTextAlign="center"
-                                        >
-                                            <svg-icon
-                                                class="company-info-icon info-icon-copy svg-size-12"
-                                                [src]="
-                                                    'ic_copy'
-                                                        | caSvg
-                                                            : 'right-side-panel'
-                                                "
-                                                (click)="
-                                                    copyText(
-                                                        $event,
-                                                        contact?.email ?? ''
-                                                    )
-                                                "
-                                            ></svg-icon>
-                                        </div>
-                                    </div>
-                                    <p class="company-info-title-text">
-                                        {{ contact?.department?.name }}
-                                    </p>
-                                }
-                            </div>
-                        }
-                    </div>
-                }
-            </div>
-        }
-        @if (_company?.bankAccounts?.length) {
-            <div class="horizontal-line"></div>
-            <div class="company-additional-info-container">
-                <div
-                    class="additional-info-title d-flex justify-content-between align-items-center"
-                >
-                    <div
-                        class="additional-info-title-container d-flex align-items-center"
-                        (click)="toggleBankAccount()"
-                    >
-                        <h2
-                            class="additional-info-title-text ca-font-extra-bold"
-                            [ngClass]="{
-                                'additional-info-title-text-hide':
-                                    !isBankAccountOpen,
-                            }"
-                        >
-                            Bank Account
-                        </h2>
-                        <p
-                            class="additional-info-title-number ca-font-bold d-flex align-items-center justify-content-center"
-                            [ngClass]="{
-                                'additional-info-title-number-hide':
-                                    !isDepartmentContactOpen,
-                            }"
-                        >
-                            {{ _company?.bankAccounts?.length }}
-                        </p>
-                    </div>
-                    @if (isBankAccountOpen) {
-                        @if (isRoutingShown) {
-                            <div
-                                ngbTooltip
-                                mainCaTooltip="Account"
-                                position="bottom"
-                                tooltipBackground="#424242"
-                                tooltipColor="#FFFFFF"
-                                tooltipTextAlign="center"
-                            >
-                                <svg-icon
-                                    class="additional-info-icon-first d-flex align-items-center justify-content-center svg-size-18"
-                                    [src]="'ic_password' | caSvg: 'input'"
-                                    (click)="toggleBankAccountView()"
-                                ></svg-icon>
-                            </div>
-                        } @else {
-                            <div
-                                ngbTooltip
-                                mainCaTooltip="Routing"
-                                position="bottom"
-                                tooltipBackground="#424242"
-                                tooltipColor="#FFFFFF"
-                                tooltipTextAlign="center"
-                            >
-                                <svg-icon
-                                    class="additional-info-icon-second info-icon-phone d-flex align-items-center justify-content-center svg-size-18"
-                                    [src]="
-                                        'ic_bank_account'
-                                            | caSvg: 'right-side-panel'
-                                    "
-                                    (click)="toggleBankAccountView()"
-                                ></svg-icon>
-                            </div>
-                        }
-                    } @else {
-                        <p
-                            class="additional-info-btn additional-info-btn-show ca-font-bold"
-                            (click)="toggleDepartmentContact()"
-                        >
-                            Show
-                        </p>
-                    }
-                </div>
-                @if (isBankAccountOpen) {
-                    <div
-                        class="additional-info-content-container"
-                        [@showHideCardBody]="isBankAccountOpen"
-                    >
-                        @for (
-                            account of _company?.bankAccounts;
-                            let indx = $index;
-                            track indx
-                        ) {
-                            <div
-                                class="company-info-item-container d-flex justify-content-between align-items-center"
-                            >
-                                @if (isRoutingShown) {
-                                    <div class="company-info-item d-flex">
-                                        <div
-                                            ngbTooltip
-                                            mainCaTooltip="Routing"
-                                            position="bottom"
-                                            tooltipBackground="#424242"
-                                            tooltipColor="#FFFFFF"
-                                            tooltipTextAlign="center"
-                                        >
-                                            <svg-icon
-                                                class="company-info-icon info-icon-routing d-flex align-items-center justify-content-center svg-size-14"
-                                                [src]="
-                                                    'ic_bank_account'
-                                                        | caSvg
-                                                            : 'right-side-panel'
-                                                "
-                                            ></svg-icon>
-                                        </div>
-                                        <p class="company-info-text">
-                                            {{ account.routing }}
-                                        </p>
-                                        <div
-                                            ngbTooltip
-                                            [mainCaTooltip]="
-                                                textCopied === account.routing
-                                                    ? 'Copied'
-                                                    : 'Copy'
-                                            "
-                                            position="bottom"
-                                            [tooltipBackground]="
-                                                textCopied === account.routing
-                                                    ? '#0B49D1'
-                                                    : '#424242'
-                                            "
-                                            tooltipColor="#FFFFFF"
-                                            tooltipTextAlign="center"
-                                        >
-                                            <svg-icon
-                                                class="company-info-icon info-icon-copy svg-size-12"
-                                                [src]="
-                                                    'ic_copy'
-                                                        | caSvg
-                                                            : 'right-side-panel'
-                                                "
-                                                (click)="
-                                                    copyText(
-                                                        $event,
-                                                        account?.routing ?? ''
-                                                    )
-                                                "
-                                            ></svg-icon>
-                                        </div>
-                                    </div>
-                                    <p class="company-info-title-text">
-                                        {{ account?.bank?.name }}
-                                    </p>
-                                } @else {
-                                    <div class="company-info-item d-flex">
-                                        @if (
-                                            !isAccountVisible(
-                                                account?.account ?? ''
-                                            )
-                                        ) {
-                                            <div
-                                                ngbTooltip
-                                                mainCaTooltip="Show Account"
-                                                position="bottom"
-                                                tooltipBackground="#424242"
-                                                tooltipColor="#FFFFFF"
-                                                tooltipTextAlign="center"
-                                            >
-                                                <svg-icon
-                                                    class="company-info-icon info-icon-account d-flex align-items-center justify-content-center svg-size-14"
-                                                    [src]="
-                                                        'ic_eye-visible'
-                                                            | caSvg: 'input'
-                                                    "
-                                                    (click)="
-                                                        toggleAccountVisibility(
-                                                            account?.account ??
-                                                                ''
-                                                        )
-                                                    "
-                                                ></svg-icon>
-                                            </div>
-                                        } @else {
-                                            <div
-                                                ngbTooltip
-                                                mainCaTooltip="Hide Account"
-                                                position="bottom"
-                                                tooltipBackground="#424242"
-                                                tooltipColor="#FFFFFF"
-                                                tooltipTextAlign="center"
-                                            >
-                                                <svg-icon
-                                                    class="company-info-icon info-icon-account-hide d-flex align-items-center justify-content-center svg-size-14"
-                                                    [src]="
-                                                        'ic_eye-icon'
-                                                            | caSvg
-                                                                : 'telematic-map-list'
-                                                    "
-                                                    (click)="
-                                                        toggleAccountVisibility(
-                                                            account?.account ??
-                                                                ''
-                                                        )
-                                                    "
-                                                ></svg-icon>
-                                            </div>
-                                        }
-
-                                        <p class="company-info-text">
-                                            {{
-                                                account?.account ?? ''
-                                                    | hideAccount
-                                                        : 'account'
-                                                        : accountVisibility[
-                                                              account?.account ??
-                                                                  ''
-                                                          ] || false
-                                            }}
-                                        </p>
-                                        <div
-                                            ngbTooltip
-                                            [mainCaTooltip]="
-                                                textCopied === account.account
-                                                    ? 'Copied'
-                                                    : 'Copy'
-                                            "
-                                            position="bottom"
-                                            [tooltipBackground]="
-                                                textCopied === account.account
-                                                    ? '#0B49D1'
-                                                    : '#424242'
-                                            "
-                                            tooltipColor="#FFFFFF"
-                                            tooltipTextAlign="center"
-                                        >
-                                            <svg-icon
-                                                class="company-info-icon info-icon-copy"
-                                                svg-size-12
-                                                [src]="
-                                                    'ic_copy'
-                                                        | caSvg
-                                                            : 'right-side-panel'
-                                                "
-                                                (click)="
-                                                    copyText(
-                                                        $event,
-                                                        account?.account ?? ''
-                                                    )
-                                                "
-                                            ></svg-icon>
-                                        </div>
-                                    </div>
-                                    <p class="company-info-title-text">
-                                        {{ account?.bank?.name }}
-                                    </p>
-                                }
-                            </div>
-                        }
-                    </div>
-                }
-            </div>
-        }
-        @if (_company?.bankCards?.length) {
-            <div class="horizontal-line"></div>
-            <div class="company-additional-info-container">
-                <div
-                    class="additional-info-title d-flex justify-content-between align-items-center"
-                >
-                    <div
-                        class="additional-info-title-container d-flex align-items-center"
-                        (click)="toggleBankCard()"
-                    >
-                        <h2
-                            class="additional-info-title-text ca-font-extra-bold"
-                            [ngClass]="{
-                                'additional-info-title-text-hide':
-                                    !isBankCardOpen,
-                            }"
-                        >
-                            Bank Card
-                        </h2>
-                        <p
-                            class="additional-info-title-number ca-font-bold d-flex align-items-center justify-content-center"
-                            [ngClass]="{
-                                'additional-info-title-number-hide':
-                                    !isBankCardOpen,
-                            }"
-                        >
-                            {{ _company?.bankCards?.length }}
-                        </p>
-                    </div>
-                    @if (isBankCardOpen) {
-                        @if (isCardShown) {
-                            <div
-                                ngbTooltip
-                                mainCaTooltip="Account"
-                                position="bottom"
-                                tooltipBackground="#424242"
-                                tooltipColor="#FFFFFF"
-                                tooltipTextAlign="center"
-                            >
-                                <svg-icon
-                                    class="additional-info-icon-first d-flex align-items-center justify-content-center svg-size-18"
-                                    [src]="'ic_password' | caSvg: 'input'"
-                                    (click)="toggleBankCardView()"
-                                ></svg-icon>
-                            </div>
-                        } @else {
-                            <div
-                                ngbTooltip
-                                mainCaTooltip="Card no."
-                                position="bottom"
-                                tooltipBackground="#424242"
-                                tooltipColor="#FFFFFF"
-                                tooltipTextAlign="center"
-                            >
-                                <svg-icon
-                                    class="additional-info-icon-second info-icon-phone d-flex align-items-center justify-content-center svg-size-18"
-                                    [src]="
-                                        'ic_fuel_card'
-                                            | caSvg: 'right-side-panel'
-                                    "
-                                    (click)="toggleBankCardView()"
-                                ></svg-icon>
-                            </div>
-                        }
-                    } @else {
-                        <p
-                            class="additional-info-btn additional-info-btn-show ca-font-bold"
-                            (click)="toggleBankCard()"
-                        >
-                            Show
-                        </p>
-                    }
-                </div>
-                @if (isBankCardOpen) {
-                    <div
-                        class="additional-info-content-container"
-                        [@showHideCardBody]="isBankCardOpen"
-                    >
-                        @for (
-                            card of _company?.bankCards;
-                            let indx = $index;
-                            track indx
-                        ) {
-                            <div
-                                class="company-info-item-container d-flex justify-content-between align-items-center"
-                            >
-                                @if (isCardShown) {
-                                    <div
-                                        class="company-info-item d-flex justify-content-between"
-                                    >
-                                        @if (!isCardVisible(card?.card ?? '')) {
-                                            <div
-                                                ngbTooltip
-                                                mainCaTooltip="Show Card"
-                                                position="bottom"
-                                                tooltipBackground="#424242"
-                                                tooltipColor="#FFFFFF"
-                                                tooltipTextAlign="center"
-                                            >
-                                                <svg-icon
-                                                    class="company-info-icon info-icon-account info-icon-show-card svg-size-14"
-                                                    [src]="
-                                                        'ic_eye-visible'
-                                                            | caSvg: 'input'
-                                                    "
-                                                    (click)="
-                                                        toggleCardVisibility(
-                                                            card?.card ?? ''
-                                                        )
-                                                    "
-                                                ></svg-icon>
-                                                <svg-icon
-                                                    class="company-info-icon info-icon-account-hide info-icon-card-type svg-size-14"
-                                                    [src]="
-                                                        card.cardType
-                                                            | bankCardTypesPipe
-                                                            | caSvg
-                                                                : 'right-side-panel'
-                                                    "
-                                                    (click)="
-                                                        toggleCvcVisibility(
-                                                            card?.cvc ?? ''
-                                                        )
-                                                    "
-                                                ></svg-icon>
-                                            </div>
-                                        } @else {
-                                            <div
-                                                ngbTooltip
-                                                mainCaTooltip="Hide Card"
-                                                position="bottom"
-                                                tooltipBackground="#424242"
-                                                tooltipColor="#FFFFFF"
-                                                tooltipTextAlign="center"
-                                            >
-                                                <svg-icon
-                                                    class="company-info-icon info-icon-account-hide info-icon-show-card svg-size-14"
-                                                    [src]="
-                                                        'ic_eye-icon'
-                                                            | caSvg
-                                                                : 'telematic-map-list'
-                                                    "
-                                                    (click)="
-                                                        toggleCardVisibility(
-                                                            card?.card ?? ''
-                                                        )
-                                                    "
-                                                ></svg-icon>
-                                                <svg-icon
-                                                    class="company-info-icon info-icon-account-hide info-icon-card-type svg-size-14"
-                                                    [src]="
-                                                        card.cardType
-                                                            | bankCardTypesPipe
-                                                            | caSvg
-                                                                : 'right-side-panel'
-                                                    "
-                                                ></svg-icon>
-                                            </div>
-                                        }
-
-                                        <p class="company-info-text">
-                                            {{
-                                                card.card
-                                                    | hideAccount
-                                                        : 'card'
-                                                        : cardVisibility[
-                                                              card?.card ?? ''
-                                                          ] || false
-                                            }}
-                                        </p>
-                                        <div
-                                            ngbTooltip
-                                            [mainCaTooltip]="
-                                                textCopied === card.card
-                                                    ? 'Copied'
-                                                    : 'Copy'
-                                            "
-                                            position="bottom"
-                                            [tooltipBackground]="
-                                                textCopied === card.card
-                                                    ? '#0B49D1'
-                                                    : '#424242'
-                                            "
-                                            tooltipColor="#FFFFFF"
-                                            tooltipTextAlign="center"
-                                        >
-                                            <svg-icon
-                                                class="company-info-icon info-icon-copy svg-size-12"
-                                                [src]="
-                                                    'ic_copy'
-                                                        | caSvg
-                                                            : 'right-side-panel'
-                                                "
-                                                (click)="
-                                                    copyText(
-                                                        $event,
-                                                        card?.card ?? ''
-                                                    )
-                                                "
-                                            ></svg-icon>
-                                        </div>
-                                    </div>
-
-                                    <p class="company-info-title-text">
-                                        {{ card.nickname }}
-                                    </p>
-                                } @else {
-                                    <div
-                                        class="company-info-item d-flex justify-content-between"
-                                    >
-                                        @if (!isCvcVisible(card?.cvc ?? '')) {
-                                            <div
-                                                ngbTooltip
-                                                mainCaTooltip="Show Cvc"
-                                                position="bottom"
-                                                tooltipBackground="#424242"
-                                                tooltipColor="#FFFFFF"
-                                                tooltipTextAlign="center"
-                                            >
-                                                <svg-icon
-                                                    class="company-info-icon info-icon-account info-icon-show-card svg-size-14"
-                                                    [src]="
-                                                        'ic_eye-visible'
-                                                            | caSvg: 'input'
-                                                    "
-                                                    (click)="
-                                                        toggleCvcVisibility(
-                                                            card?.cvc ?? ''
-                                                        )
-                                                    "
-                                                ></svg-icon>
-                                                <svg-icon
-                                                    class="company-info-icon info-icon-account-hide info-icon-card-type svg-size-14"
-                                                    [src]="
-                                                        card.cardType
-                                                            | bankCardTypesPipe
-                                                            | caSvg
-                                                                : 'right-side-panel'
-                                                    "
-                                                ></svg-icon>
-                                            </div>
-                                        } @else {
-                                            <div
-                                                ngbTooltip
-                                                mainCaTooltip="Hide Cvc"
-                                                position="bottom"
-                                                tooltipBackground="#424242"
-                                                tooltipColor="#FFFFFF"
-                                                tooltipTextAlign="center"
-                                            >
-                                                <svg-icon
-                                                    class="company-info-icon info-icon-account-hide info-icon-show-card svg-size-14"
-                                                    [src]="
-                                                        'ic_eye-icon'
-                                                            | caSvg
-                                                                : 'telematic-map-list'
-                                                    "
-                                                    (click)="
-                                                        toggleCvcVisibility(
-                                                            card?.cvc ?? ''
-                                                        )
-                                                    "
-                                                ></svg-icon>
-
-                                                <svg-icon
-                                                    class="company-info-icon info-icon-account-hide info-icon-card-type svg-size-14"
-                                                    [src]="
-                                                        card.cardType
-                                                            | bankCardTypesPipe
-                                                            | caSvg
-                                                                : 'right-side-panel'
-                                                    "
-                                                ></svg-icon>
-                                            </div>
-                                        }
-
-                                        <p class="company-info-text">
-                                            {{
-                                                card?.cvc ?? ''
-                                                    | hideAccount
-                                                        : 'cvc'
-                                                        : cvcVisibility[
-                                                              card?.cvc ?? ''
-                                                          ] || false
-                                            }}
-                                        </p>
-                                        <div
-                                            ngbTooltip
-                                            [mainCaTooltip]="
-                                                textCopied === card.cvc
-                                                    ? 'Copied'
-                                                    : 'Copy'
-                                            "
-                                            position="bottom"
-                                            [tooltipBackground]="
-                                                textCopied === card.cvc
-                                                    ? '#0B49D1'
-                                                    : '#424242'
-                                            "
-                                            tooltipColor="#FFFFFF"
-                                            tooltipTextAlign="center"
-                                        >
-                                            <svg-icon
-                                                class="company-info-icon info-icon-copy svg-size-12"
-                                                [src]="
-                                                    'ic_copy'
-                                                        | caSvg
-                                                            : 'right-side-panel'
-                                                "
-                                                (click)="
-                                                    copyText(
-                                                        $event,
-                                                        card?.cvc ?? ''
-                                                    )
-                                                "
-                                            ></svg-icon>
-                                        </div>
-                                    </div>
-                                    <p class="company-info-title-text">
-                                        {{ card.nickname }}
-                                    </p>
-                                }
-                            </div>
-                        }
-                    </div>
-                }
-            </div>
-        }
-
-        <ng-template
-            #companyInfoTemplate
-            let-title="title"
-            let-icon="icon"
-            let-text="text"
-        >
-            <div
-                class="company-info-item-container d-flex justify-content-between align-items-center"
-            >
-                <div class="company-info-item d-flex">
-                    <svg-icon
-                        class="company-info-icon d-flex align-items-center justify-content-center svg-size-14"
-                        [src]="icon"
-                    ></svg-icon>
-                    <p class="company-info-text">{{ text }}</p>
-                    <div
-                        ngbTooltip
-                        [mainCaTooltip]="
-                            textCopied === text ? 'Copied' : 'Copy'
-                        "
-                        position="bottom"
-                        [tooltipBackground]="
-                            textCopied === text ? '#0B49D1' : '#424242'
-                        "
-                        tooltipColor="#FFFFFF"
-                        tooltipTextAlign="center"
-                    >
-                        <svg-icon
-                            class="company-info-icon info-icon-copy svg-size-12"
-                            [src]="'ic_copy' | caSvg: 'right-side-panel'"
-                            (click)="copyText($event, text ?? '')"
-                        ></svg-icon>
-                    </div>
-                </div>
-                <p class="company-info-title-text">
-                    {{ title }}
-                </p>
-            </div>
-        </ng-template>
-
-        <ng-template
-            #companyAdditionalInfoTemplate
-            let-title="title"
-            let-text="text"
-        >
-            <div
-                class="company-info-item-container d-flex justify-content-between align-items-center"
-            >
-                <div class="company-info-item d-flex">
-                    <p class="company-info-text">{{ text }}</p>
-                    <div
-                        ngbTooltip
-                        [mainCaTooltip]="
-                            textCopied === text ? 'Copied' : 'Copy'
-                        "
-                        position="bottom"
-                        [tooltipBackground]="
-                            textCopied === text ? '#0B49D1' : '#424242'
-                        "
-                        tooltipColor="#FFFFFF"
-                        tooltipTextAlign="center"
-                    >
-                        <svg-icon
-                            class="company-info-icon info-icon-copy svg-size-12"
-                            [src]="'ic_copy' | caSvg: 'right-side-panel'"
-                            (click)="copyText($event, text ?? '')"
-                        ></svg-icon>
-                    </div>
-                </div>
-                <p class="company-info-title-text">
-                    {{ title }}
-                </p>
-            </div>
-        </ng-template>
-    </div>
-}