#Hermes Tiles Grid Popup

###Why we created web component There was a need for the dashboord that is accessible from the app. Idea was to make popup like google-apps,where you can access to any app you have persmison Beacuse we have several angular and react apps we needed on solution for all apps.

![alt text][logo1] ####Google Example [logo1]: https://github.com/BrkatiDzo/mockjson/blob/master/google-card.png?raw=true "Google example"

####GamaSmart Example

###Using hermes-tiles-grid-popup

####Inputs apps : accepts array of objects with title, img, destination show-modal : true or false to display modal background-color : background of modal text-color : color of text

###Angular usage

    Add CUSTOM_ELEMENTS_SCHEMA to your app.module.ts
    import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    -------------------------------------------------------------
    add defineCustomElements to main.ts
    import { defineCustomElements } from 'hermes-tiles-grid-popup/loader';
    defineCustomElements(window);
    ---------------------------------------------------------------
    Add this to angular json for assets loading from web component
    { "glob": "**/*",
      "input": "./node_modules/hermes-tiles-grid-popup/dist/collection/components/my-component/assets",
      "output": "/assets/"
    }

####Notes for using web component in Angular Tag name here is gm-web-component Array that you send to it needs to be converted to json

-Example: apps={JSON.stringify(appsArr)}

###React usage

    In your index.tsx or index.jsx file add
     -import { applyPolyfills, defineCustomElements } from 'hermes-tiles-grid-popup/loader';
    -applyPolyfills().then(() => {
        defineCustomElements(window);
        });
    In you component where you use gm-react-web-component add import 'hermes-tiles-grid-popup'

####Notes for using web component in React Tag name here is gm-react-web-component Array that you send to it needs to be converted to json

-Example: apps={JSON.stringify(appsArr)}

###After Changes on web component

Steps after you finish changes on component:
Step 1: Update the version in package.json file
Step 2: npm run-script build prod
Step 3: push files to git
Step 4: npm publish

***You need to be logged in to npm account to make this changes***

####Why we use 2 components? React is still having problem with loading assets (pictures) that come from web component. In are apps assets that we need are in our project. Angular doesn't have any problems with component

Possible fix to use the same component in React as in Angular*
There can be made changes to webpack in react, but it's not recommended.

When React updates there support for web component we will use only one.

##Account for NPM: --username: gamasmart --pass: contact [email protected] for this info