@siemens/ix-docs 4.3.0 → 4.4.0

package/build/static/demo/v2/preview/html/assets/ix-upload.entry-CV7CfncL.js

@@ -0,0 +1,146 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { U as UploadFileState } from "./upload-file-state-BGzrnl_l-DLdhtkd7.js";
+import { c as iconSuccess, b as iconError } from "./index-BBzEV-f4-ChQfUIyc.js";
+import { b as a11yHostAttributes } from "./a11y-DAzBNVe7-CO1Uj69l.js";
+const uploadCss = () => `:host{display:block;min-height:4rem;height:4rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .file-upload-area{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)}:host .file-upload-area.multiline{max-height:unset;height:auto}:host .file-upload-area.multiline .glyph{align-self:flex-start;margin-block-start:3px}:host .file-upload-area.multiline>div{align-self:flex-start}:host .file-upload-area:not(.multiline) .state,:host .file-upload-area:not(.multiline) .upload-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .file-upload-area:not(.disabled).file-over{border-color:var(--theme-upload--border-color--dragover);border-style:solid}:host .file-upload-area.checking{color:var(--theme-upload-text--color--checking);border-style:solid}:host .file-upload-area.disabled{border-style:solid;color:var(--theme-upload-text--color--disabled)}:host .file-upload-area ix-button{margin-inline-start:1rem}:host .file-upload-area .upload-browser{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host .file-upload-area .loader{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)}:host .file-upload-area .upload-filename{margin-bottom:1rem}:host .file-upload-area .state{display:flex;align-items:center}:host .file-upload-area .state>ix-spinner{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon.icon-error{color:var(--theme-color-alarm)}:host .file-upload-area .state>ix-icon.icon-success{color:var(--theme-color-success)}:host(.disabled){pointer-events:none}`;
+var __rest = function(s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const Upload = class {
+  get inputElement() {
+    return this.hostElement.shadowRoot.querySelector("#upload-browser");
+  }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.filesChanged = createEvent(this, "filesChanged", 7);
+    this.multiple = false;
+    this.multiline = false;
+    this.disabled = false;
+    this.state = UploadFileState.SELECT_FILE;
+    this.selectFileText = "+ Drag files here or…";
+    this.loadingText = "Checking files…";
+    this.uploadFailedText = "Upload failed. Please try again.";
+    this.uploadSuccessText = "Upload successful";
+    this.i18nUploadFile = "Upload file…";
+    this.i18nUploadDisabled = "File upload currently not possible.";
+    this.isFileOver = false;
+    this.a11y = {};
+  }
+  componentWillLoad() {
+    this.a11y = a11yHostAttributes(this.hostElement);
+  }
+  fileDropped(evt) {
+    evt.preventDefault();
+    if (this.disabled) {
+      return;
+    }
+    if (!evt.dataTransfer) {
+      return;
+    }
+    const file = evt.dataTransfer.files;
+    this.isFileOver = false;
+    this.filesToUpload = this.convertToFileArray(file);
+    this.filesChanged.emit(this.filesToUpload);
+  }
+  fileOver(event) {
+    if (!event.dataTransfer) {
+      return;
+    }
+    if (this.state !== UploadFileState.LOADING) {
+      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) {
+    if (this.disabled) {
+      return;
+    }
+    if (!event.target) {
+      return;
+    }
+    this.filesToUpload = this.convertToFileArray(event.target.files);
+    this.filesChanged.emit(this.filesToUpload);
+    this.inputElement.type = "";
+    this.inputElement.type = "file";
+  }
+  convertToFileArray(filesFromEvent) {
+    let files = [];
+    if (!filesFromEvent) {
+      return [];
+    }
+    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("ix-icon", { name: iconError, class: "icon-error" }), h("span", { class: "upload-text" }, this.uploadFailedText));
+      case UploadFileState.UPLOAD_SUCCESSED:
+        return h("span", { class: "state" }, h("ix-icon", { name: iconSuccess, class: "icon-success" }), h("span", { class: "upload-text" }, this.uploadSuccessText));
+      default:
+        return "";
+    }
+  }
+  /**
+   * Set files
+   * @param obj
+   */
+  async setFilesToUpload(obj) {
+    this.filesToUpload = obj;
+  }
+  render() {
+    const disabled = this.disabled || this.state === UploadFileState.LOADING;
+    const _a = this.a11y, { "aria-label": ariaLabel = "Upload files" } = _a, a11y = __rest(_a, ["aria-label"]);
+    return h(Host, Object.assign({ key: "f6688a85aea9e0d89501ad0228672c3d8e7d1510" }, a11y, { "aria-disabled": disabled }), h("div", { key: "df7497428db60a2b3e67a4363c646cfe6b48ad00", class: {
+      "file-upload-area": true,
+      "file-over": this.state !== UploadFileState.LOADING && this.isFileOver,
+      checking: this.state === UploadFileState.LOADING,
+      disabled: this.disabled,
+      multiline: this.multiline
+    }, onDrop: (e) => {
+      if (this.state !== UploadFileState.LOADING) {
+        this.fileDropped(e);
+      }
+    }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave() }, this.renderUploadState(), h("div", { key: "2d5be47bf62d7ee550161a9f3144360008a8c15a" }, h("input", { key: "65906ff25aef00a22ba14ca0c9ac06f5ba2f0a14", "aria-label": ariaLabel, "aria-disabled": disabled, multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", tabindex: "-1", onChange: (e) => {
+      this.fileChangeEvent(e);
+    }, accept: this.accept, disabled }), h("ix-button", { key: "2aa95b1069cf60552bee194095cb2cb6cdc66d65", variant: "secondary", "aria-disabled": disabled, onClick: () => this.inputElement.click(), disabled }, this.i18nUploadFile))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+Upload.style = uploadCss();
+export {
+  Upload as ix_upload
+};

package/build/static/demo/v2/preview/html/assets/ix-validation-tooltip.entry-B2-FKrpn.js

@@ -0,0 +1,150 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { f as flip, a as autoUpdate, i as inline, s as shift, o as offset, b as arrow, c as computePosition } from "./floating-ui.dom-CAqtPJ4--DFASu3km.js";
+const validationTooltipCss = () => `.text-xs{font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-s{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-caption-single{font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-default-title-single{font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-l-title-single{font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-h2{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}.text-xl{font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}a{color:var(--theme-color-primary)}:host{display:inline-block;position:relative;width:100%;z-index:var(--theme-z-index-tooltip)}:host .validation-tooltip{background-color:var(--theme-tooltip--background);color:var(--theme-tooltip--color);padding:5px 10px;border-radius:4px;font-size:13px;border:1px solid var(--theme-tooltip--border-color);box-shadow:0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1), 0 12px 18px 0 rgba(0, 0, 40, 0.1)}:host .validation-tooltip #arrow,:host .validation-tooltip #arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host .validation-tooltip #arrow{visibility:hidden}:host .validation-tooltip #arrow::before{visibility:visible;content:"";transform:rotate(45deg);background-color:var(--theme-tooltip--background)}:host .validation-tooltip>#arrow{bottom:-5px}:host .validation-tooltip>#arrow::before{border-right:1px solid var(--theme-tooltip--border-color);border-bottom:1px solid var(--theme-tooltip--border-color)}`;
+const ValidationTooltip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.placement = "top";
+    this.suppressAutomaticPlacement = false;
+    this.isInputValid = true;
+    this.onSubmitBind = this.onSubmit.bind(this);
+    this.onInputFocusBind = this.onInputFocus.bind(this);
+  }
+  get arrow() {
+    return this.hostElement.shadowRoot.querySelector("#arrow");
+  }
+  get inputElement() {
+    return this.hostElement.querySelector("input");
+  }
+  get formElement() {
+    var _a;
+    return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.form;
+  }
+  get tooltipElement() {
+    return this.hostElement.shadowRoot.querySelector(".validation-tooltip");
+  }
+  destroyAutoUpdate() {
+    if (this.tooltipElement) {
+      this.tooltipElement.style.display = "none";
+    }
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+    }
+  }
+  applyTooltipPosition() {
+    this.tooltipElement.style.display = "block";
+    let positionConfig = {
+      strategy: "fixed",
+      middleware: [
+        inline(),
+        shift(),
+        offset({
+          mainAxis: 8
+        })
+      ]
+    };
+    if (!positionConfig.middleware) {
+      positionConfig.middleware = [];
+    }
+    if (!this.suppressAutomaticPlacement) {
+      positionConfig.middleware.push(flip({ fallbackStrategy: "initialPlacement" }));
+    }
+    positionConfig.placement = this.placement;
+    this.autoUpdateCleanup = autoUpdate(this.inputElement, this.tooltipElement, async () => {
+      positionConfig.middleware = [
+        ...positionConfig.middleware,
+        arrow({
+          element: this.arrow
+        })
+      ];
+      const computeResponse = await computePosition(this.inputElement, this.tooltipElement, positionConfig);
+      if (computeResponse.middlewareData.arrow) {
+        const { x, y } = computeResponse.middlewareData.arrow;
+        this.arrowPosition = {
+          x,
+          y
+        };
+        Object.assign(this.arrow.style, {
+          left: x != null ? `${x}px` : "",
+          top: y != null ? `${y}px` : ""
+        });
+      }
+      this.tooltipPosition = {
+        x: computeResponse.x,
+        y: computeResponse.y
+      };
+    }, {
+      ancestorResize: true,
+      ancestorScroll: true,
+      elementResize: true
+    });
+  }
+  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, _c;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.destroyAutoUpdate();
+    (_b = this.formElement) === null || _b === void 0 ? void 0 : _b.removeEventListener("submit", this.onSubmitBind);
+    (_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.removeEventListener("focus", this.onInputFocusBind);
+  }
+  validationChanged() {
+    if (!this.isInputValid) {
+      this.applyTooltipPosition();
+    } else {
+      this.destroyAutoUpdate();
+    }
+  }
+  render() {
+    var _a, _b, _c, _d;
+    return h(Host, { key: "804b1c0a4c819e6e454a61f70f19c112807c3f41" }, h("slot", { key: "e61d2a3b69a8454d0ce098519a2be0810c016535" }), h("div", { key: "e1b70a7dadf9c20adf6948e341af33f4b58e8f1b", role: "tooltip", style: {
+      display: "none",
+      position: "fixed",
+      top: "0",
+      left: "0",
+      transform: `translate(${Math.round((_b = (_a = this.tooltipPosition) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0)}px,${Math.round((_d = (_c = this.tooltipPosition) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0)}px)`
+    }, class: "validation-tooltip text-default" }, this.message, h("slot", { key: "88ffad7d29394f55e1718b1b7f05802797552d1a", name: "tooltip-message" }), h("div", { key: "0de20e8724bee32fc6e8df066e0666e2a2f65801", id: "arrow" })));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "isInputValid": [{
+        "validationChanged": 0
+      }]
+    };
+  }
+};
+ValidationTooltip.style = validationTooltipCss();
+export {
+  ValidationTooltip as ix_validation_tooltip
+};

package/build/static/demo/v2/preview/html/assets/ix-workflow-step.entry-BhauAYHK.js

@@ -0,0 +1,119 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { K as iconCircle, b as iconError, a as iconWarning, L as iconCircleFilled, c as iconSuccess, M as iconCircleDot, N as iconTriangleFilled } from "./index-BBzEV-f4-ChQfUIyc.js";
+const workflowStepCss = () => `:host(:not(.host-vertical)){width:12rem;height:4rem;min-width:2rem;min-height:4rem;max-width:12rem}:host(.host-vertical){width:100%;height:4rem;min-width:4rem;min-height:2rem;max-height:12rem}:host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);padding:1.125rem 0 0.5rem 0}:host .step .wrapper{display:flex;width:100%;align-items:center;justify-content:center;position:relative}:host .step .wrapper .line{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}:host .step .wrapper .line.first,:host .step .wrapper .line.last{width:50%;margin:0 0 0 auto}:host .step .wrapper .line.last{margin:0 auto 0 0}:host .step .wrapper .line.single{width:0}:host .step .wrapper .line.selected{background-color:var(--theme-workflow-step-icon-default--color--selected)}:host .step .wrapper .line.done{background-color:var(--theme-workflow-step-icon-done--color)}:host .step .wrapper .line.done.selected{background-color:var(--theme-workflow-step-icon-done--color--selected)}:host .step .wrapper .line.warning{background-color:var(--theme-color-warning)}:host .step .wrapper .line.success{background-color:var(--theme-color-success)}:host .step .wrapper .line.error{background-color:var(--theme-color-alarm)}:host .step .wrapper .iconWrapper{display:flex;align-items:center;justify-content:center;position:absolute}:host .step .wrapper .iconWrapper .absolute{position:absolute}:host .step .text{margin-top:1rem;width:100%;padding:0 0.5rem;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:center}:host .step.vertical{flex-direction:row;padding:0;height:100%}:host .step.vertical .wrapper{width:auto;padding-left:1.125rem;height:100%}:host .step.vertical .wrapper .line{width:0.125rem;height:100%}:host .step.vertical .wrapper .line.first,:host .step.vertical .wrapper .line.last{height:50%;margin:auto 0 0 0}:host .step.vertical .wrapper .line.last{margin:0 0 auto 0}:host .step.vertical .wrapper .line.single{width:0}:host .step.vertical .text{margin:0 1rem;padding:0;width:auto}:host .step.clickable:hover{background-color:var(--theme-workflow-step--background--hover)}:host .step.clickable:active{background-color:var(--theme-workflow-step--background--active)}:host .step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}:host .step.selected{background-color:var(--theme-workflow-step--background--selected)}:host .step.disabled{background-color:var(--theme-workflow-step--background--disabled)}:host .step.disabled .line{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}:host .step.disabled .text{color:var(--theme-workflow-step--color--disabled)}`;
+const WorkflowStep = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectedChanged = createEvent(this, "selectedChanged", 7);
+    this.vertical = false;
+    this.disabled = false;
+    this.status = "open";
+    this.clickable = false;
+    this.selected = false;
+    this.position = "undefined";
+    this.iconColor = "workflow-step-icon-default--color";
+    this.customIconSlot = false;
+  }
+  selectedHandler() {
+    this.setWorkflowStepStyles();
+  }
+  watchPropHandler() {
+    this.setWorkflowStepStyles();
+  }
+  setWorkflowStepStyles() {
+    const selectedStyle = this.selected ? "--selected" : "";
+    switch (this.status) {
+      case "open":
+        this.iconName = this.selected ? iconCircleDot : iconCircle;
+        this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;
+        break;
+      case "success":
+        this.iconName = iconSuccess;
+        this.iconColor = "color-success";
+        break;
+      case "done":
+        this.iconName = iconCircleFilled;
+        this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;
+        break;
+      case "warning":
+        this.iconName = iconWarning;
+        this.iconColor = "color-warning-text";
+        break;
+      case "error":
+        this.iconName = iconError;
+        this.iconColor = "color-alarm";
+        break;
+      default:
+        this.iconName = iconCircle;
+        break;
+    }
+    if (this.disabled) {
+      this.iconColor = "workflow-step-icon-success--color--disabled";
+    }
+  }
+  componentWillLoad() {
+    this.watchPropHandler();
+    this.selectedHandler();
+    this.customIconSlot = !!this.hostElement.querySelector('[slot="custom-icon"]');
+  }
+  onStepClick() {
+    if (!this.disabled && this.clickable) {
+      this.selectedChanged.emit(this.hostElement);
+    }
+  }
+  getIconAriaLabel() {
+    switch (this.iconName) {
+      case iconCircle:
+        return "Circle";
+      case iconCircleDot:
+        return "Circle dot";
+      case iconCircleFilled:
+        return "Done";
+      case iconError:
+        return "Error";
+      case iconSuccess:
+        return "Success";
+      case iconTriangleFilled:
+        return "Warning";
+      case iconWarning:
+        return "Warning";
+      default:
+        return "Step";
+    }
+  }
+  render() {
+    const icons = !this.customIconSlot ? h(Fragment, null, h("ix-icon", { color: "color-1", name: this.status === "warning" ? iconTriangleFilled : iconCircleFilled, class: "absolute", size: "24" }), h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24", "aria-label": this.getIconAriaLabel() })) : null;
+    return h(Host, { key: "ba277a277df82498b071d6b63e07177f33b39747", class: { "host-vertical": this.vertical }, onClick: () => this.onStepClick() }, h("div", { key: "254f15dc98882c3ccf425806ebcb798cf4ca2067", tabIndex: 0, class: {
+      step: true,
+      selected: this.selected,
+      vertical: this.vertical,
+      disabled: this.disabled,
+      clickable: this.clickable && !this.disabled
+    } }, h("div", { key: "52277952fefb15636c4c769cae8b1b31681747b0", class: "wrapper" }, h("div", { key: "172e5dbd849ff5f1c398b9dd2269a1a5289d7e13", class: {
+      line: true,
+      selected: this.selected,
+      [this.status]: true,
+      [this.position]: true
+    } }), h("div", { key: "d14473e894db0490d0846b991bd11ea96d1d0940", class: "iconWrapper" }, icons, h("slot", { key: "fd034c7d06df4e52aa704e7032acc93afe1bb5fc", name: "custom-icon" }))), h("div", { key: "c4f2915aaa75d26fcfbbd9bf5786f2786da58b9c", class: "text" }, h("slot", { key: "08b316f4c683aa9be7a5edac8b64977538683ba4" }))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "selected": [{
+        "selectedHandler": 0
+      }],
+      "disabled": [{
+        "watchPropHandler": 0
+      }],
+      "status": [{
+        "watchPropHandler": 0
+      }]
+    };
+  }
+};
+WorkflowStep.style = workflowStepCss();
+export {
+  WorkflowStep as ix_workflow_step
+};

package/build/static/demo/v2/preview/html/assets/ix-workflow-steps.entry-DEmOnb3c.js

@@ -0,0 +1,77 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from "./global-7ZbTfMw3.js";
+import { c as createMutationObserver } from "./mutation-observer-CX81WQtk-DFcmhOTk.js";
+const workflowStepsCss = () => `:host{display:block;position:relative;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;min-width:2rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .steps{display:flex;height:100%}:host .steps.vertical{flex-direction:column}`;
+const WorkflowSteps = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stepSelected = createEvent(this, "stepSelected", 7);
+    this.vertical = false;
+    this.clickable = false;
+    this.selectedIndex = 0;
+  }
+  getSteps() {
+    return Array.from(this.hostElement.querySelectorAll("ix-workflow-step"));
+  }
+  updateSteps() {
+    let steps = this.getSteps();
+    steps.forEach((element, index) => {
+      element.vertical = this.vertical;
+      element.clickable = this.clickable;
+      element.selected = this.selectedIndex === index;
+      if (steps.length === 1) {
+        element.position = "single";
+        return;
+      }
+      if (index === 0) {
+        element.position = "first";
+      } else if (index === steps.length - 1) {
+        element.position = "last";
+      } else {
+        element.position = "undefined";
+      }
+    });
+  }
+  onStepSelectionChanged(event) {
+    const eventTarget = event.detail;
+    const steps = this.getSteps();
+    const clickIndex = steps.findIndex((step) => step === eventTarget);
+    const clientEvent = this.stepSelected.emit(clickIndex);
+    if (clientEvent.defaultPrevented) {
+      return;
+    }
+    steps.forEach((step, index) => {
+      step.selected = index === clickIndex;
+    });
+  }
+  componentWillLoad() {
+    this.updateSteps();
+  }
+  componentDidLoad() {
+    this.observer = createMutationObserver((mutations) => {
+      for (let mutation of mutations) {
+        if (mutation.type === "childList") {
+          this.updateSteps();
+        }
+      }
+    });
+    this.observer.observe(this.hostElement, { childList: true });
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  componentDidRender() {
+    this.updateSteps();
+  }
+  render() {
+    return h(Host, { key: "ed6d9907f43ca79688b00201d2432287444f30e6" }, h("div", { key: "f116d280b59c16a79aa4867329f36035ca14d919", class: { steps: true, vertical: this.vertical } }, h("slot", { key: "378f336873295a70620117d939d587b8ff407739" })));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+WorkflowSteps.style = workflowStepsCss();
+export {
+  WorkflowSteps as ix_workflow_steps
+};

package/build/static/demo/v2/preview/html/assets/key-value-list-with-icon-MH6Mvgrw.js

@@ -0,0 +1,7 @@
+import "./global-7ZbTfMw3.js";
+import { a as addIcons } from "./ix-icon.entry-Co7qlYpz.js";
+import { p as iconLocation } from "./index-BWsIQ1EH.js";
+import "./init-6zSVdjuR.js";
+addIcons({
+  iconLocation
+});

package/build/static/demo/v2/preview/html/assets/key-value-with-icon-MH6Mvgrw.js

@@ -0,0 +1,7 @@
+import "./global-7ZbTfMw3.js";
+import { a as addIcons } from "./ix-icon.entry-Co7qlYpz.js";
+import { p as iconLocation } from "./index-BWsIQ1EH.js";
+import "./init-6zSVdjuR.js";
+addIcons({
+  iconLocation
+});

package/build/static/demo/v2/preview/html/assets/listener-DcAn-vyA-vMwX8dLP.js

@@ -0,0 +1,64 @@
+import { g as getElement } from "./global-7ZbTfMw3.js";
+const defaultOptions = {
+  target: "window",
+  defaultEnabled: true
+};
+function createListener(event, options = {}) {
+  const opts = Object.assign(Object.assign({}, defaultOptions), options);
+  let callback;
+  const onEvent = (event2) => {
+    callback(event2);
+  };
+  const resultObject = {
+    on: (onEventCallback) => {
+      callback = onEventCallback;
+    },
+    isEnabled: opts.defaultEnabled,
+    enable: (state) => {
+      resultObject.isEnabled = state;
+      if (state) {
+        addEventListener(event, onEvent);
+      } else {
+        removeEventListener(event, onEvent);
+      }
+    },
+    destroy: () => {
+      resultObject.enable(false);
+    }
+  };
+  resultObject.enable(!!opts.defaultEnabled);
+  return resultObject;
+}
+function OnListener(event, fnExp) {
+  return (proto, methodName) => {
+    const { componentWillLoad, componentWillRender, disconnectedCallback } = proto;
+    if (fnExp) {
+      proto.componentWillRender = function() {
+        var _a;
+        const host = getElement(this);
+        (_a = host[`__ix__${methodName}`]) === null || _a === void 0 ? void 0 : _a.enable(fnExp(this));
+        return componentWillRender && componentWillRender.call(this);
+      };
+    }
+    proto.componentWillLoad = function() {
+      const listener = createListener(event);
+      const host = getElement(this);
+      const method = this[methodName];
+      host[`__ix__${methodName}`] = listener;
+      listener.on(method.bind(this));
+      return componentWillLoad && componentWillLoad.call(this);
+    };
+    proto.disconnectedCallback = function() {
+      var _a;
+      const host = getElement(this);
+      if (host && host[`__ix__${methodName}`]) {
+        (_a = host[`__ix__${methodName}`]) === null || _a === void 0 ? void 0 : _a.destroy();
+        host[`__ix__${methodName}`] = null;
+      }
+      return disconnectedCallback && disconnectedCallback.call(this);
+    };
+  };
+}
+export {
+  OnListener as O
+};

package/build/static/demo/v2/preview/html/assets/loading-D1eanxfo.js

@@ -0,0 +1,23 @@
+import "./global-7ZbTfMw3.js";
+import { s as showModalLoading } from "./index-B_6Kcb-H.js";
+import "./init-6zSVdjuR.js";
+import "./logical-filter-operator-BH3f5fa3-983MLV_l.js";
+import "./upload-file-state-BGzrnl_l-DLdhtkd7.js";
+import "./modal-BJAcx3Qd-CMIZ8YSL.js";
+import "./index-BBzEV-f4-ChQfUIyc.js";
+import "./typed-event-BdCnOrqW-CWsLM0S_.js";
+import "./animation-BLaucX4x-BWLd_Wig.js";
+import "./theme-switcher-CpQ8JvHL-B4B-3Xrp.js";
+const btn = document.querySelector("ix-button");
+btn.addEventListener("click", () => {
+  let count = 0;
+  const progress = showModalLoading({ message: "Loading 0/2" });
+  const interval = setInterval(() => {
+    count++;
+    progress.update(`Loading ${count}/2`);
+    if (count === 2) {
+      progress.finish("Done");
+      clearInterval(interval);
+    }
+  }, 1e3);
+});

package/build/static/demo/v2/preview/html/assets/menu-category-CsGl8jiZ.js

@@ -0,0 +1,14 @@
+import "./global-7ZbTfMw3.js";
+import { a as addIcons } from "./ix-icon.entry-Co7qlYpz.js";
+import { g as iconRocket, D as iconGlobe, d as iconHome } from "./index-BWsIQ1EH.js";
+import "./init-6zSVdjuR.js";
+addIcons({
+  iconHome,
+  iconGlobe,
+  iconRocket
+});
+(async () => {
+  await window.customElements.whenDefined("ix-menu");
+  const menu = document.querySelector("ix-menu");
+  menu.breakpoints = ["medium"];
+})();

package/build/static/demo/v2/preview/html/assets/menu-with-bottom-tabs-DDqDSFLW.js

@@ -0,0 +1,8 @@
+import "./global-7ZbTfMw3.js";
+import { a as addIcons } from "./ix-icon.entry-Co7qlYpz.js";
+import { c as iconInfo, d as iconHome } from "./index-BWsIQ1EH.js";
+import "./init-6zSVdjuR.js";
+addIcons({
+  iconHome,
+  iconInfo
+});

package/build/static/demo/v2/preview/html/assets/message-B0A6QA5c.js

@@ -0,0 +1,21 @@
+import "./global-7ZbTfMw3.js";
+import "./index-B_6Kcb-H.js";
+import { a as showMessage } from "./modal-BJAcx3Qd-CMIZ8YSL.js";
+import "./init-6zSVdjuR.js";
+import "./logical-filter-operator-BH3f5fa3-983MLV_l.js";
+import "./upload-file-state-BGzrnl_l-DLdhtkd7.js";
+import "./animation-BLaucX4x-BWLd_Wig.js";
+import "./theme-switcher-CpQ8JvHL-B4B-3Xrp.js";
+import "./typed-event-BdCnOrqW-CWsLM0S_.js";
+import "./index-BBzEV-f4-ChQfUIyc.js";
+const btn = document.querySelector("ix-button");
+btn.addEventListener("click", async () => {
+  (await showMessage.success(
+    "Example title",
+    "message",
+    "Save",
+    "Cancel",
+    "payload:save",
+    "payload:cancel"
+  )).once(console.log);
+});