import { AsyncPipe, NgClass, NgForOf, NgIf, isPlatformBrowser } from '@angular/common';
import { Component, EventEmitter, HostListener, Inject, Input, Output, PLATFORM_ID, ViewChild, } from '@angular/core';
import { NavBarUrlsVM, } from '@testlocallibrary/shared-kernel/models/view-models';
import { AppsUrlLinksConst, AppsNavBarDataConst } from '@testlocallibrary/shared-kernel/models/constants';
import { CurrencyEnum, LocalStorageKeysEnum } from '@testlocallibrary/shared-kernel/models/enums';
import { LanguageEnum } from '@testlocallibrary/shared-kernel/models/enums';
import * as i0 from "@angular/core";
import * as i1 from "@testlocallibrary/shared-kernel/services/routing";
import * as i2 from "@testlocallibrary/shared-kernel/services/language";
import * as i3 from "@testlocallibrary/shared-kernel/services/local-storage";
import * as i4 from "@testlocallibrary/shared-kernel/services/nav-bar";
export class NavBarComponent {
    constructor(renderer, routingService, languageService, localStorage, navBarService, platformId) {
        this.renderer = renderer;
        this.routingService = routingService;
        this.languageService = languageService;
        this.localStorage = localStorage;
        this.navBarService = navBarService;
        this.platformId = platformId;
        this.navBarContentVM = [];
        this.cartCount$ = undefined;
        this.isCartVisible = false;
        this.isCurrencyVisible = false;
        this.isLanguageVisible = false;
        this.isSignInVisible = false;
        this.isLinkUrlActive = '';
        this.navBarUrlsVM = new NavBarUrlsVM();
        this.language = new EventEmitter();
        this.currency = new EventEmitter();
        this.currentLanguage = "";
        this.currentCurrency = "";
        this.menuClicked = false;
        this.appsUrlLinks = AppsUrlLinksConst;
        this.LanguageEnum = LanguageEnum;
        this.egp = CurrencyEnum.egp;
        this.usd = CurrencyEnum.usd;
        this.signOut = new EventEmitter();
        this.signIn = new EventEmitter();
        this.isLoggedIn = false;
        this.clientInfo = {};
        this.appsNavBarDataConstWhite = this.navBarService.setNavBarContent(AppsNavBarDataConst.white);
        this.appsNavBarDataConstRed = this.navBarService.setNavBarContent(AppsNavBarDataConst.red);
        this.appsNavBarDataConstYellow = this.navBarService.setNavBarContent(AppsNavBarDataConst.yellow);
        this.appsNavBarDataConstBlue = this.navBarService.setNavBarContent(AppsNavBarDataConst.blue);
        this.appsNavBarDataConstLdc = this.navBarService.setNavBarContent(AppsNavBarDataConst.ldc);
        this.hrefUrl = this.routingService.getRouterName('contactUs');
        this.isBrowser = isPlatformBrowser(platformId);
        if (this.getIsLoggedIn()) {
            this.clientInfo = JSON.parse(this.localStorage.getFromLocalStorage(LocalStorageKeysEnum.clientDetails));
            this.isLoggedIn = true;
        }
    }
    ngOnInit() {
        this.currentLanguage = this.languageService.getLanguage();
        this.currentCurrency = this.localStorage.getFromLocalStorage(LocalStorageKeysEnum.Currency) ?? CurrencyEnum.egp;
        // if (this.getIsLoggedIn()) {
        //   this.clientInfo = JSON.parse(
        //     this.localStorage.getFromLocalStorage(LocalStorageKeysEnum.clientDetails)
        //     );
        //     this.isLoggedIn=true
        // }
    }
    getIsLoggedIn() {
        return JSON.parse(this.localStorage.getFromLocalStorage(LocalStorageKeysEnum.clientDetails)) != null;
    }
    onWindowScroll() {
        if (this.isBrowser) {
            const scrollTop = window.scrollY ||
                document.documentElement.scrollTop ||
                document.body.scrollTop ||
                0;
            if (scrollTop > 20) {
                this.renderer.addClass(this.neubar?.nativeElement, 'fix-sticky');
                this.renderer.addClass(this.neubar?.nativeElement, 'shadow-sm');
            }
            else {
                this.renderer.removeClass(this.neubar?.nativeElement, 'fix-sticky');
                this.renderer.removeClass(this.neubar?.nativeElement, 'shadow-sm');
            }
        }
    }
    changeLanguage(language) {
        this.language.emit(language);
    }
    changeCurrency(currency) {
        this.currentCurrency = currency;
        this.currency.emit(currency);
    }
    isLinkActive(link) {
        return this.isLinkUrlActive === link;
    }
    routeToClientArea() {
        if (this.isBrowser) {
            window.location.href = this.navBarUrlsVM.clientAreaUrl;
        }
    }
    onSignOutClicked() {
        this.signOut.emit();
    }
    onSignInClicked() {
        this.signIn.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavBarComponent, deps: [{ token: i0.Renderer2 }, { token: i1.RoutingService }, { token: i2.LanguageService }, { token: i3.LocalStorageService }, { token: i4.NavBarService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NavBarComponent, isStandalone: true, selector: "lib-nav-bar", inputs: { navBarContentVM: "navBarContentVM", cartCount$: "cartCount$", isCartVisible: "isCartVisible", isCurrencyVisible: "isCurrencyVisible", isLanguageVisible: "isLanguageVisible", isSignInVisible: "isSignInVisible", isLinkUrlActive: "isLinkUrlActive", navBarUrlsVM: "navBarUrlsVM", isLoggedIn: "isLoggedIn", clientInfo: "clientInfo" }, outputs: { language: "language", currency: "currency", signOut: "signOut", signIn: "signIn" }, host: { listeners: { "window:scroll": "onWindowScroll()" } }, viewQueries: [{ propertyName: "neubar", first: true, predicate: ["navbarRef"], descendants: true }], ngImport: i0, template: "<header class=\"d-none d-lg-block\">\r\n  <!---- change below class to change the color from theme1:5 -->\r\n  <!--- Tabs -->\r\n  <!--- NAV -->\r\n  <div class=\"tab-content\" id=\"myTabContent\">\r\n    <div class=\"tab-pane show active\">\r\n      <nav\r\n        #navbarRef\r\n        class=\"navbar navbar-expand-sm w-100 main-navigation py-2\"\r\n        id=\"neubar\"\r\n      >\r\n        <div class=\"container\" [ngClass]=\"{'py-2':isSignInVisible,'py-3':!isSignInVisible}\">\r\n          <a class=\"navbar-brand\" [href]=\"'/'+currentLanguage+'/'\"\r\n          [id]=\" 'link-data-center-log-' + currentLanguage\"\r\n            ><img\r\n              src=\"assets/images/logo-primary.webp\"\r\n              alt=\"Header LDC Logo\"\r\n              height=\"30\"\r\n            />\r\n          </a>\r\n          <div class=\"d-lg-flex w-100 pb-3 pb-lg-0 align-items-center\" id=\"navbarNavDropdown\">\r\n            <ul *ngFor=\"let data of navBarContentVM\" class=\"navbar-nav\">\r\n              <li\r\n                class=\"nav-item dropdown\"\r\n                [ngClass]=\"{\r\n                  'become-a-reseller': data.title == 'Become a Reseller'\r\n                }\"\r\n              >\r\n                <a\r\n                  class=\"nav-link dropdown-toggle\"\r\n                  [id]=\"data!.title + '-' + currentLanguage\"\r\n                  type=\"button\"\r\n                  [ngClass]=\"{\r\n                    'become-a-reseller-link': data.title == 'Become a Reseller'\r\n                  }\"\r\n                  [attr.data-bs-toggle]=\"\r\n                    data!.links.length > 0 ? 'dropdown' : null\r\n                  \"\r\n                  aria-expanded=\"false\"\r\n                  [href]=\"data!.url != '' ? data!.url : undefined\"\r\n                  >{{ data!.title }}\r\n                  <i\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                    class=\"icon-expand_more\"\r\n                  ></i>\r\n                </a>\r\n                <ul\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                  class=\"dropdown-menu shadow-sm rounded-0 border-0\"\r\n                  aria-labelledby=\"navbarDropdownMenuLink\"\r\n                >\r\n                  <li *ngFor=\"let link of data!.links\">\r\n                    <a class=\"dropdown-item\"\r\n                    [id]=\"link.name+'-'+currentLanguage\"\r\n                    href=\"{{ link.url }}\">{{\r\n                      link.name\r\n                    }}</a>\r\n                  </li>\r\n                </ul>\r\n              </li>\r\n            </ul>\r\n            <div class=\"d-flex align-items-center ActiveColor ms-auto\">\r\n              <div class=\"Currency\" *ngIf=\"isCurrencyVisible\">\r\n                <a\r\n                  class=\"dropdown-toggle\"\r\n                  role=\"button\"\r\n                  id=\"dropdownUserLinks\"\r\n                  data-bs-toggle=\"dropdown\"\r\n                  aria-expanded=\"false\"\r\n                  \r\n                  ><i class=\"icon-Currency\" aria-label=\"currency switcher\" [id]=\"'currency-switcher-' + currentLanguage\"></i\r\n                ></a>\r\n                <div class=\"dropdown language-dropdown\">\r\n                  <ul\r\n                    class=\"dropdown-menu dropdown-menu-custom shadow-sm mt-3\"\r\n                    aria-labelledby=\"dropdownCurrencyLinks\"\r\n                  >\r\n                    <li>\r\n                      <a \r\n                      id=\"eg-currency\"\r\n                      class=\"dropdown-item\" (click)=\"changeCurrency(egp)\"\r\n                        >EGP</a\r\n                      >\r\n                    </li>\r\n                    <li>\r\n                      <a \r\n                      id=\"usd-currency\"\r\n                      class=\"dropdown-item\" (click)=\"changeCurrency(usd)\"\r\n                        >USD</a\r\n                      >\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </div>\r\n              <div\r\n                *ngIf=\"isCartVisible\"\r\n                class=\"shopping-icon ml-2 position-relative\"\r\n              >\r\n                <a href=\"{{ navBarUrlsVM.cartUrl }}\"\r\n                [id]=\"'cart-' + currentLanguage\"\r\n                >\r\n                  <span class=\"CartNumb\">{{ cartCount$ | async }}</span>\r\n                  <i class=\"icon-cart\" aria-label=\"cart\" [id]=\"'cart-icon-' + currentLanguage\"></i\r\n                ></a>\r\n              </div>\r\n              <div class=\"translate\" *ngIf=\"isLanguageVisible\">\r\n                <a\r\n                  class=\"dropdown-toggle\"\r\n                  role=\"button\"\r\n                  id=\"dropdownLanguageLinks\"\r\n                  data-bs-toggle=\"dropdown\"\r\n                  aria-expanded=\"false\"\r\n                  \r\n                  ><i class=\"icon-language\" aria-label=\"language switcher\"\r\n                  [id]=\"'language-switcher-'+ currentLanguage\"\r\n\r\n                  ></i\r\n                ></a>\r\n                <div class=\"dropdown language-dropdown\">\r\n                  <ul\r\n                    class=\"dropdown-menu dropdown-menu-custom actionsMenu shadow-sm mt-3\"\r\n                    aria-labelledby=\"dropdownUserLinks\"\r\n                  >\r\n                    <li>\r\n                      <a\r\n                      id=\"language-en\"\r\n                        class=\"dropdown-item\"\r\n                        (click)=\"changeLanguage(LanguageEnum.En)\"\r\n                        >English</a\r\n                      >\r\n                    </li>\r\n                    <li>\r\n                      <a\r\n                      id=\"language-ar\"\r\n                        class=\"dropdown-item ar\"\r\n                        (click)=\"changeLanguage(LanguageEnum.Ar)\"\r\n                        >\u0627\u0644\u0639\u0631\u0628\u064A\u0629</a\r\n                      >\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"d-flex UserArea\"> -->\r\n              <div class=\"contact\">\r\n                <a [href]=\"hrefUrl\"\r\n                [id]=\"'contact-us-' + currentLanguage\"\r\n                class=\"d-flex\"\r\n                  ><i class=\"icon-contact\" [id]=\"'contact-us-icon-'+ currentLanguage\"></i>\r\n                  <p class=\"contact-us\"   [id]=\"'contact-us-' + currentLanguage\">Contact Us</p>\r\n                </a>\r\n              </div>\r\n              <!-- </div> -->\r\n              <!---User area desktop-->\r\n              <!----Sign IN -->\r\n              <div class=\"SignIn\" *ngIf=\"!isLoggedIn && isSignInVisible\">\r\n                <a\r\n                  class=\"btn btn-default-custom\"\r\n                  [id]=\"'sign-in-' + currentLanguage\"\r\n                  type=\"button\"\r\n                  (click)=\"onSignInClicked()\"\r\n                  role=\"button\"\r\n                  href=\"{{navBarUrlsVM.loginUrl}}\"\r\n                >\r\n                  Sign In\r\n                </a>\r\n              </div>\r\n              <!----Sign Out -->\r\n              <div class=\"SignOut\" *ngIf=\"isLoggedIn && isSignInVisible\">\r\n                <button\r\n                  class=\"btn btn-default-custom btn-outline\"\r\n                  [id]=\"'client-area-btn-' + currentLanguage\"\r\n                  type=\"button\"\r\n                  (click)=\"routeToClientArea()\"\r\n                >\r\n                  Client Area\r\n                </button>\r\n\r\n                <a\r\n                  class=\"dropdown-toggle signOutLink\"\r\n                  role=\"button\"\r\n                  id=\"dropdownUserLinks\"\r\n                  data-bs-toggle=\"dropdown\"\r\n                  aria-expanded=\"false\"\r\n                >\r\n                  <i class=\"icon-UserActive\"></i>\r\n                  <i class=\"icon-expand_more user-expand-more\"></i>\r\n                </a>\r\n                <div class=\"dropdown\">\r\n                  <ul\r\n                    class=\"dropdown-menu actionsMenu shadow-sm mt-3\"\r\n                    aria-labelledby=\"dropdownUserLinks\"\r\n                  >\r\n                    <li class=\"dropdown-item\">\r\n                      {{clientInfo.fullName}}\r\n                    </li>\r\n                    <li class=\"SignOutArea\">\r\n                      <a\r\n                        class=\"dropdown-item\"\r\n                        [id]=\"'sign-out' + currentLanguage\"\r\n                        (click)=\"onSignOutClicked()\"\r\n                        ><b>Sign Out</b></a\r\n                      >\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </nav>\r\n    </div>\r\n  </div>\r\n</header>\r\n\r\n<!-------MOBIL-->\r\n<div class=\"d-block d-lg-none\">\r\n  <div\r\n    class=\"offcanvas offcanvas-start\"\r\n    tabindex=\"-1\"\r\n    id=\"offcanvas\"\r\n    data-bs-keyboard=\"false\"\r\n    data-bs-backdrop=\"false\"\r\n  >\r\n    <div\r\n      class=\"offcanvas-header MobHead align-items-center mb-0 p-3 ActiveColor\"\r\n    >\r\n      <a class=\"navbar-brand\" href=\"#\"\r\n        ><img\r\n          src=\"assets/images/logo-primary.webp\"\r\n          alt=\"Header LDC Logo\"\r\n          width=\"90\"\r\n      /></a>\r\n      <!----User Area---->\r\n      <div class=\"d-flex ms-auto align-items-center\">\r\n        <div class=\"d-flex align-items-center m-2 topIcon\">\r\n          <button (click)=\"routeToClientArea()\" class=\"btn btn-sm UserBtn user-urls\" type=\"button\" *ngIf=\"isLoggedIn && isSignInVisible\">\r\n            Client Area\r\n          </button>\r\n          <div\r\n            *ngIf=\"isCartVisible\"\r\n            class=\"shopping-icon position-relative ms-3\"\r\n          >\r\n            <a href=\"{{ navBarUrlsVM.cartUrl }} \"   [id]=\"'cart-' + currentLanguage\">\r\n              <span class=\"CartNumb\">{{ cartCount$ | async }}</span>\r\n              <i class=\"icon-cart\" aria-label=\"cart\" [id]=\"'cart-icon-' + currentLanguage\"></i\r\n            ></a>\r\n          </div>\r\n          <div>\r\n            <div class=\"contact-icon mx-3\">\r\n              <a [href]=\"hrefUrl\"\r\n                ><i class=\"icon-contact\"></i\r\n              ></a>\r\n            </div>\r\n          </div>\r\n            <a *ngIf=\"isLoggedIn && isSignInVisible\">\r\n              <i class=\"icon-UserActive\"></i>\r\n            </a>\r\n            <a href=\"#\" *ngIf=\"!isLoggedIn && isSignInVisible\">\r\n              <i class=\"icon-user-outline\"></i>\r\n            </a>\r\n        </div>\r\n        <div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn-close text-reset\"\r\n            data-bs-dismiss=\"offcanvas\"\r\n            aria-label=\"Close\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"offcanvas-body px-0 py-0\">\r\n      <div class=\"accordion\" id=\"mobile-nav\">\r\n        <div class=\"accordion-item\">\r\n          <p class=\"accordion-header\">\r\n            <button\r\n            \r\n              data-bs-collapse-init\r\n              class=\"accordion-button accordion-button-cutom\"\r\n              [class.collapsed]=\"!isLinkActive('ldc')\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"collapse\"\r\n              aria-controls=\"ldc\"\r\n              data-bs-target=\"#ldc\"\r\n            >\r\n              Link Datacenter\r\n            </button>\r\n          </p>\r\n          <div\r\n            id=\"ldc\"\r\n            class=\"accordion-collapse collapse\"\r\n            [class.show]=\"isLinkActive('ldc')\"\r\n            aria-labelledby=\"flush-headingOneX\"\r\n            data-bs-parent=\"#mobile-nav\"\r\n          >\r\n            <div class=\"accordion-body\">\r\n              <ul\r\n                id=\"menu\"><a [href]=\"appsUrlLinks.ldc\" [id]=\"'home-' + currentLanguage\">Home</a></ul>\r\n              <ul\r\n                id=\"menu\"\r\n                \r\n                *ngFor=\"let data of appsNavBarDataConstLdc; index as i\"\r\n              >\r\n             \r\n                <a\r\n                  class=\"sub-list\"\r\n                  [href]=\"data!.url != '' ? data!.url : undefined\"\r\n                  [id]=\"data.title + '-' +currentLanguage\"\r\n                  [attr.data-bs-toggle]=\"\r\n                    data!.links.length > 0 ? 'collapse' : null\r\n                  \"\r\n                  [attr.data-bs-target]=\"\r\n                    data!.links.length > 0 ? '#ldcmenu-' + i : null\r\n                  \"\r\n                >\r\n                  {{ data.title\r\n                  }}<i\r\n                    class=\"icon-expand_more\"\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                  ></i\r\n                ></a>\r\n                <ul\r\n                  class=\"collapse flex-column \"\r\n                  [attr.id]=\"'ldcmenu-' + i\"\r\n                  data-bs-parent=\"#ldc\"\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                >\r\n              \r\n                  <li class=\"w-100\" *ngFor=\"let link of data!.links\">\r\n                    <a href=\"{{ link.url }}\" [id]=\"link.name+'-'+currentLanguage\">{{ link.name }}</a>\r\n                  </li>\r\n                </ul>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"accordion-item\">\r\n          <p class=\"accordion-header\">\r\n            <a\r\n              data-bs-collapse-init\r\n              class=\"accordion-button accordion-button-cutom\"\r\n              [class.collapsed]=\"!isLinkActive('white')\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"collapse\"\r\n              aria-controls=\"white\"\r\n              data-bs-target=\"#white\"\r\n              [id]=\"'business-essentials-' + currentLanguage\"\r\n            >\r\n            Business Essentials\r\n            </a>\r\n          </p>\r\n          <div\r\n            id=\"white\"\r\n            class=\"accordion-collapse collapse\"\r\n            [class.show]=\"isLinkActive('white')\"\r\n            aria-labelledby=\"flush-headingOneX\"\r\n            data-bs-parent=\"#mobile-nav\"\r\n          >\r\n            <div class=\"accordion-body\">\r\n              <ul\r\n                id=\"menu\"><a [href]=\"appsUrlLinks.white\" [id]=\"'white-home-'+ currentLanguage\">Home</a></ul>\r\n              <ul\r\n                id=\"menu\"\r\n                \r\n                *ngFor=\"let data of appsNavBarDataConstWhite; index as i\"\r\n              >\r\n                <a\r\n                  [ngClass]=\"{\r\n                    'become-a-reseller-link': data.title == 'Become a Reseller'\r\n                  }\"\r\n                  class=\"sub-list\"\r\n                  [href]=\"data!.url != '' ? data!.url : undefined\"\r\n                  [id]=\" data.title + '-' + currentLanguage\"\r\n                  [attr.data-bs-toggle]=\"\r\n                    data!.links.length > 0 ? 'collapse' : null\r\n                  \"\r\n                  [attr.data-bs-target]=\"\r\n                    data!.links.length > 0 ? '#whitemenu-' + i : null\r\n                  \"\r\n                >\r\n                  {{ data.title\r\n                  }}<i\r\n                    class=\"icon-expand_more\"\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                  ></i\r\n                ></a>\r\n                <ul\r\n                  class=\"collapse flex-column \"\r\n                  [attr.id]=\"'whitemenu-' + i\"\r\n                  data-bs-parent=\"#white\"\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                >\r\n                  <li class=\"w-100\" *ngFor=\"let link of data!.links\">\r\n                    <a href=\"{{ link.url }} \"  [id]=\"link.name + '-'+ currentLanguage\">{{ link.name }}</a>\r\n                  </li>\r\n                </ul>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"accordion-item\">\r\n          <p class=\"accordion-header\">\r\n            <a\r\n              data-bs-collapse-init\r\n              class=\"accordion-button accordion-button-cutom\"\r\n              [class.collapsed]=\"!isLinkActive('blue')\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"collapse\"\r\n              aria-controls=\"blue\"\r\n              data-bs-target=\"#blue\"\r\n              [id]=\"'managed-services-'+currentLanguage\"\r\n            >\r\n              Managed Services\r\n            </a>\r\n          </p>\r\n          <div\r\n            id=\"blue\"\r\n            class=\"accordion-collapse collapse\"\r\n            [class.show]=\"isLinkActive('blue')\"\r\n            aria-labelledby=\"flush-headingTwoX\"\r\n            data-bs-parent=\"#mobile-nav\"\r\n          >\r\n            <div class=\"accordion-body\">\r\n              <ul\r\n                id=\"menu\"><a [href]=\"appsUrlLinks.blue\" [id]=\"'blue-home' + currentLanguage\">Home</a></ul>\r\n              <ul\r\n                id=\"menu\"\r\n                \r\n                *ngFor=\"let data of appsNavBarDataConstBlue; index as i\"\r\n              >\r\n                <a\r\n                  class=\"sub-list\"\r\n                  [href]=\"data!.url != '' ? data!.url : undefined\"\r\n                  data-bs-toggle=\"collapse\"\r\n                  [attr.data-bs-toggle]=\"data!.links.length > 0 ? 'collapse' : null\"\r\n                  [attr.data-bs-target]=\"data!.links.length > 0 ? '#bluemenu-' + i : null\"\r\n                  [id]=\"data.title + '-'+ currentLanguage\"\r\n                >\r\n                  {{ data.title\r\n                  }}<i\r\n                    class=\"icon-expand_more\"\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                  ></i\r\n                ></a>\r\n                <ul\r\n                  class=\"collapse flex-column \"\r\n                  [attr.id]=\"'bluemenu-' + i\"\r\n                  data-bs-parent=\"#blue\"\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                >\r\n                  <li class=\"w-100\" *ngFor=\"let link of data!.links\">\r\n                    <a href=\"{{ link.url }}\" [id]=\"link.name + '-' + currentLanguage\">{{ link.name }}</a>\r\n                  </li>\r\n                </ul>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n    \r\n        <div class=\"accordion-item\">\r\n          <p class=\"accordion-header\">\r\n            <a\r\n              data-mdb-collapse-init\r\n              class=\"accordion-button accordion-button-cutom\"\r\n              [class.collapsed]=\"!isLinkActive('red')\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"collapse\"\r\n              aria-controls=\"red\"\r\n              data-bs-target=\"#red\"\r\n              [id]=\"'security-services-' + currentLanguage\"\r\n            >\r\n            Security Services\r\n            </a>\r\n          </p>\r\n          <div\r\n            id=\"red\"\r\n            class=\"accordion-collapse collapse\"\r\n            [class.show]=\"isLinkActive('red')\"\r\n            aria-labelledby=\"flush-headingTwoX\"\r\n            data-bs-parent=\"#mobile-nav\"\r\n          >\r\n            <div class=\"accordion-body\">\r\n              <ul\r\n                id=\"menu\"><a [href]=\"appsUrlLinks.red\"   [id]=\"'red-home-' + currentLanguage\">Home</a></ul>\r\n              <ul\r\n                id=\"menu\"\r\n                \r\n                *ngFor=\"let data of appsNavBarDataConstRed; index as i\"\r\n              >\r\n                <a\r\n                  class=\"sub-list\"\r\n                  [href]=\"data!.url != '' ? data!.url : ''\"\r\n                  data-bs-toggle=\"collapse\"\r\n                  [attr.data-bs-toggle]=\"data!.links.length > 0 ? 'collapse' : null\"\r\n                  [attr.data-bs-target]=\"data!.links.length > 0 ? '#redmenu-' + i : null\"\r\n                >\r\n                  {{ data.title\r\n                  }}<i\r\n                    class=\"icon-expand_more\"\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                  ></i\r\n                ></a>\r\n                <ul\r\n                  class=\"collapse flex-column \"\r\n                  [attr.id]=\"'redmenue-' + i\"\r\n                  data-bs-parent=\"#red\"\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                >\r\n                  <li class=\"w-100\" *ngFor=\"let link of data!.links\">\r\n                    <a href=\"{{ link.url }}\"   [id]=\" link.name +'-'+currentLanguage\">{{ link.name }}</a>\r\n                  </li>\r\n                </ul>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"accordion-item\">\r\n          <p class=\"accordion-header\">\r\n            <a\r\n              data-mdb-collapse-init\r\n              class=\"accordion-button accordion-button-cutom\"\r\n              [class.collapsed]=\"!isLinkActive('yellow')\"\r\n              type=\"button\"\r\n              [id]=\"' yellow-business-' + currentLanguage\"\r\n              data-bs-toggle=\"collapse\"\r\n              aria-controls=\"yellow\"\r\n              data-bs-target=\"#yellow\"\r\n            >\r\n            Private Cloud\r\n            </a>\r\n          </p>\r\n          <div\r\n            id=\"yellow\"\r\n            class=\"accordion-collapse collapse\"\r\n            [class.show]=\"isLinkActive('yellow')\"\r\n            aria-labelledby=\"flush-headingTwoX\"\r\n            data-bs-parent=\"#mobile-nav\"\r\n          >\r\n            <div class=\"accordion-body\">\r\n              <ul\r\n                id=\"menu\"><a [href]=\"appsUrlLinks.yellow\" [id]=\" 'yellow-' + currentLanguage\">Home</a></ul>\r\n              <ul\r\n                id=\"menu\"\r\n                \r\n                *ngFor=\"let data of appsNavBarDataConstYellow; index as i\"\r\n              >\r\n                <a\r\n                  class=\"sub-list\"\r\n                  [href]=\"data!.url != '' ? data!.url : ''\"\r\n                  data-bs-toggle=\"collapse\"\r\n                  [attr.data-bs-toggle]=\"data!.links.length > 0 ? 'collapse' : null\"\r\n                  [attr.data-bs-target]=\"data!.links.length > 0 ? '#yellowmenu-' + i : null\"\r\n                >\r\n                  {{ data.title\r\n                  }}<i\r\n                    class=\"icon-expand_more\"\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                  ></i\r\n                ></a>\r\n                <ul\r\n                  class=\"collapse flex-column \"\r\n                  data-bs-parent=\"#yellow\"\r\n                  [attr.id]=\"'yellomenu-' + i\"\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                >\r\n                  <li class=\"w-100\" *ngFor=\"let link of data!.links\">\r\n                    <a href=\"{{ link.url }}\">{{ link.name }}</a>\r\n                  </li>\r\n                </ul>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"switcher\" *ngIf=\"isLanguageVisible\">\r\n          <button\r\n            *ngIf=\"currentLanguage==LanguageEnum.Ar\"\r\n            class=\"user-urls switcher-btn\"\r\n            (click)=\"changeLanguage(LanguageEnum.En)\"\r\n            >English</button>\r\n          <button\r\n            *ngIf=\"currentLanguage==LanguageEnum.En\"\r\n            class=\"user-urls switcher-btn ar\"\r\n            (click)=\"changeLanguage(LanguageEnum.Ar)\"\r\n            >\u0627\u0644\u0639\u0631\u0628\u064A\u0629</button>\r\n        </div>\r\n        <div class=\"switcher\" *ngIf=\"isCurrencyVisible\">\r\n          <button\r\n            *ngIf=\"currentCurrency==egp\"\r\n            class=\"user-urls switcher-btn\"\r\n            (click)=\"changeCurrency(usd)\"\r\n            >USD</button>\r\n          <button\r\n            *ngIf=\"currentCurrency==usd\"\r\n            class=\"user-urls switcher-btn\"\r\n            (click)=\"changeCurrency(egp)\"\r\n            >EGP</button>\r\n        </div>\r\n        <div>\r\n          <button\r\n            class=\"btn btn-md user-urls\"\r\n            type=\"button\"\r\n            *ngIf=\"isLoggedIn && isSignInVisible\"\r\n            (click)=\"onSignOutClicked()\"\r\n          >\r\n            Sign Out\r\n          </button>\r\n          <a\r\n            class=\"btn btn-md user-urls\"\r\n            type=\"button\"\r\n            *ngIf=\"!isLoggedIn && isSignInVisible\"\r\n            (click)=\"onSignInClicked()\"\r\n            href=\"{{navBarUrlsVM.loginUrl}}\"\r\n          >\r\n            Sign In\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"container\">\r\n    <div class=\"row\">\r\n      <header class=\"d-flex align-items-center MobHead p-3 ActiveColor\">\r\n        <a class=\"navbar-brand\" href=\"#\"\r\n          ><img\r\n            src=\"assets/images/logo-primary.webp\"\r\n            alt=\"Header LDC Logo\"\r\n            width=\"90\"\r\n        /></a>\r\n        <!----custom User Area -->\r\n        <div class=\"ms-auto d-flex align-items-center\">\r\n          <div\r\n            class=\"d-flex align-items-center m-2 topIcon\"\r\n            *ngIf=\"!menuClicked\"\r\n          >\r\n            <button (click)=\"routeToClientArea()\" class=\"btn-sm client-area-btn\" type=\"button\" *ngIf=\"isLoggedIn && isSignInVisible\">\r\n                Client Area\r\n            </button>\r\n\r\n            <div\r\n              *ngIf=\"isCartVisible\"\r\n              class=\"shopping-icon position-relative ms-3\"\r\n            >\r\n              <a href=\"{{ navBarUrlsVM.cartUrl }}\">\r\n                <span class=\"CartNumb\">{{ cartCount$ | async }}</span>\r\n                <i class=\"icon-cart\" aria-label=\"cart\" [id]=\"'cart-icon-' + currentLanguage\"></i\r\n              ></a>\r\n            </div>\r\n            <div class=\"contact-icon mx-3\">\r\n              <a [href]=\"hrefUrl\"\r\n                ><i class=\"icon-contact\"></i\r\n              ></a>\r\n            </div>\r\n            <div class=\"SignIn\">\r\n              <a *ngIf=\"isLoggedIn && isSignInVisible\">\r\n                <i class=\"icon-UserActive\"></i>\r\n              </a>\r\n              <a href=\"{{navBarUrlsVM.loginUrl}}\" *ngIf=\"!isLoggedIn && isSignInVisible\">\r\n                <i class=\"icon-user-outline\"></i>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button\r\n              class=\"btn float-end p-0\"\r\n              data-bs-toggle=\"offcanvas\"\r\n              data-bs-target=\"#offcanvas\"\r\n              role=\"button\"\r\n            >\r\n              <i class=\"icon-menu\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </header>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".theme1{background:#222b55}.logo{width:10%}.nav-tabs{margin-bottom:-2px}.nav-tabs li:first-child{width:14%}.nav-tabs .nav-link{color:#fff;display:inline-block}.nav-tabs .nav-link.active{color:#222b55}.nav-item:after{content:\"\";width:0px;height:1px;display:block;background:#222b55;transition:.3s;color:#0f172a}.nav-item:after:hover{color:#222b55}.nav-item:hover:after{width:calc(100% - 1.25rem)}.navbar{padding:0;background:#fff;transition:top .4s ease-in-out}.navbar a.show:after{content:\"\";width:0px;height:1px;display:block;background:#222b55;transition:.3s}.navbar .dropdown-menu a:hover{color:#454545}.navbar a{padding:0 1.25rem 0 0;font-size:14px;font-weight:400;color:#0f172a}.navbar a:hover{color:#222b55}.navbar a.signOutLink{padding-right:0}.navbar .nav-item a.show{color:#222b55}.contact a{margin-bottom:3px}.navbar a.become-a-reseller-link{color:#16a34a;font-weight:500}.navbar a.become-a-reseller-link:hover{color:#16a34a}#menu a.become-a-reseller-link{color:#16a34a;font-weight:500}#client-area-btn a{color:inherit;padding:0}.become-a-reseller:after{content:\"\";width:0px;height:1px;display:block;background:#16a34a;transition:.3s}.become-a-reseller:hover:after{width:calc(100% - 1.25rem)}a.dropdown-item,li.dropdown-item{font-weight:400!important;padding:5px 10px!important}li.dropdown-item:hover{background-color:#fff}i.icon-expand_more[class^=icon]{font-size:15px;color:#0f172a}i.icon-expand_more[class^=icon]:hover{color:#222b55}i.icon-contact:before{display:inline-block;padding:2px 4px 2px 0}.dropdown-item.active,.dropdown-item:active{background-color:unset;color:#fff}a.navbar-brand{color:#454545;margin-inline-end:0}.dropdown-toggle:after{display:none!important}.fix-sticky{position:fixed;top:0;align-self:flex-start;z-index:1000;transition:all .4s}.mainCat{font-weight:500;color:#006884;font-size:17px}.CartNumb{border-radius:50%;padding:0 6px;color:#d97706;background:#fef3c7;position:absolute;font-size:14px;text-align:center;top:-11px;right:5px}ul.navbar-nav li.nav-item.dropdown li a{font-size:12px}i[class^=icon]{color:#000;font-size:1.25rem}.signOutLink{vertical-align:middle;margin-left:10px}.navbar-expand-sm .navbar-nav .dropdown-menu{margin-top:0}.navbar-nav{align-items:center;height:-moz-fit-content;height:fit-content}.navbar-nav .faAngleDown{vertical-align:bottom;font-size:11px;display:inline-block}.ActiveColor .faUserCircle,.ActiveColor .faPhone,.ActiveColor .faCartShopping,.SignOut .faAngleDown{color:#222b55}.btn{font-size:14px;padding:10px 16px}a.btn.btn-default-custom{padding:10px 16px}.actionsMenu{top:-13px;left:unset;font-size:.9em;width:auto;right:-12px;border:1px solid #e2e8f0}.actionsMenu:before{border-color:#dee2e6;border-bottom-color:#dee2e6;border-width:8px;margin-top:-16px;margin-right:-2px;content:\" \";height:0;width:0;border:solid transparent;position:absolute;right:20%;top:0;pointer-events:none}.actionsMenu:after{border-color:#dee2e6;border-bottom-color:#dee2e6;border-width:6px;margin-top:-12px;content:\" \";height:0;width:0;border:solid transparent;position:absolute;right:20%;top:0;pointer-events:none}.SignOutArea{border-top:1px solid #e2e8f0;cursor:pointer}.nav-up{top:-80px}.navbar{transition:top .4s ease-in-out}body{font-size:1em}a{font-size:1em;color:#0f172a}.MobHead{border-bottom:1px solid #94a3b8}i.icon-menu{color:#222b55}.accordion-button-cutom{box-shadow:none;border:0;background-color:#fff;font-weight:500;color:#222b55}.accordion-item{border-bottom:1px solid #94a3b8}#menu li{padding:1rem 0 0;font-weight:500}#submenu2 li a{font-weight:400}.UserBtn{color:#222b55;font-weight:500}.UserBtn:hover{color:#fff}.dropdown-menu-custom.show{min-width:85px;right:0}.language-dropdown ul li a{cursor:pointer}a.sub-list{display:flex;justify-content:space-between}p.accordion-header a.accordion-button{font-weight:400;padding:1rem}.accordion-body{padding:0 2rem}.accordion-body ul{margin-bottom:1rem}.accordion-body ul li{margin-inline-start:.75rem}.accordion-body ul li a{font-weight:400}.accordion-body ul a{font-weight:500}.user-urls{color:#16a34a}.accordion-button:not(.collapsed){color:#16a34a}.icon-UserActive:before{font-size:1.75rem}.icon-expand_more:before{font-size:1rem;vertical-align:middle}.icon-expand_more.user-expand-more:before{vertical-align:super}i.icon-user-outline:before{content:\"\";width:20px;height:20px;size:20px;display:block;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2221%22 height%3D%2220%22 viewBox%3D%220 0 21 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M17.1441 2.92892C15.2553 1.04019 12.744 0 10.073 0C7.40195 0 4.89066 1.04019 3.00192 2.92892C1.11319 4.81766 0.072998 7.32895 0.072998 10C0.072998 12.6711 1.11319 15.1823 3.00192 17.0711C4.89066 18.9598 7.40195 20 10.073 20C12.744 20 15.2553 18.9598 17.1441 17.0711C19.0328 15.1823 20.073 12.6711 20.073 10C20.073 7.32895 19.0328 4.81766 17.1441 2.92892ZM4.41306 16.7694C4.74326 13.9282 7.18604 11.7346 10.073 11.7346C11.5949 11.7346 13.026 12.3276 14.1025 13.4039C15.012 14.3135 15.5855 15.5011 15.7331 16.7693C14.1996 18.0536 12.2251 18.8281 10.073 18.8281C7.9209 18.8281 5.94656 18.0537 4.41306 16.7694ZM10.073 10.5276C8.39835 10.5276 7.03574 9.16504 7.03574 7.49039C7.03574 5.81558 8.39835 4.45312 10.073 4.45312C11.7477 4.45312 13.1103 5.81558 13.1103 7.49039C13.1103 9.16504 11.7477 10.5276 10.073 10.5276ZM16.7417 15.7787C16.4431 14.5747 15.8204 13.4647 14.9311 12.5754C14.2109 11.8552 13.3588 11.3148 12.4296 10.9763C13.5467 10.2187 14.2821 8.93875 14.2821 7.49039C14.2821 5.16953 12.3939 3.28125 10.073 3.28125C7.75214 3.28125 5.86386 5.16953 5.86386 7.49039C5.86386 8.93951 6.59995 10.2199 7.71796 10.9773C6.86301 11.2889 6.07184 11.7706 5.39114 12.4048C4.40543 13.3228 3.72092 14.4933 3.40353 15.7777C2.05939 14.2282 1.24487 12.2075 1.24487 10C1.24487 5.13214 5.20514 1.17188 10.073 1.17188C14.9409 1.17188 18.9011 5.13214 18.9011 10C18.9011 12.2079 18.0863 14.2291 16.7417 15.7787Z%22 fill%3D%22black%22%2F%3E%0D%3C%2Fsvg%3E%0D\")}.switcher-btn{font-size:.875rem;padding:1rem;padding-bottom:0;display:block;direction:ltr;font-weight:500}.client-area-btn a{font-size:.875rem}p.contact-us{color:#000}@media only screen and (max-width: 768px){.CartNumb{position:absolute;top:-11px;left:11px;right:auto}i[class^=icon]{color:#000;font-size:21px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-nav-bar', standalone: true, imports: [NgIf, NgForOf, AsyncPipe, NgClass], template: "<header class=\"d-none d-lg-block\">\r\n  <!---- change below class to change the color from theme1:5 -->\r\n  <!--- Tabs -->\r\n  <!--- NAV -->\r\n  <div class=\"tab-content\" id=\"myTabContent\">\r\n    <div class=\"tab-pane show active\">\r\n      <nav\r\n        #navbarRef\r\n        class=\"navbar navbar-expand-sm w-100 main-navigation py-2\"\r\n        id=\"neubar\"\r\n      >\r\n        <div class=\"container\" [ngClass]=\"{'py-2':isSignInVisible,'py-3':!isSignInVisible}\">\r\n          <a class=\"navbar-brand\" [href]=\"'/'+currentLanguage+'/'\"\r\n          [id]=\" 'link-data-center-log-' + currentLanguage\"\r\n            ><img\r\n              src=\"assets/images/logo-primary.webp\"\r\n              alt=\"Header LDC Logo\"\r\n              height=\"30\"\r\n            />\r\n          </a>\r\n          <div class=\"d-lg-flex w-100 pb-3 pb-lg-0 align-items-center\" id=\"navbarNavDropdown\">\r\n            <ul *ngFor=\"let data of navBarContentVM\" class=\"navbar-nav\">\r\n              <li\r\n                class=\"nav-item dropdown\"\r\n                [ngClass]=\"{\r\n                  'become-a-reseller': data.title == 'Become a Reseller'\r\n                }\"\r\n              >\r\n                <a\r\n                  class=\"nav-link dropdown-toggle\"\r\n                  [id]=\"data!.title + '-' + currentLanguage\"\r\n                  type=\"button\"\r\n                  [ngClass]=\"{\r\n                    'become-a-reseller-link': data.title == 'Become a Reseller'\r\n                  }\"\r\n                  [attr.data-bs-toggle]=\"\r\n                    data!.links.length > 0 ? 'dropdown' : null\r\n                  \"\r\n                  aria-expanded=\"false\"\r\n                  [href]=\"data!.url != '' ? data!.url : undefined\"\r\n                  >{{ data!.title }}\r\n                  <i\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                    class=\"icon-expand_more\"\r\n                  ></i>\r\n                </a>\r\n                <ul\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                  class=\"dropdown-menu shadow-sm rounded-0 border-0\"\r\n                  aria-labelledby=\"navbarDropdownMenuLink\"\r\n                >\r\n                  <li *ngFor=\"let link of data!.links\">\r\n                    <a class=\"dropdown-item\"\r\n                    [id]=\"link.name+'-'+currentLanguage\"\r\n                    href=\"{{ link.url }}\">{{\r\n                      link.name\r\n                    }}</a>\r\n                  </li>\r\n                </ul>\r\n              </li>\r\n            </ul>\r\n            <div class=\"d-flex align-items-center ActiveColor ms-auto\">\r\n              <div class=\"Currency\" *ngIf=\"isCurrencyVisible\">\r\n                <a\r\n                  class=\"dropdown-toggle\"\r\n                  role=\"button\"\r\n                  id=\"dropdownUserLinks\"\r\n                  data-bs-toggle=\"dropdown\"\r\n                  aria-expanded=\"false\"\r\n                  \r\n                  ><i class=\"icon-Currency\" aria-label=\"currency switcher\" [id]=\"'currency-switcher-' + currentLanguage\"></i\r\n                ></a>\r\n                <div class=\"dropdown language-dropdown\">\r\n                  <ul\r\n                    class=\"dropdown-menu dropdown-menu-custom shadow-sm mt-3\"\r\n                    aria-labelledby=\"dropdownCurrencyLinks\"\r\n                  >\r\n                    <li>\r\n                      <a \r\n                      id=\"eg-currency\"\r\n                      class=\"dropdown-item\" (click)=\"changeCurrency(egp)\"\r\n                        >EGP</a\r\n                      >\r\n                    </li>\r\n                    <li>\r\n                      <a \r\n                      id=\"usd-currency\"\r\n                      class=\"dropdown-item\" (click)=\"changeCurrency(usd)\"\r\n                        >USD</a\r\n                      >\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </div>\r\n              <div\r\n                *ngIf=\"isCartVisible\"\r\n                class=\"shopping-icon ml-2 position-relative\"\r\n              >\r\n                <a href=\"{{ navBarUrlsVM.cartUrl }}\"\r\n                [id]=\"'cart-' + currentLanguage\"\r\n                >\r\n                  <span class=\"CartNumb\">{{ cartCount$ | async }}</span>\r\n                  <i class=\"icon-cart\" aria-label=\"cart\" [id]=\"'cart-icon-' + currentLanguage\"></i\r\n                ></a>\r\n              </div>\r\n              <div class=\"translate\" *ngIf=\"isLanguageVisible\">\r\n                <a\r\n                  class=\"dropdown-toggle\"\r\n                  role=\"button\"\r\n                  id=\"dropdownLanguageLinks\"\r\n                  data-bs-toggle=\"dropdown\"\r\n                  aria-expanded=\"false\"\r\n                  \r\n                  ><i class=\"icon-language\" aria-label=\"language switcher\"\r\n                  [id]=\"'language-switcher-'+ currentLanguage\"\r\n\r\n                  ></i\r\n                ></a>\r\n                <div class=\"dropdown language-dropdown\">\r\n                  <ul\r\n                    class=\"dropdown-menu dropdown-menu-custom actionsMenu shadow-sm mt-3\"\r\n                    aria-labelledby=\"dropdownUserLinks\"\r\n                  >\r\n                    <li>\r\n                      <a\r\n                      id=\"language-en\"\r\n                        class=\"dropdown-item\"\r\n                        (click)=\"changeLanguage(LanguageEnum.En)\"\r\n                        >English</a\r\n                      >\r\n                    </li>\r\n                    <li>\r\n                      <a\r\n                      id=\"language-ar\"\r\n                        class=\"dropdown-item ar\"\r\n                        (click)=\"changeLanguage(LanguageEnum.Ar)\"\r\n                        >\u0627\u0644\u0639\u0631\u0628\u064A\u0629</a\r\n                      >\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"d-flex UserArea\"> -->\r\n              <div class=\"contact\">\r\n                <a [href]=\"hrefUrl\"\r\n                [id]=\"'contact-us-' + currentLanguage\"\r\n                class=\"d-flex\"\r\n                  ><i class=\"icon-contact\" [id]=\"'contact-us-icon-'+ currentLanguage\"></i>\r\n                  <p class=\"contact-us\"   [id]=\"'contact-us-' + currentLanguage\">Contact Us</p>\r\n                </a>\r\n              </div>\r\n              <!-- </div> -->\r\n              <!---User area desktop-->\r\n              <!----Sign IN -->\r\n              <div class=\"SignIn\" *ngIf=\"!isLoggedIn && isSignInVisible\">\r\n                <a\r\n                  class=\"btn btn-default-custom\"\r\n                  [id]=\"'sign-in-' + currentLanguage\"\r\n                  type=\"button\"\r\n                  (click)=\"onSignInClicked()\"\r\n                  role=\"button\"\r\n                  href=\"{{navBarUrlsVM.loginUrl}}\"\r\n                >\r\n                  Sign In\r\n                </a>\r\n              </div>\r\n              <!----Sign Out -->\r\n              <div class=\"SignOut\" *ngIf=\"isLoggedIn && isSignInVisible\">\r\n                <button\r\n                  class=\"btn btn-default-custom btn-outline\"\r\n                  [id]=\"'client-area-btn-' + currentLanguage\"\r\n                  type=\"button\"\r\n                  (click)=\"routeToClientArea()\"\r\n                >\r\n                  Client Area\r\n                </button>\r\n\r\n                <a\r\n                  class=\"dropdown-toggle signOutLink\"\r\n                  role=\"button\"\r\n                  id=\"dropdownUserLinks\"\r\n                  data-bs-toggle=\"dropdown\"\r\n                  aria-expanded=\"false\"\r\n                >\r\n                  <i class=\"icon-UserActive\"></i>\r\n                  <i class=\"icon-expand_more user-expand-more\"></i>\r\n                </a>\r\n                <div class=\"dropdown\">\r\n                  <ul\r\n                    class=\"dropdown-menu actionsMenu shadow-sm mt-3\"\r\n                    aria-labelledby=\"dropdownUserLinks\"\r\n                  >\r\n                    <li class=\"dropdown-item\">\r\n                      {{clientInfo.fullName}}\r\n                    </li>\r\n                    <li class=\"SignOutArea\">\r\n                      <a\r\n                        class=\"dropdown-item\"\r\n                        [id]=\"'sign-out' + currentLanguage\"\r\n                        (click)=\"onSignOutClicked()\"\r\n                        ><b>Sign Out</b></a\r\n                      >\r\n                    </li>\r\n                  </ul>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </nav>\r\n    </div>\r\n  </div>\r\n</header>\r\n\r\n<!-------MOBIL-->\r\n<div class=\"d-block d-lg-none\">\r\n  <div\r\n    class=\"offcanvas offcanvas-start\"\r\n    tabindex=\"-1\"\r\n    id=\"offcanvas\"\r\n    data-bs-keyboard=\"false\"\r\n    data-bs-backdrop=\"false\"\r\n  >\r\n    <div\r\n      class=\"offcanvas-header MobHead align-items-center mb-0 p-3 ActiveColor\"\r\n    >\r\n      <a class=\"navbar-brand\" href=\"#\"\r\n        ><img\r\n          src=\"assets/images/logo-primary.webp\"\r\n          alt=\"Header LDC Logo\"\r\n          width=\"90\"\r\n      /></a>\r\n      <!----User Area---->\r\n      <div class=\"d-flex ms-auto align-items-center\">\r\n        <div class=\"d-flex align-items-center m-2 topIcon\">\r\n          <button (click)=\"routeToClientArea()\" class=\"btn btn-sm UserBtn user-urls\" type=\"button\" *ngIf=\"isLoggedIn && isSignInVisible\">\r\n            Client Area\r\n          </button>\r\n          <div\r\n            *ngIf=\"isCartVisible\"\r\n            class=\"shopping-icon position-relative ms-3\"\r\n          >\r\n            <a href=\"{{ navBarUrlsVM.cartUrl }} \"   [id]=\"'cart-' + currentLanguage\">\r\n              <span class=\"CartNumb\">{{ cartCount$ | async }}</span>\r\n              <i class=\"icon-cart\" aria-label=\"cart\" [id]=\"'cart-icon-' + currentLanguage\"></i\r\n            ></a>\r\n          </div>\r\n          <div>\r\n            <div class=\"contact-icon mx-3\">\r\n              <a [href]=\"hrefUrl\"\r\n                ><i class=\"icon-contact\"></i\r\n              ></a>\r\n            </div>\r\n          </div>\r\n            <a *ngIf=\"isLoggedIn && isSignInVisible\">\r\n              <i class=\"icon-UserActive\"></i>\r\n            </a>\r\n            <a href=\"#\" *ngIf=\"!isLoggedIn && isSignInVisible\">\r\n              <i class=\"icon-user-outline\"></i>\r\n            </a>\r\n        </div>\r\n        <div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn-close text-reset\"\r\n            data-bs-dismiss=\"offcanvas\"\r\n            aria-label=\"Close\"\r\n          ></button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"offcanvas-body px-0 py-0\">\r\n      <div class=\"accordion\" id=\"mobile-nav\">\r\n        <div class=\"accordion-item\">\r\n          <p class=\"accordion-header\">\r\n            <button\r\n            \r\n              data-bs-collapse-init\r\n              class=\"accordion-button accordion-button-cutom\"\r\n              [class.collapsed]=\"!isLinkActive('ldc')\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"collapse\"\r\n              aria-controls=\"ldc\"\r\n              data-bs-target=\"#ldc\"\r\n            >\r\n              Link Datacenter\r\n            </button>\r\n          </p>\r\n          <div\r\n            id=\"ldc\"\r\n            class=\"accordion-collapse collapse\"\r\n            [class.show]=\"isLinkActive('ldc')\"\r\n            aria-labelledby=\"flush-headingOneX\"\r\n            data-bs-parent=\"#mobile-nav\"\r\n          >\r\n            <div class=\"accordion-body\">\r\n              <ul\r\n                id=\"menu\"><a [href]=\"appsUrlLinks.ldc\" [id]=\"'home-' + currentLanguage\">Home</a></ul>\r\n              <ul\r\n                id=\"menu\"\r\n                \r\n                *ngFor=\"let data of appsNavBarDataConstLdc; index as i\"\r\n              >\r\n             \r\n                <a\r\n                  class=\"sub-list\"\r\n                  [href]=\"data!.url != '' ? data!.url : undefined\"\r\n                  [id]=\"data.title + '-' +currentLanguage\"\r\n                  [attr.data-bs-toggle]=\"\r\n                    data!.links.length > 0 ? 'collapse' : null\r\n                  \"\r\n                  [attr.data-bs-target]=\"\r\n                    data!.links.length > 0 ? '#ldcmenu-' + i : null\r\n                  \"\r\n                >\r\n                  {{ data.title\r\n                  }}<i\r\n                    class=\"icon-expand_more\"\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                  ></i\r\n                ></a>\r\n                <ul\r\n                  class=\"collapse flex-column \"\r\n                  [attr.id]=\"'ldcmenu-' + i\"\r\n                  data-bs-parent=\"#ldc\"\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                >\r\n              \r\n                  <li class=\"w-100\" *ngFor=\"let link of data!.links\">\r\n                    <a href=\"{{ link.url }}\" [id]=\"link.name+'-'+currentLanguage\">{{ link.name }}</a>\r\n                  </li>\r\n                </ul>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"accordion-item\">\r\n          <p class=\"accordion-header\">\r\n            <a\r\n              data-bs-collapse-init\r\n              class=\"accordion-button accordion-button-cutom\"\r\n              [class.collapsed]=\"!isLinkActive('white')\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"collapse\"\r\n              aria-controls=\"white\"\r\n              data-bs-target=\"#white\"\r\n              [id]=\"'business-essentials-' + currentLanguage\"\r\n            >\r\n            Business Essentials\r\n            </a>\r\n          </p>\r\n          <div\r\n            id=\"white\"\r\n            class=\"accordion-collapse collapse\"\r\n            [class.show]=\"isLinkActive('white')\"\r\n            aria-labelledby=\"flush-headingOneX\"\r\n            data-bs-parent=\"#mobile-nav\"\r\n          >\r\n            <div class=\"accordion-body\">\r\n              <ul\r\n                id=\"menu\"><a [href]=\"appsUrlLinks.white\" [id]=\"'white-home-'+ currentLanguage\">Home</a></ul>\r\n              <ul\r\n                id=\"menu\"\r\n                \r\n                *ngFor=\"let data of appsNavBarDataConstWhite; index as i\"\r\n              >\r\n                <a\r\n                  [ngClass]=\"{\r\n                    'become-a-reseller-link': data.title == 'Become a Reseller'\r\n                  }\"\r\n                  class=\"sub-list\"\r\n                  [href]=\"data!.url != '' ? data!.url : undefined\"\r\n                  [id]=\" data.title + '-' + currentLanguage\"\r\n                  [attr.data-bs-toggle]=\"\r\n                    data!.links.length > 0 ? 'collapse' : null\r\n                  \"\r\n                  [attr.data-bs-target]=\"\r\n                    data!.links.length > 0 ? '#whitemenu-' + i : null\r\n                  \"\r\n                >\r\n                  {{ data.title\r\n                  }}<i\r\n                    class=\"icon-expand_more\"\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                  ></i\r\n                ></a>\r\n                <ul\r\n                  class=\"collapse flex-column \"\r\n                  [attr.id]=\"'whitemenu-' + i\"\r\n                  data-bs-parent=\"#white\"\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                >\r\n                  <li class=\"w-100\" *ngFor=\"let link of data!.links\">\r\n                    <a href=\"{{ link.url }} \"  [id]=\"link.name + '-'+ currentLanguage\">{{ link.name }}</a>\r\n                  </li>\r\n                </ul>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"accordion-item\">\r\n          <p class=\"accordion-header\">\r\n            <a\r\n              data-bs-collapse-init\r\n              class=\"accordion-button accordion-button-cutom\"\r\n              [class.collapsed]=\"!isLinkActive('blue')\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"collapse\"\r\n              aria-controls=\"blue\"\r\n              data-bs-target=\"#blue\"\r\n              [id]=\"'managed-services-'+currentLanguage\"\r\n            >\r\n              Managed Services\r\n            </a>\r\n          </p>\r\n          <div\r\n            id=\"blue\"\r\n            class=\"accordion-collapse collapse\"\r\n            [class.show]=\"isLinkActive('blue')\"\r\n            aria-labelledby=\"flush-headingTwoX\"\r\n            data-bs-parent=\"#mobile-nav\"\r\n          >\r\n            <div class=\"accordion-body\">\r\n              <ul\r\n                id=\"menu\"><a [href]=\"appsUrlLinks.blue\" [id]=\"'blue-home' + currentLanguage\">Home</a></ul>\r\n              <ul\r\n                id=\"menu\"\r\n                \r\n                *ngFor=\"let data of appsNavBarDataConstBlue; index as i\"\r\n              >\r\n                <a\r\n                  class=\"sub-list\"\r\n                  [href]=\"data!.url != '' ? data!.url : undefined\"\r\n                  data-bs-toggle=\"collapse\"\r\n                  [attr.data-bs-toggle]=\"data!.links.length > 0 ? 'collapse' : null\"\r\n                  [attr.data-bs-target]=\"data!.links.length > 0 ? '#bluemenu-' + i : null\"\r\n                  [id]=\"data.title + '-'+ currentLanguage\"\r\n                >\r\n                  {{ data.title\r\n                  }}<i\r\n                    class=\"icon-expand_more\"\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                  ></i\r\n                ></a>\r\n                <ul\r\n                  class=\"collapse flex-column \"\r\n                  [attr.id]=\"'bluemenu-' + i\"\r\n                  data-bs-parent=\"#blue\"\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                >\r\n                  <li class=\"w-100\" *ngFor=\"let link of data!.links\">\r\n                    <a href=\"{{ link.url }}\" [id]=\"link.name + '-' + currentLanguage\">{{ link.name }}</a>\r\n                  </li>\r\n                </ul>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n    \r\n        <div class=\"accordion-item\">\r\n          <p class=\"accordion-header\">\r\n            <a\r\n              data-mdb-collapse-init\r\n              class=\"accordion-button accordion-button-cutom\"\r\n              [class.collapsed]=\"!isLinkActive('red')\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"collapse\"\r\n              aria-controls=\"red\"\r\n              data-bs-target=\"#red\"\r\n              [id]=\"'security-services-' + currentLanguage\"\r\n            >\r\n            Security Services\r\n            </a>\r\n          </p>\r\n          <div\r\n            id=\"red\"\r\n            class=\"accordion-collapse collapse\"\r\n            [class.show]=\"isLinkActive('red')\"\r\n            aria-labelledby=\"flush-headingTwoX\"\r\n            data-bs-parent=\"#mobile-nav\"\r\n          >\r\n            <div class=\"accordion-body\">\r\n              <ul\r\n                id=\"menu\"><a [href]=\"appsUrlLinks.red\"   [id]=\"'red-home-' + currentLanguage\">Home</a></ul>\r\n              <ul\r\n                id=\"menu\"\r\n                \r\n                *ngFor=\"let data of appsNavBarDataConstRed; index as i\"\r\n              >\r\n                <a\r\n                  class=\"sub-list\"\r\n                  [href]=\"data!.url != '' ? data!.url : ''\"\r\n                  data-bs-toggle=\"collapse\"\r\n                  [attr.data-bs-toggle]=\"data!.links.length > 0 ? 'collapse' : null\"\r\n                  [attr.data-bs-target]=\"data!.links.length > 0 ? '#redmenu-' + i : null\"\r\n                >\r\n                  {{ data.title\r\n                  }}<i\r\n                    class=\"icon-expand_more\"\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                  ></i\r\n                ></a>\r\n                <ul\r\n                  class=\"collapse flex-column \"\r\n                  [attr.id]=\"'redmenue-' + i\"\r\n                  data-bs-parent=\"#red\"\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                >\r\n                  <li class=\"w-100\" *ngFor=\"let link of data!.links\">\r\n                    <a href=\"{{ link.url }}\"   [id]=\" link.name +'-'+currentLanguage\">{{ link.name }}</a>\r\n                  </li>\r\n                </ul>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"accordion-item\">\r\n          <p class=\"accordion-header\">\r\n            <a\r\n              data-mdb-collapse-init\r\n              class=\"accordion-button accordion-button-cutom\"\r\n              [class.collapsed]=\"!isLinkActive('yellow')\"\r\n              type=\"button\"\r\n              [id]=\"' yellow-business-' + currentLanguage\"\r\n              data-bs-toggle=\"collapse\"\r\n              aria-controls=\"yellow\"\r\n              data-bs-target=\"#yellow\"\r\n            >\r\n            Private Cloud\r\n            </a>\r\n          </p>\r\n          <div\r\n            id=\"yellow\"\r\n            class=\"accordion-collapse collapse\"\r\n            [class.show]=\"isLinkActive('yellow')\"\r\n            aria-labelledby=\"flush-headingTwoX\"\r\n            data-bs-parent=\"#mobile-nav\"\r\n          >\r\n            <div class=\"accordion-body\">\r\n              <ul\r\n                id=\"menu\"><a [href]=\"appsUrlLinks.yellow\" [id]=\" 'yellow-' + currentLanguage\">Home</a></ul>\r\n              <ul\r\n                id=\"menu\"\r\n                \r\n                *ngFor=\"let data of appsNavBarDataConstYellow; index as i\"\r\n              >\r\n                <a\r\n                  class=\"sub-list\"\r\n                  [href]=\"data!.url != '' ? data!.url : ''\"\r\n                  data-bs-toggle=\"collapse\"\r\n                  [attr.data-bs-toggle]=\"data!.links.length > 0 ? 'collapse' : null\"\r\n                  [attr.data-bs-target]=\"data!.links.length > 0 ? '#yellowmenu-' + i : null\"\r\n                >\r\n                  {{ data.title\r\n                  }}<i\r\n                    class=\"icon-expand_more\"\r\n                    *ngIf=\"data!.links.length > 0\"\r\n                  ></i\r\n                ></a>\r\n                <ul\r\n                  class=\"collapse flex-column \"\r\n                  data-bs-parent=\"#yellow\"\r\n                  [attr.id]=\"'yellomenu-' + i\"\r\n                  *ngIf=\"data!.links.length > 0\"\r\n                >\r\n                  <li class=\"w-100\" *ngFor=\"let link of data!.links\">\r\n                    <a href=\"{{ link.url }}\">{{ link.name }}</a>\r\n                  </li>\r\n                </ul>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"switcher\" *ngIf=\"isLanguageVisible\">\r\n          <button\r\n            *ngIf=\"currentLanguage==LanguageEnum.Ar\"\r\n            class=\"user-urls switcher-btn\"\r\n            (click)=\"changeLanguage(LanguageEnum.En)\"\r\n            >English</button>\r\n          <button\r\n            *ngIf=\"currentLanguage==LanguageEnum.En\"\r\n            class=\"user-urls switcher-btn ar\"\r\n            (click)=\"changeLanguage(LanguageEnum.Ar)\"\r\n            >\u0627\u0644\u0639\u0631\u0628\u064A\u0629</button>\r\n        </div>\r\n        <div class=\"switcher\" *ngIf=\"isCurrencyVisible\">\r\n          <button\r\n            *ngIf=\"currentCurrency==egp\"\r\n            class=\"user-urls switcher-btn\"\r\n            (click)=\"changeCurrency(usd)\"\r\n            >USD</button>\r\n          <button\r\n            *ngIf=\"currentCurrency==usd\"\r\n            class=\"user-urls switcher-btn\"\r\n            (click)=\"changeCurrency(egp)\"\r\n            >EGP</button>\r\n        </div>\r\n        <div>\r\n          <button\r\n            class=\"btn btn-md user-urls\"\r\n            type=\"button\"\r\n            *ngIf=\"isLoggedIn && isSignInVisible\"\r\n            (click)=\"onSignOutClicked()\"\r\n          >\r\n            Sign Out\r\n          </button>\r\n          <a\r\n            class=\"btn btn-md user-urls\"\r\n            type=\"button\"\r\n            *ngIf=\"!isLoggedIn && isSignInVisible\"\r\n            (click)=\"onSignInClicked()\"\r\n            href=\"{{navBarUrlsVM.loginUrl}}\"\r\n          >\r\n            Sign In\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"container\">\r\n    <div class=\"row\">\r\n      <header class=\"d-flex align-items-center MobHead p-3 ActiveColor\">\r\n        <a class=\"navbar-brand\" href=\"#\"\r\n          ><img\r\n            src=\"assets/images/logo-primary.webp\"\r\n            alt=\"Header LDC Logo\"\r\n            width=\"90\"\r\n        /></a>\r\n        <!----custom User Area -->\r\n        <div class=\"ms-auto d-flex align-items-center\">\r\n          <div\r\n            class=\"d-flex align-items-center m-2 topIcon\"\r\n            *ngIf=\"!menuClicked\"\r\n          >\r\n            <button (click)=\"routeToClientArea()\" class=\"btn-sm client-area-btn\" type=\"button\" *ngIf=\"isLoggedIn && isSignInVisible\">\r\n                Client Area\r\n            </button>\r\n\r\n            <div\r\n              *ngIf=\"isCartVisible\"\r\n              class=\"shopping-icon position-relative ms-3\"\r\n            >\r\n              <a href=\"{{ navBarUrlsVM.cartUrl }}\">\r\n                <span class=\"CartNumb\">{{ cartCount$ | async }}</span>\r\n                <i class=\"icon-cart\" aria-label=\"cart\" [id]=\"'cart-icon-' + currentLanguage\"></i\r\n              ></a>\r\n            </div>\r\n            <div class=\"contact-icon mx-3\">\r\n              <a [href]=\"hrefUrl\"\r\n                ><i class=\"icon-contact\"></i\r\n              ></a>\r\n            </div>\r\n            <div class=\"SignIn\">\r\n              <a *ngIf=\"isLoggedIn && isSignInVisible\">\r\n                <i class=\"icon-UserActive\"></i>\r\n              </a>\r\n              <a href=\"{{navBarUrlsVM.loginUrl}}\" *ngIf=\"!isLoggedIn && isSignInVisible\">\r\n                <i class=\"icon-user-outline\"></i>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div>\r\n            <button\r\n              class=\"btn float-end p-0\"\r\n              data-bs-toggle=\"offcanvas\"\r\n              data-bs-target=\"#offcanvas\"\r\n              role=\"button\"\r\n            >\r\n              <i class=\"icon-menu\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </header>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".theme1{background:#222b55}.logo{width:10%}.nav-tabs{margin-bottom:-2px}.nav-tabs li:first-child{width:14%}.nav-tabs .nav-link{color:#fff;display:inline-block}.nav-tabs .nav-link.active{color:#222b55}.nav-item:after{content:\"\";width:0px;height:1px;display:block;background:#222b55;transition:.3s;color:#0f172a}.nav-item:after:hover{color:#222b55}.nav-item:hover:after{width:calc(100% - 1.25rem)}.navbar{padding:0;background:#fff;transition:top .4s ease-in-out}.navbar a.show:after{content:\"\";width:0px;height:1px;display:block;background:#222b55;transition:.3s}.navbar .dropdown-menu a:hover{color:#454545}.navbar a{padding:0 1.25rem 0 0;font-size:14px;font-weight:400;color:#0f172a}.navbar a:hover{color:#222b55}.navbar a.signOutLink{padding-right:0}.navbar .nav-item a.show{color:#222b55}.contact a{margin-bottom:3px}.navbar a.become-a-reseller-link{color:#16a34a;font-weight:500}.navbar a.become-a-reseller-link:hover{color:#16a34a}#menu a.become-a-reseller-link{color:#16a34a;font-weight:500}#client-area-btn a{color:inherit;padding:0}.become-a-reseller:after{content:\"\";width:0px;height:1px;display:block;background:#16a34a;transition:.3s}.become-a-reseller:hover:after{width:calc(100% - 1.25rem)}a.dropdown-item,li.dropdown-item{font-weight:400!important;padding:5px 10px!important}li.dropdown-item:hover{background-color:#fff}i.icon-expand_more[class^=icon]{font-size:15px;color:#0f172a}i.icon-expand_more[class^=icon]:hover{color:#222b55}i.icon-contact:before{display:inline-block;padding:2px 4px 2px 0}.dropdown-item.active,.dropdown-item:active{background-color:unset;color:#fff}a.navbar-brand{color:#454545;margin-inline-end:0}.dropdown-toggle:after{display:none!important}.fix-sticky{position:fixed;top:0;align-self:flex-start;z-index:1000;transition:all .4s}.mainCat{font-weight:500;color:#006884;font-size:17px}.CartNumb{border-radius:50%;padding:0 6px;color:#d97706;background:#fef3c7;position:absolute;font-size:14px;text-align:center;top:-11px;right:5px}ul.navbar-nav li.nav-item.dropdown li a{font-size:12px}i[class^=icon]{color:#000;font-size:1.25rem}.signOutLink{vertical-align:middle;margin-left:10px}.navbar-expand-sm .navbar-nav .dropdown-menu{margin-top:0}.navbar-nav{align-items:center;height:-moz-fit-content;height:fit-content}.navbar-nav .faAngleDown{vertical-align:bottom;font-size:11px;display:inline-block}.ActiveColor .faUserCircle,.ActiveColor .faPhone,.ActiveColor .faCartShopping,.SignOut .faAngleDown{color:#222b55}.btn{font-size:14px;padding:10px 16px}a.btn.btn-default-custom{padding:10px 16px}.actionsMenu{top:-13px;left:unset;font-size:.9em;width:auto;right:-12px;border:1px solid #e2e8f0}.actionsMenu:before{border-color:#dee2e6;border-bottom-color:#dee2e6;border-width:8px;margin-top:-16px;margin-right:-2px;content:\" \";height:0;width:0;border:solid transparent;position:absolute;right:20%;top:0;pointer-events:none}.actionsMenu:after{border-color:#dee2e6;border-bottom-color:#dee2e6;border-width:6px;margin-top:-12px;content:\" \";height:0;width:0;border:solid transparent;position:absolute;right:20%;top:0;pointer-events:none}.SignOutArea{border-top:1px solid #e2e8f0;cursor:pointer}.nav-up{top:-80px}.navbar{transition:top .4s ease-in-out}body{font-size:1em}a{font-size:1em;color:#0f172a}.MobHead{border-bottom:1px solid #94a3b8}i.icon-menu{color:#222b55}.accordion-button-cutom{box-shadow:none;border:0;background-color:#fff;font-weight:500;color:#222b55}.accordion-item{border-bottom:1px solid #94a3b8}#menu li{padding:1rem 0 0;font-weight:500}#submenu2 li a{font-weight:400}.UserBtn{color:#222b55;font-weight:500}.UserBtn:hover{color:#fff}.dropdown-menu-custom.show{min-width:85px;right:0}.language-dropdown ul li a{cursor:pointer}a.sub-list{display:flex;justify-content:space-between}p.accordion-header a.accordion-button{font-weight:400;padding:1rem}.accordion-body{padding:0 2rem}.accordion-body ul{margin-bottom:1rem}.accordion-body ul li{margin-inline-start:.75rem}.accordion-body ul li a{font-weight:400}.accordion-body ul a{font-weight:500}.user-urls{color:#16a34a}.accordion-button:not(.collapsed){color:#16a34a}.icon-UserActive:before{font-size:1.75rem}.icon-expand_more:before{font-size:1rem;vertical-align:middle}.icon-expand_more.user-expand-more:before{vertical-align:super}i.icon-user-outline:before{content:\"\";width:20px;height:20px;size:20px;display:block;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2221%22 height%3D%2220%22 viewBox%3D%220 0 21 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%3Cpath d%3D%22M17.1441 2.92892C15.2553 1.04019 12.744 0 10.073 0C7.40195 0 4.89066 1.04019 3.00192 2.92892C1.11319 4.81766 0.072998 7.32895 0.072998 10C0.072998 12.6711 1.11319 15.1823 3.00192 17.0711C4.89066 18.9598 7.40195 20 10.073 20C12.744 20 15.2553 18.9598 17.1441 17.0711C19.0328 15.1823 20.073 12.6711 20.073 10C20.073 7.32895 19.0328 4.81766 17.1441 2.92892ZM4.41306 16.7694C4.74326 13.9282 7.18604 11.7346 10.073 11.7346C11.5949 11.7346 13.026 12.3276 14.1025 13.4039C15.012 14.3135 15.5855 15.5011 15.7331 16.7693C14.1996 18.0536 12.2251 18.8281 10.073 18.8281C7.9209 18.8281 5.94656 18.0537 4.41306 16.7694ZM10.073 10.5276C8.39835 10.5276 7.03574 9.16504 7.03574 7.49039C7.03574 5.81558 8.39835 4.45312 10.073 4.45312C11.7477 4.45312 13.1103 5.81558 13.1103 7.49039C13.1103 9.16504 11.7477 10.5276 10.073 10.5276ZM16.7417 15.7787C16.4431 14.5747 15.8204 13.4647 14.9311 12.5754C14.2109 11.8552 13.3588 11.3148 12.4296 10.9763C13.5467 10.2187 14.2821 8.93875 14.2821 7.49039C14.2821 5.16953 12.3939 3.28125 10.073 3.28125C7.75214 3.28125 5.86386 5.16953 5.86386 7.49039C5.86386 8.93951 6.59995 10.2199 7.71796 10.9773C6.86301 11.2889 6.07184 11.7706 5.39114 12.4048C4.40543 13.3228 3.72092 14.4933 3.40353 15.7777C2.05939 14.2282 1.24487 12.2075 1.24487 10C1.24487 5.13214 5.20514 1.17188 10.073 1.17188C14.9409 1.17188 18.9011 5.13214 18.9011 10C18.9011 12.2079 18.0863 14.2291 16.7417 15.7787Z%22 fill%3D%22black%22%2F%3E%0D%3C%2Fsvg%3E%0D\")}.switcher-btn{font-size:.875rem;padding:1rem;padding-bottom:0;display:block;direction:ltr;font-weight:500}.client-area-btn a{font-size:.875rem}p.contact-us{color:#000}@media only screen and (max-width: 768px){.CartNumb{position:absolute;top:-11px;left:11px;right:auto}i[class^=icon]{color:#000;font-size:21px}}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.RoutingService }, { type: i2.LanguageService }, { type: i3.LocalStorageService }, { type: i4.NavBarService }, { type: Object, decorators: [{
                    type: Inject,
                    args: [PLATFORM_ID]
                }] }]; }, propDecorators: { navBarContentVM: [{
                type: Input
            }], cartCount$: [{
                type: Input
            }], isCartVisible: [{
                type: Input
            }], isCurrencyVisible: [{
                type: Input
            }], isLanguageVisible: [{
                type: Input
            }], isSignInVisible: [{
                type: Input
            }], isLinkUrlActive: [{
                type: Input
            }], navBarUrlsVM: [{
                type: Input
            }], language: [{
                type: Output
            }], currency: [{
                type: Output
            }], signOut: [{
                type: Output
            }], signIn: [{
                type: Output
            }], isLoggedIn: [{
                type: Input
            }], clientInfo: [{
                type: Input
            }], neubar: [{
                type: ViewChild,
                args: ['navbarRef']
            }], onWindowScroll: [{
                type: HostListener,
                args: ['window:scroll', []]
            }] } });
//# sourceMappingURL=data:application/json;base64, 