Id Wrapper Breadcrumb

It will convert nested data to breadcrumb format to display heading.

Features/Functionality

Click event callback will be called on click.
Back functionality.
Click event call back will be called on click of Back Button.
Component is responsive.
It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependencies

jquery
shared styles
shared scripts

HTML Structure

<require from="{user_path}/id_wrapper_breadcrumbs/id_wrapper_breadcrumb"></require>
<cst-id-wrapper-breadcrumb item.bind="{item}" options.bind="{options}" ext-active-id.bind="{activeId}"  evt-click-callback.bind="{evtClickCallback}"></cst-id-wrapper-breadcrumb>

Bindable Properties

Property	Data Type	Required	Description
item	object	Yes	Data to be passed to component. It is reference type object
options	object	No	Options for component.
extActiveId	string	Yes	Set Breadcrumb data as per ID.
evtClickCallback	method	No	Method to be called on click event.

Structure of bindable properties

items

 {
      1: {
          headingProp: 'heading'
      },...
 }

options

{
  headingProp: '',
  pageLabel: {}
}

evtClickCallback

evtClickCallback(_event,_info);
_info = {
    overrideContext: overrideContext,
    value: item
}

Note

While giving the classes in page, give them in nested structure.

Rules

Working Example

HTML

<template>
  <require from="./components/id_wrapper_breadcrumbs/id_wrapper_breadcrumb"></require>
  <div>
       <cst-id-wrapper-breadcrumb item.bind="item" options.bind="options" ext-active-id.bind="activeId" evt-click-callback.bind="evtClickCallback"></cst-id-wrapper-breadcrumb>
  </div>
</template>

class MyCls{
    constructor(){
        this.item = {
      '1': {
        chartHeading: 'Label 1'
      },
      '2': {
        chartHeading: 'Label 2'
      },
      '3': {
        chartHeading: 'Label 3'
      },
      '1_1': {
        chartHeading: 'Label 1 child 1'
      },
      '2_1': {
        chartHeading: 'Label 2 child 2'
      },
      '3_1': {
        chartHeading: 'Label 3 child 3'
      },
      '1_1_1': {
        chartHeading: 'Label 1 child 1 child 1'
      },
      '2_1_1': {
        chartHeading: 'Label 2 child 2 child 2'
      },
      '3_1_1': {
        chartHeading: 'Label 3 child 3 child 3'
      }

    };
    this.activeId = '1_1_1';
    }

    evtClickCallback(_event,_info){
        console.log(_event);
        console.log(_info);
    }
}
export { MyCls }