fix(core/workflow-steps): single state

packages/core/component-doc.json

@@ -9576,18 +9576,13 @@
       "docs": "",
       "docsTags": [],
       "encapsulation": "scoped",
-      "dependents": [
-        "my-component"
-      ],
+      "dependents": [],
       "dependencies": [
         "ix-icon"
       ],
       "dependencyGraph": {
         "ix-workflow-step": [
           "ix-icon"
-        ],
-        "my-component": [
-          "ix-workflow-step"
         ]
       },
       "props": [
@@ -9627,13 +9622,19 @@
         },
         {
           "name": "position",
-          "type": "\"first\" | \"last\" | \"undefined\"",
+          "type": "\"first\" | \"last\" | \"single\" | \"undefined\"",
           "mutable": false,
           "attr": "position",
           "reflectToAttr": false,
           "docs": "Activate navigation click",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Will be changed to '@internal' in 2.0.0"
+            }
+          ],
           "default": "'undefined'",
+          "deprecation": "Will be changed to '@internal' in 2.0.0",
           "values": [
             {
               "value": "first",
@@ -9643,6 +9644,10 @@
               "value": "last",
               "type": "string"
             },
+            {
+              "value": "single",
+              "type": "string"
+            },
             {
               "value": "undefined",
               "type": "string"
@@ -9725,7 +9730,13 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "listeners": []
+      "listeners": [
+        {
+          "event": "click",
+          "capture": false,
+          "passive": true
+        }
+      ]
     },
     {
       "dirPath": "./src/components/workflow-steps",
@@ -9739,15 +9750,9 @@
       "docs": "",
       "docsTags": [],
       "encapsulation": "scoped",
-      "dependents": [
-        "my-component"
-      ],
+      "dependents": [],
       "dependencies": [],
-      "dependencyGraph": {
-        "my-component": [
-          "ix-workflow-steps"
-        ]
-      },
+      "dependencyGraph": {},
       "props": [
         {
           "name": "clickable",
@@ -9773,8 +9778,14 @@
           "attr": "linear",
           "reflectToAttr": false,
           "docs": "Select linear mode",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Has no effect on component. Will get removed in 2.0.0"
+            }
+          ],
           "default": "false",
+          "deprecation": "Has no effect on component. Will get removed in 2.0.0",
           "values": [
             {
               "type": "boolean"
@@ -9848,19 +9859,8 @@
       "docsTags": [],
       "encapsulation": "scoped",
       "dependents": [],
-      "dependencies": [
-        "ix-workflow-steps",
-        "ix-workflow-step"
-      ],
-      "dependencyGraph": {
-        "my-component": [
-          "ix-workflow-steps",
-          "ix-workflow-step"
-        ],
-        "ix-workflow-step": [
-          "ix-icon"
-        ]
-      },
+      "dependencies": [],
+      "dependencyGraph": {},
       "props": [],
       "methods": [],
       "events": [],

packages/core/src/components.d.ts

@@ -1640,8 +1640,9 @@ export namespace Components {
         "disabled": boolean;
         /**
           * Activate navigation click
+          * @deprecated Will be changed to '@internal' in 2.0.0
          */
-        "position": 'first' | 'last' | 'undefined';
+        "position": 'first' | 'last' | 'single' | 'undefined';
         /**
           * Set selected
          */
@@ -1662,6 +1663,7 @@ export namespace Components {
         "clickable": boolean;
         /**
           * Select linear mode
+          * @deprecated Has no effect on component. Will get removed in 2.0.0
          */
         "linear": boolean;
         /**
@@ -1820,6 +1822,10 @@ export interface IxUploadCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxUploadElement;
 }
+export interface IxWorkflowStepCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIxWorkflowStepElement;
+}
 export interface IxWorkflowStepsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIxWorkflowStepsElement;
@@ -4113,10 +4119,12 @@ declare namespace LocalJSX {
           * Set disabled
          */
         "disabled"?: boolean;
+        "onSelectedChanged"?: (event: IxWorkflowStepCustomEvent<HTMLIxWorkflowStepElement>) => void;
         /**
           * Activate navigation click
+          * @deprecated Will be changed to '@internal' in 2.0.0
          */
-        "position"?: 'first' | 'last' | 'undefined';
+        "position"?: 'first' | 'last' | 'single' | 'undefined';
         /**
           * Set selected
          */
@@ -4137,6 +4145,7 @@ declare namespace LocalJSX {
         "clickable"?: boolean;
         /**
           * Select linear mode
+          * @deprecated Has no effect on component. Will get removed in 2.0.0
          */
         "linear"?: boolean;
         /**

packages/core/src/components/my-component/my-component.tsx

@@ -15,12 +15,6 @@ import { Component, h, Host } from '@stencil/core';
 })
 export class MyComponent {
   render() {
-    return (
-      <Host>
-        <ix-workflow-steps>
-          <ix-workflow-step></ix-workflow-step>
-        </ix-workflow-steps>
-      </Host>
-    );
+    return <Host></Host>;
   }
 }

packages/core/src/components/workflow-step/workflow-step.scss

@@ -7,10 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
 @import 'common-variables';
 
 :host {
@@ -47,15 +43,23 @@
           margin: 0 auto 0 0;
         }
 
+        &.single {
+          width: 0;
+        }
+
         &.selected {
-          background-color: var(--theme-workflow-step-icon-default--color--selected);
+          background-color: var(
+            --theme-workflow-step-icon-default--color--selected
+          );
         }
 
         &.done {
           background-color: var(--theme-workflow-step-icon-done--color);
 
           &.selected {
-            background-color: var(--theme-workflow-step-icon-done--color--selected);
+            background-color: var(
+              --theme-workflow-step-icon-done--color--selected
+            );
           }
         }
 
@@ -112,6 +116,10 @@
           &.last {
             margin: 0 0 auto 0;
           }
+
+          &.single {
+            width: 0;
+          }
         }
       }
 
@@ -143,12 +151,14 @@
       background-color: var(--theme-workflow-step--background--disabled);
 
       .line {
-        background-color: var(--theme-workflow-step-icon-default--color--disabled) !important;
+        background-color: var(
+          --theme-workflow-step-icon-default--color--disabled
+        ) !important;
       }
 
       .text {
         color: var(--theme-workflow-step--color--disabled);
       }
     }
   }
-}
+}

packages/core/src/components/workflow-step/workflow-step.tsx

@@ -7,16 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
 import {
   Component,
   Element,
+  Event,
+  EventEmitter,
   Fragment,
   h,
   Host,
+  Listen,
   Prop,
   State,
   Watch,
@@ -57,13 +56,20 @@ export class WorkflowStep {
 
   /**
    * Activate navigation click
+   *
+   * @deprecated Will be changed to '@internal' in 2.0.0
    */
-  @Prop() position: 'first' | 'last' | 'undefined' = 'undefined';
+  @Prop() position: 'first' | 'last' | 'single' | 'undefined' = 'undefined';
 
   @State() iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error' =
     'circle';
   @State() iconColor: string = 'workflow-step-icon-default--color';
 
+  /**
+   * @internal
+   */
+  @Event() selectedChanged: EventEmitter<HTMLIxWorkflowStepElement>;
+
   private customIconSlot: boolean;
 
   private select() {
@@ -131,6 +137,13 @@ export class WorkflowStep {
     );
   }
 
+  @Listen('click', { passive: true })
+  clickFunction() {
+    if (!this.disabled && this.clickable) {
+      this.selectedChanged.emit(this.hostElement);
+    }
+  }
+
   render() {
     const icons = !this.customIconSlot ? (
       <Fragment>

packages/core/src/components/workflow-steps/test/workflow-steps.spec.ts

@@ -40,10 +40,9 @@ describe('workflow-steps', () => {
     observerCallback([{ type: 'childList' }]);
 
     await page.waitForChanges();
-    expect(step).toEqualAttributes({
-      position: 'last',
-      selected: true,
-    });
+
+    expect(step.position).toEqual('single');
+    expect(step.selected).toEqual(true);
   });
 
   it('should re-render workflow steps', async () => {
@@ -62,33 +61,23 @@ describe('workflow-steps', () => {
     observerCallback([{ type: 'childList' }]);
     await page.waitForChanges();
 
-    expect(step).toEqualAttributes({
-      position: 'first',
-      selected: true,
-    });
+    expect(step.position).toEqual('first');
+    expect(step.selected).toEqual(true);
 
-    expect(step1).toEqualAttributes({
-      position: 'last',
-      selected: false,
-    });
+    expect(step1.position).toEqual('last');
+    expect(step1.selected).toEqual(false);
 
     page.root.querySelector('ix-workflow-steps').append(step2);
     observerCallback([{ type: 'childList' }]);
     await page.waitForChanges();
 
-    expect(step).toEqualAttributes({
-      position: 'first',
-      selected: true,
-    });
+    expect(step.position).toEqual('first');
+    expect(step.selected).toEqual(true);
 
-    expect(step1).toEqualAttributes({
-      position: 'undefined',
-      selected: false,
-    });
+    expect(step1.position).toEqual('undefined');
+    expect(step1.selected).toEqual(false);
 
-    expect(step2).toEqualAttributes({
-      position: 'last',
-      selected: false,
-    });
+    expect(step2.position).toEqual('last');
+    expect(step2.selected).toEqual(false);
   });
 });

packages/core/src/components/workflow-steps/workflow-steps.scss

@@ -7,10 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
 @import 'common-variables';
 
 :host {