detect paste change in ace-editor

Issue-ID: CCSDK-3149

Signed-off-by: Eltanany Shaaban <shaaban.eltanany.ext@orange.com>
Change-Id: I0d636ba3d2a7b6097083f18763f8eba92187d179

3 files changed, 180 insertions, 149 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index f33f66020..12396209f 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -28,7 +28,7 @@
                                     <li>
                                         <i class="icon-get_started" aria-hidden="true"></i>
                                         <p>
-                                            <input id="clicker3" type="checkbox" />
+                                            <input id="clicker3" type="checkbox"/>
                                             <label for="clicker">
                                                 Getting Started
                                                 <span>Quick steps to help you get started</span>
@@ -89,7 +89,7 @@
                         <span>Save</span>
                     </button>
                     <button data-target="#discardChangesModal" data-toggle="modal" class="action-button"
-                        [disabled]="!isSaveEnabled">
+                            [disabled]="!isSaveEnabled">
                         <i class="icon-discard-sm" aria-hidden="true"></i>
                         <span>Discard Changes</span>
                     </button>
@@ -106,7 +106,7 @@
                     </a>
 
                     <a class="action-button"
-                        (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)">
+                       (click)="downloadPackage(viewedPackage.artifactName,viewedPackage.artifactVersion)">
                         <i class="icon-download" aria-hidden="true"></i>
                         <span>Download</span>
                     </a>
@@ -147,19 +147,19 @@
                                     <ul class="package-contributers">
                                         <li>
                                             <button type="button" class="border-fade" data-toggle="tooltip"
-                                                data-placement="bottom" title="User name">
+                                                    data-placement="bottom" title="User name">
                                                 <img src="/assets/img/img-user1.jpeg">
                                             </button>
                                         </li>
                                         <li>
                                             <button type="button" data-toggle="tooltip" data-placement="bottom"
-                                                title="User name">
+                                                    title="User name">
                                                 <img src="/assets/img/img-user2.jpg">
                                             </button>
                                         </li>
                                         <li>
                                             <button type="button" data-toggle="tooltip" data-placement="bottom"
-                                                title="User name">
+                                                    title="User name">
                                                 <img src="/assets/img/img-user3.jpg">
                                             </button>
                                         </li>
@@ -177,24 +177,24 @@
                             <!-- Button trigger modal - 1st Action -->
 
                             <button (click)="checkSkipTypesOfAction()" type="button" class="btn btn-sm btn-primary mb-2"
-                                data-toggle="modal" [attr.data-target]="dataTarget">
+                                    data-toggle="modal" [attr.data-target]="dataTarget">
                                 <i class="icon-topologyView-active"></i> Designer Mode
                             </button>
                             <!-- Designer Modal -->
                             <div class="modal fade createActionModal" id="exampleModalLong" tabindex="-1" role="dialog"
-                                aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+                                 aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                                 <div class="modal-dialog" role="document">
                                     <div class="modal-content">
                                         <div class="modal-header">
                                             <h5 class="modal-title" id="exampleModalLongTitle"></h5>
                                             <button type="button" class="close" data-dismiss="modal" aria-label="Close"
-                                                title="Close">
+                                                    title="Close">
                                                 <i class="icon-action-close"></i>
                                             </button>
                                         </div>
                                         <div class="modal-body">
                                             <div id="carouselExampleIndicators" class="carousel slide"
-                                                data-ride="carousel" data-interval="false">
+                                                 data-ride="carousel" data-interval="false">
                                                 <div class="carousel-inner">
                                                     <!--OPTIONS SLIDE-->
                                                     <div class="carousel-item active">
@@ -204,15 +204,15 @@
                                                             <!--Custom Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                    data-target="#carouselExampleIndicators"
-                                                                    data-slide-to="1">
+                                                                   data-target="#carouselExampleIndicators"
+                                                                   data-slide-to="1">
                                                                     <div class="card actionType custom">
                                                                         <div class="card-body">
                                                                             <h3>Custom</h3>
                                                                             <p>Start with your own settings</p>
                                                                             <button
-                                                                                data-target="#carouselExampleIndicators"
-                                                                                data-slide-to="1" class="btn">
+                                                                                    data-target="#carouselExampleIndicators"
+                                                                                    data-slide-to="1" class="btn">
                                                                                 Create
                                                                             </button>
                                                                         </div>
@@ -222,16 +222,16 @@
                                                             <!--Default Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                    data-target="#carouselExampleIndicators"
-                                                                    data-slide-to="2">
+                                                                   data-target="#carouselExampleIndicators"
+                                                                   data-slide-to="2">
                                                                     <div class="card actionType default">
                                                                         <div class="card-body">
                                                                             <h3>Default</h3>
                                                                             <p>Explore preset actions from CDS
                                                                                 Action Catalog</p>
                                                                             <button
-                                                                                data-target="#carouselExampleIndicators"
-                                                                                data-slide-to="2" class="btn">
+                                                                                    data-target="#carouselExampleIndicators"
+                                                                                    data-slide-to="2" class="btn">
                                                                                 Select
                                                                             </button>
                                                                         </div>
@@ -241,8 +241,8 @@
                                                             <!--Recent Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                    data-target="#carouselExampleIndicators"
-                                                                    data-slide-to="3">
+                                                                   data-target="#carouselExampleIndicators"
+                                                                   data-slide-to="3">
                                                                     <div class="card actionType recent">
                                                                         <div class="card-body">
                                                                             <h3>Recent</h3>
@@ -250,8 +250,8 @@
                                                                                 recent
                                                                                 packages</p>
                                                                             <button
-                                                                                data-target="#carouselExampleIndicators"
-                                                                                data-slide-to="3" class="btn">
+                                                                                    data-target="#carouselExampleIndicators"
+                                                                                    data-slide-to="3" class="btn">
                                                                                 Select
                                                                             </button>
                                                                         </div>
@@ -261,15 +261,15 @@
                                                             <!--Import Action-->
                                                             <div class="col-3 d-flex">
                                                                 <a class="d-flex"
-                                                                    data-target="#carouselExampleIndicators"
-                                                                    data-slide-to="4">
+                                                                   data-target="#carouselExampleIndicators"
+                                                                   data-slide-to="4">
                                                                     <div class="card actionType import">
                                                                         <div class="card-body">
                                                                             <h3>Import</h3>
                                                                             <p>Import your own action files</p>
                                                                             <button
-                                                                                data-target="#carouselExampleIndicators"
-                                                                                data-slide-to="4" class="btn">
+                                                                                    data-target="#carouselExampleIndicators"
+                                                                                    data-slide-to="4" class="btn">
                                                                                 Browse
                                                                             </button>
                                                                         </div>
@@ -280,7 +280,7 @@
                                                         <div class="row">
                                                             <div class="col text-center">
                                                                 <button class="btn skip-btn" data-dismiss="modal"
-                                                                    (click)="goToDesignerMode(viewedPackage.id)">
+                                                                        (click)="goToDesignerMode(viewedPackage.id)">
                                                                     Skip
                                                                     to Designer Canvas
                                                                 </button>
@@ -290,16 +290,16 @@
                                                     <!--Custom Action Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                            data-slide-to="0" title="Back" class="btn back"><i
+                                                                data-slide-to="0" title="Back" class="btn back"><i
                                                                 class="icon-action-back"></i></button>
                                                         <h1>Create Custom Action</h1>
                                                         <div class="form-group text-center">
                                                             <input type="text" [(ngModel)]="customActionName"
-                                                                class="form-control customAction"
-                                                                placeholder="Type Action Name" autofocus>
+                                                                   class="form-control customAction"
+                                                                   placeholder="Type Action Name" autofocus>
                                                             <button type="button" data-dismiss="modal"
-                                                                (click)="goToDesignerMode(viewedPackage.id)"
-                                                                class="btn submit">Start
+                                                                    (click)="goToDesignerMode(viewedPackage.id)"
+                                                                    class="btn submit">Start
                                                             </button>
                                                         </div>
 
@@ -307,7 +307,7 @@
                                                     <!--Default Actions Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                            data-slide-to="0" title="Back" class="btn back"><i
+                                                                data-slide-to="0" title="Back" class="btn back"><i
                                                                 class="icon-action-back"></i></button>
                                                         <h1>Choose Action(s) from CDS Default Package </h1>
                                                         <div class="actionFormWrapper">
@@ -329,7 +329,7 @@
                                                                 </div>
                                                                 <div class="col">
                                                                     <input type="text" class="form-control searchInput"
-                                                                        placeholder="Search">
+                                                                           placeholder="Search">
                                                                 </div>
                                                             </div>
                                                             <div class="row actionsListScroll">
@@ -337,10 +337,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation1" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation1"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation1">config-assign</label>
+                                                                                   for="customControlValidation1">config-assign</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -348,10 +349,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation2" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation2"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation2">config-assign-test</label>
+                                                                                   for="customControlValidation2">config-assign-test</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -359,10 +361,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation3" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation3"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation3">config-deploy</label>
+                                                                                   for="customControlValidation3">config-deploy</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -370,10 +373,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation4" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation4"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation4">config-modify</label>
+                                                                                   for="customControlValidation4">config-modify</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -381,10 +385,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -392,10 +397,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -403,10 +409,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -414,10 +421,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -425,10 +433,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -436,10 +445,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -447,10 +457,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -459,8 +470,8 @@
                                                                 <div class="col text-center">
                                                                     <p class="selectedActions">0 selected</p>
                                                                     <button type="button" data-dismiss="modal"
-                                                                        (click)="goToDesignerMode(viewedPackage.id)"
-                                                                        class="btn submit">Start
+                                                                            (click)="goToDesignerMode(viewedPackage.id)"
+                                                                            class="btn submit">Start
                                                                     </button>
                                                                 </div>
                                                             </div>
@@ -469,7 +480,7 @@
                                                     <!--Recent Actions Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                            data-slide-to="0" title="Back" class="btn back"><i
+                                                                data-slide-to="0" title="Back" class="btn back"><i
                                                                 class="icon-action-back"></i></button>
                                                         <h1>Choose Action(s) from Recent Packages</h1>
                                                         <div class="actionFormWrapper">
@@ -499,7 +510,7 @@
                                                                 </div>
                                                                 <div class="col">
                                                                     <input type="text" class="form-control searchInput"
-                                                                        placeholder="Search">
+                                                                           placeholder="Search">
                                                                 </div>
                                                             </div>
                                                             <div class="row actionsListScroll">
@@ -507,10 +518,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation1" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation1"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation1">config-assign</label>
+                                                                                   for="customControlValidation1">config-assign</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -518,10 +530,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation2" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation2"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation2">config-assign-test</label>
+                                                                                   for="customControlValidation2">config-assign-test</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -529,10 +542,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation3" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation3"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation3">config-deploy</label>
+                                                                                   for="customControlValidation3">config-deploy</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -540,10 +554,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation4" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation4"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation4">config-modify</label>
+                                                                                   for="customControlValidation4">config-modify</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -551,10 +566,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -562,10 +578,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -573,10 +590,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -584,10 +602,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -595,10 +614,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -606,10 +626,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -617,10 +638,11 @@
                                                                     <div class="actionName">
                                                                         <div class="custom-control custom-checkbox">
                                                                             <input type="checkbox"
-                                                                                class="custom-control-input"
-                                                                                id="customControlValidation5" required>
+                                                                                   class="custom-control-input"
+                                                                                   id="customControlValidation5"
+                                                                                   required>
                                                                             <label class="custom-control-label"
-                                                                                for="customControlValidation5">config-assign1</label>
+                                                                                   for="customControlValidation5">config-assign1</label>
                                                                         </div>
                                                                     </div>
                                                                 </div>
@@ -637,30 +659,30 @@
                                                     <!--Import Actions Form-->
                                                     <div class="carousel-item">
                                                         <button data-target="#carouselExampleIndicators"
-                                                            data-slide-to="0" title="Back" class="btn back"><i
+                                                                data-slide-to="0" title="Back" class="btn back"><i
                                                                 class="icon-action-back"></i></button>
                                                         <h1>Import Action(s)</h1>
                                                         <div class="actionFormWrapper">
                                                             <div class="row">
                                                                 <div class="col">
                                                                     <ngx-file-drop accept=".json"
-                                                                        dropZoneLabel="Drop files here"
-                                                                        (onFileDrop)="dropped($event)"
-                                                                        (onFileOver)="fileOver($event)"
-                                                                        (onFileLeave)="fileLeave($event)">
+                                                                                   dropZoneLabel="Drop files here"
+                                                                                   (onFileDrop)="dropped($event)"
+                                                                                   (onFileOver)="fileOver($event)"
+                                                                                   (onFileLeave)="fileLeave($event)">
                                                                         <ng-template ngx-file-drop-content-tmp
-                                                                            let-openFileSelector="openFileSelector">
+                                                                                     let-openFileSelector="openFileSelector">
                                                                             <div class="folder-upload">
                                                                                 <img
-                                                                                    src="assets/img/folder-upload.svg" />
+                                                                                        src="assets/img/folder-upload.svg"/>
                                                                             </div>
                                                                             <div class="folder-upload-text">
                                                                                 Drag & Drop file
                                                                             </div>
                                                                             <div class="folder-upload-text">or
                                                                                 <button type="button"
-                                                                                    class="btn btn-sm btn-primary"
-                                                                                    (click)="openFileSelector()">
+                                                                                        class="btn btn-sm btn-primary"
+                                                                                        (click)="openFileSelector()">
                                                                                     Browse
                                                                                     Files
                                                                                 </button>
@@ -674,17 +696,17 @@
                                                                     <div class="upload-table">
                                                                         <table class="table">
                                                                             <thead>
-                                                                                <tr
+                                                                            <tr
                                                                                     *ngFor="let item of uploadedFiles; let i=index">
-                                                                                    <th width="40"><img
-                                                                                            src="assets/img/icon-file-code.svg" />
-                                                                                    </th>
-                                                                                    <th>{{ item.name }}</th>
-                                                                                    <th width="40" class="text-right">
-                                                                                        <img
-                                                                                            src="assets/img/icon-remove-file.svg" />
-                                                                                    </th>
-                                                                                </tr>
+                                                                                <th width="40"><img
+                                                                                        src="assets/img/icon-file-code.svg"/>
+                                                                                </th>
+                                                                                <th>{{ item.name }}</th>
+                                                                                <th width="40" class="text-right">
+                                                                                    <img
+                                                                                            src="assets/img/icon-remove-file.svg"/>
+                                                                                </th>
+                                                                            </tr>
                                                                             </thead>
                                                                         </table>
                                                                     </div>
@@ -724,20 +746,20 @@
                     <div class="col">
                         <div class="nav nav-tabs " id="nav-tab" role="tablist">
                             <a [classList]="metadataClasses" id="nav-metadata-tab" data-toggle="tab"
-                                href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
-                                autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
+                               href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="true"
+                               autofocus #nameit (focusout)="saveMetaData()">METADATA</a>
                             <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
-                                role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
+                               role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a>
                             <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
-                                role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
+                               role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a>
                             <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
-                                role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
+                               role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a>
                             <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
-                                href="#nav-authentication" role="tab" aria-controls="nav-authentication"
-                                aria-selected="false">DSL PROPERTIES</a>
+                               href="#nav-authentication" role="tab" aria-controls="nav-authentication"
+                               aria-selected="false">DSL PROPERTIES</a>
                             <a class="nav-item nav-link" id="nav-topologytemplate-tab" data-toggle="tab"
-                                href="#nav-topologytemplate" role="tab" aria-controls="nav-authentication"
-                                aria-selected="false">Topology Template</a>
+                               href="#nav-topologytemplate" role="tab" aria-controls="nav-authentication"
+                               aria-selected="false">Topology Template</a>
                         </div>
                     </div>
 
@@ -746,32 +768,32 @@
                     <div class="col">
                         <div class="tab-content" id="nav-tabContent" (change)="clickEvent()">
                             <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
-                                aria-labelledby="nav-metadata-tab">
+                                 aria-labelledby="nav-metadata-tab">
                                 <app-metadata-tab></app-metadata-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-template" role="tabpanel"
-                                aria-labelledby="nav-template-tab">
+                                 aria-labelledby="nav-template-tab">
                                 <app-template-mapping></app-template-mapping>
                             </div>
                             <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
-                                aria-labelledby="nav-scripts-tab">
+                                 aria-labelledby="nav-scripts-tab">
                                 <app-scripts-tab></app-scripts-tab>
                             </div>
                             <div class="tab-pane fade" id="nav-imports" role="tabpanel"
-                                aria-labelledby="nav-imports-tab">
+                                 aria-labelledby="nav-imports-tab">
                                 <app-imports-tab></app-imports-tab>
 
                             </div>
                             <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
-                                aria-labelledby="nav-authentication-tab">
+                                 aria-labelledby="nav-authentication-tab">
                                 <div class="card creat-card">
-                                    <div class="editor-container">
-                                        <app-dsl-definitions-tab></app-dsl-definitions-tab>
+                                    <div class="editor-container" (change)="clickEvent()">
+                                        <app-dsl-definitions-tab (changeEvent)="clickEvent()"></app-dsl-definitions-tab>
                                     </div>
                                 </div>
                             </div>
                             <div class="tab-pane fade" id="nav-topologytemplate" role="tabpanel"
-                                aria-labelledby="nav-authentication-tab">
+                                 aria-labelledby="nav-authentication-tab">
                                 <div class="card creat-card">
                                     <div class="editor-container">
                                         <app-topology-template></app-topology-template>
@@ -787,13 +809,13 @@
 </div>
 <!-- Enrich Modal -->
 <div class="modal fade enrichModal" id="enrichModal" tabindex="-1" role="dialog" aria-labelledby="enrichModalLabel"
-    aria-hidden="true">
+     aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="enrichModalLabel">Manual Enrich</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <img src="assets/img/icon-close.svg" />
+                    <img src="assets/img/icon-close.svg"/>
                 </button>
             </div>
             <div class="modal-body">
@@ -803,14 +825,14 @@
                     <li>2. Press <b>Enrich</b> button</li>
                 </ul>
                 <ace-editor [(text)]="this.vlbDefinition.topology_template.content" [mode]="'json'"
-                    [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
-                    (textChanged)="textChanged($event)" #editor style="height:250px;">
+                            [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'"
+                            (textChanged)="textChanged($event)" #editor style="height:250px;">
                 </ace-editor>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                 <button type="button" data-dismiss="modal" class="btn btn-primary btn-enrich"
-                    (click)="enrichBlueprint()">Enrich
+                        (click)="enrichBlueprint()">Enrich
                 </button>
             </div>
         </div>
@@ -818,7 +840,7 @@
 </div>
 <!-- Delete Modal -->
 <div class="modal fade" id="removePackageModal" tabindex="-1" role="dialog" aria-labelledby="removePackageModalLabel"
-    aria-hidden="true">
+     aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -840,7 +862,7 @@
 </div>
 
 <div class="modal fade" id="discardChangesModal" tabindex="-1" role="dialog" aria-labelledby="discardChangesModalLabel"
-    aria-hidden="true">
+     aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html
index 51cf9f974..cb4869dec 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.html
@@ -3,7 +3,7 @@
     <li>1. Use Copy and paste option or</li>
     <li>2. Write them manually in the editor below</li>
 </ul>
-<ace-editor [(text)]="dslDefinition.content" [mode]="'javascript'" [autoUpdateContent]="true"
+<ace-editor (paste)="onPaste($event)" [(text)]="dslDefinition.content" [mode]="'javascript'" [autoUpdateContent]="true"
     [durationBeforeCallback]="1000" (textChanged)="textChanged($event)" [theme]="'eclipse'" #editor style="height:340px;">
 </ace-editor>
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts
index 1297bc14e..b2f2693b6 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/dsl-definitions-tab/dsl-definitions-tab.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 import {DslDefinition} from '../mapping-models/CBAPacakge.model';
 import {PackageCreationStore} from '../package-creation.store';
 
@@ -10,6 +10,7 @@ import {PackageCreationStore} from '../package-creation.store';
 export class DslDefinitionsTabComponent implements OnInit {
 
     dslDefinition: DslDefinition = new DslDefinition();
+    @Output() changeEvent = new EventEmitter<string>();
     lang = 'json';
 
     constructor(private packageCreationStore: PackageCreationStore) {
@@ -27,4 +28,12 @@ export class DslDefinitionsTabComponent implements OnInit {
     textChanged(event) {
         this.packageCreationStore.changeDslDefinition(this.dslDefinition);
     }
+
+    callParent(): void {
+        this.changeEvent.next('some changes to enable save ');
+    }
+
+    onPaste($event: ClipboardEvent) {
+        this.callParent();
+    }
 }