File

projects/tl-elements/src/lib/tl-header/tl-header.component.ts

Extends

TamuAbstractBaseComponent

Metadata

changeDetection	`ChangeDetectionStrategy.Default`
encapsulation	`ViewEncapsulation.ShadowDom`
selector	`tl-header-component`
styleUrls	`./tl-header.component.scss`
templateUrl	`./tl-header.component.html`

Index

Constructor

constructor(injector: Injector)

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:53

Parameters :

Name	Type	Optional
injector	`Injector`	No

Inputs

pageTitle
Type : `string`
Default value : `'TL Header Component'`
Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:43
This defines the TAMU page header title and is displayed as page title.

pageTitleUrl
Type : `string`
Default value : `'/'`
Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:45

suppressCallToAction
Type : `"true" \| "false"`
Default value : `'false'`
Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:48
This boolean attribute is used to supress display of "Give to the Libraries" button.

suppressTopNav
Type : `string`
Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:76
Designates top navigation to suppress. A CSV string of supported top navigation names. May specify 'all' to designate suppression of all top navigation. Each CSV will be trimmed. Each CSV will be treated in a case insensitive manner.

inheritFontStyle
Type : `"true" \| "false"`
Inherited from `TamuAbstractBaseComponent`
Defined in `TamuAbstractBaseComponent:14`

HostBindings

style.--tl-font-family-sans-serif

Type : string

Default value : 'var(--tl-default-font-family-sans-serif)'

Inherited from TamuAbstractBaseComponent

Defined in TamuAbstractBaseComponent:12

Allows for the override of the --tl-font-family-sans-serif css variable.

style.--tl-font-size

Type : string

Default value : 'var(--tl-default-font-size)'

Inherited from TamuAbstractBaseComponent

Defined in TamuAbstractBaseComponent:9

Allows for the override of the --tl-default-font-size css variable.

Methods

showTopNav

showTopNav(value: string)

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:108

Method for checking whether or not a given top navigation is to be suppressed.

The name of the top navigation.
This will be trimmed.
This is treated in a case insensitive manner.
TRUE when the top navigation is not to be suppressed.
FALSE when the top navigation is to be suppressed.

Parameters :

Name	Type	Optional	Description
value	`string`	No	The name of the top navigation. This will be trimmed. This is treated in a case insensitive manner.

Returns : boolean

TRUE when the top navigation is not to be suppressed.
FALSE when the top navigation is to be suppressed.

toggleMobileMenu

toggleMobileMenu()

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:63

Toggles Mobile Menu from open to closed.

Returns : void

Properties

askUsSrc

Default value : `${this.appConfig.assetsUrl}/images/askus.png`

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:16

bottomNavBackground

Type : string

Default value : 'var(--tl-grey)'

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:40

This defines the TAMU css variable: grayColor.

logoHref

Type : string

Default value : 'https://library.tamu.edu'

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:31

This is the href for the logo

logoImgHeight

Type : string

Default value : 'var(--tl-logo-img-height)'

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:22

This defines the height of the TAMU logo.

logoImgMargin

Type : string

Default value : 'var(--tl-logo-img-margin)'

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:28

This defines the margin of the TAMU logo.

logoImgWidth

Type : string

Default value : 'var(--tl-logo-img-width)'

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:25

This defines the width of the TAMU logo.

logoSrc

Default value : `${this.appConfig.assetsUrl}/icons/tl/tamu-logo.svg`

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:14

This is a URL pointing to the location of the logo.

logoText

Type : string

Default value : ' Texas A&M University Libraries'

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:19

The text value to be displayed beside the TAMU logo.

mobileMenuClosed

Default value : true

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:53

suppressTopNavList

Type : Array<string>

Default value : []

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:51

This defines an array containing each top navigation to be suppressed or contains 'all' to suppress all top navigation.

titleRowBackground

Type : string

Default value : 'var(--tl-primary)'

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:34

This defines the TAMU css variable: --tl-primary.

topNavBackground

Type : string

Default value : 'var(--tl-primary-dark-accent)'

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:37

This defines the css variable: --tl-primary-dark-accent.

_fontFamily

Type : string

Default value : 'var(--tl-default-font-family-sans-serif)'

Decorators :


                            @HostBinding('style.--tl-font-family-sans-serif')

Inherited from TamuAbstractBaseComponent

Defined in TamuAbstractBaseComponent:12

Allows for the override of the --tl-font-family-sans-serif css variable.

_fontSize

Type : string

Default value : 'var(--tl-default-font-size)'

Decorators :


                            @HostBinding('style.--tl-font-size')

Inherited from TamuAbstractBaseComponent

Defined in TamuAbstractBaseComponent:9

Allows for the override of the --tl-default-font-size css variable.

Accessors

suppressTopNav

setsuppressTopNav(value: string)

Defined in projects/tl-elements/src/lib/tl-header/tl-header.component.ts:76

Designates top navigation to suppress.

A CSV string of supported top navigation names.
May specify 'all' to designate suppression of all top navigation.
Each CSV will be trimmed.
Each CSV will be treated in a case insensitive manner.

Parameters :

Name	Type	Optional	Description
value	`string`	No	A CSV string of supported top navigation names. May specify 'all' to designate suppression of all top navigation. Each CSV will be trimmed. Each CSV will be treated in a case insensitive manner.

Returns : void

import { ChangeDetectionStrategy, Component, Injector, Input, ViewEncapsulation } from '@angular/core';
import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';

@Component({
  selector: 'tl-header-component',
  templateUrl: './tl-header.component.html',
  styleUrls: ['./tl-header.component.scss'],
  encapsulation: ViewEncapsulation.ShadowDom,
  changeDetection: ChangeDetectionStrategy.Default
})
export class TlHeaderComponent extends TamuAbstractBaseComponent {

  /** This is a URL pointing to the location of the logo. */
  logoSrc = `${this.appConfig.assetsUrl}/icons/tl/tamu-logo.svg`;

  askUsSrc = `${this.appConfig.assetsUrl}/images/askus.png`;

  /** The text value to be displayed beside the TAMU logo. */
  logoText = ' Texas A&M University Libraries';

  /** This defines the height of the TAMU logo. */
  logoImgHeight = 'var(--tl-logo-img-height)';

  /** This defines the width of the TAMU logo. */
  logoImgWidth = 'var(--tl-logo-img-width)';

  /** This defines the margin of the TAMU logo. */
  logoImgMargin = 'var(--tl-logo-img-margin)';

  /** This is the href for the logo */
  logoHref = 'https://library.tamu.edu';

  /** This defines the TAMU css variable: --tl-primary. */
  titleRowBackground = 'var(--tl-primary)';

  /** This defines the css variable: --tl-primary-dark-accent. */
  topNavBackground = 'var(--tl-primary-dark-accent)';

  /** This defines the TAMU css variable: grayColor. */
  bottomNavBackground = 'var(--tl-grey)';

  /** This defines the TAMU page  header title and is displayed as page title. */
  @Input() pageTitle = 'TL Header Component';

  @Input() pageTitleUrl = '/';

  /** This boolean attribute is used to supress display of "Give to the Libraries" button. */
  @Input() suppressCallToAction: 'true' | 'false' = 'false';

  /** This defines an array containing each top navigation to be suppressed or contains 'all' to suppress all top navigation. */
  suppressTopNavList: Array<string> = [];

  mobileMenuClosed = true;

  // tslint:disable-next-line:unnecessary-constructor
  constructor(injector: Injector) {
    super(injector);
  }

  /**
   * Toggles Mobile Menu from open to closed.
   */
  toggleMobileMenu(): void {
    this.mobileMenuClosed = !this.mobileMenuClosed;
  }

  /**
   * Designates top navigation to suppress.
   *
   * @param value
   *   - A CSV string of supported top navigation names.
   *   - May specify 'all' to designate suppression of all top navigation.
   *   - Each CSV will be trimmed.
   *   - Each CSV will be treated in a case insensitive manner.
   */
  @Input() set suppressTopNav(value: string) {
    this.suppressTopNavList.length = 0;

    const sanitized = value
      .trim()
      .toLowerCase();

    if (sanitized === 'all') {
      this.suppressTopNavList.push('all');
    } else {
      const values = value.split(',');

      for (const name of values) {
        this.suppressTopNavList.push(name
          .trim()
          .toLowerCase());
      }
    }
  }

  /**
   * Method for checking whether or not a given top navigation is to be suppressed.
   *
   * @param value
   *   - The name of the top navigation.
   *   - This will be trimmed.
   *   - This is treated in a case insensitive manner.
   *
   * @returns
   *   - TRUE when the top navigation is not to be suppressed.
   *   - FALSE when the top navigation is to be suppressed.
   */
  showTopNav(value: string): boolean {
    return this.suppressTopNavList.indexOf('all') === -1
      && this.suppressTopNavList.indexOf(value
        .trim()
        .toLowerCase()) === -1;
  }

}

<wvr-header-component
  [logoSrc]="logoSrc"
  [logoHref]="logoHref"
  [logoText]="logoText"
  [logoImgHeight]="logoImgHeight"
  [logoImgWidth]="logoImgWidth"
  [logoImgMargin]="logoImgMargin"
  [headerTitle]="pageTitle"
  [headerTitleUrl]="pageTitleUrl">

  <template top-navigation>
    <wvr-nav-list-component top-navigation aligned="RIGHT">
      <template nav-list-items>
        <ng-container *ngTemplateOutlet="topNavContent"></ng-container>
      </template>
    </wvr-nav-list-component>
  </template>

  <template bottom-navigation>
    <wvr-nav-list-component bottom-navigation *ngIf="!isMobileLayout">
      <template nav-list-items [wvrContentProjection]="eRef" template="nav-list-items"></template>
      <template nav-list-items>
        <ng-container *ngTemplateOutlet="bottomNavContent"></ng-container>
      </template>
    </wvr-nav-list-component>
  </template>

  <template mobile-menu>
    <div *ngIf="isMobileLayout">
      <wvr-nav-list-component [wvrContentProjection]="eRef" template="nav-list-items"></wvr-nav-list-component>
      <ng-container *ngTemplateOutlet="bottomNavContent"></ng-container>
      <wvr-nav-list-component top-navigation-mobile>
        <template nav-list-items>
          <ng-container *ngTemplateOutlet="topNavContent"></ng-container>
        </template>
      </wvr-nav-list-component>
    </div>
  </template>

</wvr-header-component>

<ng-template #topNavContent>
  <wvr-nav-li-component *ngIf="showTopNav('hours')">
    <a href="https://library.tamu.edu/about/hours">
      <wvr-text-component value="Hours"></wvr-text-component>
    </a>
  </wvr-nav-li-component>

  <wvr-nav-li-component *ngIf="showTopNav('libraries')">
    <wvr-dropdown-component class="libraries"
      [btnType]="'link'"
      [btnHref]="'https://library.tamu.edu/about/index'"
      [toggleOn]="'mouseover'"
      [menuXOffset]="'-65px'"
      [menuYOffset]="'45px'"
      [btnFontFamily]="'var(--tl-font-family-sans-serif)'"
      [dropdownMenuDisplay]="'static'">
      <template dropdown-button>
        <wvr-text-component value="Libraries"></wvr-text-component>
      </template>
      <template dropdown-menu>
        <wvre-dropdown-menu-item>
          <div class="libraries-link">
            <a href="//blcc.library.tamu.edu" title="Go to Business Library and Collaboration Commons website">
              <wvr-text-component value="Business Library &amp; Collaboration Commons"></wvr-text-component>
            </a>
          </div>
          <p>
            <a href="//library.tamu.edu/about/directions/business-library" title="Parking Directions for Business Library and Collaboration Commons">
              <wvr-text-component value="Parking Directions"></wvr-text-component>
            </a>
            <wvr-text-component value=" / 979-845-2111"></wvr-text-component>
          </p>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <div class="libraries-link"><a href="//cushing.library.tamu.edu" title="Go to Cushing Library website">
            <wvre-text value="Cushing Memorial Library &amp; Archives"></wvre-text>
          </a></div>
          <p>
            <a href="//library.tamu.edu/about/directions/cushing-library" title="Parking Directions for Cushing Library">
              <wvr-text-component value="Parking Directions"></wvr-text-component>
            </a>
            <wvr-text-component value=" / 979-845-1951"></wvr-text-component>
          </p>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <div class="libraries-link">
            <a href="//library.tamu.edu/galveston/index.php" title="Go to Jack K. Williams Library - Galveston">
              <wvr-text-component value="Jack K. Williams Library - Galveston"></wvr-text-component>
            </a>
          </div>
          <p>
            <a href="//library.tamu.edu/galveston/about/visit.php" title="Parking Directions for Jack K. Williams Library - Galveston">
              <wvr-text-component value="Parking Directions"></wvr-text-component>
            </a>
            <wvr-text-component value=" / 409-740-4560"></wvr-text-component>
          </p>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <div class="libraries-link">
            <a href="//msl.library.tamu.edu" title="Go to Medical Sciences Library website">
              <wvr-text-component value="Medical Sciences Library"></wvr-text-component>
            </a>
          </div>
          <p>
            <a href="//library.tamu.edu/about/directions/medical-sciences-library" title="Parking Directions for Medical Sciences Library">
              <wvr-text-component value="Parking Directions"></wvr-text-component>
            </a>
            <wvr-text-component value=" / 979-845-7428"></wvr-text-component>
          </p>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <div class="libraries-link">
            <a href="//psel.library.tamu.edu" title="Go to Policy Sciences and Economics Library website">
              <wvr-text-component value="Policy Sciences &amp; Economics Library"></wvr-text-component>
            </a>
          </div>
          <p>
            <a href="//library.tamu.edu/about/directions/policy-sciences-economics-library" title="Parking Directions for Policy Sciences and Economics Library">
              <wvr-text-component value="Parking Directions"></wvr-text-component>
            </a>
            <wvr-text-component value=" / 979-862-3544"></wvr-text-component>
          </p>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <div class="libraries-link">
            <a href="//library.tamu.edu" title="Go to Evans Library website">
              <wvr-text-component value="Sterling C. Evans Library &amp; Annex"></wvr-text-component>
            </a>
          </div>
          <p>
            <a href="//library.tamu.edu/about/directions/evans-library-annex" title="Parking Directions for Evans Library and Annex">
              <wvr-text-component value="Parking Directions"></wvr-text-component>
            </a>
            <wvr-text-component value=" / 979-845-3731"></wvr-text-component>
          </p>
        </wvre-dropdown-menu-item>
      </template>
    </wvr-dropdown-component>
  </wvr-nav-li-component>

  <wvr-nav-li-component *ngIf="showTopNav('information for')">
    <wvr-dropdown-component class="information-for"
      [btnType]="'link'"
      [btnHref]="'https://library.tamu.edu'"
      [toggleOn]="'mouseover'"
      [menuXOffset]="'-150px'"
      [menuYOffset]="'45px'"
      [btnFontFamily]="'var(--tl-font-family-sans-serif)'"
      [dropdownMenuDisplay]="'static'">
      <template dropdown-button>
        <wvr-text-component value="Information for"></wvr-text-component>
      </template>
      <template dropdown-menu>
        <wvre-dropdown-menu-item>
          <a href="//library.tamu.edu/faculty_info/">
            <wvr-text-component value="Information for Faculty"></wvr-text-component>
          </a>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <a href="//library.tamu.edu/grad_info/">
            <wvr-text-component value="Graduate Student Resources"></wvr-text-component>
          </a>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <a href="//library.tamu.edu/undergrad_info/">
            <wvr-text-component value="Undergraduate Student Resources"></wvr-text-component>
          </a>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <a href="//library.tamu.edu/services/accessibility">
            <wvr-text-component value="Services for Individuals with Disabilities"></wvr-text-component>
          </a>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <a href="https://tamu.libguides.com/c.php?g=949823">
            <wvr-text-component value="Students at Satellite Campuses"></wvr-text-component>
          </a>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <a href="http://tamu.libguides.com/c.php?g=586101&amp;p=4048709">
            <wvr-text-component value="School Visitors"></wvr-text-component>
          </a>
        </wvre-dropdown-menu-item>
      </template>
    </wvr-dropdown-component>
  </wvr-nav-li-component>

  <wvr-nav-li-component *ngIf="showTopNav('mylibrary')">
    <a href="https://library.tamu.edu/mylibrary/">
      <wvr-text-component value="MyLibrary"></wvr-text-component>
    </a>
  </wvr-nav-li-component>

  <wvr-nav-li-component *ngIf="showTopNav('help')">
    <wvr-dropdown-component class="help"
      [btnType]="'link'"
      [btnHref]="'http://askus.library.tamu.edu/'"
      [toggleOn]="'mouseover'"
      [menuXOffset]="'-365px'"
      [menuYOffset]="'45px'"
      [btnFontFamily]="'var(--tl-font-family-sans-serif)'"
      [dropdownMenuDisplay]="'static'">
      <template dropdown-button>
        <wvr-text-component value="Help"></wvr-text-component>
      </template>
      <template dropdown-menu>
        <wvre-dropdown-menu-item>
          <a href="http://askus.library.tamu.edu/">
            <img alt="AskUs logo" height="80px" [src]="askUsSrc">
          </a>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <tl-icon-component [set]="'bootstrap'" [name]="'arrow-right-circle'"></tl-icon-component>
          <a href="http://askus.library.tamu.edu/" class="helpLink">
            <wvr-text-component value=" Chat with us "></wvr-text-component>
          </a>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <tl-icon-component [set]="'bootstrap'" [name]="'arrow-right-circle'"></tl-icon-component>
          <a href="//library.tamu.edu/about/phone" class="helpLink">
            <wvr-text-component value=" Call us "></wvr-text-component>
          </a>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <tl-icon-component [set]="'bootstrap'" [name]="'arrow-right-circle'"></tl-icon-component>
          <a href="https://askus.library.tamu.edu/contact/" class="helpLink">
            <wvr-text-component value=" Email us "></wvr-text-component>
          </a>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <tl-icon-component [set]="'bootstrap'" [name]="'arrow-right-circle'"></tl-icon-component>
          <a href="http://askus.library.tamu.edu/" class="helpLink">
            <wvr-text-component value=" FAQs "></wvr-text-component>
          </a>
        </wvre-dropdown-menu-item>
        <wvre-dropdown-menu-item>
          <tl-icon-component [set]="'bootstrap'" [name]="'arrow-right-circle'"></tl-icon-component>
          <a href="https://askus.library.tamu.edu/contact/" class="helpLink">
            <wvr-text-component value=" Report a problem "></wvr-text-component>
          </a>
        </wvre-dropdown-menu-item>
      </template>
    </wvr-dropdown-component>
  </wvr-nav-li-component>
</ng-template>

<ng-template #bottomNavContent>
  <wvr-nav-li-component class="ml-auto call-to-action" *ngIf="suppressCallToAction !=='true'">
    <a href="https://library.tamu.edu/about/giving/">
      <tl-icon-component [set]="'bootstrap'" [name]="'gift-fill'"></tl-icon-component>
      <wvr-text-component value="Give to the Libraries"></wvr-text-component>
    </a>
  </wvr-nav-li-component>
</ng-template>

./tl-header.component.scss

@import "../shared/styles/tl-encapsulated.scss";
@import "../shared/styles/tl-variables.scss";

:host {
  font-family: var(--tl-font-family-sans-serif);

  wvr-header-component {
    // Weaver Component overrides
    --wvr-navbar-padding: 0px;
    --wvr-font-family-sans-serif: var(--tl-font-family-sans-serif);
    --wvr-nav-link-font-size: var(--tl-nav-item-font-size);

    // Weaver Header Element Overrides
    --top-nav-height: 50px;
    --title-row-height: 85px;
    --bottom-nav-height: 65px;

    .title-row {
      background-color: var(--primary-default-bg);

      a span {
        color: var(--primary-default-color);
      }
    }

    .bottom-nav {
      background-color: var(--secondaryNeutral-default-bg);
    }

    wvr-nav-list-component[top-navigation-mobile]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a,
    wvr-nav-list-component[top-navigation]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a {
      padding: 12px;
      color: var(--tl-white);
    }

    wvr-nav-list-component[top-navigation-mobile]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a:focus-within,
    wvr-nav-list-component[top-navigation]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a:focus-within,
    wvr-nav-list-component[top-navigation-mobile]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a:hover,
    wvr-nav-list-component[top-navigation]
      > [role=menu]
      > wvr-nav-li-component
      > [role=menuitem]
      > a:hover {
      color: var(--tl-black);
    }

    // Weaver Nav List overrides for top navigation
    wvr-nav-list-component[top-navigation-mobile] wvr-nav-li-component,
    wvr-nav-list-component[top-navigation] wvr-nav-li-component,
    wvr-nav-list-component[top-navigation] .dropdown,
    wvr-nav-list-component[top-navigation-mobile] .dropdown {
      --wvr-nav-link-background-hover: var(--tl-deep-yellow);
      --wvr-nav-li-width: contain;
      border-right: 1px solid var(--secondary-default-box-shadow-color);
      font-size: 14px;

      .wvr-button {
        color: var(--tl-white);
        padding: 9px 12px;
        text-align: center;
        font-size: 14px;
        margin-top: 4px;
      }

      .wvr-button:focus {
        border-radius: 0px;
        box-shadow: none;
      }

      > .dropdown-menu {
        width: 497px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        text-align: left;
        font-size: 16px;
      }

      .libraries {

        .libraries-link {
          margin-bottom: 18px;
          a {
            color: var(--primary);
            text-decoration: underline;
          }
        }

        p {
          color: var(--primaryNeutral);
          a {
            color: #2b5d7d;
            wvr-text-component {
              text-decoration: underline;
            }
          }
        }
      }

      .information-for {
        wvre-dropdown-menu-item {
          display: block;
        }

        a {
          color: var(--secondary-default-hover-bg);
          line-height: 2;
          padding: 10px 20px;
        }

        a:focus-within,
        a:hover {
          color: var(--secondary-default-bg);
        }
      }

      .help {
        .wvr-button {
          color: var(--tl-white);
        }

        .wvr-button:focus-within,
        .wvr-button:hover {
          color: var(--tl-black);
        }

        wvre-dropdown-menu-item {
          border-bottom: 1px solid var(--light);
          padding: 10px 0px;
          display: flex;

          a {
            padding: 8px 0px 8px 8px;
            width: 100%;
            color: rgb(0, 100, 139);
            &:hover {
              color: rgb(0, 63, 88);
            }
          }

          tl-icon-component svg {
            fill: var(--dark);
            width: 35px;
            height: 35px;
            margin-right: 5px;
            background: var(--light);
          }
        }

        wvre-dropdown-menu-item:focus-within > .helpLink,
        wvre-dropdown-menu-item:hover > .helpLink {
          background: var(--secondaryNeutral);
          border-radius: 5px;
        }

        wvre-dropdown-menu-item:first-child,
        wvre-dropdown-menu-item:last-child {
          border-bottom: 0px;
        }
      }

    }

    wvr-nav-list-component[bottom-navigation]
    wvr-nav-li-component.call-to-action {
      --wvr-nav-link-background-hover: var(--secondary);
      width: fit-content;
      font-family: var(--tl-font-family-sans-serif);
      font-weight: 600;
      font-size: 16px;
      a {
        display: flex;
        align-items: center;
        margin: 0 20px;
        color: var(--secondary);
        text-decoration: none;
        tl-icon-component svg {
          fill: var(--secondary);
          width: 24px;
          height: 65px;
          margin-right: 5px;
        }
      }
    }

    wvr-nav-list-component[bottom-navigation]
    wvr-nav-li-component.call-to-action:focus-within,
    wvr-nav-li-component.call-to-action:hover {
      a {
        color: var(--tl-white) !important;
        tl-icon-component svg {
          fill: var(--tl-white) !important;
        }
      }
    }

    wvr-nav-list-component[top-navigation] .dropdown:focus-within,
    wvr-nav-list-component[top-navigation] .dropdown:hover {
      .wvr-button {
        color: var(--tl-black);
      }
    }

    wvr-nav-list-component[top-navigation] wvr-nav-li-component:last-child,
    wvr-nav-list-component[top-navigation] .dropdown:last-child {
      border: none;
    }

    wvr-nav-list-component[bottom-navigation] wvre-nav-li,
    wvr-nav-list-component[bottom-navigation] wvr-nav-li-component {
      --wvr-nav-link-color: var(--tl-black);
      --wvr-nav-link-color-hover: var(--tl-white);
      --wvr-nav-link-background-hover: var(--dark);
      width: fit-content;

      .nav-item > a wvre-text {
        font-family: var(--tl-font-family-sans-serif);
        font-weight: 700;
        font-size: 16px;
        color: var(--tl-black);
      }

      .nav-item > a.nav-link {
        display: flex;
        align-items: center;
      }

      .nav-item:focus-within > a wvre-text,
      .nav-item:hover > a wvre-text {
        color: var(--tl-white);
      }

      :focus-within,
      :hover {
        span[button-content],
        svg {
          color: var(--tl-white);
        }
      }

      tl-dropdown-menu,
      tl-mega-menu {
        display: flex;
        height: 100%;
        width: 100%;

        wvr-dropdown-component {
          display: flex;
          height: 100%;
          width: 100%;

          .wvr-dropdown {
            width: 100%;
            .dropdown {
              height: 100%;
              width: 100%;

              wvre-text {
                font-size: var(--tl-font-size);
              }

              wvr-button-component {
                margin-top: 1px;
                display: flex;
                height: 100%;
                width: 100%;

                button-wrapper {
                  width: 100%;

                  button {
                    height: 100%;
                    width: 100%;
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }
    }

    .navbar-brand {
      font-size: var(--tl-default-font-size);
    }

    .h1 {
      font-size: var(--tl-h1-font-size);
    }

    .top-nav {
      border-bottom: 1px solid var(--primaryNeutral);
      background: var(--primaryAccent-default-bg);

      .navbar-brand wvre-text-node {
        color: var(--primaryAccent-default-color);
      }

      .container {
        > div {
          height: auto;
        }
      }
    }

    @media (max-width: 992px) {
      --top-nav-height: auto;
      --wvr-nav-li-width: fit-content;
      header {
        box-shadow: 1px 1px 5px 2px var(--tl-black);
      }

      [top-navigation],
      [bottom-navigation],
      .bottom-nav {
        display: none;
        overflow: hidden;
      }

      .top-nav {
        border-bottom: 1px solid var(--primaryNeutral);

        .container {
          > div {
            width: 100%;
          }

          > a.navbar-brand {
            margin: auto;
          }
        }
      }

      .mobile-menu > div > div > wvr-nav-list-component > wvre-nav-li > [role=menuitem] > a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: 65px;
        width: 100%;
        color: var(--tl-black);
        background: var(--tl-deep-yellow);
        border-bottom: 1px solid var(--secondaryNeutral);

        wvre-text {
          font-family: var(--tl-font-family-sans-serif);
          font-weight: 600;
          font-size: 16px;
          color: var(--tl-black);
        }
      }

      wvr-nav-list-component[top-navigation-mobile] {
        .dropdown,
        wvr-nav-li-component,
        wvre-nav-li {
          flex: 1 1 auto;
          border-right: none;
        }

        [role=menu] {
          justify-content: space-evenly;
          flex-wrap: nowrap !important;
          flex-direction: column !important;
        }

        [role=menuitem] {
          justify-content: left !important;

          wvr-dropdown-component,
          wvre-dropdown {
            width: 100%;
          }

          .wvr-dropdown {
            display: flex !important;
          }

          wvr-button-component {
            display: flex;
            width: 100%;

            button-wrapper {
              width: 100%;
              .btn {
                text-align: start !important;
              }
            }
          }

          .dropdown .wvr-button,
          a {
            width: 100%;
            padding-top: 6px !important;
            padding-bottom: 6px !important;
            margin-top: 0px !important;

            div[dropdown-button],
            wvr-text-component,
            wvre-text {
              font-family: var(--tl-font-family-sans-serif);
              font-weight: bold;
              font-size: 16px;
              color: var(--tl-black);
            }
          }
        }
      }

      .title-row {
        text-align: center;
      }

      tl-dropdown-menu,
      tl-mega-menu {
        width: 100%;
        color: var(--tl-black);
        background: var(--tl-deep-yellow);
        overflow: hidden;
        border-bottom: var(--secondaryNeutral);

        wvr-dropdown-component {
          display: flex;
          width: 100%;

          .wvr-dropdown {
            display: flex !important;
            width: 100%;

            .dropdown {
              display: flex !important;
              width: 100%;

              wvr-button-component {
                display: flex;
                width: 100%;

                button-wrapper {
                  display: flex;
                  width: 100%;
                  height: 68px;
                  align-items: center;
                  border-bottom: thin solid var(--secondaryNeutral);

                  button {
                    display: flex;
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }

      .mobile-menu-button {
        display: inline-block;
        overflow: hidden;
      }

      .mobile-menu {
        display: inline-block;
      }

      .mobile-menu.closed {
        width: 0px;
        opacity: 0;
        overflow: hidden;
      }
    }
  }

  .mobile-menu-button {
    display: none;
    margin-left: 10px;
    margin-top: 10px;
    cursor: pointer;
  }

  .mobile-menu {
    position: absolute;
    display: none;
    background: var(--secondaryNeutral);
    width: 75%;
    opacity: 1;
    box-shadow: 3px 3px 10px 0px var(--tl-black);
    left: 0;
    z-index: 1100;
    transition: width 0.5s ease-in-out, opacity 0.5s ease-in-out;

    div.mobile-menu-content {
      wvre-nav-li > [role=menuitem].nav-item {
        a {
          white-space: nowrap;
        }

        .mobile-display tl-dropdown-menu-section-component,
        .mobile-display tl-dropdown-menu-section
        .mobile-display tl-mega-menu-section-component,
        .mobile-display tl-mega-menu-section {
          white-space: nowrap;
        }

        tl-dropdown-menu
          > wvr-dropdown-component
          > .wvr-dropdown
          .dropdown
          wvr-button-component,
        tl-mega-menu
          > wvr-dropdown-component
          > .wvr-dropdown
          .dropdown
          wvr-button-component {

          white-space: nowrap;

          span[button-content] {
            width: 100%;
            span {
              display: block;
            }
          }
        }
      }

      wvr-nav-li-component.call-to-action {
        a {
          color: var(--tl-black);
          white-space: nowrap;
          justify-content: start !important;
          padding: 23px 16px;
          height: 65px;
          width: 100%;
          background: var(--tl-deep-yellow);
          border-bottom: 1px solid var(--secondaryNeutral);
          text-decoration: none;
          font-weight: 700;
        }

        tl-icon-component svg {
          display: none;
        }
      }
    }
  }
}

Legend

Html element

Component

Html element with directive

File

Extends

Metadata

Index

Properties

Methods

Inputs

HostBindings

Accessors

Constructor

Inputs

HostBindings

Methods

Properties

Accessors

results matching ""

No results matching ""