export const COMMON_CONFIG = {
  "pageTitle": "Common Component UI",
  "viewTabs": [
    {"label": "UI", "id": 1},
    {"label": "Code", "id": 2},
    {"label": "Properties", "id": 3}
  ],
  "componentList": [
    {"label": "Documentation", "link": "#documentation", "list": [
        {"label": "ESP Common Documentation", "target":"_blank", "link": "https://antuit.atlassian.net/wiki/spaces/ESP/pages/1331003595/ESP+Common+UI+Components"},
        {"label": "How to make changes to ESP Common Components", "target": "_blank", "link": "https://antuit.atlassian.net/wiki/spaces/ANTUITINFR/pages/1419411466/Steps+to+make+changes+to+esp-common+npm+package"},
        {"label": "Common Component Release Notes", "target": "_blank", "link": "https://antuit.atlassian.net/wiki/spaces/ESP/pages/1653702827/UI+Common+Components" }
      ]},
    {"label": "Components", "list": [
        {"label": "header-label", "className": "header"},
        {"label": "footer","className": "footer-comp"},
        {"label": "single-select-dropdown-component", "className": "single-select"},
        {"label": "multi-select-dropdown-component", "className": "multi-select"},
        {"label": "card-component", "className": "card-component"},
        {"label": "toast", "className": "toast-comp"},
        {"label": "modal", "className": "modal-comp"},
        {"label": "primary-toolbar", "className": "toolbar-primary"},
        {"label": "loader", "className": "loader"},
        {"label": "hierarchical-dropdown", "className": "hierarchical-dropdown"},
        {"label": "e-charts", "className": "e-charts"},
        {"label": "side-menu-nav", "className": "side-menu-nav"},
        {"label": "simple-pagination", "className": "simple-pagination"},
        {"label": "left-side-menu-nav", "className": "left-side-menu-nav"},
        {"label": "simple-grid", "className": "simple-grid"}
      ]}
  ],
  "components": [
    { "label": "header-label", "class": "header", "activeTab": 1, "status": "prod-ready", "tag": "<esp-header></esp-header>", "properties": [
        {"label": "(headerEvent)", "type": "Event Binding", "description": "Use this function for logging out the user in the app.component.ts file", "required": true}
      ]},
    { "label": "footer", "class": "footer-comp", "activeTab": 1, "status": "prod-ready", "tag": "<esp-footer></esp-footer>"},
    {"label": "single-select-dropdown-component",  "class": "single-select", "status": "prod-ready", "activeTab": 1, "properties": [
        {"label": "[singleSelectOptions]", "required": true, "type": "Array", "code": [
            {"value": "Option One", "id": 1, "selected": false},
            {"value": "Option Two", "id": 2, "selected": false},
            {"value": "Option Three", "id": 3, "selected": false},
            {"value": "Option Four", "id": 4, "selected": false},
            {"value": "Option Five", "id": 5, "selected": false},
            {"value": "Option Six", "id": 6, "selected": false},
            {"value": "Option Seven", "id": 7, "selected": false}
          ], "description": "Takes an Array of Options", "defaultInput": "[]"},
        {"label": "[dropdownType]", "type": "String", "description": "singleSelect or multiSelect", "code": {"dropdownType": "singleSelect"}, "required": true, "defaultInput": ""},
        {"label": "[placeholder]", "type": "String", "description": "Pass a string as placeholder", "code": {"placeholder": "Please select an option"}, "required": true, "defaultInput": ""},
        {"label": "[dropdownDisabled]", "type": "Boolean", "description": "If true dropdown will be disabled", "code": {"dropdownDisabled": false}, "defaultInput": "false"},
        {"label": "[showClearSelection]", "type": "Boolean", "description": "If true show a clearSelection button which on click clear the ui selection", "code": {"showClearSelection": true}, "defaultInput": "false"},
        {"label": ",(clearSingleSelection)","type": "Event Binding", "description": "Emits a event that lets you clear selection in your child component"},
        {"label": "[showSearch]", "type": "Boolean", "description": "If true will show a search bar on top of the list", "code": {"showSearch": true}, "defaultInput": "false"},
        {"label": "(dropdownSearch)", "type": "Event Binding", "description": "Emits an event containing the searchText which you can use to filter your list"},
        {"label": "[isInfiniteScroll]", "type": "Boolean", "description": "If true will activate Infinite Scroll", "code": {"isInfiniteScroll": true}, "defaultInput": "false"},
        {"label": "(dropdownScrolled)", "type": "Event Binding", "description": "Emits an event when scrolled down where you can load more data"},
        {"label": "[dropUp]", "type": "Boolean", "description": "Use when dropdown is in the bottom of the page and when it extends the height of the page.", "required": false, "defaultInput": "false"},
      ],
      "dropDownName": "Common UI Example", "showClearSelection": true, "dropdownType": "singleSelect", "placeholder": "Please select an option", "dropdownList": [
        {"value": "Option One", "id": 1, "selected": false},
        {"value": "Option Two", "id": 2, "selected": false},
        {"value": "Option Three", "id": 3, "selected": false},
        {"value": "Option Four", "id": 4, "selected": false},
        {"value": "Option Five", "id": 5, "selected": false},
        {"value": "Option Six", "id": 6, "selected": false},
        {"value": "Option Seven", "id": 7, "selected": false}
      ]},
    {"label": "multi-select-dropdown-component", "status": "prod-ready", "activeTab": 1,  "class": "multi-select",
      "properties": [
        {"label": "[multiSelectOptions]", "required": true, "type": "Array", "code": [
            {"value": "Option One", "id": 1, "selected": false},
            {"value": "Option Two", "id": 2, "selected": false},
            {"value": "Option Three", "id": 3, "selected": false},
            {"value": "Option Four", "id": 4, "selected": false},
            {"value": "Option Five", "id": 5, "selected": false},
            {"value": "Option Six", "id": 6, "selected": false},
            {"value": "Option Seven", "id": 7, "selected": false}
          ], "description": "Takes an Array of Options", "defaultInput": "[]"},
        {"label": "[dropdownType]", "type": "String", "description": "singleSelect or multiSelect", "code": {"dropdownType": "multiSelect"}, "required": true, "defaultInput": ""},
        {"label": "[placeholder]", "type": "String", "description": "Pass a string as placeholder", "code": {"placeholder": "Please select options"}, "required": true, "defaultInput": ""},
        {"label": "[dropdownDisabled]", "type": "Boolean", "description": "If true dropdown will be disabled", "code": {"dropdownDisabled": false}, "defaultInput": "false"},
        {"label": "[showClearSelection]", "type": "Boolean", "description": "If true show a clearSelection button which on click clear the ui selection", "code": {"showClearSelection": true}, "defaultInput": "false"},
        {"label": "(clearSingleSelection)","type": "Event Binding", "description": "Emits a event that lets you clear selection in your child component"},
        {"label": "[showSearch]", "type": "Boolean", "description": "If true will show a search bar on top of the list", "code": {"showSearch": true}, "defaultInput": "false"},
        {"label": "(dropdownSearch)", "type": "Event Binding", "description": "Emits an event containing the searchText which you can use to filter your list"},
        {"label": "[isInfiniteScroll]", "type": "Boolean", "description": "If true will activate Infinite Scroll", "code": {"isInfiniteScroll": true}, "defaultInput": "false"},
        {"label": "(dropdownScrolled)", "type": "Event Binding", "description": "Emits an event when scrolled down where you can load more data"},
        {"label": "[dropUp]", "type": "Boolean", "description": "Use when dropdown is in the bottom of the page and when it extends the height of the page.", "required": false, "defaultInput": "false"},
      ],
      "dropDownName": "Common UI Example", "showClearSelection": true, "dropdownType": "singleSelect", "placeholder": "Please select an option", "dropdownList": [
        {"value": "Option One", "id": 1, "selected": false},
        {"value": "Option Two", "id": 2, "selected": false},
        {"value": "Option Three", "id": 3, "selected": false},
        {"value": "Option Four", "id": 4, "selected": false},
        {"value": "Option Five", "id": 5, "selected": false},
        {"value": "Option Six", "id": 6, "selected": false},
        {"value": "Option Seven", "id": 7, "selected": false}
      ]},
    {"label": "card-component", "activeTab": 1, "status": "prod-ready",  "class": "card-component",
      "breadcrumb":{
        "title": "Breadcrumb",
        "breadcrumbList": [
          "info",
          "details"
        ]
      },
      "cardFilterList": [
        {
          "name": "card-filter",
          "dropdownType": "singleSelect",
          "selectAllLabel": "All",
          "showSelectAll": true,
          "createScope": true,
          "resetUi": true,
          "options": [
            {
              "value": "1",
              "label": "Option One",
              "selected": true
            },
            {
              "value": "2",
              "label": "Option Two",
              "selected": false
            },
            {
              "value": "7",
              "label": "Option Three",
              "selected": false
            },
            {
              "value": "4",
              "label": "Option Four",
              "selected": false
            }
          ]
        }
      ],
      "properties": [
        {"label": "[cardTitle]", "type": "String", "code": {"cardTitle": "Card Title"}, "description": "Provide a title for the Card", "defaultInput": ""},
        {"label": "[styleContent]", "type": "String", "code": {"styleContent": "p-32"}, "description": "Pass class(es) that you would like apply to card-content node", "defaultInput": ""},
        {"label": "[cardSubTitle]", "type": "String", "code": {"cardSubTitle": "Card SubTitle Title"}, "description": "Provide a sub-title for the Card", "defaultInput": ""},
        {"label": "[showBorder]", "type": "Boolean", "code": {"showBorder": true}, "description": "Shows a border between the Card Title and Card Content", "defaultInput": true},
        {"label": "[autoHeight]", "type": "Boolean", "code": {"autoHeight": true}, "description": "Sets a card height according to your content", "defaultInput": true},
        {"label": "[showBreadcrumbs]", "type": "Boolean", "code": {"breadcrumbs": true}, "description": "Pass true to turn on breadcrumbs", "defaultInput": false},
        {"label": "[i18n]", "type": "Object", "description": "Pass your components i18n translation file to translate labels with in Card Component",
          "code": {
            "translations": {
              "header": "Common Component UI",
              "card-filter": "Card Filter"
            }
          }},
        {"label": "[breadcrumbs]", "type": "Object", "code": {
            "title": "Breadcrumb",
            "breadcrumbList": [
              "info",
              "details"
            ]
          }, "description": "Take an Object containing the breadcrumb structure"},
        {"label": "(BreadcrumbClicked)", "type": "Event Binding", "description": "You can use link event to navigate to respective ui"},
        {"label": "(cardFilterValueChanged)", "type": "Event Binding", "description": "Can you bind an event to the Card Filter Selection, it also returns the value changes in the event"},
        {"label": "[cardFilterList]", "type": "Array", "code": [{
            "name": "card-filter",
            "dropdownType": "singleSelect",
            "selectAllLabel": "All",
            "showSelectAll": true,
            "createScope": true,
            "resetUi": true,
            "options": [
              {
                "value": "1",
                "label": "Option One",
                "selected": true
              },
              {
                "value": "2",
                "label": "Option Two",
                "selected": false
              },
              {
                "value": "7",
                "label": "Option Three",
                "selected": false
              },
              {
                "value": "4",
                "label": "Option Four",
                "selected": false
              }
            ]}
          ], "description": "Pass a similar structured array shown in the code section"}
      ]},
    {"label": "toast", "activeTab": 1, "status": "prod-ready",  "class": "toast-comp",
      "functionalProperties": [
        {"label": "addToast()", "description": "After you import the ToastService you can you this function to pass your toastConfig to this.toastService.addToasts(toastConfig)", "code": {
            "statusToastConfig": {
              "data": {
                "container": {
                  "class": "success-border"
                },
                "content": {
                  "header": "optimize-submit-toast-header",
                  "message": "optimize-submit-toast-message",
                  "class": "success-status-content"
                },
                "icon": {
                  "type": "fa-check",
                  "class": "success-icon-container"
                }
              },
              "position": {
                "top": true,
                "bottom": false,
                "left": false,
                "right": false
              },
              "type": "statusToast",
              "showTimeout": "4000"
            },
            "singleDetailToastConfig": {
              "data": {
                "value": "",
                "link": {
                  "class": "comment-icon",
                  "text": ""
                },
                "icon": {
                  "class": "close-icon"
                },
                "container": {
                  "class": "comment-added"
                },
                "text": "Single Detail Toast",
                "addTimeout": true,
                "toastTimeout": "5000"
              },
              "position": {
                "top": true,
                "bottom": false,
                "left": true,
                "right": true
              },
              "type": "singleDetailToast"
            },
            "multiButtonToast": {
              "data": {
                "buttons": [
                  {
                    "name": "Save"
                  }
                ],
                "links": [
                  {
                    "name": "Cancel"
                  }
                ],
                "infoText": {
                  "show": false,
                  "text": "Double click to edit single values, single click off the field to return to Selection Mode. "
                }
              },
              "style": "multi-button-toast-primary-background",
              "position": {
                "top": false,
                "bottom": true,
                "left": false,
                "right": false
              },
              "type": "multiButtonToast"
            }
          }},
        {"label": "deleteToast(config)", "description": "Use deleteToast(config) to delete specific toasts by passing the specific toast config. This function is generally used to close toast"},
        {"label": "deleteToasts()", "description": "Use deleteToast() to delete all toasts. You can use this function to delete any toast that is being displayed."}

      ]
      , "tag": "<esp-toast></esp-toast>"},
    {"label": "modal", "activeTab": 1, "status": "prod-ready", "class": "modal-comp", "functionalProperties": [
        {"label": "openConfirmModal()", "description": "After you import the ModalService you can you this function to pass your modalConfig to this.modalService.openConfirmModal",
          "code": {
            "modalConfig": {
              "data": {
                "title": "Confirm Modal",
                "message": "This is a Confirm modal",
                "disableContinue": false,
                "i18n": "this.i18n"
              }
            }
          }},
        {"label": "onClose()", "description": "Create a subject that you can use to get response when close or confirm is clicked ex: this.modalService.bsModalRef.content.onClose = new Subject<boolean>();"},
        {"label": "onClose.subscribe()", "description": "Subscribe to onClose subject, whose reponse you can use to fire different events in you component, Ex: this.modalService.bsModalRef.content.onClose.subscribe()"}
      ]},
    {"label": "primary-toolbar", "activeTab": 1, "status": "prod-ready", "class": "toolbar-primary", "properties": [
        {"label": "[tabList]", "required": true, "type": "Array", "defaultInput": "[]", "description": "Pass an array of objects for your tabs.", "code": [
            "TabOne", "TabTwo", "TabThree"
          ]},
        {"label":"[activeTabIndex]", "required": true, "type": "Number", "defaultInput": "0", "description": "Initially your activeTabIndex wil be 0, this variable with change will the change in tabSelection"},
        {"label": "(tabChangeEvent)", "required": true, "type": "Event Binding", "defaultInput": "", "description": "Emits and event that you can use to apply changes to tabs in you component. Also use this event to update the activeTabIndex"}
      ],
      "tabs": ["Tab One","Tab Two","Tab Three"]},

    {"label": "loader", "activeTab": 1, "status": "prod-ready",  "class": "loader", "tag": "<esp-loader></esp-loader>", "functionalProperties": [
        {"label": "startLoader()", "description": "After importing the LoaderService you can use loaderService.startLoader() to show the loader for any API your component might perform."},
        {"label": "stopLoader()", "description": "After you get your response or complete the API call you should use stopLoader() to get rid of the loader."}
      ]},
    {"label": "hierarchical-dropdown", "activeTab": 1, "status": "prod-ready",  "class": "hierarchical-dropdown",
      "tag": "<esp-hirarchical-dropdown></esp-hirarchical-dropdown>", "properties": [
        {"label": "[selectAllLabel]", "required": true, "type": "String", "defaultInput": "All", "description": "Provide a title for the hierarchical dropdown.", "code":[]
        },
        {"label": "[showBorder]", "required": true, "type": "Boolean", "defaultInput": "False", "description": "If true dropdown will be enabled.", "code":[]
        },
        {"label": "[hierarchicalSelectOptions]", "required": true, "type": "Object", "defaultInput": "[]", "description": "Pass the object inside the code.", "code":[
            {
              "rootNode": true,
              "expanded": true,
              "children": [
                {
                  "expanded": true,
                  "selected": true,
                  "value": "1",
                  "label": "KROGER CO HQ",
                  "children": [
                    {
                      "selected": true,
                      "value": "2001",
                      "children": [],
                      "label": "KROGER",
                      "dimensionLevel": "location"
                    }
                  ],
                  "dimensionLevel": "region"
                },
                {
                  "expanded": true,
                  "selected": true,
                  "value": "2",
                  "label": "WAKEFERN",
                  "children": [
                    {
                      "selected": true,
                      "value": "2002",
                      "children": [],
                      "label": "SHOPRITE",
                      "dimensionLevel": "location"
                    }
                  ],
                  "dimensionLevel": "region"
                },
                {
                  "expanded": true,
                  "selected": true,
                  "value": "3",
                  "label": "WALMART STORES HQ",
                  "children": [
                    {
                      "selected": true,
                      "value": "2003",
                      "children": [],
                      "label": "WALMART",
                      "dimensionLevel": "location"
                    }
                  ],
                  "dimensionLevel": "region"
                }
              ]
            }
          ]
        },
        {"label": "(selectChange)", "required": true, "type": "Event Binding", "defaultInput": "", "description": "Event that you can use to change dropdown in you component. Also use this event to update the activeDropDown.", "code":[]
        }

      ]},
    {"label": "e-charts", "activeTab": 1, "status": "prod-ready", "class": "e-charts", "properties": [
        {"label": "[initOpts]", "required": true, "defaultInput": "{}", "type": "Object", "description": "Takes an object where key is renderer and value is svg", "code": {"renderer": "svg"}},
        {"label": "[options]", "required": true, "defaultInput": "{}", "type": "Object", "description": "Takes an object options where you can pass the values need to create eCharts", "code": {
            "legend": {},
            "tooltip": {
              "trigger": "axis",
              "showContent": false
            },
            "dataset": {
              "source": [
                ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
                ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1]
              ]
            },
            "xAxis": { "type": "category" },
            "yAxis": { "gridIndex": 0 },
            "grid": { "top": "55%" },
            "series": [
              {
                "type": "line",
                "smooth": true,
                "seriesLayoutBy": "row",
                "emphasis": { "focus": "series" }
              },
              {
                "type": "bar",
                "smooth": true,
                "seriesLayoutBy": "row",
                "emphasis": { "focus": "series" }
              },
              {
                "type": "line",
                "smooth": true,
                "seriesLayoutBy": "row",
                "emphasis": { "focus": "series" }
              },
              {
                "type": "bar",
                "smooth": true,
                "seriesLayoutBy": "row",
                "emphasis": { "focus": "series" }
              },
              {
                "type": "pie",
                "id": "pie",
                "radius": "30%",
                "center": ["50%", "25%"],
                "emphasis": {
                  "focus": "self"
                },
                "label": {
                  "formatter": "{b}: {@2012} ({d}%)"
                },
                "encode": {
                  "itemName": "product",
                  "value": "2012",
                  "tooltip": "2012"
                }
              }
            ]
          }}
      ]},


    {"label": "side-menu-nav", "activeTab": 1, "status": "prod-ready",  "class": "side-menu-nav",
      "properties": [
        {"label": "[position]", "required": true, "defaultInput":"left", "type": "String", "description": "Supply a position for the sidebar. Options: left,right,top,bottom"},
        {"label": "[minHeight]", "required": true, "defaultInput":100, "type": "Number", "description": "Supply a numeric value for the height of the sidebar"},
        {"label": "[sidebarData]", "required": true, "defaultInput":"[]", "type": "Array", "description": "Supply an array of menu items to be list in the sidebar", "code":
            ["Red", "Yellow", "Black", "Blue", "Purple"]}
      ]},
    {"label": "simple-pagination", "activeTab": 1, "status": "prod-ready",  "class": "simple-pagination",
      "properties": [
        {"label": "[totalRows]", "required": true, "type": "Number", "defaultInput": "", "description": "Pass the length of your table.", "code":[]
        },

        {"label": "[pageOptions]", "required": true, "type": "Object", "defaultInput": "[]", "description": "Pass the object inside the code.", "code":[
            {
              "show": true,
              "options": [
                {
                  "label": "view-10-rows",
                  "value": 10,
                  "selected": true
                },
                {
                  "label": "view-20-rows",
                  "value": 20,
                  "selected": false
                }
              ]
            }

          ]
        },
        {"label": "[pageAfter]", "required": true, "type": "Number", "defaultInput": "0", "description": "If true show the next page.", "code":[]
        },
        {"label": "(paginationClicked)", "required": true, "type": "Event Binding", "defaultInput": "", "description": "Event that you can use to change the current page data in your component.", "code":[]
        }
      ]},
    {"label": "left-side-menu-nav", "activeTab": 1, "status": "prod-ready",  "class": "left-side-menu-nav",
      "properties": [{"label": "[i18n]", "required": true, "defaultInput": "{}", "type": "Object", "description": "Pass your components translation Object that has the translation for the icons titles"},
        {"label": "[navigationIcon]", "required": true, "defaultInput": "[]", "type": "Array", "description": "Pass the array of object that contain the data for the displaying links", "code": [
            {
              "icon": "fas fa-th-large",
              "iconPath": "/assets/icon/workspace.svg",
              "title": "Workspace",
              "url": "ai-vm-web-console"
            },
            {
              "icon": "fas fa-network-wired",
              "iconPath": "/assets/icon/sessions.svg",
              "title": "Spark Session",
              "url": "spark-session"
            },
            {
              "icon": "fas fa-network-wired",
              "iconPath": "/assets/icon/profile-settings.svg",
              "title": "Authorization",
              "url": "authorization"
            },
            {
              "icon": "fas fa-network-wired",
              "iconPath": "/assets/icon/multi.svg",
              "title": "Virtual Machine Details",
              "url": "virtual-machine-details"
            }
          ]},
        {"label": "(sideBarExpanded)", "required": true, "type": "Event Binding", "defaultInput": "", "description": "Use event binding to make change in your component as needed."}]},
    {"label": "simple-grid", "activeTab": 1, "status": "prod-ready", "class": "simple-grid"}
  ],
  "resources": {
    "tableDataPageOne":[
      {"name": "A", "age": 30 , "role": "Manager1"},
      {"name": "B", "age": 31 , "role": "Manager2"},
      {"name": "C", "age": 32 , "role": "Manager3"},
      {"name": "D", "age": 33 , "role": "Manager4"},
      {"name": "E", "age": 34 , "role": "Manager5"},
      {"name": "F", "age": 35 , "role": "Manager6"},
      {"name": "G", "age": 36 , "role": "Manager7"},
      {"name": "H", "age": 37 , "role": "Manager8"},
      {"name": "I", "age": 38 , "role": "Manager9"},
      {"name": "J", "age": 39 , "role": "Manager10"}
    ],
    "tableDataPageTwo":[
      {"name": "K", "age": 40 , "role": "Manager11"},
      {"name": "L", "age": 41 , "role": "Manager12"}
    ],
    "dropdownAdditionalArray": [
      {"value": "Option Eight (New)", "id": 8, "selected": false},
      {"value": "Option Nine (New)", "id": 9, "selected": false},
      {"value": "Option Ten (New)", "id": 10, "selected": false}
    ],
    "modalConfig": {
      "data": {
        "title": "Confirm Modal",
        "message": "This is a Confirm modal",
        "disableContinue": false
      }
    },
    "formsModalConfig": {
      "data": {
        "title": "Forms Modal"
      }
    },
    "hierarchicalSelectOptions": {
      "rootNode": true,
      "expanded": true,
      "children": [
        {
          "expanded": true,
          "selected": true,
          "value": "1",
          "label": "KROGER CO HQ",
          "children": [
            {
              "selected": true,
              "value": "2001",
              "children": [],
              "label": "KROGER",
              "dimensionLevel": "location"
            }
          ],
          "dimensionLevel": "region"
        },
        {
          "expanded": true,
          "selected": true,
          "value": "2",
          "label": "WAKEFERN",
          "children": [
            {
              "selected": true,
              "value": "2002",
              "children": [],
              "label": "SHOPRITE",
              "dimensionLevel": "location"
            }
          ],
          "dimensionLevel": "region"
        },
        {
          "expanded": true,
          "selected": true,
          "value": "3",
          "label": "WALMART STORES HQ",
          "children": [
            {
              "selected": true,
              "value": "2003",
              "children": [],
              "label": "WALMART",
              "dimensionLevel": "location"
            }
          ],
          "dimensionLevel": "region"
        }
      ]
    },
    "eChartsData": {
      "legend": {},
      "tooltip": {
        "trigger": "axis",
        "showContent": false
      },
      "dataset": {
        "source": [
          ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
          ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
          ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
          ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
          ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1]
        ]
      },
      "xAxis": { "type": "category" },
      "yAxis": { "gridIndex": 0 },
      "grid": { "top": "55%" },
      "series": [
        {
          "type": "line",
          "smooth": true,
          "seriesLayoutBy": "row",
          "emphasis": { "focus": "series" }
        },
        {
          "type": "bar",
          "smooth": true,
          "seriesLayoutBy": "row",
          "emphasis": { "focus": "series" }
        },
        {
          "type": "line",
          "smooth": true,
          "seriesLayoutBy": "row",
          "emphasis": { "focus": "series" }
        },
        {
          "type": "bar",
          "smooth": true,
          "seriesLayoutBy": "row",
          "emphasis": { "focus": "series" }
        },
        {
          "type": "pie",
          "id": "pie",
          "radius": "30%",
          "center": ["50%", "25%"],
          "emphasis": {
            "focus": "self"
          },
          "label": {
            "formatter": "{b}: {@2012} ({d}%)"
          },
          "encode": {
            "itemName": "product",
            "value": "2012",
            "tooltip": "2012"
          }
        }
      ]
    },
    "pagination": {
      "show": true,
      "options": [
        {
          "label": "view-10-rows",
          "value": 10,
          "selected": true
        },
        {
          "label": "view-20-rows",
          "value": 20,
          "selected": false
        }
      ]
    },
    "toolbarNavIcons": [
      {
        "icon": "fas fa-th-large",
        "iconPath": "/assets/icon/workspace.svg",
        "title": "Workspace",
        "url": "ai-vm-web-console"
      },
      {
        "icon": "fas fa-network-wired",
        "iconPath": "/assets/icon/sessions.svg",
        "title": "Spark Session",
        "url": "spark-session"
      },
      {
        "icon": "fas fa-network-wired",
        "iconPath": "/assets/icon/profile-settings.svg",
        "title": "Authorization",
        "url": "authorization"
      },
      {
        "icon": "fas fa-network-wired",
        "iconPath": "/assets/icon/multi.svg",
        "title": "Virtual Machine Details",
        "url": "virtual-machine-details"
      }
    ]
  }
};

export const COMMON_TAGS = {
  tags: [
    {"label": "single-select-dropdown-component",
      "tag": `
        <div class="font-weight-bold text-uppercase">Normal Dropdown</div>
            <esp-multiselect-dropdown
              [dropdownType]="comp['dropdownType']"
              [singleSelectOptions]="comp['dropdownList']"
              class="single-select"
              [placeholder]="comp.placeholder"
              [showClearSelection]="comp['showClearSelection']"
              [showSearch]="true"
              (dropdownSearch)="searchResults($event, 'Single Select Dropdown Component')"
              [isInfiniteScroll]="true"
              (dropdownScrolled)="scrollResults($event, 'Single Select Dropdown Component')"
              [dropdownName]="comp['dropDownName']"></esp-multiselect-dropdown>

            <div class="font-weight-bold m-t-24 text-uppercase">Dropdown Inverted</div>
            <span>*Use when dropdown is in the bottom of the page and when it extends the height of the page.</span>
            <esp-multiselect-dropdown
              [dropdownType]="comp['dropdownType']"
              [singleSelectOptions]="comp['dropdownList']"
              class="single-select"
              [placeholder]="comp.placeholder"
              [showClearSelection]="comp['showClearSelection']"
              [showSearch]="true"
              (dropdownSearch)="searchResults($event, 'Single Select Dropdown Component')"
              [isInfiniteScroll]="true"
              (dropdownScrolled)="scrollResults($event, 'Single Select Dropdown Component')"
              [dropUp] = "true"
              [dropdownName]="comp['dropDownName']"></esp-multiselect-dropdown>`},
    {"label": "multi-select-dropdown-component",
      "tag": `
        <div class="font-weight-bold text-uppercase">Normal Dropdown</div>
            <esp-multiselect-dropdown
              [dropdownType]="'multiSelect'"
              [multiSelectOptions]="comp['dropdownList']"
              class="multi-select"
              [placeholder]="comp.placeholder"
              [showClearSelection]="comp['showClearSelection']"
              [showSearch]="true"
              (dropdownSearch)="searchResults($event, 'Multi Select Dropdown Component')"
              [isInfiniteScroll]="true"
              (dropdownScrolled)="scrollResults($event, 'Multi Select Dropdown Component')"
              [dropdownName]="comp['dropDownName']"></esp-multiselect-dropdown>

            <div class="font-weight-bold m-t-24 text-uppercase">Dropdown Inverted</div>
            <span>*Use when dropdown is in the bottom of the page and when it extends the height of the page.</span>

            <esp-multiselect-dropdown
              [dropdownType]="'multiSelect'"
              [multiSelectOptions]="comp['dropdownList']"
              class="multi-select"
              [placeholder]="comp.placeholder"
              [showClearSelection]="comp['showClearSelection']"
              [showSearch]="true"
              (dropdownSearch)="searchResults($event, 'Multi Select Dropdown Component')"
              [isInfiniteScroll]="true"
              (dropdownScrolled)="scrollResults($event, 'Multi Select Dropdown Component')"
              [dropUp] = "true"
              [dropdownName]="comp['dropDownName']"></esp-multiselect-dropdown>`},
    {"label": "card-component", "tag": `
    <esp-card-component
      [cardTitle]="Card Title"
      [cardSubTitle]="Card SubTitle"
      [autoHeight]="true"
      [showBreadcrumbs]="true"
      [breadcrumbs]="comp['breadcrumb']"
      (BreadcrumbClicked)="breadcrumbClicked($event)"
      [i18n]="i18n"
      [cardFilterList]="comp['cardFilterList']"
      (cardFilterValueChanged)="onCardFilterValueChanged($event)"
      [styleContent]="'p-32'">
      <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s,
      when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
      and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
    </esp-card-component>`},
    {"label": "primary-toolbar", "tag": `
    <aeap-primary-toolbar
      [tabList]="comp['tabs']"
      [openWorkbookList]="openWorkbookList"
      [activeTabIndex]="activeTabIndex"
      (tabChangeEvent)="onTabChange($event)">
    </aeap-primary-toolbar>
    <div class="tab-content" *ngIf="activeTab" === "1"">This is the <b>Tab One</b> Content.</div>
    <div class="tab-content" *ngIf="activeTab" === "2"">This is the <b>Tab Two</b> Content.</div>
    <div class="tab-content" *ngIf="activeTab" === "3"">This is the <b>Tab Three</b> Content.</div>`},
    {"label": "e-charts", "tag": `
      <div echarts
        [initOpts]="exampleChartOpts"
        [options]="exampleChart"
        class="col-md-12 m-b-16">
      </div>`},
    {"label": "side-menu-nav", "tag": `
    <esp-simple-side-bar
      [position]="position"
      [minHeight]="30"
      [sidebarData]="sidebarData">
    </esp-simple-side-bar>
    <div class="btn-container">
      <button class="btn btn-primary m-r-16" (click)="openSideMenu('left')">Left</button>
      <button class="btn btn-primary m-r-16" (click)="openSideMenu('right')">Right</button>
      <button class="btn btn-primary m-r-16" (click)="openSideMenu('top')">Top</button>
      <button class="btn btn-primary" (click)="openSideMenu('bottom')">Bottom</button>
    </div>`},
    {"label": "simple-pagination", "tag": `
      <table style="width: 100%">
        <tr class="header">
          <th> Name</th>
          <th>Age</th>
          <th>Role</th>
        </tr>
        <tr *ngFor="let prop of comp.tableProperties">
          <td >{{prop.name}}</td>
          <td >{{prop.age}}</td>
          <td >{{prop.role}}</td>
        </tr>
    </table>
    <esp-pagination
      [totalRows]="12"
      [pageOptions]="pagination?.options"
      [pageAfter]="pageAfter"
      (paginationClicked)="onPaginationClicked($event)">
    </esp-pagination>`},
    {"label": "left-side-menu-nav", "tag": `
            <aeap-left-side-menu-nav
              [i18n]="i18n"
              [navigationIcon]="toolbarNavIcons"
              (sideBarExpanded)="sideBarExpanded($event)">
            </aeap-left-side-menu-nav>`}
  ]
}

export const COMMONTRANSLATIONS = {
  "translations": {
    "header": "Common Component UI",
    "card-filter": "Card Filter",
    "name": "Name",
    "age": "Age",
    "role": "Role",
    "interests": "Interests",
    "comments": "Comments",
    "header-label": "Header",
    "footer": "Footer",
    "single-select-dropdown-component": "Single Select Dropdown Component",
    "multi-select-dropdown-component": "Multi Select Dropdown Component",
    "card-component": "Card Component",
    "toast": "Toast",
    "modal": "Modal",
    "primary-toolbar": "Primary Toolbar",
    "loader": "Loader",
    "e-charts": "E-Charts",
    "side-menu-nav": "Side Menu Nav",
    "simple-pagination": "Simple Pagination",
    "hierarchical-dropdown": "Hierarchical Dropdown",
    "simple-grid": "Simple Grid",
    "left-side-menu-nav": "Left Side Menu Nav"
  }
}

export const CommonUIAppConfig = {
  applicationId: 10,
  applicationName: 'cu',
  configJson: COMMON_CONFIG,
  i18n: COMMONTRANSLATIONS,
  shortUserName: 'SM',
  userFullName: 'Sujan Manandhar',
  userId: 'f5ead135-0a68-4c05-80e4-4fb9c0fb5a75',
  __typename: 'Application'
}

export const MockUserConfig = {
  applications: [
    {
      applicationId: 1,
      applicationName: "df",
      configJson: {},
      i18n: {
        translations: {
          df: 'Demand Forecasting'
        }
      },
      __typename: "Application"
    },
    {
      applicationId: 2,
      applicationName: "dpo",
      configJson: {},
      i18n: {
        translations: {
          dpo: 'Predictive Ordering'
        }
      },
      __typename: "Application"
    },
    {
      applicationId: 3,
      applicationName: "dmgmt",
      configJson: {},
      i18n: {
        translations: {
          dmgmt: "Data Management"
        }
      },
      __typename: "Application"
    },
    {
      applicationId: 5,
      applicationName: "tpo",
      configJson: {},
      i18n: {
        translations: {
          tpo: "Trade Promotion"
        }
      },
      __typename: "Application"
    },
    {
      applicationId: 6,
      applicationName: "iop",
      configJson: {},
      i18n: {
        translations: {
          iop: "Order Promising"
        }
      },
      __typename: "Application"
    },
    {
      applicationId: 7,
      applicationName: "cc",
      configJson: {},
      i18n: {
        translations: {
          cc: "Control Center"
        }
      },
      __typename: "Application"
    },
    {
      applicationId: 8,
      applicationName: "home",
      configJson: {},
      i18n: {
        translations: {
          home: "Home"
        }
      },
      __typename: "Application"
    },
    {
      applicationId: 9,
      applicationName: "dp",
      configJson: {},
      i18n: {
        translations: {
          dp: "Demand Planning"
        }
      },
      __typename: "Application"
    },
    {
      applicationId: 10,
      applicationName: "vm",
      configJson: {},
      i18n: {
        translations: {
          vm: "AI Virtual Machine Web Console"
        }
      },
      __typename: "Application"
    },
    {
      applicationId: 13,
      applicationName: "fars",
      configJson: {},
      i18n: {
        translations: {
          fars: "FARS"
        }
      },
      __typename: "Application"
    }
  ],
  defaultApp: "home",
  email: "sujan.manandhar@antuit.ai",
  espUserToken: "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5mbyI6eyJpZCI6ImY1ZWFkMTM1LTBhNjgtNGMwNS04MGU0LTRmYjljMGZiNWE3NSIsIm5hbWUiOiJTdWphbiBNYW5hbmRoYXIiLCJnaXZlbk5hbWUiOiJTdWphbiIsImZhbWlseU5hbWUiOiJNYW5hbmRoYXIiLCJlbWFpbCI6InN1amFuLm1hbmFuZGhhckBhbnR1aXQuYWkiLCJ1c2VyRXh0ZXJuYWxJZCI6ImFmZTYzZDQ1LWNmMTYtNDEzMC04YTJlLTU2MTdiYTYyZTY4MyJ9LCJpYXQiOjE2NDkwODkyNjQsImV4cCI6MTY1OTQ1NzI2NCwiYXVkIjoiaHR0cHM6Ly93d3cuYW50dWl0LmFpLyIsImlzcyI6IkFudHVpdCBBSSIsInN1YiI6ImFkbWluQGFudHVpdC5haSJ9.l09e1Sk9BK9VG70v6Z66hajTzWu5QPPiXMpWNZRswy9zcvbK6ZNfzPb1Ga3zr4PUe-9uE-WtCBbfZIhkO7y6tw",
  firstName: "Sujan",
  lastName: "Manandhar",
  locale: null,
  userId: "f5ead135-0a68-4c05-80e4-4fb9c0fb5a75",
  __typename: "User"
}