feat(core): replace spinner animation and add loading state to button (…

…#583) Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Jun 28, 2023 · 2c5b183 · 2c5b183
1 parent 932b051
commit 2c5b183
Show file tree

Hide file tree

Showing 31 changed files with 1,111 additions and 493 deletions.
diff --git a/packages/angular-test-app/angular.json b/packages/angular-test-app/angular.json
@@ -108,6 +108,7 @@
   "cli": {
     "cache": {
       "enabled": false
-    }
+    },
+    "analytics": false
   }
 }
diff --git a/packages/angular-test-app/src/preview-examples/button-loading.ts b/packages/angular-test-app/src/preview-examples/button-loading.ts
@@ -0,0 +1,84 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <ix-button
+      (click)="toggle()"
+      [loading]="loading"
+      class="m-1"
+      outline
+      variant="Primary"
+    >
+      Button
+    </ix-button>
+
+    <ix-button
+      (click)="toggle2()"
+      [loading]="loading2"
+      icon="star"
+      class="m-1"
+      outline
+      variant="Primary"
+    >
+      Button
+    </ix-button>
+
+    <ix-icon-button
+      (click)="toggle3()"
+      [loading]="loading3"
+      icon="star"
+      class="m-1"
+      outline
+      variant="Primary"
+    >
+    </ix-icon-button>
+
+    <ix-button loading class="m-1" outline variant="Primary">
+      Button
+    </ix-button>
+
+    <ix-icon-button
+      loading
+      icon="star"
+      class="m-1"
+      outline
+      variant="Primary"
+    ></ix-icon-button>
+  `,
+})
+export default class ButtonLoading {
+  loading = false;
+  loading2 = false;
+  loading3 = false;
+
+  toggle() {
+    this.loading = true;
+    setTimeout(() => {
+      this.loading = false;
+    }, 2500);
+  }
+
+  toggle2() {
+    this.loading2 = true;
+    setTimeout(() => {
+      this.loading2 = false;
+    }, 2500);
+  }
+
+  toggle3() {
+    this.loading3 = true;
+    setTimeout(() => {
+      this.loading3 = false;
+    }, 2500);
+  }
+}
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -206,14 +206,14 @@ export declare interface IxBreadcrumbItem extends Components.IxBreadcrumbItem {}
 
 
 @ProxyCmp({
-  inputs: ['disabled', 'ghost', 'invisible', 'outline', 'selected', 'type', 'variant']
+  inputs: ['disabled', 'ghost', 'icon', 'invisible', 'loading', 'outline', 'selected', 'type', 'variant']
 })
 @Component({
   selector: 'ix-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled', 'ghost', 'invisible', 'outline', 'selected', 'type', 'variant'],
+  inputs: ['disabled', 'ghost', 'icon', 'invisible', 'loading', 'outline', 'selected', 'type', 'variant'],
 })
 export class IxButton {
   protected el: HTMLElement;
@@ -1020,14 +1020,14 @@ export declare interface IxIcon extends Components.IxIcon {}
 
 
 @ProxyCmp({
-  inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'outline', 'oval', 'selected', 'size', 'type', 'variant']
+  inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'loading', 'outline', 'oval', 'selected', 'size', 'type', 'variant']
 })
 @Component({
   selector: 'ix-icon-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'outline', 'oval', 'selected', 'size', 'type', 'variant'],
+  inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'loading', 'outline', 'oval', 'selected', 'size', 'type', 'variant'],
 })
 export class IxIconButton {
   protected el: HTMLElement;