@siemens/ix 1.0.0-beta.2

package/dist/esm/ix-upload.entry.js

@@ -0,0 +1,135 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.js';
+import { U as UploadFileState } from './upload-file-state-631bb8a2.js';
+
+const uploadCss = ".sc-ix-upload-h{display:block;min-height:4rem;height:4rem}.sc-ix-upload-h .file-upload-area.sc-ix-upload{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}.sc-ix-upload-h .file-upload-area.multiline.sc-ix-upload{max-height:unset;height:auto}.sc-ix-upload-h .file-upload-area.multiline.sc-ix-upload .glyph.sc-ix-upload{align-self:flex-start;-webkit-margin-before:3px;margin-block-start:3px}.sc-ix-upload-h .file-upload-area.multiline.sc-ix-upload>div.sc-ix-upload{align-self:flex-start}.sc-ix-upload-h .file-upload-area.sc-ix-upload:not(.multiline) .state.sc-ix-upload,.sc-ix-upload-h .file-upload-area.sc-ix-upload:not(.multiline) .upload-text.sc-ix-upload{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-upload-h .file-upload-area.file-over.sc-ix-upload{border-color:var(--theme-upload--border-color--dragover);border-style:solid}.sc-ix-upload-h .file-upload-area.checking.sc-ix-upload{color:var(--theme-upload-text--color--checking);border-style:solid}.sc-ix-upload-h .file-upload-area.disabled.sc-ix-upload{border-style:solid;color:var(--theme-upload-text--color--disabled)}.sc-ix-upload-h .file-upload-area.sc-ix-upload ix-button.sc-ix-upload{-webkit-margin-start:1rem;margin-inline-start:1rem}.sc-ix-upload-h .file-upload-area.sc-ix-upload .upload-browser.sc-ix-upload{opacity:0;overflow:hidden;position:absolute;z-index:-1}.sc-ix-upload-h .file-upload-area.sc-ix-upload .loader.sc-ix-upload{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}.sc-ix-upload-h .file-upload-area.sc-ix-upload .upload-filename.sc-ix-upload{margin-bottom:1rem}.sc-ix-upload-h .file-upload-area.sc-ix-upload .state.sc-ix-upload{display:flex;align-items:center}.sc-ix-upload-h .file-upload-area.sc-ix-upload .state.sc-ix-upload>ix-spinner.sc-ix-upload{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;height:1.5rem;width:1.5rem}.sc-ix-upload-h .file-upload-area.sc-ix-upload .state.sc-ix-upload>i.sc-ix-upload{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.sc-ix-upload-h .file-upload-area.sc-ix-upload .state.sc-ix-upload>i.glyph-error.sc-ix-upload{color:var(--theme-color-alarm)}.sc-ix-upload-h .file-upload-area.sc-ix-upload .state.sc-ix-upload>i.glyph-success.sc-ix-upload{color:var(--theme-color-success)}";
+
+const Upload = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.filesChanged = createEvent(this, "filesChanged", 7);
+    /**
+     * If multiple is true the user can drop or select multiple files
+     */
+    this.multiple = false;
+    /**
+     * Whether the text should wrap to more than one line
+     */
+    this.multiline = false;
+    /**
+     * Disable all input events
+     */
+    this.disabled = false;
+    /**
+     * After a file is uploaded you can set the upload component to a defined state
+     */
+    this.state = UploadFileState.SELECT_FILE;
+    /**
+     * Will be used by state = UploadFileState.SELECT_FILE
+     */
+    this.selectFileText = '+ Drag files here or…';
+    /**
+     * Will be used by state = UploadFileState.LOADING
+     */
+    this.loadingText = 'Checking files…';
+    /**
+     * Will be used by state = UploadFileState.UPLOAD_FAILED
+     */
+    this.uploadFailedText = 'Upload failed. Please try again.';
+    /**
+     * Will be used by state = UploadFileState.UPLOAD_SUCCESSED
+     */
+    this.uploadSuccessText = 'Upload successful';
+    /**
+     * Label for upload file button
+     */
+    this.i18nUploadFile = 'Upload file…';
+    /**
+     * Text for disabled state
+     */
+    this.i18nUploadDisabled = 'File upload currently not possible.';
+    this.isFileOver = false;
+  }
+  get inputElement() {
+    return this.hostElement.querySelector('#upload-browser');
+  }
+  fileDropped(evt) {
+    evt.preventDefault();
+    const file = evt.dataTransfer.files;
+    this.isFileOver = false;
+    this.filesToUpload = this.convertToFileArray(file);
+    this.filesChanged.emit(this.filesToUpload);
+  }
+  fileOver(event) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    if (!this.multiple && event.dataTransfer.items.length > 1) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.effectAllowed = 'none';
+      event.dataTransfer.dropEffect = 'none';
+    }
+    else {
+      this.isFileOver = true;
+    }
+  }
+  fileLeave() {
+    this.isFileOver = false;
+  }
+  fileChangeEvent(event) {
+    this.filesToUpload = this.convertToFileArray(event.target.files);
+    this.filesChanged.emit(this.filesToUpload);
+    // Workaround for bug in native input element, that prevents the user from uploading
+    // a file with the same name as the most recent one, but with changed content.
+    this.inputElement.type = '';
+    this.inputElement.type = 'file';
+  }
+  convertToFileArray(filesFromEvent) {
+    let files = [];
+    if (filesFromEvent instanceof FileList) {
+      files = Array.from(filesFromEvent);
+    }
+    else {
+      files = [filesFromEvent];
+    }
+    return files;
+  }
+  renderUploadState() {
+    if (this.disabled) {
+      return (h("span", { class: "state" }, h("span", { class: "upload-text" }, this.i18nUploadDisabled)));
+    }
+    switch (this.state) {
+      case UploadFileState.SELECT_FILE:
+        return (h("span", { class: "state" }, h("span", { class: "upload-text" }, this.selectFileText)));
+      case UploadFileState.LOADING:
+        return (h("span", { class: "state" }, h("ix-spinner", { variant: "primary" }), h("span", { class: "upload-text" }, this.loadingText)));
+      case UploadFileState.UPLOAD_FAILED:
+        return (h("span", { class: "state" }, h("i", { class: "glyph glyph-error" }), h("span", { class: "upload-text" }, this.uploadFailedText)));
+      case UploadFileState.UPLOAD_SUCCESSED:
+        return (h("span", { class: "state" }, h("i", { class: "glyph glyph-success" }), h("span", { class: "upload-text" }, this.uploadSuccessText)));
+      default:
+        return '';
+    }
+  }
+  /**
+   * Set files
+   * @param obj
+   */
+  async setFilesToUpload(obj) {
+    this.filesToUpload = obj;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'file-upload-area': true,
+        'file-over': this.isFileOver,
+        checking: this.state === UploadFileState.LOADING,
+        disabled: this.disabled,
+        multiline: this.multiline,
+      }, onDrop: (e) => this.fileDropped(e), onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), h("div", null, h("input", { multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
+        this.fileChangeEvent(e);
+      }, accept: this.accept }), h("ix-button", { tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === UploadFileState.LOADING }, this.i18nUploadFile)))));
+  }
+  get hostElement() { return getElement(this); }
+};
+Upload.style = uploadCss;
+
+export { Upload as ix_upload };

package/dist/esm/ix-validation-tooltip.entry.js

@@ -0,0 +1,103 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-55cfd20d.js';
+import { c as createPopper } from './popper-42db9fbd.js';
+
+const validationTooltipCss = ".text-xs.sc-ix-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{-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-validation-tooltip{color:var(--theme-color-primary)}.sc-ix-validation-tooltip-h{display:block}.sc-ix-validation-tooltip-h .validation-tooltip.sc-ix-validation-tooltip{background-color:var(--theme-tootlip--background);color:white;padding:5px 10px;border-radius:4px;font-size:13px;border:1px solid var(--theme-tooltip--border-color)}.sc-ix-validation-tooltip-h .validation-tooltip.sc-ix-validation-tooltip #arrow.sc-ix-validation-tooltip,.sc-ix-validation-tooltip-h .validation-tooltip.sc-ix-validation-tooltip #arrow.sc-ix-validation-tooltip::before{position:absolute;width:8px;height:8px;background:inherit}.sc-ix-validation-tooltip-h .validation-tooltip.sc-ix-validation-tooltip #arrow.sc-ix-validation-tooltip{visibility:hidden}.sc-ix-validation-tooltip-h .validation-tooltip.sc-ix-validation-tooltip #arrow.sc-ix-validation-tooltip::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}.sc-ix-validation-tooltip-h .validation-tooltip[data-popper-placement^=top].sc-ix-validation-tooltip>#arrow.sc-ix-validation-tooltip{bottom:-5px}.sc-ix-validation-tooltip-h .validation-tooltip[data-popper-placement^=top].sc-ix-validation-tooltip>#arrow.sc-ix-validation-tooltip::before{border-right:1px solid var(--theme-tooltip--border-color);border-bottom:1px solid var(--theme-tooltip--border-color)}.sc-ix-validation-tooltip-h .validation-tooltip[data-popper-placement^=bottom].sc-ix-validation-tooltip>#arrow.sc-ix-validation-tooltip{top:-5px}.sc-ix-validation-tooltip-h .validation-tooltip[data-popper-placement^=bottom].sc-ix-validation-tooltip>#arrow.sc-ix-validation-tooltip::before{border-left:1px solid var(--theme-tooltip--border-color);border-top:1px solid var(--theme-tooltip--border-color)}.sc-ix-validation-tooltip-h .validation-tooltip[data-popper-placement^=left].sc-ix-validation-tooltip>#arrow.sc-ix-validation-tooltip{right:-5px}.sc-ix-validation-tooltip-h .validation-tooltip[data-popper-placement^=left].sc-ix-validation-tooltip>#arrow.sc-ix-validation-tooltip::before{border-right:1px solid var(--theme-tooltip--border-color);border-top:1px solid var(--theme-tooltip--border-color)}.sc-ix-validation-tooltip-h .validation-tooltip[data-popper-placement^=right].sc-ix-validation-tooltip>#arrow.sc-ix-validation-tooltip{left:-5px}.sc-ix-validation-tooltip-h .validation-tooltip[data-popper-placement^=right].sc-ix-validation-tooltip>#arrow.sc-ix-validation-tooltip::before{border-left:1px solid var(--theme-tooltip--border-color);border-bottom:1px solid var(--theme-tooltip--border-color)}";
+
+const ValidationTooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Placement of the tooltip
+     */
+    this.placement = 'top';
+    this.isInputValid = true;
+    this.onSubmitBind = this.onSubmit.bind(this);
+    this.onInputFocusBind = this.onInputFocus.bind(this);
+  }
+  get arrow() {
+    return this.hostElement.querySelector('#arrow');
+  }
+  get inputElement() {
+    return this.hostElement.querySelector('input');
+  }
+  get formElement() {
+    return this.inputElement.form;
+  }
+  get tooltipElement() {
+    return this.hostElement.querySelector('.validation-tooltip');
+  }
+  componentDidLoad() {
+    if (!this.inputElement) {
+      throw Error('Validation tooltip is only working with an direct input child.');
+    }
+    if (!this.formElement) {
+      throw Error('Validation tooltip is only working with an form element.');
+    }
+    this.formElement.addEventListener('submit', this.onSubmitBind);
+    this.inputElement.addEventListener('focus', this.onInputFocusBind);
+    this.observer = new MutationObserver(() => {
+      if (this.inputElement.classList.contains('is-invalid')) {
+        this.isInputValid = false;
+        this.validationChanged();
+      }
+    });
+    this.observer.observe(this.inputElement, {
+      childList: false,
+      subtree: false,
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+  }
+  onInputFocus() {
+    this.isInputValid = true;
+  }
+  onSubmit() {
+    if (this.formElement.classList.contains('needs-validation')) {
+      this.isInputValid = this.inputElement.validity.valid;
+    }
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.popper) === null || _b === void 0 ? void 0 : _b.destroy();
+    this.formElement.removeEventListener('submit', this.onSubmitBind);
+    this.inputElement.removeEventListener('focus', this.onInputFocusBind);
+  }
+  validationChanged() {
+    if (!this.isInputValid) {
+      this.tooltipElement.style.display = 'block';
+      this.popper = createPopper(this.inputElement, this.tooltipElement, {
+        placement: this.placement,
+        strategy: 'absolute',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 8],
+            },
+          },
+          {
+            name: 'arrow',
+            options: {
+              element: this.arrow,
+            },
+          },
+        ],
+      });
+    }
+    else {
+      this.tooltipElement.style.display = 'none';
+      this.popper.destroy();
+    }
+  }
+  render() {
+    return (h(Host, null, h("slot", null), h("div", { role: "tooltip", style: { display: 'none' }, class: "validation-tooltip text-default" }, this.message, h("slot", { name: "tooltip-message" }), h("div", { id: "arrow", "data-popper-arrow": true }))));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "isInputValid": ["validationChanged"]
+  }; }
+};
+ValidationTooltip.style = validationTooltipCss;
+
+export { ValidationTooltip as ix_validation_tooltip };

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

@@ -0,0 +1,110 @@
+import { r as registerInstance, h, F as Fragment, H as Host, g as getElement } from './index-55cfd20d.js';
+
+const workflowStepCss = ".sc-ix-workflow-step-h .step.sc-ix-workflow-step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);width:auto;padding:1.125rem 0 0.5rem 0;height:4rem;width:12.75rem}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{display:flex;width:100%;align-items:center;justify-content:center}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{width:50%;margin:0 0 0 auto}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 auto 0 0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.warning.sc-ix-workflow-step{background-color:var(--theme-color-warning)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.success.sc-ix-workflow-step{background-color:var(--theme-color-success)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.error.sc-ix-workflow-step{background-color:var(--theme-color-alarm)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step{display:flex;align-items:center;justify-content:center;position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step .absolute.sc-ix-workflow-step{position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:1rem;width:auto;padding:0 0.5rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step{flex-direction:row;padding:0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{width:auto;padding-left:1.125rem;height:4rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:0.125rem;height:100%}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{height:50%;margin:auto 0 0 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 0 auto 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:0;margin-left:1rem;padding:0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:hover{background-color:var(--theme-workflow-step--background--hover)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:active{background-color:var(--theme-workflow-step--background--active)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}.sc-ix-workflow-step-h .step.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--selected)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--disabled)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .line.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .text.sc-ix-workflow-step{color:var(--theme-workflow-step--color--disabled)}";
+
+const WorkflowStep = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Select orientation
+     */
+    this.vertical = false;
+    /**
+     * Set disabled
+     */
+    this.disabled = false;
+    /**
+     * Set status
+     */
+    this.status = 'open';
+    /**
+     * Activate navigation click
+     */
+    this.clickable = false;
+    /**
+     * Set selected
+     */
+    this.selected = false;
+    /**
+     * Activate navigation click
+     */
+    this.position = 'undefined';
+    this.iconName = 'circle';
+    this.iconColor = 'workflow-step-icon-default--color';
+  }
+  select() {
+    if (!this.clickable)
+      return;
+    if (this.disabled)
+      return;
+    this.selected = true;
+    this.selectedHandler();
+  }
+  selectedHandler() {
+    const selectedStyle = this.selected ? '--selected' : '';
+    if (this.status === 'open') {
+      this.iconName = this.selected ? 'circle-dot' : 'circle';
+      this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;
+    }
+    if (this.status === 'done' && !this.disabled) {
+      this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;
+    }
+  }
+  watchPropHandler() {
+    switch (this.status) {
+      case 'open':
+        this.iconName = 'circle';
+        this.iconColor = 'workflow-step-icon-default--color';
+        break;
+      case 'success':
+        this.iconName = 'success';
+        this.iconColor = 'color-success';
+        break;
+      case 'done':
+        this.iconName = 'success';
+        this.iconColor = 'workflow-step-icon-done--color';
+        break;
+      case 'warning':
+        this.iconName = 'warning';
+        this.iconColor = 'color-warning';
+        break;
+      case 'error':
+        this.iconName = 'error';
+        this.iconColor = 'color-alarm';
+        break;
+      default:
+        this.iconName = 'circle';
+        break;
+    }
+    if (this.disabled) {
+      this.iconColor = 'workflow-step-icon-success--color--disabled';
+    }
+  }
+  componentDidLoad() {
+    this.watchPropHandler();
+    this.selectedHandler();
+    this.customIconSlot = !!this.hostElement.querySelector('[slot="custom-icon"]');
+  }
+  render() {
+    const icons = !this.customIconSlot ? (h(Fragment, null, h("ix-icon", { color: "color-1", name: this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled', class: "absolute", size: "24" }), h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24" }))) : ('');
+    return (h(Host, null, h("div", { tabIndex: 0, onClick: () => this.select(), class: {
+        step: true,
+        selected: this.selected,
+        vertical: this.vertical,
+        disabled: this.disabled,
+      } }, h("div", { class: "wrapper" }, h("div", { class: {
+        line: true,
+        selected: this.selected,
+        [this.status]: true,
+        [this.position]: true,
+      } }), h("div", { class: "iconWrapper" }, icons, h("slot", { name: "custom-icon" }))), h("div", { class: "text" }, h("slot", null)))));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "selected": ["selectedHandler"],
+    "status": ["watchPropHandler"]
+  }; }
+};
+WorkflowStep.style = workflowStepCss;
+
+export { WorkflowStep as ix_workflow_step };

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

@@ -0,0 +1,79 @@
+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 };

package/dist/esm/loader.js

@@ -0,0 +1,17 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-55cfd20d.js';
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return bootstrapLazy(JSON.parse("[[\"ix-icon\",[[6,\"ix-icon\",{\"size\":[1],\"color\":[1],\"name\":[513]}]]],[\"ix-datetime-picker\",[[2,\"ix-datetime-picker\",{\"range\":[4],\"showHour\":[4,\"show-hour\"],\"showMinutes\":[4,\"show-minutes\"],\"showSeconds\":[4,\"show-seconds\"],\"showTimeReference\":[4,\"show-time-reference\"]}]]],[\"ix-modal-example\",[[0,\"ix-modal-example\"]]],[\"ix-split-button_2\",[[6,\"ix-split-button\",{\"variant\":[1],\"outline\":[4],\"invisible\":[4],\"ghost\":[4],\"label\":[1],\"icon\":[1],\"splitIcon\":[1,\"split-icon\"],\"disabled\":[4],\"placement\":[1],\"toggle\":[32]}],[2,\"ix-split-button-item\",{\"icon\":[1],\"label\":[1]}]]],[\"ix-breadcrumb_2\",[[6,\"ix-breadcrumb\",{\"visibleItemCount\":[2,\"visible-item-count\"],\"nextItems\":[16],\"ghost\":[4],\"previousButtonRef\":[32],\"nextButtonRef\":[32],\"items\":[32]}],[6,\"ix-breadcrumb-item\",{\"label\":[1],\"icon\":[1]}]]],[\"ix-flip-tile_2\",[[6,\"ix-flip-tile\",{\"state\":[1],\"footer\":[1],\"index\":[32],\"isFlipAnimationActive\":[32]}],[1,\"ix-flip-tile-content\"]]],[\"ix-category-filter\",[[2,\"ix-category-filter\",{\"initialState\":[16],\"filterState\":[16],\"placeholder\":[1],\"categories\":[16],\"nonSelectableCategories\":[16],\"suggestions\":[16],\"icon\":[1],\"hideIcon\":[4,\"hide-icon\"],\"repeatCategories\":[4,\"repeat-categories\"],\"tmpDisableScrollIntoView\":[4,\"tmp-disable-scroll-into-view\"],\"labelCategories\":[1,\"label-categories\"],\"i18nPlainText\":[1,\"i-1-8n-plain-text\"],\"hasFocus\":[32],\"showCategorySelection\":[32],\"categoryLogicalOperator\":[32],\"inputValue\":[32],\"category\":[32],\"filterTokens\":[32],\"offsetDropdownX\":[32],\"offsetDropdownY\":[32],\"maxHeightDropdown\":[32],\"maxWidthDropdown\":[32]},[[9,\"resize\",\"setDropdownOffset\"]]]]],[\"ix-drawer\",[[6,\"ix-drawer\",{\"show\":[1028],\"closeOnClickOutside\":[4,\"close-on-click-outside\"],\"fullHeight\":[4,\"full-height\"],\"minWidth\":[2,\"min-width\"],\"maxWidth\":[2,\"max-width\"],\"width\":[8],\"toggleDrawer\":[64]}]]],[\"ix-expanding-search\",[[2,\"ix-expanding-search\",{\"icon\":[1],\"placeholder\":[1],\"value\":[1025],\"isFieldChanged\":[32],\"expanded\":[32],\"hasFocus\":[32]}]]],[\"ix-message-bar\",[[6,\"ix-message-bar\",{\"type\":[1],\"dismissible\":[4],\"icon\":[32],\"color\":[32]}]]],[\"ix-upload\",[[2,\"ix-upload\",{\"accept\":[1],\"multiple\":[4],\"multiline\":[4],\"disabled\":[4],\"state\":[1],\"selectFileText\":[1,\"select-file-text\"],\"loadingText\":[1,\"loading-text\"],\"uploadFailedText\":[1,\"upload-failed-text\"],\"uploadSuccessText\":[1,\"upload-success-text\"],\"i18nUploadFile\":[1,\"i-1-8n-upload-file\"],\"i18nUploadDisabled\":[1,\"i-1-8n-upload-disabled\"],\"isFileOver\":[32],\"setFilesToUpload\":[64]}]]],[\"ix-animated-tab_2\",[[6,\"ix-animated-tabs\",{\"disableAnimations\":[4,\"disable-animations\"],\"selectedIndex\":[2,\"selected-index\"],\"tabPlacement\":[1,\"tab-placement\"],\"tabs\":[32],\"activeIndex\":[32]},[[1,\"mouseup\",\"onMouseDown\"]]],[6,\"ix-animated-tab\",{\"icon\":[1],\"count\":[514]}]]],[\"ix-application-header\",[[1,\"ix-application-header\",{\"name\":[1]}]]],[\"ix-basic-navigation\",[[6,\"ix-basic-navigation\",{\"applicationName\":[1,\"application-name\"],\"hideHeader\":[4,\"hide-header\"]}]]],[\"ix-chip\",[[6,\"ix-chip\",{\"variant\":[513],\"active\":[4],\"closable\":[4],\"icon\":[1],\"background\":[1],\"color\":[1],\"outline\":[4]}]]],[\"ix-kpi\",[[2,\"ix-kpi\",{\"label\":[1],\"value\":[8],\"unit\":[1],\"state\":[1],\"orientation\":[1]}]]],[\"ix-pill\",[[6,\"ix-pill\",{\"variant\":[513],\"outline\":[4],\"icon\":[1],\"background\":[1],\"color\":[1],\"alignLeft\":[4,\"align-left\"]}]]],[\"ix-workflow-step\",[[6,\"ix-workflow-step\",{\"vertical\":[4],\"disabled\":[4],\"status\":[1],\"clickable\":[4],\"selected\":[1028],\"position\":[1],\"iconName\":[32],\"iconColor\":[32]}]]],[\"ix-event-list_2\",[[6,\"ix-event-list\",{\"itemHeight\":[8,\"item-height\"],\"compact\":[4],\"animated\":[4],\"chevron\":[4]}],[4,\"ix-event-list-item\",{\"color\":[1],\"selected\":[4],\"disabled\":[4],\"chevron\":[4],\"opacity\":[2]},[[1,\"click\",\"handleItemClick\"]]]]],[\"ix-blind\",[[6,\"ix-blind\",{\"collapsed\":[1540],\"label\":[1]}]]],[\"ix-counter-pill\",[[6,\"ix-counter-pill\",{\"variant\":[513],\"outline\":[4],\"background\":[1],\"color\":[1],\"alignLeft\":[4,\"align-left\"]}]]],[\"ix-input-group\",[[6,\"ix-input-group\"]]],[\"ix-tile\",[[6,\"ix-tile\",{\"size\":[1]}]]],[\"ix-toggle\",[[2,\"ix-toggle\",{\"checked\":[1540],\"disabled\":[4],\"indeterminate\":[4],\"color\":[1],\"textOn\":[1,\"text-on\"],\"textOff\":[1,\"text-off\"],\"textIndeterminate\":[1,\"text-indeterminate\"],\"hideText\":[4,\"hide-text\"]},[[8,\"keydown\",\"onKeyDown\"]]]]],[\"ix-validation-tooltip\",[[6,\"ix-validation-tooltip\",{\"message\":[1],\"placement\":[1],\"isInputValid\":[32]}]]],[\"ix-workflow-steps\",[[6,\"ix-workflow-steps\",{\"vertical\":[4],\"linear\":[4],\"clickable\":[4],\"selectedIndex\":[2,\"selected-index\"]}]]],[\"my-component\",[[2,\"my-component\"]]],[\"ix-map-navigation_2\",[[6,\"ix-map-navigation\",{\"applicationName\":[1,\"application-name\"],\"navigationTitle\":[1,\"navigation-title\"],\"hideContextMenu\":[4,\"hide-context-menu\"],\"isSidebarOpen\":[32],\"isAboutOpen\":[32],\"isSettingsOpen\":[32],\"openOverlay\":[64],\"closeOverlay\":[64]}],[6,\"ix-map-navigation-overlay\",{\"name\":[1],\"icon\":[1],\"color\":[1]}]]],[\"ix-select_2\",[[6,\"ix-select\",{\"selectedIndices\":[1025,\"selected-indices\"],\"allowClear\":[4,\"allow-clear\"],\"mode\":[1],\"editable\":[4],\"disabled\":[4],\"readonly\":[4],\"i18nPlaceholder\":[1,\"i-1-8n-placeholder\"],\"i18nPlaceholderEditable\":[1,\"i-1-8n-placeholder-editable\"],\"i18nSelectListHeader\":[1,\"i-1-8n-select-list-header\"],\"dropdownShow\":[32],\"value\":[32],\"dropdownWrapperRef\":[32],\"dropdownAnchor\":[32],\"isDropdownEmpty\":[32],\"hasFocus\":[32],\"navigationItem\":[32],\"inputText\":[32]},[[0,\"itemClick\",\"onItemClicked\"],[8,\"keydown\",\"onKeyDown\"]]],[2,\"ix-select-item\",{\"label\":[513],\"value\":[520],\"selected\":[4],\"hover\":[4],\"onItemClick\":[64]}]]],[\"ix-group_3\",[[6,\"ix-group\",{\"suppressHeaderSelection\":[4,\"suppress-header-selection\"],\"header\":[1],\"subHeader\":[1,\"sub-header\"],\"collapsed\":[1540],\"selected\":[1540],\"index\":[1538],\"expandOnHeaderClick\":[4,\"expand-on-header-click\"],\"dropdownTriggerRef\":[32]},[[8,\"keydown\",\"onKeyDown\"]]],[6,\"ix-group-dropdown-item\",{\"label\":[1],\"icon\":[1]}],[6,\"ix-group-item\",{\"icon\":[1],\"text\":[1],\"secondaryText\":[1,\"secondary-text\"],\"suppressSelection\":[4,\"suppress-selection\"],\"selected\":[4],\"focusable\":[4],\"index\":[2]},[[1,\"click\",\"clickListen\"]]]]],[\"ix-toast_2\",[[2,\"ix-toast-container\",{\"containerId\":[1,\"container-id\"],\"containerClass\":[1,\"container-class\"],\"position\":[1],\"showToast\":[64]}],[6,\"ix-toast\",{\"type\":[1],\"toastTitle\":[1,\"toast-title\"],\"autoCloseDelay\":[2,\"auto-close-delay\"],\"autoClose\":[4,\"auto-close\"],\"icon\":[1],\"iconColor\":[1,\"icon-color\"],\"progress\":[32],\"isRunning\":[32],\"touched\":[32]}]]],[\"ix-tree_2\",[[6,\"ix-tree\",{\"root\":[1],\"model\":[16],\"renderItem\":[16],\"context\":[1040]}],[6,\"ix-tree-item\",{\"text\":[1],\"hasChildren\":[4,\"has-children\"],\"context\":[16]}]]],[\"ix-spinner\",[[2,\"ix-spinner\",{\"variant\":[1],\"size\":[1]}]]],[\"ix-date-picker_2\",[[2,\"ix-date-picker\",{\"format\":[1],\"range\":[4],\"individual\":[4],\"corners\":[1],\"year\":[32],\"month\":[32],\"calendar\":[32],\"today\":[32],\"years\":[32],\"tempYear\":[32],\"tempMonth\":[32],\"start\":[32],\"end\":[32],\"dropdownButtonRef\":[32],\"yearContainerRef\":[32]}],[2,\"ix-time-picker\",{\"corners\":[1],\"individual\":[4],\"showHour\":[4,\"show-hour\"],\"showMinutes\":[4,\"show-minutes\"],\"showSeconds\":[4,\"show-seconds\"],\"showTimeReference\":[4,\"show-time-reference\"],\"hourInputRef\":[32],\"minuteInputRef\":[32],\"secondInputRef\":[32],\"referenceInputRef\":[32]}]]],[\"ix-filter-chip\",[[6,\"ix-filter-chip\",{\"disabled\":[4]}]]],[\"ix-menu_9\",[[6,\"ix-menu-avatar\",{\"top\":[1],\"bottom\":[1],\"i18nLogout\":[1,\"i-1-8n-logout\"],\"displayMenu\":[32]},[[1,\"click\",\"toggleMenu\"]]],[6,\"ix-menu-settings\",{\"activeTabLabel\":[1025,\"active-tab-label\"],\"label\":[1],\"show\":[4]}],[4,\"ix-menu\",{\"showSettings\":[1028,\"show-settings\"],\"showAbout\":[1028,\"show-about\"],\"enableToggleTheme\":[4,\"enable-toggle-theme\"],\"enableSettings\":[4,\"enable-settings\"],\"enableMapExpand\":[4,\"enable-map-expand\"],\"applicationName\":[1,\"application-name\"],\"applicationDescription\":[1,\"application-description\"],\"maxVisibleMenuItems\":[2,\"max-visible-menu-items\"],\"i18nLegal\":[1,\"i-1-8n-legal\"],\"i18nSettings\":[1,\"i-1-8n-settings\"],\"i18nToggleTheme\":[1,\"i-1-8n-toggle-theme\"],\"i18nExpand\":[1,\"i-1-8n-expand\"],\"i18nCollapse\":[1,\"i-1-8n-collapse\"],\"i18nMore\":[1,\"i-1-8n-more\"],\"expand\":[1540],\"showMoreItems\":[32],\"visibleMenuItems\":[32],\"countMoreNotifications\":[32],\"mapExpand\":[32],\"activeTab\":[32],\"isMoreTabEmpty\":[32],\"toggleMapExpand\":[64],\"toggleMenu\":[64],\"toggleSettings\":[64],\"toggleAbout\":[64]},[[9,\"resize\",\"onWindowResize\"]]],[6,\"ix-menu-about-news\",{\"show\":[1540],\"label\":[1],\"i18nShowMore\":[1,\"i-1-8n-show-more\"],\"aboutItemLabel\":[1,\"about-item-label\"],\"offsetBottom\":[2,\"offset-bottom\"],\"expanded\":[4]}],[6,\"ix-menu-about-item\",{\"label\":[513]}],[6,\"ix-menu-settings-item\",{\"label\":[1]}],[6,\"ix-menu-about\",{\"i18nImprintLabel\":[513,\"i-1-8n-imprint-label\"],\"activeTabLabel\":[1537,\"active-tab-label\"],\"label\":[1],\"show\":[4],\"labels\":[32]}],[2,\"ix-menu-avatar-item\",{\"icon\":[1],\"label\":[1]}],[4,\"ix-menu-item\",{\"home\":[4],\"bottom\":[4],\"tabIcon\":[1,\"tab-icon\"],\"notifications\":[2],\"active\":[4],\"disabled\":[4],\"title\":[32]}]]],[\"ix-modal_2\",[[2,\"ix-modal-container\",{\"showModal\":[64]}],[6,\"ix-modal\",{\"animation\":[4],\"ariaDescribedBy\":[1,\"aria-described-by\"],\"ariaLabelledBy\":[1,\"aria-labelled-by\"],\"backdrop\":[8],\"backdropClass\":[1,\"backdrop-class\"],\"beforeDismiss\":[16],\"centered\":[4],\"content\":[1],\"keyboard\":[4],\"icon\":[1],\"iconColor\":[1,\"icon-color\"],\"modalDialogClass\":[1,\"modal-dialog-class\"],\"scrollable\":[4],\"size\":[1],\"headerTitle\":[1,\"header-title\"],\"windowClass\":[1,\"window-class\"],\"dismiss\":[64],\"close\":[64]}]]],[\"ix-date-time-card\",[[6,\"ix-date-time-card\",{\"individual\":[4],\"corners\":[1]}]]],[\"ix-tab-item\",[[4,\"ix-tab-item\",{\"selected\":[4],\"disabled\":[4],\"small\":[4],\"icon\":[4],\"rounded\":[4],\"counter\":[2],\"layout\":[1],\"placement\":[1]}]]],[\"ix-tabs\",[[4,\"ix-tabs\",{\"small\":[4],\"rounded\":[4],\"selected\":[1026],\"layout\":[1],\"placement\":[1],\"totalItems\":[32],\"currentScrollAmount\":[32],\"scrollAmount\":[32],\"scrollActionAmount\":[32]},[[9,\"resize\",\"onWindowResize\"]]]]],[\"ix-button\",[[6,\"ix-button\",{\"variant\":[1],\"outline\":[4],\"invisible\":[4],\"ghost\":[4],\"selected\":[4],\"disabled\":[4],\"type\":[1]}]]],[\"ix-dropdown_2\",[[6,\"ix-dropdown-item\",{\"label\":[1],\"icon\":[1],\"hover\":[4],\"disabled\":[4],\"checked\":[4],\"emitItemClick\":[64]}],[1,\"ix-dropdown\",{\"show\":[1540],\"trigger\":[1],\"anchor\":[1],\"closeBehavior\":[8,\"close-behavior\"],\"placement\":[1],\"positioningStrategy\":[1,\"positioning-strategy\"],\"adjustDropdownWidthToReferenceWith\":[4,\"adjust-dropdown-width-to-reference-with\"],\"adjustDropdownWidthToReferenceWidth\":[4,\"adjust-dropdown-width-to-reference-width\"],\"header\":[1],\"updatePosition\":[64]},[[8,\"click\",\"clickOutside\"]]]]],[\"ix-icon-button\",[[6,\"ix-icon-button\",{\"variant\":[1],\"outline\":[4],\"invisible\":[4],\"ghost\":[4],\"oval\":[4],\"icon\":[1],\"size\":[1],\"color\":[1],\"selected\":[4],\"disabled\":[4],\"type\":[1]}]]]]"), options);
+  });
+};
+
+export { defineCustomElements };

package/dist/esm/logical-filter-operator-1bf83315.js

@@ -0,0 +1,33 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+class InputState {
+  constructor(token, category) {
+    this.token = token;
+    this.category = category;
+  }
+  hasCategory() {
+    return this.category !== undefined;
+  }
+}
+
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var LogicalFilterOperator;
+(function (LogicalFilterOperator) {
+  LogicalFilterOperator["EQUAL"] = "Equal";
+  LogicalFilterOperator["NOT_EQUAL"] = "Not equal";
+})(LogicalFilterOperator || (LogicalFilterOperator = {}));
+
+export { InputState as I, LogicalFilterOperator as L };