Branch created for Runtime widget support

package.json

@@ -14,7 +14,8 @@
  "buildPatch": "cd projects/gp-event-chart && npm version patch && ng build gp-event-chart && cd ../../dist/gp-event-chart && npm pack && move *.tgz ../",
  "buildMinor": "cd projects/gp-event-chart && npm version minor && ng build gp-event-chart && cd ../../dist/gp-event-chart && npm pack && move *.tgz ../",
  "buildMajor": "cd projects/gp-event-chart && npm version major && ng build gp-event-chart && cd ../../dist/gp-event-chart && npm pack && move *.tgz ../",
- "serve": "ng build gp-event-chart && npm i dist/gp-event-chart && ng s"
+ "serve": "ng build gp-event-chart && npm i dist/gp-event-chart && ng s",
+ "runtime": "gulp --gulpfile ./runtime/gulpfile.js"
  },
  "private": true,
  "dependencies": {
@@ -58,11 +59,23 @@
  "karma-coverage-istanbul-reporter": "~2.0.1",
  "karma-jasmine": "~2.0.1",
  "karma-jasmine-html-reporter": "^1.4.0",
- "ng-packagr": "^5.4.0",
+ "ng-packagr": "^9.1.1",
  "protractor": "~5.4.0",
  "ts-node": "~7.0.0",
  "tsickle": "^0.37.0",
  "tslint": "~5.15.0",
- "typescript": "~3.5.3"
+ "typescript": "~3.5.3",
+ "css-loader": "^3.5.3",
+ "del": "^5.1.0",
+ "delay": "^4.3.0",
+ "fs-extra": "^9.0.0",
+ "gulp": "^4.0.2",
+ "gulp-filter": "^6.0.0",
+ "gulp-replace": "^1.0.0",
+ "gulp-zip": "^5.0.1",
+ "url-loader": "^4.1.0",
+ "webpack": "^4.43.0",
+ "webpack-cli": "^3.3.11",
+ "webpack-external-import": "^2.2.3"
  }
 }

projects/gp-event-chart/src/lib/color-picker/color-picker-module.ts

@@ -32,8 +32,8 @@ import { ColorSliderComponent } from './color-slider/color-slider-component';
 
 
 @NgModule({
- imports: [CommonModule, MatRadioModule],
+ /* imports: [CommonModule, MatRadioModule],
  declarations: [ColorPickerComponent, ColorSliderComponent, ColorPaletteComponent],
- exports: [ColorPickerComponent],
+ exports: [ColorPickerComponent],*/
 })
 export class ColorPickerModule {}

projects/gp-event-chart/src/lib/gp-lib-event-chart.module.ts

@@ -21,13 +21,18 @@ import { NgModule } from '@angular/core';
 import { GpLibEventChartComponent } from './gp-lib-event-chart.component';
 import { ChartsModule } from 'ng2-charts';
 import { GpLibEventChartConfig } from './gp-lib-event-chart.config';
-import {MatInputModule, MatFormFieldModule, MatNativeDateModule, MatDatepickerModule, MatButtonModule } from '@angular/material';
+import {MatInputModule, MatFormFieldModule, MatNativeDateModule, MatDatepickerModule, MatButtonModule, MatRadioModule } from '@angular/material';
 import { DatePipe } from '@angular/common';
 import { ColorPickerModule } from './color-picker/color-picker-module';
 import * as preview from './preview-image';
 
+import '~styles/index.css';
+import { ColorPickerComponent } from './color-picker/color-picker-component';
+import { ColorSliderComponent } from './color-picker/color-slider/color-slider-component';
+import { ColorPaletteComponent } from './color-picker/color-palette/color-palette-component';
 @NgModule({
- declarations: [GpLibEventChartComponent, GpLibEventChartConfig],
+ declarations: [GpLibEventChartComponent, GpLibEventChartConfig, 
+ ColorPickerComponent, ColorSliderComponent, ColorPaletteComponent],
  imports: [
  CoreModule,
  ChartsModule,
@@ -36,10 +41,10 @@ import * as preview from './preview-image';
  MatDatepickerModule,
  MatNativeDateModule,
  MatButtonModule,
- ColorPickerModule
+ MatRadioModule
  ],
- exports: [GpLibEventChartComponent, GpLibEventChartConfig],
- entryComponents: [GpLibEventChartComponent, GpLibEventChartConfig],
+ exports: [GpLibEventChartComponent, GpLibEventChartConfig, ColorPickerComponent],
+ entryComponents: [GpLibEventChartComponent, GpLibEventChartConfig, ColorPickerComponent],
  providers: [
  DatePipe,
  {

runtime/cumulocity.json

@@ -0,0 +1,12 @@
+{
+ "name": "Event Chart Runtime Widget",
+ "contextPath": "event-chart-runtime-widget",
+ "key": "event-chart-runtime-widget-application-key",
+ "contentSecurityPolicy": "default-src 'self'",
+ "icon": {
+ "class": "fa fa-puzzle-piece"
+ },
+ "manifest": {
+ "noAppSwitcher": true
+ }
+}

runtime/gulpfile.js

@@ -0,0 +1,48 @@
+const {src, dest, series} = require('gulp');
+const filter = require('gulp-filter');
+const zip = require('gulp-zip');
+const ngPackagr = require('ng-packagr');
+const fs = require('fs-extra');
+const del = require('del');
+const execSync = require('child_process').execSync;
+const replace = require('gulp-replace');
+const path = require('path');
+
+function clean() {
+ return del(['dist']);
+}
+
+const compile = series(
+ function buildAngularLibrary() { return ngPackagr.build({project: './ng-package.json'}) },
+ function separateWebpackBuildSrc() { return fs.copy('./dist/widget-library/fesm5', './dist/bundle-src') },
+ function replaceStylePath() {
+ return src('./dist/widget-library/**/*')
+ .pipe(replace(/~styles/g, function () {
+ return path.relative(this.file.dirname, './dist/widget-library/styles').replace(/\\/g, '/')
+ }))
+ .pipe(dest('./dist/widget-library/'))
+ },
+ async function packLibrary() { return execSync("npm pack ./widget-library", { cwd: './dist', stdio: 'inherit' }) }
+)
+
+const bundle = series(
+ async function webpackBuild() { return execSync("npx webpack", {stdio: 'inherit'}) },
+ function copyCumulocityJson() { return fs.copy('./cumulocity.json', './dist/widget/cumulocity.json')},
+ function createZip() {
+ return src('./dist/widget/**/*')
+ // Filter out the webpackRuntime chunk, we only need the widget code chunks
+ .pipe(filter(file => !/^[a-f0-9]{20}\.js(\.map)?$/.test(file.relative)))
+ .pipe(zip('widget.zip'))
+ .pipe(dest('dist/'))
+ }
+)
+
+exports.clean = clean;
+exports.build = compile;
+exports.bundle = bundle;
+exports.default = series(clean, compile, bundle, async function success() {
+ console.log("Build Finished Successfully!");
+ console.log("Runtime Widget Output (Install in the browser): dist/widget.zip");
+ const pkgJson = require('./dist/widget-library/package.json');
+ console.log(`Widget Angular Library (Install with: "npm i <filename.tgz>"): dist/${pkgJson.name}-${pkgJson.version}.tgz`);
+});

runtime/ng-package.json

@@ -0,0 +1,15 @@
+{
+ "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+ "assets": [
+ "styles/**/*"
+ ],
+ "lib": {
+ "entryFile": "../projects/gp-event-chart/src/public-api.ts",
+ "umdModuleIds": {
+ "@c8y/ngx-components": "@c8y/ngx-components"
+ },
+ "flatModuleFile": "custom-widget"
+ },
+ "whitelistedNonPeerDependencies": ["."],
+ "dest": "dist/widget-library"
+}

runtime/package.json

@@ -0,0 +1,11 @@
+{
+ "name": "event-chart-runtime-widget",
+ "interleave": {
+ "dist\\bundle-src\\custom-widget.js": "event-chart-runtime-widget-CustomWidget",
+ "dist/bundle-src/custom-widget.js": "event-chart-runtime-widget-CustomWidget"
+ },
+ "version": "1.0.0",
+ "description": "Runtime package.json for library widget (written by Software AG Global Presales)",
+ "author": "Darpankumar Lalani - Software AG, Global Presales",
+ "license": "Apache 2.0"
+}

runtime/styles/index.css

@@ -0,0 +1,2 @@
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+

runtime/webpack.config.js

@@ -0,0 +1,64 @@
+const URLImportPlugin = require("webpack-external-import/webpack");
+const path = require('path');
+
+module.exports = {
+ mode: 'production',
+ devtool: 'source-map',
+ entry: {
+ [require('./cumulocity.json').contextPath]: './dist/bundle-src/custom-widget.js'
+ },
+ resolve: {
+ alias: {
+ "~styles": path.resolve(__dirname, 'styles')
+ }
+ },
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ use: ["source-map-loader"],
+ enforce: "pre"
+ },{
+ test: /\.css$/,
+ use: ['style-loader', 'css-loader']
+ },{
+ test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
+ loader: 'url-loader',
+ options: {
+ limit: 8192,
+ publicPath: `/apps/${require('./cumulocity').contextPath}/`
+ },
+ }
+ ]
+ },
+ optimization: {
+ runtimeChunk: {
+ name: "webpackRuntime"
+ }
+ },
+ plugins: [
+ new URLImportPlugin ({
+ manifestName: require('./cumulocity').contextPath,
+ fileName: "importManifest.js",
+ basePath: '',
+ publicPath: `/apps/${require('./cumulocity').contextPath}/`,
+ useExternals: {
+ "@angular/animations": "AngularAnimations",
+ "@angular/common": "AngularCommon",
+ "@angular/common/http": "AngularCommonHttp",
+ "@angular/core": "AngularCore",
+ "@angular/forms": "AngularForms",
+ "@angular/http": "AngularHttp",
+ "@angular/platform-browser": "AngularPlatformBrowser",
+ "@angular/platform-browser/animations": "AngularPlatformBrowserAnimations",
+ "@angular/router": "AngularRouter",
+ "@c8y/client": "C8yClient",
+ "@c8y/ngx-components": "C8yNgxComponents"
+ },
+ })
+ ],
+ output: {
+ filename: '[contenthash].js',
+ path: path.resolve(__dirname, 'dist/widget')
+ },
+};