fix(core): add support for input templates when using as a web-component (#31)

GH-29

Author: arpit1503khanna

angular.json

@@ -90,8 +90,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "8mb",
-                  "maximumError": "7mb"
+                  "maximumWarning": "12mb",
+                  "maximumError": "11mb"
                 },
                 {
                   "type": "anyComponentStyle",

package-lock.json

@@ -24,7 +24,6 @@
     "lint": "ng lint",
     "prepare": "husky install",
     "clean-deps": "lerna clean --yes && lerna exec --no-private \"npm install --ignore-scripts --package-lock-only --no-audit\""
-
   },
   "dependencies": {
     "@angular/animations": "~13.3.0",
@@ -36,6 +35,7 @@
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
+    "@ng-select/ng-select": "^8.0.0",
     "@popperjs/core": "^2.11.6",
     "@types/estree": "^1.0.0",
     "bpmn-moddle": "^8.0.0",
@@ -100,7 +100,6 @@
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },
-  
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-customizable"

package.json

@@ -5,7 +5,7 @@
     "entryFile": "src/public-api.ts"
   },
   "allowedNonPeerDependencies": [
-    
+    "@ng-select/ng-select"
   ]
 
 }

projects/workflows-creator/ng-package.json

@@ -68,5 +68,8 @@
       "@angular/compiler-cli": "~13.3.10",
       "typescript": "~4.6.4"
     }
+  },
+  "dependencies": {
+    "@ng-select/ng-select": "^8.0.0"
   }
 }

projects/workflows-creator/package-lock.json

@@ -1,4 +1,5 @@
 @import '../../assets/styles/colors';
+@import "~@ng-select/ng-select/themes/default.theme.css";
 
 :host {
   overflow-y: scroll;

projects/workflows-creator/package.json

@@ -159,11 +159,11 @@ export class BuilderComponent<E> implements OnInit, OnChanges {
    * @param {SimpleChanges} changes - SimpleChanges - the changes that have occurred in the component
    */
   async ngOnChanges(changes: SimpleChanges) {
-    if (changes['diagram'] && changes['state'] && this.diagram && this.state) {
+    if (changes['diagram'] && this.diagram && this.state) {
       const {events, actions, elseActions, groups, process, state} =
         await this.builder.restore(this.diagram);
       this.processId = process.id;
-      this.selectedActions = actions;
+      this.selectedActions = actions; 
       this.selectedEvents = events;
       this.selectedElseActions = elseActions;
       if (this.selectedActions.length) this.actionGroups = [];

projects/workflows-creator/src/lib/builder/builder.component.scss

@@ -223,16 +223,37 @@
     let-callback="callback"
     let-hide="hide"
   >
-    <ng-multiselect-dropdown
-      [placeholder]="'Please Select'"
-      [settings]="dropdownSettings"
-      [data]="list"
-      [(ngModel)]="selectedItems"
-      (onDropDownClose)="hide()"
-      (onSelect)="callback($event)"
-      (onSelectAll)="callback($event)"
-    >
-    </ng-multiselect-dropdown>
+    <div (document:click)="hide()">
+      <ng-select
+        class="multiselect"
+        [items]="list"
+        bindLabel="displayValue"
+        bindValue="id"
+        [multiple]="true"
+        placeholder="Please Select"
+        [(ngModel)]="selectedItems"
+        [closeOnSelect]="false"
+        (blur)="
+          callback(
+            getLibraryValue($event, inputType.People, {
+              list: list,
+              key: 'value'
+            })
+          )
+        "
+      >
+        <ng-template ng-header-tmp>
+          <div>
+            <button class="btn btn-link" (click)="onSelectAll(list)">
+              Select All
+            </button>
+            <button class="btn btn-link" (click)="onClearAll(list)">
+              Clear All
+            </button>
+          </div>
+        </ng-template>
+      </ng-select>
+    </div>
   </ng-template>
 
   <ng-template