All files / src/app/shell/header/header-default header-default.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<ng-template #searchBoxTemplate let-icon="icon">
  <ish-lazy-search-box
    data-testing-id="search-box-desktop"
    [configuration]="{
      placeholder: 'search.searchbox.instructional_text' | translate,
      autoSuggest: true,
      maxAutoSuggests: 10,
      icon: icon,
      showLastSearchTerm: true
    }"
  />
</ng-template>
 
<div class="header container" [ngClass]="deviceType">
  <ul *ngIf="!isSticky" class="user-links">
    <li *ngIf="!isSticky && deviceType !== 'mobile'">
      <ish-login-status data-testing-id="user-status-desktop" />
    </li>
    <li *ishFeature="'compare'" class="d-none d-md-block">
      <ish-lazy-product-compare-status data-testing-id="compare-status-desktop" />
    </li>
    <li *ishFeature="'wishlists'" class="d-none d-md-block">
      <ish-lazy-wishlists-link />
    </li>
  </ul>
 
  <div class="header-utility">
    <a class="search-toggler" [ngClass]="{ 'active-search': showSearch }">
      <fa-icon *ngIf="isSticky" class="header-icon" [icon]="['fas', 'search']" (click)="toggle('search')" />
      <div
        *ngIf="isSticky || showSearch"
        class="search-container header-search-container"
        [ngbCollapse]="!showSearch"
        [ngClass]="{ show: !isSticky }"
      >
        <ng-container *ngTemplateOutlet="searchBoxTemplate; context: { icon: 'angle-right' }" />
      </div>
    </a>
    <div class="language-switch-container d-none d-md-block">
      <ish-language-switch *ngIf="!isSticky" data-testing-id="language-switch-desktop" />
    </div>
    <ish-login-status *ngIf="isSticky || deviceType === 'mobile'" view="small" />
 
    <ish-mini-basket
      data-testing-id="mini-basket-desktop"
      view="full"
      class="d-none"
      [ngClass]="isSticky ? 'd-lg-block' : 'd-md-block'"
    />
    <ish-mini-basket
      data-testing-id="mini-basket-mobile"
      view="small"
      [ngClass]="isSticky ? 'd-lg-none' : 'd-md-none'"
    />
  </div>
  <div class="mid-header row align-items-center">
    <div class="col-md-3 logo-col">
      <div class="logo-wrapper">
        <a
          *ngIf="showDesktopLogoLink"
          rel="home"
          routerLink="/home"
          class="logo"
          [attr.aria-label]="'common.home.link' | translate"
          role="img"
          data-testing-id="header-home-link-desktop"
        ></a>
        <a
          *ngIf="showMobileLogoLink"
          rel="home"
          routerLink="/home"
          class="mobile-logo"
          [attr.aria-label]="'common.home.link' | translate"
          role="img"
          data-testing-id="header-home-link-mobile"
        ></a>
      </div>
    </div>
    <div class="col-md-5 text-right">
      <ish-lazy-quickorder-link />
    </div>
    <div class="col-md-4">
      <div *ngIf="!isSticky && deviceType !== 'mobile'" class="search-container header-search-container">
        <ng-container *ngTemplateOutlet="searchBoxTemplate" />
      </div>
    </div>
  </div>
 
  <button class="navbar-toggler" type="button" (click)="toggle('navbar')">
    <span class="sr-only">{{ 'common.button.navbarCollapsed.text' | translate }}</span>
    <div class="hamburger-menu" [ngClass]="{ open: showNavBar }">
      <!--- strokes of the hamburger menu -->
      <span></span> <span></span> <span></span>
    </div>
  </button>
 
  <div class="global-nav-container">
    <nav
      class="global-nav navbar-expand-md"
      [ngbCollapse]="!showNavBar"
      [attr.aria-label]="'navigation.main.aria_label' | translate"
    >
      <div class="main-navigation">
        <ish-header-navigation />
        <ish-user-information-mobile />
      </div>
    </nav>
  </div>
</div>