fix(core/workflow-steps): single state

packages/core/component-doc.json

@@ -9627,13 +9627,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 +9649,10 @@
               "value": "last",
               "type": "string"
             },
+            {
+              "value": "single",
+              "type": "string"
+            },
             {
               "value": "undefined",
               "type": "string"

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
          */
@@ -4115,8 +4116,9 @@ declare namespace LocalJSX {
         "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
          */

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

@@ -47,15 +47,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
+            );
           }
         }
 
@@ -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

@@ -57,8 +57,10 @@ 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';

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.tsx

@@ -62,23 +62,22 @@ export class WorkflowSteps {
   private deselectAll() {
     const steps = this.getSteps();
     steps.forEach((element) => {
-      element.setAttribute('selected', 'false');
+      element.selected = false;
     });
   }
 
   styling() {
     let steps = this.getSteps();
     steps.forEach((element, index) => {
-      element.setAttribute('vertical', this.vertical ? 'true' : 'false');
-      element.setAttribute('clickable', this.clickable ? 'true' : 'false');
-      element.setAttribute(
-        'selected',
-        this.selectedIndex === index ? 'true' : 'false'
-      );
-      if (index === 0) element.setAttribute('position', 'first');
-      if (index === steps.length - 1) element.setAttribute('position', 'last');
-      if (index > 0 && index < steps.length - 1)
-        element.setAttribute('position', 'undefined');
+      element.vertical = this.vertical;
+      element.clickable = this.clickable;
+      element.selected = this.selectedIndex === index ? true : false;
+
+      if (index === 0 && steps.length > 1) element.position = 'first';
+      if (steps.length === 1) element.position = 'single';
+      if (index === steps.length - 1 && steps.length > 1)
+        element.position = 'last';
+      if (index > 0 && index < steps.length - 1) element.position = 'undefined';
     });
   }
 
@@ -119,10 +118,10 @@ export class WorkflowSteps {
           previousElement &&
           !['done', 'success'].includes(previousElement?.status)
         ) {
-          return element.setAttribute('selected', 'false');
+          return (element.selected = false);
         }
         this.deselectAll();
-        element.setAttribute('selected', 'true');
+        element.selected = true;
         this.stepSelected.emit(index);
       });
     });