-updated gulpfile

-fixed css import

package.json

@@ -35,6 +35,7 @@
  "@c8y/style": "^1006.3.0",
  "chart.js": "^2.9.3",
  "gp-event-chart": "file:dist/gp-event-chart",
+ "gulp-inject-string": "^1.1.2",
  "moment": "^2.27.0",
  "ng2-charts": "^2.2.3",
  "rxjs": "~6.4.0",

projects/gp-event-chart/package.json

@@ -1,6 +1,6 @@
 {
  "name": "gp-event-chart",
- "version": "1.2.0",
+ "version": "1.5.0",
  "description": "This is an Angular 8 widget, which is designed to display the chart for the specific event type. ",
  "author": "Khushi Khanna - Software AG, Global Presales",
  "license": "Apache 2.0",

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

@@ -23,10 +23,8 @@ import { ChartsModule } from 'ng2-charts';
 import { GpLibEventChartConfig } from './gp-lib-event-chart.config';
 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';

runtime/cumulocity.json

@@ -4,7 +4,7 @@
  "key": "event-chart-runtime-widget-application-key",
  "contentSecurityPolicy": "default-src 'self'",
  "icon": {
- "class": "fa fa-puzzle-piece"
+ "class": "fa fa-line-chart"
  },
  "manifest": {
  "noAppSwitcher": true

runtime/gulpfile.js

@@ -7,6 +7,10 @@ const del = require('del');
 const execSync = require('child_process').execSync;
 const replace = require('gulp-replace');
 const path = require('path');
+const inject = require('gulp-inject-string');
+const pkgJson = require('./dist/widget-library/package.json');
+
+
 
 function clean() {
  return del(['dist']);
@@ -15,14 +19,11 @@ function clean() {
 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' }) }
+ function importCustomCss() {
+ return src(['./dist/bundle-src/custom-widget.js'])
+ .pipe(inject.before('import', "import '~styles/index.css';\n"))
+ .pipe(dest('./dist/bundle-src'));
+ }
 )
 
 const bundle = series(
@@ -32,17 +33,16 @@ const bundle = series(
  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(zip(`${pkgJson.name}-${pkgJson.version}.zip`))
  .pipe(dest('dist/'))
  }
 )
 
 exports.clean = clean;
 exports.build = compile;
 exports.bundle = bundle;
-exports.default = series(clean, compile, bundle, async function success() {
+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(`Runtime Widget Output (Install in the browser): dist/${pkgJson.name}-${pkgJson.version}.zip`);
  console.log(`Widget Angular Library (Install with: "npm i <filename.tgz>"): dist/${pkgJson.name}-${pkgJson.version}.tgz`);
 });