vk-typescript-cli 1.0.0

package/src/templates/angular/chart.component.html

@@ -0,0 +1,23 @@
+<div class="chart-container" style="padding: 70px; margin: 0 auto;">
+  <ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [primaryYAxis]="primaryYAxis" [chartArea]="chartArea"
+    [width]="width" [title]="title" [subTitle]="subTitle" [tooltip]="tooltip" [legendSettings]="legendSettings"
+    [annotations]="annotations" (load)="load($event)">
+    <e-series-collection>
+      <e-series [dataSource]="vietnamData" type="Line" xName="x" yName="y" name="Vietnam" width="2"
+        [marker]="circleMarker" [labelSettings]="labelSettings"></e-series>
+
+      <e-series [dataSource]="indonesiaData" type="Line" xName="x" yName="y" name="Indonesia" width="2"
+        [marker]="triangleMarker" [labelSettings]="labelSettings"></e-series>
+
+      <e-series [dataSource]="franceData" type="Line" xName="x" yName="y" name="France" width="2"
+        [marker]="diamondMarker" [labelSettings]="labelSettings"></e-series>
+
+      <e-series [dataSource]="polandData" type="Line" xName="x" yName="y" name="Poland" width="2"
+        [marker]="rectangleMarker" [labelSettings]="labelSettings"></e-series>
+
+      <e-series [dataSource]="mexicoData" type="Line" xName="x" yName="y" name="Mexico" width="2"
+        [marker]="pentagonMarker" [labelSettings]="labelSettings"></e-series>
+    </e-series-collection>
+  </ejs-chart>
+
+</div>

package/src/templates/angular/chart.component.ts

@@ -0,0 +1,172 @@
+import { Component } from '@angular/core';
+import { Browser } from '@syncfusion/ej2-base';
+import {
+  ChartAllModule,
+  ILoadedEventArgs,
+  ChartTheme
+} from '@syncfusion/ej2-angular-charts';
+
+interface ChartPoint {
+  x: number;
+  y: number;
+}
+
+@Component({
+  selector: 'app-chart',
+  standalone: true,
+  imports: [ChartAllModule],
+  templateUrl: './chart.component.html'
+})
+export class ChartComponent {
+  public vietnamData: ChartPoint[] = [
+    { x: 2016, y: 7.8 },
+    { x: 2017, y: 10.3 },
+    { x: 2018, y: 15.5 },
+    { x: 2019, y: 17.5 },
+    { x: 2020, y: 19.5 },
+    { x: 2021, y: 23.0 },
+    { x: 2022, y: 20.0 },
+    { x: 2023, y: 19.0 },
+    { x: 2024, y: 22.1 }
+  ];
+
+  public indonesiaData: ChartPoint[] = [
+    { x: 2016, y: 4.8 },
+    { x: 2017, y: 5.2 },
+    { x: 2018, y: 6.2 },
+    { x: 2019, y: 7.8 },
+    { x: 2020, y: 9.3 },
+    { x: 2021, y: 14.3 },
+    { x: 2022, y: 15.6 },
+    { x: 2023, y: 16.0 },
+    { x: 2024, y: 17.0 }
+  ];
+
+  public franceData: ChartPoint[] = [
+    { x: 2016, y: 14.6 },
+    { x: 2017, y: 15.5 },
+    { x: 2018, y: 15.4 },
+    { x: 2019, y: 14.4 },
+    { x: 2020, y: 11.6 },
+    { x: 2021, y: 13.9 },
+    { x: 2022, y: 12.1 },
+    { x: 2023, y: 10.0 },
+    { x: 2024, y: 10.8 }
+  ];
+
+  public polandData: ChartPoint[] = [
+    { x: 2016, y: 8.9 },
+    { x: 2017, y: 10.3 },
+    { x: 2018, y: 10.8 },
+    { x: 2019, y: 9.0 },
+    { x: 2020, y: 7.9 },
+    { x: 2021, y: 8.5 },
+    { x: 2022, y: 7.4 },
+    { x: 2023, y: 6.4 },
+    { x: 2024, y: 7.1 }
+  ];
+
+  public mexicoData: ChartPoint[] = [
+    { x: 2016, y: 19.0 },
+    { x: 2017, y: 20.0 },
+    { x: 2018, y: 20.2 },
+    { x: 2019, y: 18.4 },
+    { x: 2020, y: 16.8 },
+    { x: 2021, y: 18.5 },
+    { x: 2022, y: 18.4 },
+    { x: 2023, y: 16.3 },
+    { x: 2024, y: 13.7 }
+  ];
+
+  public primaryXAxis: Object = {
+    valueType: 'Double',
+    interval: 1,
+    minimum: 2016,
+    maximum: 2024,
+    majorGridLines: { width: 0 },
+    edgeLabelPlacement: 'Shift'
+  };
+
+  public primaryYAxis: Object = {
+    title: 'Volume in million metric tons',
+    minimum: 0,
+    maximum: 25,
+    interval: 5,
+    labelFormat: '{value}%',
+    lineStyle: { width: 0 },
+    majorTickLines: { width: 0 }
+  };
+
+  public chartArea: Object = {
+    border: { width: 0 }
+  };
+
+  public circleMarker: Object = {
+    visible: true,
+    width: 7,
+    height: 7,
+    isFilled: true,
+    shape: 'Circle'
+  };
+
+  public triangleMarker: Object = {
+    visible: true,
+    width: 6,
+    height: 6,
+    isFilled: true,
+    shape: 'Triangle'
+  };
+
+  public diamondMarker: Object = {
+    visible: true,
+    width: 7,
+    height: 7,
+    isFilled: true,
+    shape: 'Diamond'
+  };
+
+  public rectangleMarker: Object = {
+    visible: true,
+    width: 5,
+    height: 5,
+    isFilled: true,
+    shape: 'Rectangle'
+  };
+
+  public pentagonMarker: Object = {
+    visible: true,
+    width: 7,
+    height: 7,
+    isFilled: true,
+    shape: 'Pentagon'
+  };
+
+  public tooltip: Object = {
+    enable: true,
+    shared: true,
+    format: '${series.name}: <b>${point.y}%</b>'
+  };
+
+  public legendSettings: Object = {
+    visible: true,
+    enableHighlight: true
+  };
+
+  public labelSettings: Object = {
+    visible: true
+  }
+
+  public annotations: Object[] = [];
+
+  public title = 'Annual Crude Steel Production by Country (2016–2024)';
+  public subTitle = 'Source: wikipedia.org"';
+  public width = Browser.isDevice ? '100%' : '75%';
+
+  public load(args: ILoadedEventArgs): void {
+    const selectedTheme = location.hash.split('/')[1];
+    const theme = selectedTheme ? selectedTheme : 'Material';
+    args.chart.theme = (theme.charAt(0).toUpperCase() + theme.slice(1))
+      .replace(/-dark/i, 'Dark')
+      .replace(/contrast/i, 'Contrast') as ChartTheme;
+  }
+}

package/src/templates/angular/diagram.component.html

@@ -0,0 +1,13 @@
+<div class="diagram-control-pane" style="padding: 30px; margin: 0 auto;">
+  <ejs-diagram
+    #diagram
+    id="diagram"
+    width="100%"
+    height="700px"
+    [nodes]="nodes"
+    [connectors]="connectors"
+    [constraints]="constraints"
+    [rulerSettings]="rulerSettings"
+    (created)="onCreated()">
+  </ejs-diagram>
+</div>

package/src/templates/angular/diagram.component.ts

@@ -0,0 +1,224 @@
+import { Component, ViewChild } from '@angular/core';
+import {
+  DiagramModule,
+  DiagramComponent as SfDiagramComponent,
+  NodeModel,
+  ConnectorModel,
+  PointPortModel,
+  DiagramConstraints,
+  RulerSettingsModel,
+  UndoRedoService,
+  SnappingService,
+  ConnectorBridgingService
+} from '@syncfusion/ej2-angular-diagrams';
+
+@Component({
+  selector: 'app-diagram',
+  standalone: true,
+  imports: [DiagramModule],
+  providers: [UndoRedoService, SnappingService, ConnectorBridgingService],
+  templateUrl: './diagram.component.html'
+})
+export class DiagramComponent {
+  @ViewChild('diagram')
+  public diagramObj?: SfDiagramComponent;
+
+  public constraints: DiagramConstraints =
+    DiagramConstraints.Default | DiagramConstraints.Bridging;
+
+  public rulerSettings: RulerSettingsModel = {
+    showRulers: true,
+    dynamicGrid: true
+  };
+
+  public nodes: NodeModel[] = this.createNodes();
+  public connectors: ConnectorModel[] = this.createConnectors();
+
+  public onCreated(): void {
+    this.diagramObj?.fitToPage();
+  }
+
+  private createNode(
+    id: string,
+    offsetX: number,
+    offsetY: number,
+    height: number,
+    width: number,
+    content: string,
+    marginX: number = 0,
+    marginY: number = 0
+  ): NodeModel {
+    let ports: PointPortModel[] = [];
+
+    if (id === 'node5' || id === 'node6') {
+      ports = [{ id: 'port1', offset: { x: 0.9, y: 0 } }];
+    }
+
+    if (id === 'node13' || id === 'node15') {
+      ports = [{ id: 'port2', offset: { x: 1, y: 0.5 } }];
+    }
+
+    if (id === 'node3') {
+      ports = [
+        { id: 'port3', offset: { x: 0.25, y: 1 } },
+        { id: 'port4', offset: { x: 0.5, y: 1 } },
+        { id: 'port5', offset: { x: 0.75, y: 1 } }
+      ];
+    }
+
+    if (id === 'node7') {
+      ports = [
+        { id: 'port1', offset: { x: 0, y: 0.5 } },
+        { id: 'port2', offset: { x: 1, y: 0.5 } }
+      ];
+    }
+
+    if (id === 'node8') {
+      ports = [
+        { id: 'port3', offset: { x: 0.25, y: 1 } },
+        { id: 'port5', offset: { x: 0.75, y: 1 } }
+      ];
+    }
+
+    return {
+      id,
+      offsetX,
+      offsetY,
+      margin: { left: marginX, top: marginY },
+      width,
+      height,
+      style: {
+        fill: 'white',
+        strokeColor: '#2546BB',
+        strokeWidth: 1
+      },
+      shape: {
+        type: 'Basic',
+        shape: 'Rectangle',
+        cornerRadius: 4
+      },
+      annotations: [
+        {
+          content,
+          style: { color: '#343434' },
+          horizontalAlignment: 'Center'
+        }
+      ],
+      ports
+    } as NodeModel;
+  }
+
+  private createNodes(): NodeModel[] {
+    return [
+      this.createNode('node1', 300, 300, 60, 100, 'HTTP Traffic'),
+      this.createNode('node2', 500, 300, 60, 100, 'Ingestion service', 50, 30),
+      this.createNode('node3', 650, 300, 60, 100, 'Workflow service', 200, 30),
+      this.createNode('node4', 500, 415, 60, 100, 'Package service', 50, 150),
+      this.createNode('node5', 650, 415, 60, 150, 'Drone Scheduler service', 175, 150),
+      this.createNode('node6', 800, 415, 60, 100, 'Delivery service', 350, 150),
+      this.createNode('node7', 580, 130, 60, 90, 'Azure Service Bus'),
+      this.createNode('node8', 815, 130, 60, 100, 'Managed Identities'),
+      this.createNode('node9', 1000, 130, 60, 100, 'Azure Key Vault'),
+      this.createNode('node10', 500, 550, 60, 100, 'Azure Cosmos DB for MongoDB API'),
+      this.createNode('node11', 650, 550, 60, 100, 'Azure Cosmos DB'),
+      this.createNode('node12', 800, 550, 60, 100, 'Azure Cache for Redis'),
+      this.createNode('node13', 1040, 255, 60, 100, 'Azure Application Insights'),
+      this.createNode('node14', 1140, 350, 60, 100, 'Azure Monitor'),
+      this.createNode('node15', 1040, 445, 60, 100, 'Azure Log Analytics workspace'),
+
+      {
+        id: 'container',
+        width: 520,
+        height: 300,
+        offsetX: 660,
+        offsetY: 350,
+        shape: {
+          type: 'Container',
+          header: {
+            annotation: {
+              content: 'Azure Container Apps Environment',
+              style: {
+                fontSize: 18,
+                bold: true,
+                fill: 'transparent',
+                strokeColor: 'transparent'
+              }
+            },
+            height: 40,
+            style: {
+              fontSize: 18,
+              bold: true,
+              fill: 'transparent',
+              strokeColor: 'transparent'
+            }
+          },
+          children: ['node2', 'node3', 'node4', 'node5', 'node6']
+        },
+        style: {
+          fill: '#E9EEFF',
+          strokeColor: '#2546BB',
+          strokeWidth: 1
+        }
+      } as NodeModel
+    ];
+  }
+
+  private createConnector(
+    id: string,
+    sourceID: string,
+    targetID: string,
+    sourcePortID: string = '',
+    targetPortID: string = '',
+    sourceDecorator: any = undefined
+  ): ConnectorModel {
+    return {
+      id,
+      type: 'Orthogonal',
+      sourceID,
+      targetID,
+      sourcePortID,
+      targetPortID,
+      style: {
+        strokeColor: '#5E5E5E',
+        strokeWidth: 1
+      },
+      sourceDecorator,
+      targetDecorator: {
+        style: {
+          fill: '#5E5E5E',
+          strokeColor: '#5E5E5E',
+          strokeWidth: 1
+        }
+      }
+    } as ConnectorModel;
+  }
+
+  private createConnectors(): ConnectorModel[] {
+    const filledSourceDecorator = {
+      style: {
+        fill: '#5E5E5E',
+        strokeColor: '#5E5E5E',
+        strokeWidth: 1
+      }
+    };
+
+    return [
+      this.createConnector('connector1', 'node1', 'node2'),
+      this.createConnector('connector2', 'node4', 'node10'),
+      this.createConnector('connector3', 'node5', 'node11'),
+      this.createConnector('connector4', 'node6', 'node12'),
+      this.createConnector('connector5', 'node8', 'node9'),
+      this.createConnector('connector6', 'container', 'node13'),
+      this.createConnector('connector7', 'container', 'node15'),
+      this.createConnector('connector8', 'node3', 'node4', 'port3'),
+      this.createConnector('connector9', 'node3', 'node5', 'port4'),
+      this.createConnector('connector10', 'node3', 'node6', 'port5'),
+      this.createConnector('connector11', 'node2', 'node7', '', 'port1'),
+      this.createConnector('connector12', 'node7', 'node3', 'port2'),
+      this.createConnector('connector13', 'node13', 'node14', 'port2'),
+      this.createConnector('connector14', 'node15', 'node14', 'port2'),
+      this.createConnector('connector16', 'node8', 'node5', 'port3', 'port1', filledSourceDecorator),
+      this.createConnector('connector17', 'node8', 'node6', 'port5', 'port1', filledSourceDecorator)
+    ];
+  }
+}

package/src/templates/angular/docx-editor.component.html

@@ -0,0 +1,18 @@
+<div class="control-pane" style="padding: 50px; margin: 0 auto">
+  <div id="documenteditor_titlebar" class="e-de-ctn-title" style="height: 30px; padding: 13px 0px 0 10px">
+    Getting Started
+  </div>
+
+  <div id="documenteditor_container_body">
+    <ejs-documenteditorcontainer
+      #documentEditorContainer
+      id="container"
+      style="display: block"
+      height="590px"
+      [toolbarMode]="toolbarMode"
+      [serviceUrl]="hostUrl"
+      [enableToolbar]="true"
+      locale="en-US">
+    </ejs-documenteditorcontainer>
+  </div>
+</div>