feat: Add simple spinner implementation in BS3 Button

jnetwork-gmbh · Aug 31, 2024 · ea34110 · ea34110
1 parent d8333d6
commit ea34110
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/button/button.component.html b/ch.jnetwork.sac-controls/projects/demo-bootstrap3/src/app/button/button.component.html
@@ -52,6 +52,20 @@ <h2>Button</h2>
     text="Validate"
     role="link"
   ></sac-button>
+  <div>Primary Loading Button</div>
+  <sac-button
+    (clicked)="debugAction1()"
+    text="Validate"
+    role="primary"
+    isloading="true"
+  ></sac-button>
+  <div>Default Loading Button</div>
+  <sac-button
+    (clicked)="debugAction1()"
+    text="Validate"
+    isloading="true"
+  ></sac-button>
+
   <div>Button Group</div>
   <div class="btn-toolbar">
     <sac-button

diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/buttons/button.html b/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/buttons/button.html
@@ -13,7 +13,15 @@
   (click)="buttonClick()"
 >
   <i
-    *ngIf="icon !== ''"
+    *ngIf="isloading"
+    class=""
+    role="status"
+    aria-hidden="true"
+    class="glyphicon glyphicon-repeat spin"
+    [ngStyle]="{ 'margin-right': text ? '0.5rem': null}"
+  ></i>
+  <i
+    *ngIf="!isloading && icon !== ''"
     [ngClass]="icon"
     [ngStyle]="{ 'margin-right': text ? '0.5rem': null}"
   ></i>

diff --git a/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/buttons/button.ts b/ch.jnetwork.sac-controls/projects/sac-bootstrap3/src/controls/buttons/button.ts
@@ -4,7 +4,7 @@ import { SacButtonCommon } from '@simpleangularcontrols/sac-common';
 @Component({
   selector: 'sac-button',
   templateUrl: './button.html',
-  styles: ['sac-button+sac-button {margin-left: 5px}'], // Workaround: Abstand zwischen 2 Buttons setzen, da Boostrap3 nicht mit Host Items umgehen kann
+  styles: ['sac-button+sac-button {margin-left: 5px}', '.spin { animation: spin 1.5s infinite; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }'], // Workaround: Abstand zwischen 2 Buttons setzen, da Boostrap3 nicht mit Host Items umgehen kann
   encapsulation: ViewEncapsulation.None, // Workaround: Abstand zwischen 2 Buttons setzen, da Boostrap3 nicht mit Host Items umgehen kann
 })
 export class SacButtonComponent extends SacButtonCommon {}