Events To Configure & Manage

Component loaded

Listen to know when <enterprise-nav-header> component is loaded: enterpriseNavHeaderLoaded.
Listen to know when <enterprise-nav-menu> component is loaded: enterpriseNavMenuLoaded.
Listen to know when the menu items in <enterprise-nav-menu> component are loaded: enterpriseNavMenuItemsLoaded.

Once that both components are loaded, initialization function could be called on <enterprise-nav-header> component.

Initializating

A public method is available on <enterprise-nav-header> to initialize Enterprise Navigation Component.

enterpriseNavHeader.initialize(uri, menuConf, eventsConf, optional);

uri: Domain where we are working on (Mandatory)

ie: <https://admin-controlcenter-itv1.centurylink.com>, <https://controlcenter-test1.lumen.com>, etc...

menuConf: Configuration object for menu (Mandatory)

Property objects:
- site => Site name (from your data file) that it will be selected in the switcher (Mandatory)
  - ie. 'Control Center', 'UCommand'...
    - origin => Origin key in origin objec for your site (ex. CC, ML3) (Mandatory)
    - option => Menu option id selected on the initialization. (Not mandatory)
```
              This id could be find into entitledMenus endpoint.
              By default, the selection will be done looking for local-href value into the location.href.
              Not mandatory.
```
    - url => URL or path where your data file is located (Not mandatory)
```
              By default `/Application/v1/Portal/navigation/entitledMenus` value will be used.
```
    - requestInit => request init object needed to make the call against url parameter (Not mandatory)
    - ccmenu => Menu content gotten from Control Center endpoint or Rudra cache (Not mandatory)
```
              If this value is added, `url` value will be ignored for getting the menu content.
```
    - menu => Menu options that you need to add dynamically to the menu component (Not mandatory)

eventsConf: Configuration object for events behaviour. Format { <<event>>: <<configuration-behaviour>> } (Mandatory)
- Values for <<event>>:
  - "logo" => "same-tab" by default. This event will not work for Partner users.
  - "notification" => "new-tab" by default.
  - "notification-settings" => "new-tab" by default.
  - "impersonation-logout" => "same-tab" by default.
  - "my-profile" => "new-tab" by default.
  - "logout" => "same-tab" by default.
  - "manage-my-enterprises" => "new-tab" by default.
  - "sign-in" => "same-tab" by default.
- Values for <<configuration-behaviour>>:
  - "emit-event": An event will be fired in order to be manage by the parent.
  - "same-tab": A page will be open in the same tab.
  - "new-tab": A page will be open in a new tab.

optional: Configuration object for optional properties. Format { <<property>>: <<value>> }.

env => environment selected. Value can be 'local', 'stage', 'prod'. 'prod' is default value (Not mandatory)
- Menu behaviour:
  - 'prod': menuConf.menu property content will maintain the sidenav styles.
  - 'local' or 'stage': menuConf.menu property content will be shown in red color.
- Logout behaviour:
  - 'prod' value => 'https://business-signin.lumen.com' will be used.
  - 'stage' or 'local' values => 'https://business-auth-test.lumen.com'.

customize => object to customize each component (Not mandatory)

One entry for component ('logo', 'notification', 'enterprises', 'switcher', 'user', 'infobar', 'infofooter', or 'search' ). For example:

{
   logo: {
     hide: false | true,
     path: "/customized-logo-path",
     image: "https://lib.lumen.com/images/lumen-logo-black.svg",
   },
   notification: {
     hide: false | true,
     path: "/customized-notification-path",
   },
   enterprises: {
     hide: false | true,
     list: {
       hide: false | true,
       path: "/customized-enterprises-update-path",
     },
     manage: {
       hide: false | true,
       path: "/customized-enterprises-manage-path",
     },
   },
   switcher: {
     hide: false | true,
   },
   user: {
     hide: false | true,
     profile: {
       hide: false | true,
       path: "/customized-user-profile-path",
     },
     logout: {
       hide: false | true,
       path: "/customized-user-logout-path",
     },
     notificationSettings: {
        hide: false | true,
        path: "/customized-user-notification-settings-path",
      },
     signin: {
        path: "/login",
      },
   },
   infobar: {
     hide: false | true,
     content: [
      {
        position: 1,
        hide: false | true,
        text: "text in the button (by default 'explore')",
        path: "/customized-explore-path",
      },
      {
        position: 2,
        hide: false | true,
        text: "text in the button (by default 'help')",
        path: "/customized-help-path",
      },
      {
        position: 3,
        hide: false | true,
        text: "text in the button (by default 'contact')",
        path: "/customized-contact-path",
      },
    ]
   },
   infofooter: {
     hide: false | true,
     help: {
       hide: false | true,
       path: "/customized-help-path",
     },
     contact: {
       hide: false | true,
       path: "/customized-contact-path",
     },
   },
   menu: {
     horizontal: false | true,
   },
   header: {
     size: '-xl' | '-lg',
   },
   search: {
     hide: false | true,
   },
 }

user => object to send user information.
enterprises => object to send enterprises information.
apiUri: Endpoint domain where we authenticat the user
- ie: <https://api-dev1.centurylink.com>, <https://api-test1.centurylink.com>.

Use example:

    let enterpriseNavMenuLoaded = false;
    let enterpriseNavHeaderLoaded = false;
    let enterpriseNavMenuItemsLoaded = false;

    function enterpriseNavMenuLoadedEvent() {
        enterpriseNavMenuLoaded = true;
        enterpriseInitialize(true);
    };

        function enterpriseNavMenuItemsLoadedEvent() {
        enterpriseNavMenuItemsLoaded = true;
        enterpriseInitialize(true);
    };


    function enterpriseNavHeaderLoadedEvent() {
        enterpriseNavHeaderLoaded = true;
        enterpriseInitialize(true);
    };

    function enterpriseInitialize(addListener) {
      let uri = 'https://controlcenter-test1.lumen.com';
      let menuConf = {
        site: 'Control Center',
        origin: 'CC',
      };
      let eventsConf = {
        'notification': 'same-tab',
      };
      let optional = {
        'env': 'stage',
        'apiUri': 'https://api-dev1.centurylink.com'
      }

      const enterpriseNavMenu = document.querySelector('enterprise-nav-menu');
      const enterpriseNavHeader = document.querySelector('enterprise-nav-header');

      if (
        enterpriseNavMenu && enterpriseNavHeader &&
        enterpriseNavMenuLoaded && enterpriseNavHeaderLoaded && enterpriseNavMenuItemsLoaded
      ) {
        enterpriseNavMenu.addEventListener('enterpriseNavMenuSelected', function menuSelected(event) {
          actions when an option in the left menu is selected
          refer Listening section to `enterpriseNavMenuSelected` event
        });
        enterpriseNavMenu.addEventListener('enterpriseNavMenuHighlighted', function updateMenuOption(event) {
          actions depending on the menu option selected
        });
        enterpriseNavHeader.addEventListener('enterpriseNavHeaderSelected', function headerSelected(event) {
          actions when an option in the header is selected
          refer Listening section to `enterpriseNavHeaderSelected` event
        });
        enterpriseNavHeader.addEventListener('enterpriseNavHeaderError', function headerError(event) {
          actions when an error is produced on the header component
          refer Listening section to `enterpriseNavHeaderError` event
        });

        enterpriseNavHeader.initialize(uri, menuConf, eventsConf, optional);
      }
    };

    document.addEventListener('enterpriseNavMenuLoaded', enterpriseNavMenuLoadedEvent);
    document.addEventListener('enterpriseNavMenuItemsLoaded', enterpriseNavMenuItemsLoadedEvent);
    document.addEventListener('enterpriseNavHeaderLoaded', enterpriseNavHeaderLoadedEvent);

Framework notes:

In order to configure properly eventsConf object, EventConfiguration type should imported from po-enterprise-nav library.

    import { EventConfiguration } from 'po-enterprise-nav';

    let eventsConf: Record<string, EventConfiguration> = {
      'notification': EventConfiguration.SAME_TAB,
      'imperonation-logout': EventConfiguration.EMIT,
    };

On the other hand, adding listener should be done in the constructor methos or in 'create' or 'init' lifecycle events. Please, remember to remove these listeners in 'destroy' event in order to avoid memory leaks on the browser.

Listening

Listener name to link <enterprise-nav-menu> component with the management function: enterpriseNavMenuSelected.

example:

    const enterpriseNavMenu = document.querySelector('enterprise-nav-menu');
    enterpriseNavMenu.addEventListener('enterpriseNavMenuSelected', function goLink(event) {

      Event will be fired always an user had clicked a menu option in the same domain.
      `event` is a CustomEvent type with the format:
        {
          detail: "local-href" property from menu option name entry in JSON file
        }

    });

Listener name to link <enterprise-nav-menu> component with the management funcion: enterpriseNavMenuHighlighted.

  const enterpriseNavMenu = document.querySelector('enterprise-nav-menu');
  enterpriseNavMenu.addEventListener('enterpriseNavMenuHighlighted', function checkUpdateMenuOption(event) {});

Event will be fired after calling initialize or update methods for <enterprise-nav-menu> component.

event is a CustomEvent type with the format:

{
   detail: {
     "isSelected": `<<true when an option is selected, otherwise false>>`,
     "localHref": `<<local-href value selected from entitledMenus>>`,
     "id": `<<id value selected from entitledMenus>>`,
     "name": `<<name value selected from entitledMenus>>`,
   }
}

Listener name to link <enterprise-nav-header> component with the management function: enterpriseNavHeaderSelected.

const enterpriseNavHeader = document.querySelector('enterprise-nav-header');
enterpriseNavHeader.addEventListener('enterpriseNavHeaderSelected', function headerSelected(event) {

Event will be fired in two situations:

User has selected an enterprise in the enterprises list. Backend is already updated with the new enterprise. event is a CustomEvent type with the format:
```
  {
    detail: {
      "type": "enterprise",
      "value": `<<enterprise object selected>>`,
    }
  }
```

An event was configured as emit-event in the eventsConf object. event is a CustomEvent type with the format:

  {
    detail: {
      "type": "link",
      "value": `<<event>>`,
      "path": `<<selected option relative path>>`,
      "uri": `<<uri set in the initialization object or logout uri depens on env value>>`,
    }
  }

Listener name to link <enterprise-nav-header> component with the management function: enterpriseNavHeaderError.

const enterpriseNavHeader = document.querySelector('enterprise-nav-header');
enterpriseNavHeader.addEventListener('enterpriseNavHeaderError', function headerError(event) {});

Event will be fired when an error occurs changing enterprises:

event is a CustomEvent type with the format:

{
  detail: {
    "type": "enterprise",
    "value": {
      "id": "undefined",
      "error": {
        "status": `<<error status, ie. 302>>`,
        "text": `<<error description>>`,
      }
    }
  }
}

Updating

A public method is available on <enterprise-nav-header> to update Enterprise Navigation Component.

With IHeader parameter. The Enterprise Navigation Component will not make any API call, and just update the information available into the parameter. The parameter is iheader. This object is property object available to update manually. The type is IHeader that has next properties:
- iheader: property object available to update manually.
  - IHeader type:
```
      {
        alertsUnread: `<<new alert unread number to set>>`
        menuOption: `<<new id menu option to set>>`. `enterpriseNavMenuHighlighted` event will be emit after update the menu option
      }
```
enterpriseNavHeader.update(iheader);

Use example with parameter:

  const enterpriseNavHeader = document.querySelector('enterprise-nav-header');

  let iheader: IHeader = {
    alertsUnread: 6
  }
  enterpriseNavHeader.update(iheader);

  let iheader: IHeader = {
    menuOption: "users"
  }
  enterpriseNavHeader.update(iheader);

In addition to the public method, Enterprise Navigation Component has the ability of update the menu option always that the URL has changed. In these cases, the component will emit the enterpriseNavMenuHighlighted event in order to inform that the value has changed.