@siemens/ix 1.0.0-beta.5 → 1.1.0-beta.0

package/scss/components/_checkboxes.scss

@@ -50,14 +50,14 @@
     background-size: contain;
   }
 
-  [type='checkbox'] + label:focus {
+  [type='checkbox'] + label:focus-visible {
     &:before {
       outline: 1px solid var(--focus--border-color);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
     }
   }
 
-  [type='checkbox']:focus + label {
+  [type='checkbox']:focus-visible + label {
     &:before {
       outline: 1px solid var(--focus--border-color);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
@@ -67,29 +67,34 @@
   [type='checkbox']:not(:checked) {
     & + label:before {
       background-color: var(--theme-checkbox-unchecked--background);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color);
     }
 
     &:hover + label:before {
       background-color: var(--theme-checkbox-unchecked--background--hover);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--hover);
     }
 
     &:active + label:before {
       background-color: var(--theme-checkbox-unchecked--background--active);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--active);
     }
 
     &:disabled + label::before {
       background-color: var(--theme-checkbox-unchecked--background--disabled);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-unchecked--border-color--disabled);
     }
   }
 
   [type='checkbox']:checked {
     & + label:before {
       background-color: var(--theme-checkbox-checked--background);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color);
     }
 
     & + label:after {
@@ -109,17 +114,20 @@
 
     &:hover + label:before {
       background-color: var(--theme-checkbox-checked--background--hover);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--hover);
     }
 
     &:active + label:before {
       background-color: var(--theme-checkbox-checked--background--active);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--active);
     }
 
     &:disabled + label:before {
       background-color: var(--theme-checkbox-checked--background--disabled);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-checked--border-color--disabled);
     }
 
     &:disabled + label::after {
@@ -146,22 +154,26 @@
 
     & + label:before {
       background-color: var(--theme-checkbox-mixed--background);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color);
     }
 
     &:hover + label:before {
       background-color: var(--theme-checkbox-mixed--background--hover);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--hover);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--hover);
     }
 
     &:active + label:before {
       background-color: var(--theme-checkbox-mixed--background--active);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--active);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--active);
     }
 
     &:disabled + label::before {
       background-color: var(--theme-checkbox-mixed--background--disabled);
-      border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--disabled);
+      border: var(--theme-checkbox--border-thickness) solid
+        var(--theme-checkbox-mixed--border-color--disabled);
     }
 
     &:disabled + label::after {

package/scss/components/_dropdown.scss

@@ -103,7 +103,7 @@
   border: 1px solid transparent;
   color: var(--theme-menu-item--color);
 
-  &:focus {
+  &:focus-visible {
     background-color: var(--theme-menu-item--background);
     color: var(--theme-menu-item--color);
   }

package/scss/components/_forms.scss

@@ -48,7 +48,7 @@
   }
 }
 
-.form-control:focus {
+.form-control:focus-visible {
   color: var(--theme-input--color);
 }
 
@@ -58,6 +58,7 @@
     margin-left: 2px;
     display: none;
   }
+
   text-align: right;
 }
 

package/scss/components/_radiobuttons.scss

@@ -45,14 +45,14 @@
     border-radius: 100%;
   }
 
-  [type='radio'] + label:focus {
+  [type='radio'] + label:focus-visible {
     &:before {
       outline: 1px solid var(--focus--border-color);
       outline-offset: var(--theme-radiobtn--focus--outline-offset);
     }
   }
 
-  [type='radio']:focus + label {
+  [type='radio']:focus-visible + label {
     &:before {
       outline: 1px solid var(--focus--border-color);
       outline-offset: var(--theme-radiobtn--focus--outline-offset);
@@ -62,29 +62,34 @@
   [type='radio']:not(:checked) {
     & + label:before {
       background-color: var(--theme-radiobtn-unchecked--background);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-unchecked--border-color);
     }
 
     &:hover + label:before {
       background-color: var(--theme-radiobtn-unchecked--background--hover);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--hover);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-unchecked--border-color--hover);
     }
 
     &:active + label:before {
       background-color: var(--theme-radiobtn-unchecked--background--active);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--active);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-unchecked--border-color--active);
     }
 
     &:disabled + label::before {
       background-color: var(--theme-radiobtn-unchecked--background--disabled);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-unchecked--border-color--disabled);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-unchecked--border-color--disabled);
     }
   }
 
   [type='radio']:checked {
     & + label:before {
       background-color: var(--theme-radiobtn-checked--background);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-checked--border-color);
     }
 
     & + label:after {
@@ -102,17 +107,20 @@
 
     &:hover + label:before {
       background-color: var(--theme-radiobtn-checked--background--hover);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--hover);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-checked--border-color--hover);
     }
 
     &:active + label:before {
       background-color: var(--theme-radiobtn-checked--background--active);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--active);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-checked--border-color--active);
     }
 
     &:disabled + label:before {
       background-color: var(--theme-radiobtn-checked--background--disabled);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-checked--border-color--disabled);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-checked--border-color--disabled);
     }
 
     &:disabled + label::after {
@@ -138,22 +146,26 @@
 
     & + label:before {
       background-color: var(--theme-radiobtn-mixed--background);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-mixed--border-color);
     }
 
     &:hover + label:before {
       background-color: var(--theme-radiobtn-mixed--background--hover);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color--hover);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-mixed--border-color--hover);
     }
 
     &:active + label:before {
       background-color: var(--theme-radiobtn-mixed--background--active);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color--active);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-mixed--border-color--active);
     }
 
     &:disabled + label::before {
       background-color: var(--theme-radiobtn-mixed--background--disabled);
-      border: var(--theme-radiobtn--border-thickness) solid var(--theme-radiobtn-mixed--border-color--disabled);
+      border: var(--theme-radiobtn--border-thickness) solid
+        var(--theme-radiobtn-mixed--border-color--disabled);
     }
 
     &:disabled + label::after {

package/scss/mixins/_hover.scss

@@ -29,7 +29,6 @@
 
 @mixin focus() {
   &:not(.disabled):not(:disabled) {
-    &:focus,
     &:focus-visible {
       @content;
     }

package/src/components/date-picker/readme.md

@@ -11,20 +11,41 @@ SPDX-License-Identifier: MIT
 
 ## Properties
 
-| Property     | Attribute    | Description        | Type                             | Default        |
-| ------------ | ------------ | ------------------ | -------------------------------- | -------------- |
-| `corners`    | `corners`    | Set corners style  | `"left" \| "right" \| "rounded"` | `'rounded'`    |
-| `format`     | `format`     | output date format | `string`                         | `'yyyy/LL/dd'` |
-| `individual` | `individual` | set styles         | `boolean`                        | `true`         |
-| `range`      | `range`      | Set range size     | `boolean`                        | `true`         |
+| Property         | Attribute          | Description                                                                                                                                                         | Type                             | Default                                |
+| ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------- |
+| `corners`        | `corners`          | Corner style                                                                                                                                                        | `"left" \| "right" \| "rounded"` | `'rounded'`                            |
+| `eventDelimiter` | `event-delimiter`  | Default behavior of the done event is to join the two events (date and time) into one combined string output. This combination can be configured over the delimiter | `string`                         | `' - '`                                |
+| `format`         | `format`           | Date format string. See {@link https ://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.                                           | `string`                         | `'yyyy/LL/dd'`                         |
+| `from`           | `from`             | Picker date. If the picker is in range mode this property is the start date.  Format is based on `format`                                                           | `string`                         | `DateTime.now().toFormat(this.format)` |
+| `individual`     | `individual`       | <span style="color:red">**[DEPRECATED]**</span> - will get removed with next major release<br/><br/>                                                                | `boolean`                        | `true`                                 |
+| `maxDate`        | `max-date`         | The latest date that can be selected by the date picker. If not set there will be no restriction.                                                                   | `string`                         | `undefined`                            |
+| `minDate`        | `min-date`         | The earliest date that can be selected by the date picker. If not set there will be no restriction.                                                                 | `string`                         | `undefined`                            |
+| `range`          | `range`            | If true a range of dates can be selected.                                                                                                                           | `boolean`                        | `true`                                 |
+| `textSelectDate` | `text-select-date` | Text of date select button                                                                                                                                          | `string`                         | `'Done'`                               |
+| `to`             | `to`               | Picker date. If the picker is in range mode this property is the end date. If the picker is not in range mode leave this value `null`  Format is based on `format`  | `string`                         | `null`                                 |
 
 
 ## Events
 
-| Event        | Description       | Type                  |
-| ------------ | ----------------- | --------------------- |
-| `dateChange` | Time change event | `CustomEvent<string>` |
-| `done`       | done event        | `CustomEvent<string>` |
+| Event             | Description                                                                                                                                                                                                | Type                                     |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
+| `dateChange`      | Date change event  If datepicker is in range mode the event detail will be sperated with a `-` e.g. `2022/10/22 - 2022/10/24` (start and end). If range mode is choosen consider to use `dateRangeChange`. | `CustomEvent<DateChangeEvent \| string>` |
+| `dateRangeChange` | Date range change. Only triggered if datepicker is in range mode                                                                                                                                           | `CustomEvent<DateChangeEvent>`           |
+| `dateSelect`      | Date selection confirmed via button action                                                                                                                                                                 | `CustomEvent<DateChangeEvent>`           |
+| `done`            | <span style="color:red">**[DEPRECATED]**</span> Use `dateSelect`<br/><br/>Date selection confirmed via button action                                                                                       | `CustomEvent<string>`                    |
+
+
+## Methods
+
+### `getCurrentDate() => Promise<{ start: DateTime; end: DateTime; }>`
+
+Get the current DateTime
+
+#### Returns
+
+Type: `Promise<{ start: DateTime; end: DateTime; }>`
+
+
 
 
 ----------------------------------------------

package/src/components/datetime-picker/readme.md

@@ -11,20 +11,33 @@ SPDX-License-Identifier: MIT
 
 ## Properties
 
-| Property            | Attribute             | Description               | Type      | Default |
-| ------------------- | --------------------- | ------------------------- | --------- | ------- |
-| `range`             | `range`               | Set range size            | `boolean` | `true`  |
-| `showHour`          | `show-hour`           | Show Hour Input           | `boolean` | `false` |
-| `showMinutes`       | `show-minutes`        | Show Minutes Input        | `boolean` | `false` |
-| `showSeconds`       | `show-seconds`        | Show Seconds Input        | `boolean` | `false` |
-| `showTimeReference` | `show-time-reference` | Show Time Reference Input | `boolean` | `false` |
+| Property            | Attribute             | Description                                                                                                                                                         | Type           | Default        |
+| ------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -------------- |
+| `dateFormat`        | `date-format`         | Date format string. See {@link https ://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.                                           | `string`       | `'yyyy/LL/dd'` |
+| `eventDelimiter`    | `event-delimiter`     | Default behavior of the done event is to join the two events (date and time) into one combined string output. This combination can be configured over the delimiter | `string`       | `' - '`        |
+| `from`              | `from`                | Picker date. If the picker is in range mode this property is the start date.  Format is based on `format`                                                           | `string`       | `undefined`    |
+| `maxDate`           | `max-date`            | The latest date that can be selected by the date picker. If not set there will be no restriction.                                                                   | `string`       | `undefined`    |
+| `minDate`           | `min-date`            | The earliest date that can be selected by the date picker. If not set there will be no restriction.                                                                 | `string`       | `undefined`    |
+| `range`             | `range`               | Set range size                                                                                                                                                      | `boolean`      | `true`         |
+| `showHour`          | `show-hour`           | Show hour input                                                                                                                                                     | `boolean`      | `false`        |
+| `showMinutes`       | `show-minutes`        | Show minutes input                                                                                                                                                  | `boolean`      | `false`        |
+| `showSeconds`       | `show-seconds`        | Show seconds input                                                                                                                                                  | `boolean`      | `false`        |
+| `showTimeReference` | `show-time-reference` | Show time reference input                                                                                                                                           | `any`          | `undefined`    |
+| `textSelectDate`    | `text-select-date`    | Text of date select button                                                                                                                                          | `string`       | `'Done'`       |
+| `time`              | `time`                | Select time with format string                                                                                                                                      | `string`       | `undefined`    |
+| `timeFormat`        | `time-format`         | Time format string. See {@link https ://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.                                           | `string`       | `'TT'`         |
+| `timeReference`     | `time-reference`      | Set time reference                                                                                                                                                  | `"AM" \| "PM"` | `undefined`    |
+| `to`                | `to`                  | Picker date. If the picker is in range mode this property is the end date. If the picker is not in range mode leave this value `null`  Format is based on `format`  | `string`       | `null`         |
 
 
 ## Events
 
-| Event  | Description | Type                  |
-| ------ | ----------- | --------------------- |
-| `done` | Time event  | `CustomEvent<string>` |
+| Event        | Description                                                                     | Type                                                   |
+| ------------ | ------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| `dateChange` | Date change                                                                     | `CustomEvent<string \| { from: string; to: string; }>` |
+| `dateSelect` | Date selection event is fired after confirm button is pressend                  | `CustomEvent<DateTimeSelectEvent>`                     |
+| `done`       | Done event  Set `doneEventDelimiter` to null or undefine to get the typed event | `CustomEvent<string>`                                  |
+| `timeChange` | Time change                                                                     | `CustomEvent<string>`                                  |
 
 
 ----------------------------------------------

package/src/components/icon/readme.md

@@ -11,11 +11,11 @@ SPDX-License-Identifier: MIT
 
 ## Properties
 
-| Property | Attribute | Description                                   | Type                           | Default     |
-| -------- | --------- | --------------------------------------------- | ------------------------------ | ----------- |
-| `color`  | `color`   | Color of the icon                             | `string`                       | `undefined` |
-| `name`   | `name`    | Use one of our defined icon names e.g `copy`. | `string`                       | `undefined` |
-| `size`   | `size`    | Size of the icon                              | `"12" \| "16" \| "24" \| "32"` | `undefined` |
+| Property | Attribute | Description                                    | Type                           | Default     |
+| -------- | --------- | ---------------------------------------------- | ------------------------------ | ----------- |
+| `color`  | `color`   | Color of the icon                              | `string`                       | `undefined` |
+| `name`   | `name`    | Use one of our defined icon names e.g. `copy`. | `string`                       | `undefined` |
+| `size`   | `size`    | Size of the icon                               | `"12" \| "16" \| "24" \| "32"` | `undefined` |
 
 
 ----------------------------------------------

package/src/components/menu-about/readme.md

@@ -11,12 +11,11 @@ SPDX-License-Identifier: MIT
 
 ## Properties
 
-| Property           | Attribute              | Description        | Type      | Default                       |
-| ------------------ | ---------------------- | ------------------ | --------- | ----------------------------- |
-| `activeTabLabel`   | `active-tab-label`     | Active tab         | `string`  | `this.i18nImprintLabel`       |
-| `i18nImprintLabel` | `i-1-8n-imprint-label` |                    | `string`  | `'Imprint'`                   |
-| `label`            | `label`                | Label of first tab | `string`  | `'About & legal information'` |
-| `show`             | `show`                 | Internal           | `boolean` | `false`                       |
+| Property         | Attribute          | Description        | Type      | Default                       |
+| ---------------- | ------------------ | ------------------ | --------- | ----------------------------- |
+| `activeTabLabel` | `active-tab-label` | Active tab         | `string`  | `undefined`                   |
+| `label`          | `label`            | Label of first tab | `string`  | `'About & legal information'` |
+| `show`           | `show`             | Internal           | `boolean` | `false`                       |
 
 
 ## Events

package/src/components/time-picker/readme.md

@@ -11,14 +11,18 @@ SPDX-License-Identifier: MIT
 
 ## Properties
 
-| Property            | Attribute             | Description               | Type                             | Default     |
-| ------------------- | --------------------- | ------------------------- | -------------------------------- | ----------- |
-| `corners`           | `corners`             | Set corners style         | `"left" \| "right" \| "rounded"` | `'rounded'` |
-| `individual`        | `individual`          | set styles                | `boolean`                        | `true`      |
-| `showHour`          | `show-hour`           | Show Hour Input           | `boolean`                        | `false`     |
-| `showMinutes`       | `show-minutes`        | Show Minutes Input        | `boolean`                        | `false`     |
-| `showSeconds`       | `show-seconds`        | Show Seconds Input        | `boolean`                        | `false`     |
-| `showTimeReference` | `show-time-reference` | Show Time Reference Input | `boolean`                        | `false`     |
+| Property            | Attribute             | Description                                                                                          | Type                             | Default                                                                                 |
+| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------- |
+| `corners`           | `corners`             | Corner style                                                                                         | `"left" \| "right" \| "rounded"` | `'rounded'`                                                                             |
+| `format`            | `format`              | Format of time string                                                                                | `string`                         | `'TT'`                                                                                  |
+| `individual`        | `individual`          | <span style="color:red">**[DEPRECATED]**</span> - will get removed with next major release<br/><br/> | `boolean`                        | `true`                                                                                  |
+| `showHour`          | `show-hour`           | Show hour input                                                                                      | `boolean`                        | `false`                                                                                 |
+| `showMinutes`       | `show-minutes`        | Show minutes input                                                                                   | `boolean`                        | `false`                                                                                 |
+| `showSeconds`       | `show-seconds`        | Show seconds input                                                                                   | `boolean`                        | `false`                                                                                 |
+| `showTimeReference` | `show-time-reference` | Show time reference input                                                                            | `any`                            | `undefined`                                                                             |
+| `textSelectTime`    | `text-select-time`    | Text of date select button                                                                           | `string`                         | `'Done'`                                                                                |
+| `time`              | `time`                | Select time with format string                                                                       | `string`                         | `DateTime.now().toFormat(this.format)`                                                  |
+| `timeReference`     | `time-reference`      | Set time reference                                                                                   | `"AM" \| "PM"`                   | `DateTime.fromFormat(     this.time,     this.format   ).toFormat('a') as 'PM' \| 'AM'` |
 
 
 ## Events
@@ -29,6 +33,19 @@ SPDX-License-Identifier: MIT
 | `timeChange` | Time change event | `CustomEvent<string>` |
 
 
+## Methods
+
+### `getCurrentTime() => Promise<DateTime>`
+
+Get current time
+
+#### Returns
+
+Type: `Promise<DateTime>`
+
+
+
+
 ----------------------------------------------
 
 

package/dist/cjs/ix-workflow-steps.cjs.entry.js

@@ -1,83 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-1e4a348f.js');
-
-const workflowStepsCss = ".sc-ix-workflow-steps-h .steps.sc-ix-workflow-steps{display:flex}.sc-ix-workflow-steps-h .steps.vertical.sc-ix-workflow-steps{display:block}";
-
-const WorkflowSteps = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.stepSelected = index.createEvent(this, "stepSelected", 7);
-    /**
-     * Select orientation
-     */
-    this.vertical = false;
-    /**
-     * Select linear mode
-     */
-    this.linear = false;
-    /**
-     * Activate navigation click
-     */
-    this.clickable = false;
-    /**
-     * Activate navigation click
-     */
-    this.selectedIndex = 0;
-  }
-  getSteps() {
-    return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));
-  }
-  deselectAll() {
-    const steps = this.getSteps();
-    steps.forEach((element) => {
-      element.setAttribute('selected', 'false');
-    });
-  }
-  componentDidRender() {
-    const steps = this.getSteps();
-    steps.forEach((element, index) => {
-      element.setAttribute('vertical', this.vertical === true ? 'true' : 'false');
-      element.setAttribute('clickable', this.clickable === true ? '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');
-    });
-  }
-  componentWillRender() {
-    const steps = this.getSteps();
-    steps.forEach((element, index) => {
-      element.addEventListener('click', () => {
-        if (!this.clickable)
-          return;
-        const previousElement = steps[index - 1];
-        if (this.linear &&
-          previousElement &&
-          !['done', 'success'].includes(previousElement === null || previousElement === void 0 ? void 0 : previousElement.status)) {
-          return element.setAttribute('selected', 'false');
-        }
-        this.deselectAll();
-        element.setAttribute('selected', 'true');
-        this.stepSelected.emit(index);
-      });
-      // const isEnabled = element.getAttribute('first');
-      // if(isEnabled){
-      // }
-      // console.log(isEnabled)
-      // const isDisabled = element.getAttribute('disabled') !== null;
-      // if (!isDisabled) element.addEventListener('click', () => '');
-      //element.addEventListener('mousedown', event => this.clicked(element, index));
-    });
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: { steps: true, vertical: this.vertical } }, index.h("slot", null))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
-WorkflowSteps.style = workflowStepsCss;
-
-exports.ix_workflow_steps = WorkflowSteps;