@siemens/ix 1.0.0 → 1.1.0-beta.0

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/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;

package/dist/components/menu-about.js

@@ -1,120 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './icon-button.js';
-import { d as defineCustomElement$2 } from './tab-item.js';
-import { d as defineCustomElement$1 } from './tabs.js';
-
-const menuAboutCss = ".text-xs.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl.sc-ix-menu-about{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a.sc-ix-menu-about{color:var(--theme-color-primary)}.sc-ix-menu-about-h{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}.sc-ix-menu-about-h .about-header.sc-ix-menu-about{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}.sc-ix-menu-about-h .about-header.sc-ix-menu-about h2.sc-ix-menu-about{color:var(--theme-nav-overlay-header--color);margin-bottom:0}.sc-ix-menu-about-h .about-tabs.sc-ix-menu-about{margin-bottom:1.5rem}.sc-ix-menu-about-h ix-menu-about-item.sc-ix-menu-about{display:none}";
-
-const MenuAbout = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.close = createEvent(this, "close", 7);
-    /**
-     *
-     */
-    this.i18nImprintLabel = 'Imprint';
-    /**
-     * Active tab
-     */
-    this.activeTabLabel = this.i18nImprintLabel;
-    /**
-     * Label of first tab
-     */
-    this.label = 'About & legal information';
-    /**
-     * Internal
-     */
-    this.show = false;
-    this.labels = [];
-  }
-  get aboutItems() {
-    return Array.from(this.el.querySelectorAll('ix-menu-about-item'));
-  }
-  setTab(label) {
-    this.activeTabLabel = label;
-    this.aboutItems.forEach((i) => {
-      i.style.display = 'none';
-      if (i.label === this.activeTabLabel) {
-        i.style.display = 'block';
-      }
-    });
-  }
-  componentWillLoad() {
-    var _a;
-    this.setTab(this.activeTabLabel || ((_a = this.aboutItems[0]) === null || _a === void 0 ? void 0 : _a.label));
-  }
-  componentDidLoad() {
-    var _a;
-    this.setTab(this.activeTabLabel || ((_a = this.aboutItems[0]) === null || _a === void 0 ? void 0 : _a.label));
-    forceUpdate(this.el);
-  }
-  componentWillRender() {
-    this.updateLabels();
-  }
-  updateLabels() {
-    this.labels = this.aboutItems.map((i) => i.label);
-  }
-  watchActiveTabLabel(value) {
-    // Wait a DOM render cycle to get changed labels
-    setTimeout(() => this.setTab(value));
-  }
-  getSelectedTabIndex(label) {
-    const selectedItem = this.aboutItems.find((item) => item.label === label);
-    return this.aboutItems.indexOf(selectedItem);
-  }
-  render() {
-    return (h(Host, { class: {
-        animate__animated: true,
-        animate__fadeInLeft: this.show,
-        animate__fadeOutLeft: !this.show,
-      } }, h("div", { class: "about-header" }, h("h2", { class: "text-h2" }, this.label), h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit(e) })), h("ix-tabs", { selected: this.getSelectedTabIndex(this.activeTabLabel), class: "about-tabs" }, this.labels.map((label) => (h("ix-tab-item", { onClick: () => this.setTab(label) }, label)))), h("div", { class: "about-items" }, h("slot", null))));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "activeTabLabel": ["watchActiveTabLabel"]
-  }; }
-  static get style() { return menuAboutCss; }
-}, [6, "ix-menu-about", {
-    "i18nImprintLabel": [513, "i-1-8n-imprint-label"],
-    "activeTabLabel": [1537, "active-tab-label"],
-    "label": [1],
-    "show": [4],
-    "labels": [32]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ix-menu-about", "ix-icon", "ix-icon-button", "ix-tab-item", "ix-tabs"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ix-menu-about":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MenuAbout);
-      }
-      break;
-    case "ix-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "ix-icon-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "ix-tab-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "ix-tabs":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { MenuAbout as M, defineCustomElement as d };

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

@@ -1,79 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.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) {
-    registerInstance(this, hostRef);
-    this.stepSelected = 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 (h(Host, null, h("div", { class: { steps: true, vertical: this.vertical } }, h("slot", null))));
-  }
-  get hostElement() { return getElement(this); }
-};
-WorkflowSteps.style = workflowStepsCss;
-
-export { WorkflowSteps as ix_workflow_steps };