feat(core/information-bar): add information bar

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

@@ -106,6 +106,7 @@ import VerticalTabsWithAvatar from 'src/preview-examples/vertical-tabs-with-avat
 import Workflow from 'src/preview-examples/workflow';
 import WorkflowVertical from 'src/preview-examples/workflow-vertical';
 import { NavigationTestComponent } from './components/navigation-test.component';
+import InformationBar from "../preview-examples/information-bar";
 
 const routes: Routes = [
   {
@@ -243,6 +244,7 @@ const routes: Routes = [
       { path: 'event-list-selected', component: EventListSelected },
       { path: 'event-list', component: EventList },
       { path: 'expanding-search', component: ExpandingSearch },
+      { path: 'information-bar', component: InformationBar },
       { path: 'flip-tile', component: FlipTile },
       { path: 'group-context-menu', component: GroupContextMenu },
       { path: 'group-custom-entry', component: GroupCustomEntry },

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

@@ -114,6 +114,7 @@ import VerticalTabsWithAvatar from 'src/preview-examples/vertical-tabs-with-avat
 import Workflow from 'src/preview-examples/workflow';
 import WorkflowVertical from 'src/preview-examples/workflow-vertical';
 import { NavigationTestComponent } from './components/navigation-test.component';
+import InformationBar from "../preview-examples/information-bar";
 
 @NgModule({
   declarations: [
@@ -153,6 +154,7 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     EventListSelected,
     EventList,
     ExpandingSearch,
+    InformationBar,
     FlipTile,
     GroupContextMenu,
     GroupCustomEntry,

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

@@ -0,0 +1,22 @@
+/*
+ * 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-information-bar [bar]="[{count: 10, stripped: 2, color: 'alarm', icon: 'alarm'},
+    {count: 5, stripped: 2, color: 'critical', icon: 'warning-rhomb'},
+    {count: 11, stripped: 2, color: 'warning', icon: 'warning'},
+    {count: 2, stripped: 2, color: 'info', icon: 'info'},
+    {count: 4, stripped: 2, color: 'unassigned', icon: 'question'}]"></ix-information-bar>
+  `,
+})
+export default class InformationBar {}

packages/angular/src/components.ts

@@ -1063,6 +1063,28 @@ export class IxIconButton {
 export declare interface IxIconButton extends Components.IxIconButton {}
 
 
+@ProxyCmp({
+  inputs: ['bar']
+})
+@Component({
+  selector: 'ix-information-bar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['bar'],
+})
+export class IxInformationBar {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface IxInformationBar extends Components.IxInformationBar {}
+
+
 @ProxyCmp({
 })
 @Component({

packages/angular/src/declare-components.ts

@@ -42,6 +42,7 @@ export const DIRECTIVES = [
   d.IxGroupItem,
   d.IxIcon,
   d.IxIconButton,
+  d.IxInformationBar,
   d.IxInputGroup,
   d.IxKeyValue,
   d.IxKeyValueList,

packages/core/component-doc.json

@@ -5344,6 +5344,52 @@
       "parts": [],
       "listeners": []
     },
+    {
+      "dirPath": "./src/components/information-bar",
+      "filePath": "./src/components/information-bar/information-bar.tsx",
+      "fileName": "information-bar.tsx",
+      "readmePath": "./src/components/information-bar/readme.md",
+      "usagesDir": "./src/components/information-bar/usage",
+      "tag": "ix-information-bar",
+      "overview": "",
+      "usage": {},
+      "docs": "",
+      "docsTags": [],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [
+        "ix-icon"
+      ],
+      "dependencyGraph": {
+        "ix-information-bar": [
+          "ix-icon"
+        ]
+      },
+      "props": [
+        {
+          "name": "bar",
+          "type": "BarNumbers[]",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "Configuration of the bar",
+          "docsTags": [],
+          "default": "[]",
+          "values": [
+            {
+              "type": "BarNumbers[]"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
     {
       "dirPath": "./src/components/input-group",
       "filePath": "./src/components/input-group/input-group.tsx",

packages/core/src/components.d.ts

@@ -25,6 +25,7 @@ import { EmptyStateLayout } from "./components/empty-state/empty-state";
 import { FlipTileState } from "./components/flip-tile/flip-tile-state";
 import { IconButtonVariant } from "./components/icon-button/icon-button";
 import { IndexButtonVariant } from "./components/index-button/index-button";
+import { BarNumbers } from "./components/information-bar/information-bar";
 import { KeyValueLabelPosition } from "./components/key-value/key-value";
 import { NotificationColor } from "./components/utils/notification-color";
 import { ModalConfig, ModalInstance } from "./components/modal/modal-utils";
@@ -56,6 +57,7 @@ export { EmptyStateLayout } from "./components/empty-state/empty-state";
 export { FlipTileState } from "./components/flip-tile/flip-tile-state";
 export { IconButtonVariant } from "./components/icon-button/icon-button";
 export { IndexButtonVariant } from "./components/index-button/index-button";
+export { BarNumbers } from "./components/information-bar/information-bar";
 export { KeyValueLabelPosition } from "./components/key-value/key-value";
 export { NotificationColor } from "./components/utils/notification-color";
 export { ModalConfig, ModalInstance } from "./components/modal/modal-utils";
@@ -994,6 +996,12 @@ export namespace Components {
          */
         "variant": IndexButtonVariant;
     }
+    interface IxInformationBar {
+        /**
+          * Configuration of the bar
+         */
+        "bar": BarNumbers[];
+    }
     interface IxInputGroup {
     }
     /**
@@ -2455,6 +2463,12 @@ declare global {
         prototype: HTMLIxIndexButtonElement;
         new (): HTMLIxIndexButtonElement;
     };
+    interface HTMLIxInformationBarElement extends Components.IxInformationBar, HTMLStencilElement {
+    }
+    var HTMLIxInformationBarElement: {
+        prototype: HTMLIxInformationBarElement;
+        new (): HTMLIxInformationBarElement;
+    };
     interface HTMLIxInputGroupElement extends Components.IxInputGroup, HTMLStencilElement {
     }
     var HTMLIxInputGroupElement: {
@@ -2791,6 +2805,7 @@ declare global {
         "ix-group-item": HTMLIxGroupItemElement;
         "ix-icon-button": HTMLIxIconButtonElement;
         "ix-index-button": HTMLIxIndexButtonElement;
+        "ix-information-bar": HTMLIxInformationBarElement;
         "ix-input-group": HTMLIxInputGroupElement;
         "ix-key-value": HTMLIxKeyValueElement;
         "ix-key-value-list": HTMLIxKeyValueListElement;
@@ -3890,6 +3905,12 @@ declare namespace LocalJSX {
          */
         "variant"?: IndexButtonVariant;
     }
+    interface IxInformationBar {
+        /**
+          * Configuration of the bar
+         */
+        "bar"?: BarNumbers[];
+    }
     interface IxInputGroup {
     }
     /**
@@ -5002,6 +5023,7 @@ declare namespace LocalJSX {
         "ix-group-item": IxGroupItem;
         "ix-icon-button": IxIconButton;
         "ix-index-button": IxIndexButton;
+        "ix-information-bar": IxInformationBar;
         "ix-input-group": IxInputGroup;
         "ix-key-value": IxKeyValue;
         "ix-key-value-list": IxKeyValueList;
@@ -5130,6 +5152,7 @@ declare module "@stencil/core" {
             "ix-group-item": LocalJSX.IxGroupItem & JSXBase.HTMLAttributes<HTMLIxGroupItemElement>;
             "ix-icon-button": LocalJSX.IxIconButton & JSXBase.HTMLAttributes<HTMLIxIconButtonElement>;
             "ix-index-button": LocalJSX.IxIndexButton & JSXBase.HTMLAttributes<HTMLIxIndexButtonElement>;
+            "ix-information-bar": LocalJSX.IxInformationBar & JSXBase.HTMLAttributes<HTMLIxInformationBarElement>;
             "ix-input-group": LocalJSX.IxInputGroup & JSXBase.HTMLAttributes<HTMLIxInputGroupElement>;
             /**
              * @since 1.6.0

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

@@ -0,0 +1,136 @@
+/*
+ * 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.
+ */
+
+:host {
+  display: block;
+  overflow: hidden;
+  min-width: 200px;
+}
+
+.bar-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1px;
+}
+
+.icon-container {
+  overflow: hidden;
+  display: flex;
+  margin-top: 4px;
+}
+
+.icon-and-text {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.distance {
+  margin-right: 4px;
+}
+
+.unassigned {
+  background-color: var(--theme-color-neutral);
+}
+
+.unassigned-icon {
+  color: var(--theme-color-neutral);
+  margin-right: 4px;
+}
+
+.unassigned-bar {
+  height: 8px;
+  background: repeating-linear-gradient(
+      -60deg,
+      var(--theme-color-neutral),
+      var(--theme-color-neutral) 2px,
+      var(--theme-color-inv-weak-text) 2px,
+      var(--theme-color-inv-weak-text) 4px
+  );
+}
+
+.alarm {
+  background-color: var(--theme-color-alarm);
+}
+
+.alarm-icon {
+  color: var(--theme-color-alarm);
+  margin-right: 4px;
+}
+
+.alarm-bar {
+  height: 8px;
+  background: repeating-linear-gradient(
+      -60deg,
+      var(--theme-color-alarm),
+      var(--theme-color-alarm) 2px,
+      var(--theme-color-inv-weak-text) 2px,
+      var(--theme-color-inv-weak-text) 4px
+  );
+}
+
+.critical {
+  background-color: var(--theme-color-critical);
+}
+
+.critical-icon {
+  color: var(--theme-color-critical);
+  margin-right: 4px;
+}
+
+.critical-bar {
+  height: 8px;
+  background: repeating-linear-gradient(
+      -60deg,
+      var(--theme-color-critical),
+      var(--theme-color-critical) 2px,
+      var(--theme-color-inv-weak-text) 2px,
+      var(--theme-color-inv-weak-text) 4px
+  );
+}
+
+.warning {
+  background-color: var(--theme-color-warning);
+}
+
+.warning-icon {
+  color: var(--theme-color-warning);
+  margin-right: 4px;
+}
+
+.warning-bar {
+  height: 8px;
+  background: repeating-linear-gradient(
+      -60deg,
+      var(--theme-color-warning),
+      var(--theme-color-warning) 2px,
+      var(--theme-color-inv-weak-text) 2px,
+      var(--theme-color-inv-weak-text) 4px
+  );
+}
+
+.info {
+  background-color: var(--theme-color-info);
+}
+
+.info-icon {
+  color: var(--theme-color-info);
+  margin-right: 4px;
+}
+
+.info-bar {
+  height: 8px;
+  background: repeating-linear-gradient(
+      -60deg,
+      var(--theme-color-info),
+      var(--theme-color-info) 2px,
+      var(--theme-color-inv-weak-text) 2px,
+      var(--theme-color-inv-weak-text) 4px
+  );
+}