feature(394551): Changes for customizing Button input

SyncfusionExamples · Nov 4, 2024 · bd092b6 · bd092b6
1 parent fac2d7e
commit bd092b6
Show file tree

Hide file tree

Showing 6 changed files with 311 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "@angular/router": "^18.2.0",
     "@syncfusion/ej2-angular-diagrams": "^27.1.53",
     "@syncfusion/ej2-angular-lists": "^27.1.50",
+    "@syncfusion/ej2-angular-navigations": "^27.1.57",
     "@syncfusion/ej2-angular-popups": "^27.1.53",
     "@syncfusion/ej2-angular-splitbuttons": "^27.1.56",
     "rxjs": "~7.8.0",

diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html
@@ -12,9 +12,48 @@
 >
   <ng-template #userHandleTemplate >
     <div class="dropDown-container">
-      <button #dropdownbutton id="dropdownbutton" ejs-dropdownbutton  target="#listview" (open)="onOpenDropDownButton($event)" iconCss='e-icons e-plus' cssClass='e-caret-hide' (beforeClose)="onBeforeCloseDropDownButton($event)"></button>
+      <button #dropdownbutton id="dropdownbutton" ejs-dropdownbutton  target="#listview" (open)="onOpenDropDownButton($event)" iconCss='e-icons e-plus' cssClass='e-caret-hide' (beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button>
     </div>
   </ng-template>
 </ejs-diagram>
 
 <ejs-listview #listview id='listview' [dataSource]='listdata' [fields]='fields' [showHeader]='true' [headerTitle]='headertitle' [animation]='animation' (select)="onSelectListView($event)"></ejs-listview>
+
+<!-- <ejs-sidebar id="default-sidebar" #sidebar [type]='type' (created)="onSideBarCreated($event)" style="visibility: hidden" [width]="width" [closeOnDocumentClick]="closeOnDocumentClick">
+  <div class="title"> Sidebar content</div>
+  <div class="sub-title">
+      Click the button to close the Sidebar.
+  </div>
+  <div class="center-align">
+      <button ejs-button id="close" (click)="onCloseSideBarClick()" class="e-btn close-btn">Close Sidebar</button>
+  </div>
+</ejs-sidebar> -->
+
+<ejs-sidebar id="default-sidebar" #sidebar [type]='type' (created)="onSideBarCreated($event)" style="visibility: hidden" [width]="width" [closeOnDocumentClick]="closeOnDocumentClick" [showBackdrop]="true">
+  <div class="title sidebar-header">{{sidebarHeader}}</div>
+  <div class="content">
+      <!-- Place sidebar content here -->
+       <form (ngSubmit)="onFormSubmit()"  class="full-size-form">
+               <!-- <form (ngSubmit)="onFormSubmit()"  class="full-size-form"> -->
+        <div class="form-header">
+          {{sidebarHeader}}
+        </div>
+          @if (nodeType == 'Boolean') {
+              <div class="content boolean-controls">
+              <input type="text" [(ngModel)]="sidebarInput" name="question" placeholder="Enter question..." class="description-box" required/>
+              <span>
+                <button type="button" ejs-button class="e-btn yes-btn">Yes</button>
+                <button type="button" ejs-button class="e-btn no-btn">No</button>
+              </span>
+            </div>
+          }
+          <!-- <div class="form-footer center-align">
+            <button type="submit" class="e-btn save-btn">Save</button>
+             <button ejs-button id="close" type="submit" (click)="onCloseSideBarClick()" class="e-btn close-btn">Save</button>
+          </div> -->
+       </form>      
+  </div>
+  <div class="center-align">
+      <button ejs-button id="close" (click)="onCloseSideBarClick()" class="e-btn close-btn">Close Sidebar</button>
+  </div>
+</ejs-sidebar>
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.scss b/src/app/components/workflow-diagram/workflow-diagram.component.scss
@@ -3,4 +3,125 @@
 //     justify-content: center;  /* Center horizontally */
 //     align-items: center;      /* Center vertically */
 //     width: 100vw;            /* Full viewport width */
-//   }
+//   }
+:root {
+    --header-bg-color: #1F4B99; /* Dark blue */
+  }
+
+#default-sidebar {
+    background-color: #f4f4f9;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    height: 100vh;
+    overflow-y: auto;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #default-sidebar .title {
+    font-size: 1.5rem;
+    color: #333;
+    margin-bottom: 1rem;
+    text-align: center;
+    width: 100%;
+  }
+
+  #default-sidebar .content {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #default-sidebar .center-align {
+    text-align: center;
+  }
+
+  #default-sidebar .close-btn {
+    background-color: #0f2c60;
+    color: white;
+    border-radius: 6px;
+    padding: 10px 20px;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  #default-sidebar .close-btn:hover {
+    background-color: #005a9e;
+  }
+
+  .sidebar-header {
+    font-size: 18px;        /* Example: Set font size */
+    font-weight: bold;      /* Example: Set font weight */
+    padding: 10px;          /* Example: Add some padding */
+    color: #000000;            /* Example: Set text color */
+    text-align: center;     /* Example: Center the text */
+  }
+
+  /* Update the styles according to your requirements */
+.boolean-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    span {
+      display: inline-flex;
+      gap: 10px;
+    }
+
+    .yes-btn, .no-btn {
+      width: 70px;
+      background-color: #4CAF50;
+      color: white;
+    }
+
+    .no-btn {
+      background-color: #f44336;
+    }
+
+    .description-box {
+      width: 100%;
+      height: 60px;
+      padding: 10px;
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+  }
+
+  .form-header {
+    background-color: #0f2c60; /* Dark blue background */
+    color: white; /* White text */
+    padding: 10px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 18px;
+  }
+
+  .form-footer {
+    background-color: #0f2c60; /* Same background color as header */
+    padding: 10px;
+    text-align: center;
+  }
+
+  .full-size-form {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-between;
+  }
+
+  .save-btn {
+    background-color: var(--header-bg-color);
+    width: 100%;
+    color: white;
+    padding: 1px;
+    border: none;
+    border-radius: 5px;
+    font-size: 15px;
+  }