import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>

    <p>Built with the official <a href="https://cloudinary.com">Cloudinary</a> SDK for Angular (AKA Angular 2).
    
    <p>Check it out - <a href="https://www.npmjs.com/package/@cloudinary/angular">https://www.npmjs.com/package/@cloudinary/angular</a>
    
    <h1>Demo</h1>
    
    <h2>Displaying a Facebook profile image cropped and automatically served with an optimized file format for your browser and optimal quality</h2>
    <p class="hint">Hint: Open your dev tools in the network panel and filter by "chucknorris", see the response "content-type" header
    <cl-image
            quality="auto"
            fetch_format="auto"
            width="300"
            crop="scale"
            public-id="officialchucknorrispage"
            type="facebook"
            angle="20">
        <cl-transformation effect="art:hokusai"></cl-transformation>
        <cl-transformation border="3px_solid_rgb:00390b" radius="20"></cl-transformation>
    </cl-image>

    <h2>Displaying an uploaded image with an overlay image, and with an optimized file format for your browser and optimal quality</h2>
    <p class="hint">Hint: Open your dev tools in the network panel and filter by "face_center", see the response "content-type" header
    <cl-image public-id="face_center">
      <cl-transformation width="300" height="200" gravity="face" crop="fill"></cl-transformation>
      <cl-transformation width="80" gravity="south_east" x="5" y="5" overlay="sample_watermark"></cl-transformation>
      <cl-transformation quality="auto" fetch_format="auto"></cl-transformation>
    </cl-image>
  `,
  styles: [`
    .hint {
      font-size: 11px;  
    }
    .selected {
      background-color: #CFD8DC !important;
      color: white;
    }
    .heroes {
      margin: 0 0 2em 0;
      list-style-type: none;
      padding: 0;
      width: 15em;
    }
    .heroes li {
      cursor: pointer;
      position: relative;
      left: 0;
      background-color: #EEE;
      margin: .5em;
      padding: .3em 0;
      height: 1.6em;
      border-radius: 4px;
    }
    .heroes li.selected:hover {
      background-color: #BBD8DC !important;
      color: white;
    }
    .heroes li:hover {
      color: #607D8B;
      background-color: #DDD;
      left: .1em;
    }
    .heroes .text {
      position: relative;
      top: -3px;
    }
    .heroes .badge {
      display: inline-block;
      font-size: small;
      color: white;
      padding: 0.8em 0.7em 0 0.7em;
      background-color: #607D8B;
      line-height: 1em;
      position: relative;
      left: -1px;
      top: -4px;
      height: 1.8em;
      margin-right: .8em;
      border-radius: 4px 0 0 4px;
    }
  `]
})
export class AppComponent {
  title = 'Cloudinary Angular2+ SDK';
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
// Cloudinary module
import {CloudinaryModule, CloudinaryConfiguration, provideCloudinary} from '@cloudinary/angular';


import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    CloudinaryModule    
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    provideCloudinary(require('cloudinary-core'),
    {
      cloud_name: 'demo'
    } as CloudinaryConfiguration)
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[text], button {
  color: #888;
  font-family: Cambria, Georgia;
}
a {
  cursor: pointer;
  cursor: hand;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Cloudinary Angular SDK</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfills for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>

    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>

    <script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    <script>
      System.config({
        map: {
          '@cloudinary/angular': 'npm:@cloudinary/angular',
          'cloudinary-core': 'npm:cloudinary-core',
        },
        packages: {
          '@cloudinary/angular': {
            main: 'index.js',
            defaultExtension: 'js'
          },
          'cloudinary-core': {
            main: 'cloudinary-core-shrinkwrap.js',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>