hermes-tiles-grid-popup

#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"

---

!alt text
####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

``javascript
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

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

###React usage

`javascript
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

`javascript
-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 info@gamasmart.io for this info