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

packages/angular/src/components.ts

@@ -7,6 +7,28 @@ import { ProxyCmp, proxyOutputs } from './angular-component-lib/utils';
 import { Components } from '@siemens/ix';
 
 
+@ProxyCmp({
+  inputs: ['bar']
+})
+@Component({
+  selector: 'information-bar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['bar'],
+})
+export class InformationBar {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface InformationBar extends Components.InformationBar {}
+
+
 @ProxyCmp({
   inputs: ['heading', 'icon', 'selected', 'subheading', 'variant']
 })

packages/angular/src/declare-components.ts

@@ -2,6 +2,7 @@
 import * as d from './components';
 
 export const DIRECTIVES = [
+  d.InformationBar,
   d.IxActionCard,
   d.IxAnimatedTab,
   d.IxAnimatedTabs,

packages/core/component-doc.json

@@ -6,6 +6,52 @@
     "typescriptVersion": "4.9.5"
   },
   "components": [
+    {
+      "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": "information-bar",
+      "overview": "",
+      "usage": {},
+      "docs": "",
+      "docsTags": [],
+      "encapsulation": "shadow",
+      "dependents": [],
+      "dependencies": [
+        "ix-icon"
+      ],
+      "dependencyGraph": {
+        "information-bar": [
+          "ix-icon"
+        ]
+      },
+      "props": [
+        {
+          "name": "bar",
+          "type": "BarNumbers[]",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [],
+          "default": "[]",
+          "values": [
+            {
+              "type": "BarNumbers[]"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "listeners": []
+    },
     {
       "dirPath": "./src/components/action-card",
       "filePath": "./src/components/action-card/action-card.tsx",

packages/core/src/components.d.ts

@@ -5,6 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+import { BarNumbers } from "./components/information-bar/information-bar";
 import { ActionCardVariant } from "./components/action-card/action-card";
 import { Mode } from "./components/utils/screen/mode";
 import { ButtonVariant } from "./components/button/button";
@@ -36,6 +37,7 @@ import { TypedEvent } from "./components/utils/typed-event";
 import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
 import { TypographyColors, TypographyVariants } from "./components/typography/typography";
 import { UploadFileState } from "./components/upload/upload-file-state";
+export { BarNumbers } from "./components/information-bar/information-bar";
 export { ActionCardVariant } from "./components/action-card/action-card";
 export { Mode } from "./components/utils/screen/mode";
 export { ButtonVariant } from "./components/button/button";
@@ -68,6 +70,9 @@ export { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./compo
 export { TypographyColors, TypographyVariants } from "./components/typography/typography";
 export { UploadFileState } from "./components/upload/upload-file-state";
 export namespace Components {
+    interface InformationBar {
+        "bar": BarNumbers[];
+    }
     /**
      * @since 1.6.0
      */
@@ -2158,6 +2163,12 @@ export interface IxWorkflowStepsCustomEvent<T> extends CustomEvent<T> {
     target: HTMLIxWorkflowStepsElement;
 }
 declare global {
+    interface HTMLInformationBarElement extends Components.InformationBar, HTMLStencilElement {
+    }
+    var HTMLInformationBarElement: {
+        prototype: HTMLInformationBarElement;
+        new (): HTMLInformationBarElement;
+    };
     /**
      * @since 1.6.0
      */
@@ -2747,6 +2758,7 @@ declare global {
         new (): HTMLMyComponentElement;
     };
     interface HTMLElementTagNameMap {
+        "information-bar": HTMLInformationBarElement;
         "ix-action-card": HTMLIxActionCardElement;
         "ix-animated-tab": HTMLIxAnimatedTabElement;
         "ix-animated-tabs": HTMLIxAnimatedTabsElement;
@@ -2839,6 +2851,9 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface InformationBar {
+        "bar"?: BarNumbers[];
+    }
     /**
      * @since 1.6.0
      */
@@ -4958,6 +4973,7 @@ declare namespace LocalJSX {
     interface MyComponent {
     }
     interface IntrinsicElements {
+        "information-bar": InformationBar;
         "ix-action-card": IxActionCard;
         "ix-animated-tab": IxAnimatedTab;
         "ix-animated-tabs": IxAnimatedTabs;
@@ -5053,6 +5069,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "information-bar": LocalJSX.InformationBar & JSXBase.HTMLAttributes<HTMLInformationBarElement>;
             /**
              * @since 1.6.0
              */

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

@@ -0,0 +1,127 @@
+: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
+  );
+}

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

@@ -0,0 +1,103 @@
+import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+
+export type BarNumbers = {
+  count: number;
+  stripped: number;
+  icon: string;
+  color: string;
+};
+
+@Component({
+  tag: 'information-bar',
+  styleUrl: 'information-bar.scss',
+  shadow: true,
+})
+export class InformationBar {
+  @Element() el: HTMLInformationBarElement;
+
+  @Prop() bar: BarNumbers[] = [];
+
+  @Watch('bar')
+  onBarChange() {
+    setTimeout(() => this.setPositionsOfIcons());
+  }
+
+  componentDidRender() {
+    setTimeout(() => this.setPositionsOfIcons());
+  }
+
+  setPositionsOfIcons() {
+    let currentBarWidth = 0;
+    let currentIconWidth = 0;
+    let sumOfMargins = 0;
+    const margins: number[] = [];
+    const iconElements = [];
+
+    this.bar?.forEach((_, index) => {
+      const barElement = this.el.shadowRoot.querySelector('#bar-' + index);
+
+      const iconElement = this.el.shadowRoot.querySelector('#icon-' + index);
+
+      const barTileWidth = barElement?.getBoundingClientRect().width;
+      const iconTileWidth = iconElement?.getBoundingClientRect().width;
+
+      const newBarWidth = currentBarWidth + barTileWidth;
+      const newIconWidth = currentIconWidth + iconTileWidth + sumOfMargins;
+
+      const marginForIcon =
+        newBarWidth > newIconWidth ? newBarWidth - newIconWidth : 0;
+      iconElement?.setAttribute('style', `margin-right: ${marginForIcon}px`);
+
+      currentBarWidth += barTileWidth;
+      currentIconWidth += iconTileWidth;
+      sumOfMargins += marginForIcon;
+      margins.push(marginForIcon);
+      iconElements.push(iconElement);
+    });
+
+    const overlap = currentIconWidth + sumOfMargins - currentBarWidth;
+
+    if (overlap > 0) {
+      for (let i = margins.length - 1; i >= 0; i--) {
+        if (margins[i] > overlap) {
+          iconElements[i].setAttribute(
+            'style',
+            `margin-right: ${margins[i] - overlap + 4}px`
+          );
+          break;
+        }
+      }
+    }
+  }
+
+  sum() {
+    return this.bar.map((el) => el.count).reduce((acc, el) => acc + el);
+  }
+
+  render() {
+    return (
+      <Host>
+        <div class="bar-container">
+          {this.bar?.map((bar, index) => {
+            return (
+              <div class={bar.color} style={{width: (100 * bar.count) / this.sum() + '%'}}
+                   id={'bar-' + index.toString()}>
+                <div class={bar.color + '-bar'} style={{width: (100 * bar.stripped) / bar.count + '%'}}></div>
+              </div>
+            );
+          })}
+        </div>
+        <div class="icon-container">
+          {this.bar?.map((bar, index) => {
+            return (
+              <div class="icon-and-text" id={'icon-' + index.toString()}>
+                <ix-icon class={bar.color + '-icon'} name={bar.icon} size="16"></ix-icon>
+                <span class="distance">{bar.count}</span>
+              </div>
+            );
+          })}
+        </div>
+      </Host>
+    );
+  }
+}