feat(core/progress-bar): add new web component 'ix-progress-bar'

packages/angular-test-app/src/app/app-routing.module.ts

@@ -94,6 +94,8 @@ import Pagination from 'src/preview-examples/pagination';
 import Pill from 'src/preview-examples/pill';
 import PillVariants from 'src/preview-examples/pill-variants';
 import PopoverNews from 'src/preview-examples/popover-news';
+import ProgressBar from 'src/preview-examples/progress-bar';
+import ProgressBarVariants from 'src/preview-examples/progress-bar-variants';
 import PushCard from 'src/preview-examples/push-card';
 import Radiobutton from 'src/preview-examples/radio-button';
 import Select from 'src/preview-examples/select';
@@ -353,6 +355,8 @@ const routes: Routes = [
       { path: 'pill', component: Pill },
       { path: 'pill-variants', component: PillVariants },
       { path: 'popover-news', component: PopoverNews },
+      { path: 'progress-bar', component: ProgressBar },
+      { path: 'progress-bar-variants', component: ProgressBarVariants },
       { path: 'radio-button', component: Radiobutton },
       { path: 'select-editable', component: SelectEditable },
       { path: 'select-multiple', component: SelectMultiple },

packages/angular-test-app/src/app/app.module.ts

@@ -152,6 +152,8 @@ import Pane from '../preview-examples/pane';
 import PaneLayout from '../preview-examples/pane-layout';
 import { NavigationTestComponent } from './components/navigation-test.component';
 import Echarts from 'src/preview-examples/echarts';
+import ProgressBar from 'src/preview-examples/progress-bar';
+import ProgressBarVariants from 'src/preview-examples/progress-bar-variants';
 
 @NgModule({
   declarations: [
@@ -222,6 +224,8 @@ import Echarts from 'src/preview-examples/echarts';
     Pill,
     PillVariants,
     PopoverNews,
+    ProgressBar,
+    ProgressBarVariants,
     Radiobutton,
     SelectEditable,
     SelectMultiple,

packages/angular-test-app/src/preview-examples/progress-bar-variants.ts

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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-progress-bar [value]="50" variant="primary"></ix-progress-bar>
+    <ix-progress-bar [value]="50" variant="alarm"></ix-progress-bar>
+    <ix-progress-bar [value]="50" variant="critical"></ix-progress-bar>
+    <ix-progress-bar [value]="50" variant="warning"></ix-progress-bar>
+    <ix-progress-bar [value]="50" variant="info"></ix-progress-bar>
+    <ix-progress-bar [value]="50" variant="neutral"></ix-progress-bar>
+    <ix-progress-bar [value]="50" variant="success"></ix-progress-bar>
+  `,
+})
+export default class ProgressBarVariants {}

packages/angular-test-app/src/preview-examples/progress-bar.ts

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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-progress-bar [value]="25"></ix-progress-bar>
+    <ix-progress-bar [value]="50"></ix-progress-bar>
+    <ix-progress-bar [value]="75"></ix-progress-bar>
+  `,
+})
+export default class ProgressBar {}

packages/angular/src/components.ts

@@ -1856,6 +1856,28 @@ export class IxPill {
 export declare interface IxPill extends Components.IxPill {}
 
 
+@ProxyCmp({
+  inputs: ['disableAnimation', 'value', 'variant']
+})
+@Component({
+  selector: 'ix-progress-bar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['disableAnimation', 'value', 'variant'],
+})
+export class IxProgressBar {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface IxProgressBar extends Components.IxProgressBar {}
+
+
 @ProxyCmp({
   inputs: ['collapse', 'heading', 'icon', 'notification', 'subheading', 'variant']
 })

packages/angular/src/declare-components.ts

@@ -72,6 +72,7 @@ export const DIRECTIVES = [
   d.IxPane,
   d.IxPaneLayout,
   d.IxPill,
+  d.IxProgressBar,
   d.IxPushCard,
   d.IxRow,
   d.IxSelect,

packages/core/component-doc.json

@@ -12604,6 +12604,124 @@
       "parts": [],
       "listeners": []
     },
+    {
+      "dirPath": "src/components/progress-bar",
+      "filePath": "src/components/progress-bar/progress-bar.tsx",
+      "fileName": "progress-bar.tsx",
+      "readmePath": "src/components/progress-bar/readme.md",
+      "usagesDir": "src/components/progress-bar/usage",
+      "tag": "ix-progress-bar",
+      "overview": "",
+      "usage": {},
+      "docs": "",
+      "docsTags": [],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {},
+      "props": [
+        {
+          "name": "disableAnimation",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disable-animation",
+          "reflectToAttr": true,
+          "docs": "Disable progress value change animation",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "number | string",
+          "complexType": {
+            "original": "string | number",
+            "resolved": "number | string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "value",
+          "reflectToAttr": true,
+          "docs": "Progress value in percentage (0-100)",
+          "docsTags": [],
+          "default": "0",
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"alarm\" | \"critical\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "| 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'",
+            "resolved": "\"alarm\" | \"critical\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "variant",
+          "reflectToAttr": true,
+          "docs": "Progress bar variant",
+          "docsTags": [],
+          "default": "'primary'",
+          "values": [
+            {
+              "value": "alarm",
+              "type": "string"
+            },
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "neutral",
+              "type": "string"
+            },
+            {
+              "value": "primary",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
     {
       "dirPath": "src/components/push-card",
       "filePath": "src/components/push-card/push-card.tsx",

packages/core/src/components.d.ts

@@ -1813,6 +1813,26 @@ export namespace Components {
     }
     interface IxPlaygroundInternal {
     }
+    interface IxProgressBar {
+        /**
+          * Disable progress value change animation
+         */
+        "disableAnimation": boolean;
+        /**
+          * Progress value in percentage (0-100)
+         */
+        "value": string | number;
+        /**
+          * Progress bar variant
+         */
+        "variant": | 'primary'
+    | 'alarm'
+    | 'critical'
+    | 'warning'
+    | 'info'
+    | 'neutral'
+    | 'success';
+    }
     /**
      * @since 1.6.0
      */
@@ -3652,6 +3672,12 @@ declare global {
         prototype: HTMLIxPlaygroundInternalElement;
         new (): HTMLIxPlaygroundInternalElement;
     };
+    interface HTMLIxProgressBarElement extends Components.IxProgressBar, HTMLStencilElement {
+    }
+    var HTMLIxProgressBarElement: {
+        prototype: HTMLIxProgressBarElement;
+        new (): HTMLIxProgressBarElement;
+    };
     /**
      * @since 1.6.0
      */
@@ -4081,6 +4107,7 @@ declare global {
         "ix-pane-layout": HTMLIxPaneLayoutElement;
         "ix-pill": HTMLIxPillElement;
         "ix-playground-internal": HTMLIxPlaygroundInternalElement;
+        "ix-progress-bar": HTMLIxProgressBarElement;
         "ix-push-card": HTMLIxPushCardElement;
         "ix-row": HTMLIxRowElement;
         "ix-select": HTMLIxSelectElement;
@@ -5994,6 +6021,26 @@ declare namespace LocalJSX {
     }
     interface IxPlaygroundInternal {
     }
+    interface IxProgressBar {
+        /**
+          * Disable progress value change animation
+         */
+        "disableAnimation"?: boolean;
+        /**
+          * Progress value in percentage (0-100)
+         */
+        "value"?: string | number;
+        /**
+          * Progress bar variant
+         */
+        "variant"?: | 'primary'
+    | 'alarm'
+    | 'critical'
+    | 'warning'
+    | 'info'
+    | 'neutral'
+    | 'success';
+    }
     /**
      * @since 1.6.0
      */
@@ -6792,6 +6839,7 @@ declare namespace LocalJSX {
         "ix-pane-layout": IxPaneLayout;
         "ix-pill": IxPill;
         "ix-playground-internal": IxPlaygroundInternal;
+        "ix-progress-bar": IxProgressBar;
         "ix-push-card": IxPushCard;
         "ix-row": IxRow;
         "ix-select": IxSelect;
@@ -6984,6 +7032,7 @@ declare module "@stencil/core" {
             "ix-pane-layout": LocalJSX.IxPaneLayout & JSXBase.HTMLAttributes<HTMLIxPaneLayoutElement>;
             "ix-pill": LocalJSX.IxPill & JSXBase.HTMLAttributes<HTMLIxPillElement>;
             "ix-playground-internal": LocalJSX.IxPlaygroundInternal & JSXBase.HTMLAttributes<HTMLIxPlaygroundInternalElement>;
+            "ix-progress-bar": LocalJSX.IxProgressBar & JSXBase.HTMLAttributes<HTMLIxProgressBarElement>;
             /**
              * @since 1.6.0
              */

packages/core/src/components/progress-bar/progress-bar.scss

@@ -0,0 +1,32 @@
+/*
+ * 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 'mixins/shadow-dom/component';
+@import 'common-variables';
+@import 'mixins/text-truncation';
+
+:host {
+  @include ix-component;
+  display: block;
+  min-width: 20px;
+  height: 1.25rem;
+  max-height: 1.25rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.progress-bar {
+  width: 100%;
+  min-height: 1.25rem;
+  background-color: var(--theme-color-component-2);
+  border: 1px solid var(--theme-color-component-1);
+}
+
+.progress {
+  min-height: 1.25rem;
+}