@siemens/ix-docs 0.0.0-pr-2238-20251103095443 → 0.0.0-pr-2238-20251103105018

package/build/static/demo/v2/preview/html/assets/input-types-BWxhuGgh.js

@@ -0,0 +1,3 @@
+import "./global-C8r7td8X.js";
+import "./init-CCUgNbdy.js";
+const inputTypes = "";

package/build/static/demo/v2/preview/html/assets/input-types-DDBTqyW9.css

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2025 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.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-input {
+  margin-bottom: 1rem;
+  width: 11rem;
+}

package/build/static/demo/v2/preview/html/assets/input-with-slots-vE7qByr8.js

@@ -0,0 +1,7 @@
+import "./global-C8r7td8X.js";
+import { a as addIcons } from "./ix-icon.entry-GtsMKeJF.js";
+import { f as iconBulb } from "./index-B86ot3BK.js";
+import "./init-CCUgNbdy.js";
+addIcons({
+  iconBulb
+});

package/build/static/demo/v2/preview/html/assets/input.util-VHrSuCP7-BxHyeFjg.js

@@ -0,0 +1,180 @@
+import { h } from "./global-C8r7td8X.js";
+import { a as a11yBoolean } from "./a11y-Bb7pDeaQ-DNI84lDX.js";
+import { s as shouldSuppressInternalValidation } from "./validation-D_dk-JqT-hK2sg2of.js";
+import { c as createMutationObserver } from "./mutation-observer-CX81WQtk-DFcmhOTk.js";
+import { c as convertToRemString } from "./rwd.util-pXYAoEyc-B7dE3uhl.js";
+import { a as animate } from "./anime.esm-DhE1t8Qh-B6Ygv72Z.js";
+import { A as Animation } from "./animation-C5MWUgDN-BXCJNYHu.js";
+function TextareaElement(props) {
+  return h("textarea", Object.assign({ readOnly: props.readonly, disabled: props.disabled, maxLength: props.maxLength, minLength: props.minLength, cols: props.textareaCols, rows: props.textareaRows, ref: props.textAreaRef, class: {
+    "is-invalid": props.isInvalid
+  }, required: props.required, value: props.value, placeholder: props.placeholder, onInput: (inputEvent) => {
+    const target = inputEvent.target;
+    props.updateFormInternalValue(target.value);
+    props.valueChange(target.value);
+  }, onBlur: () => props.onBlur(), style: {
+    resize: props.resizeBehavior,
+    height: props.textareaHeight,
+    width: props.textareaWidth
+  } }, props.ariaAttributes));
+}
+function InputElement(props) {
+  return h("input", Object.assign({ id: props.id, autoComplete: "off", readOnly: props.readonly, disabled: props.disabled, step: props.step, min: props.min, max: props.max, maxLength: props.maxLength ? Number(props.maxLength) : void 0, minLength: props.minLength ? Number(props.minLength) : void 0, ref: props.inputRef, pattern: props.pattern, type: props.type, class: {
+    "is-invalid": props.isInvalid
+  }, required: props.required, value: props.value, placeholder: props.placeholder, onKeyPress: (event) => props.onKeyPress(event), onInput: (inputEvent) => {
+    const target = inputEvent.target;
+    props.updateFormInternalValue(target.value);
+    props.valueChange(target.value);
+  }, onBlur: () => props.onBlur() }, props.ariaAttributes));
+}
+const SlotEnd = (props, children) => {
+  return h("div", { class: "end-container", ref: props.slotEndRef }, h("slot", { name: "end", onSlotchange: props.onSlotChange }), children);
+};
+const SlotStart = (props) => {
+  return h("div", { class: "start-container", ref: props.slotStartRef }, h("slot", { name: "start", onSlotchange: props.onSlotChange }));
+};
+function shakeInput(input) {
+  const xMax = 5;
+  animate(input, {
+    duration: Animation.defaultTime,
+    easing: "easeInOutSine",
+    loop: 2,
+    translateX: [
+      {
+        value: xMax * -1
+      },
+      {
+        value: xMax
+      },
+      {
+        value: xMax / -2
+      },
+      {
+        value: xMax / 2
+      },
+      {
+        value: 0
+      }
+    ]
+  });
+}
+function mapValidationResult(ref, result) {
+  ref.isInvalid = result.isInvalid || result.isInvalidByRequired;
+  ref.isValid = result.isValid;
+  ref.isInfo = result.isInfo;
+  ref.isWarning = result.isWarning;
+}
+function checkAllowedKeys(comp, event) {
+  if (comp.allowedCharactersPattern) {
+    const regex = new RegExp(comp.allowedCharactersPattern);
+    if (!regex.test(event.key)) {
+      event.preventDefault();
+      shakeInput(comp.inputRef.current);
+    }
+  }
+}
+async function checkInternalValidity(comp, input) {
+  const validityState = input.validity;
+  const eventResult = comp.validityStateChange.emit(validityState);
+  if (eventResult.defaultPrevented) {
+    return;
+  }
+  if (comp.value === null || comp.value === void 0) {
+    return;
+  }
+  const skipValidation = await shouldSuppressInternalValidation(comp);
+  if (skipValidation) {
+    return;
+  }
+  const { valid } = validityState;
+  comp.hostElement.classList.toggle("ix-invalid--validity-invalid", !valid);
+}
+function onInputBlur(comp, input) {
+  comp.ixBlur.emit();
+  if (!input) {
+    throw new Error("Input element is not available");
+  }
+  input.setAttribute("data-ix-touched", "true");
+  checkInternalValidity(comp, input);
+}
+function applyPaddingEnd(inputElement, width, options) {
+  var _a;
+  if (!inputElement) {
+    return;
+  }
+  const remInPixels = 16;
+  const padding = convertToRemString(width + remInPixels / 2);
+  if (options.slotEnd) {
+    inputElement.style.paddingRight = `calc(${padding} + ${(_a = options.additionalPaddingRight) !== null && _a !== void 0 ? _a : "0rem"})`;
+  } else {
+    inputElement.style.paddingLeft = padding;
+  }
+}
+function adjustPaddingForStartAndEnd(startElement, endElement, inputElement) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      if (startElement) {
+        const startBoundingRect = startElement.getBoundingClientRect();
+        if (startBoundingRect) {
+          applyPaddingEnd(inputElement, startBoundingRect.width, {
+            slotEnd: false
+          });
+        }
+      }
+      if (endElement) {
+        const endBoundingRect = endElement.getBoundingClientRect();
+        if (endBoundingRect) {
+          applyPaddingEnd(inputElement, endBoundingRect.width, {
+            slotEnd: true
+          });
+        }
+      }
+    });
+  });
+}
+function getAriaAttributesForInput(component) {
+  const inputAria = {
+    "aria-invalid": `${a11yBoolean(component.isInvalid)}`,
+    "aria-required": `${a11yBoolean(component.required)}`
+  };
+  if (component.isInvalid && component.invalidText) {
+    inputAria["aria-errormessage"] = component.invalidText;
+  }
+  return inputAria;
+}
+const addDisposableChangesAndVisibilityObservers = (element, callback) => {
+  const intersectionObserver = observeElementUntilVisible(element, callback);
+  const mutationObserver = createMutationObserver(callback);
+  mutationObserver.observe(element, {
+    subtree: true,
+    attributes: true
+  });
+  return () => {
+    intersectionObserver.disconnect();
+    mutationObserver.disconnect();
+  };
+};
+function observeElementUntilVisible(hostElement, updateCallback) {
+  const intersectionObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        updateCallback();
+      }
+    });
+  });
+  intersectionObserver.observe(hostElement);
+  return intersectionObserver;
+}
+export {
+  InputElement as I,
+  SlotEnd as S,
+  TextareaElement as T,
+  addDisposableChangesAndVisibilityObservers as a,
+  adjustPaddingForStartAndEnd as b,
+  SlotStart as c,
+  checkAllowedKeys as d,
+  checkInternalValidity as e,
+  getAriaAttributesForInput as g,
+  mapValidationResult as m,
+  onInputBlur as o
+};

package/build/static/demo/v2/preview/html/assets/ix-action-card.entry-CyBEnFJv.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, H as Host } from "./global-C8r7td8X.js";
+import { g as getFallbackLabelFromIconName, a as a11yBoolean } from "./a11y-Bb7pDeaQ-DNI84lDX.js";
+const actionCardCss = ":host{display:block;position:relative;min-width:13.375rem;width:13.375rem;height:7.5rem;min-height:7.5rem;cursor:pointer;margin:0.25rem 0}: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 ix-card{width:100%;height:100%}";
+const IxActionCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = "outline";
+    this.icon = void 0;
+    this.selected = false;
+  }
+  getSubheadingTextColor() {
+    return this.variant === "outline" || this.variant === "filled" ? "soft" : void 0;
+  }
+  render() {
+    const ariaLabelledBy = !this.ariaLabelCard && this.heading ? "ix-action-card-heading" : void 0;
+    return h(Host, { key: "167db61afb0880052edd6e28ec9e907dbe98a186" }, h("ix-card", { key: "e8014c544dbadee66135b8def9b868488a07773b", selected: this.selected, variant: this.variant, class: "pointer", "aria-label": this.ariaLabelCard, "aria-labelledby": ariaLabelledBy, role: ariaLabelledBy ? "group" : void 0 }, h("ix-card-content", { key: "bcb177b0fbe2a709d3ab9d8479077eb64ef2496a" }, this.icon ? h("ix-icon", { class: "icon", name: this.icon, size: "32", "aria-label": this.ariaLabelIcon || getFallbackLabelFromIconName(this.icon) }) : null, h("div", { key: "65aa3882ad626df59598626bf7a67e1431fcf6e4" }, this.heading ? h("ix-typography", { id: "ix-action-card-heading", "aria-hidden": a11yBoolean(!ariaLabelledBy), format: "h4" }, this.heading) : null, this.subheading ? h("ix-typography", { format: "h5", "text-color": this.getSubheadingTextColor() }, this.subheading) : null, h("slot", { key: "9ffacb3ea7d9642a2adbad41d9e6fc36a8e5118b" })))));
+  }
+};
+IxActionCard.style = actionCardCss;
+export {
+  IxActionCard as ix_action_card
+};

package/build/static/demo/v2/preview/html/assets/ix-application-header.entry-CQV6Xpxm.js

@@ -0,0 +1,181 @@
+import { r as registerInstance, c as createEvent, a as readTask, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
+import { h as iconMoreMenu, e as iconApps } from "./index-Cz75KU1f-BUHLjWzB.js";
+import { s as showAppSwitch } from "./index--ZIr3Aqz-BwiHGP6T.js";
+import { a as applicationLayoutService } from "./service-Da0kv8hS-ChZKlHDF.js";
+import { a as useContextConsumer, A as ApplicationLayoutContext } from "./context-CKM5pVsv-B0zIukL5.js";
+import { g as getCurrentBreakpoint } from "./breakpoints-D_Hmobxf-DBbixPq4.js";
+import { m as menuController } from "./menu-service-BMvtckRa-Dk6abri9.js";
+import { h as hasSlottedElements } from "./shadow-dom-i60z1FJC-Cx4XiL3F.js";
+import { a as a11yBoolean } from "./a11y-Bb7pDeaQ-DNI84lDX.js";
+import "./animation-C5MWUgDN-BXCJNYHu.js";
+import "./modal-D9BaTrTa-h5wbphR-.js";
+import "./typed-event-BdCnOrqW-CWsLM0S_.js";
+const applicationHeaderCss = ":host{display:flex;flex-wrap:nowrap;align-items:end;justify-content:space-between;position:relative;width:100%;min-height:3rem;padding-top:var(--ix-safe-area-inset-top, 0rem);padding-right:calc(0.625rem + var(--ix-safe-area-inset-right, 0rem));padding-left:calc(0.625rem + var(--ix-safe-area-inset-left, 0rem));color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}: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 .left-side,:host .right-side{display:flex;flex-direction:row;flex-wrap:nowrap;position:relative;align-items:center;min-width:0;min-height:3rem;height:100%}:host .left-side{flex:0 1 auto}:host .left-side .app-icon{display:block;position:relative;width:2rem;min-width:2rem;max-width:2rem;height:2rem;min-height:2rem;max-height:2rem}:host .left-side .app-icon.app-icon-outline{outline:1px solid var(--theme-app-header-app-icon--outline-color);border-radius:0.125rem}:host .left-side .app-icon img{position:relative;display:block;width:100%;height:100%;border-radius:0.125rem}:host .left-side .app-switch{margin:0 0.625rem}:host .left-side .app-switch.without-app-icon{margin-left:0px}:host .left-side .name{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;margin-left:0.75rem;margin-right:0.75rem;color:var(--theme-app-header--color);min-width:0;gap:0.75rem;overflow:hidden}:host .left-side .application-name,:host .left-side .application-name-suffix{overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:nowrap}:host .left-side .application-name{flex:0 1 auto;min-width:0;flex-shrink:0;max-width:100%}:host .left-side .application-name-suffix{flex:1 1 auto;margin-top:0.4rem;min-width:0;flex-shrink:1;color:var(--theme-app-header-name-suffix--color)}:host .left-side .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color);margin-right:1rem;margin-left:1rem;min-width:-moz-fit-content;min-width:fit-content}:host .left-side .logo.hide-logo{display:none}:host .right-side{flex:1 1 auto;overflow:hidden;justify-content:space-between}:host .right-side .content,:host .right-side .secondary{display:flex;position:relative;align-items:center;justify-content:space-between;flex-direction:row;flex-wrap:nowrap;height:100%}:host .right-side .content{min-width:-moz-max-content;min-width:max-content}:host .right-side .secondary{overflow:hidden}:host .right-side .dropdown{overflow:visible}:host .right-side .dropdown-content>.slot-content-active{padding:0.5rem 1.5rem 0.5rem 1.5rem;border-top:none}:host .right-side .dropdown-content .slot-content-active~.slot-content-active{border-top:1px solid var(--theme-color-x-weak-bdr)}:host .right-side .context-menu{display:none}:host .right-side .context-menu.context-menu-visible{display:block;margin-left:0.5rem}:host .right-side ::slotted(ix-avatar){margin-left:0.5rem}:host .right-side .primary-navigation{align-self:end}:host .right-side.sm{justify-content:end}@media only screen and (max-width: 48em){:host .logo{margin-left:0.5rem;display:none !important}:host .content,:host .secondary,:host .app-icon{display:none}}:host(.hide-bottom-border){border-bottom:none}";
+const ApplicationHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.menuToggle = createEvent(this, "menuToggle", 7);
+    this.openAppSwitch = createEvent(this, "openAppSwitch", 7);
+    this.appIconOutline = false;
+    this.hideBottomBorder = false;
+    this.showMenu = false;
+    this.breakpoint = "lg";
+    this.menuExpanded = false;
+    this.suppressResponsive = false;
+    this.hasSlottedLogo = false;
+    this.hasOverflowContextMenu = false;
+    this.hasSecondarySlotElements = false;
+    this.hasDefaultSlotElements = false;
+    this.hasOverflowSlotElements = false;
+  }
+  get contentBackground() {
+    return this.hostElement.shadowRoot.querySelector(".dropdown-content");
+  }
+  componentWillLoad() {
+    this.breakpoint = getCurrentBreakpoint();
+    useContextConsumer(this.hostElement, ApplicationLayoutContext, (ctx) => {
+      if ((ctx === null || ctx === void 0 ? void 0 : ctx.host) === "map-navigation") {
+        this.suppressResponsive = true;
+        this.breakpoint = "md";
+        return;
+      }
+      this.breakpoint = applicationLayoutService.breakpoint;
+      this.applicationLayoutContext = ctx;
+      this.tryUpdateAppSwitch();
+    }, true);
+    this.menuDisposable = menuController.expandChange.on((show) => {
+      this.menuExpanded = show;
+    });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      if (this.suppressResponsive) {
+        return;
+      }
+      this.breakpoint = mode;
+    });
+    this.updateHasSlotAssignedElementsStates();
+  }
+  componentDidLoad() {
+    this.attachSiemensLogoIfLoaded();
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.menuDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+    (_b = this.modeDisposable) === null || _b === void 0 ? void 0 : _b.dispose();
+  }
+  watchApplicationLayoutContext() {
+    if (this.applicationLayoutContext) {
+      this.showMenu = false;
+    }
+  }
+  watchSuppressResponsive() {
+    this.breakpoint = "md";
+  }
+  checkLogoSlot() {
+    const slotElement = this.hostElement.shadowRoot.querySelector('slot[name="logo"]');
+    const isSiemensLogoDefined = window.customElements.get("ix-siemens-logo") !== void 0;
+    if (isSiemensLogoDefined) {
+      return hasSlottedElements(slotElement);
+    }
+    let assignedElements = slotElement === null || slotElement === void 0 ? void 0 : slotElement.assignedElements({ flatten: true });
+    assignedElements = assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.filter((element) => element.tagName !== "IX-SIEMENS-LOGO");
+    return (assignedElements === null || assignedElements === void 0 ? void 0 : assignedElements.length) !== 0;
+  }
+  attachSiemensLogoIfLoaded() {
+    if (this.companyLogo) {
+      return;
+    }
+    if (!this.checkLogoSlot()) {
+      const logoElement = document.createElement("ix-siemens-logo");
+      logoElement.slot = "logo";
+      this.hostElement.appendChild(logoElement);
+    }
+  }
+  async onMenuClick() {
+    if (this.applicationLayoutContext) {
+      menuController.toggle();
+    } else {
+      this.menuExpanded = !this.menuExpanded;
+    }
+    this.menuToggle.emit(this.menuExpanded);
+  }
+  resolveContextMenuButton() {
+    return new Promise((resolve) => readTask(() => resolve(this.hostElement.shadowRoot.querySelector("[data-context-menu]"))));
+  }
+  tryUpdateAppSwitch() {
+    var _a, _b;
+    if (!this.callbackUpdateAppSwitchModal || !((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig)) {
+      return;
+    }
+    this.callbackUpdateAppSwitchModal((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.appSwitchConfig);
+  }
+  async showAppSwitch() {
+    var _a, _b;
+    const { defaultPrevented } = this.openAppSwitch.emit();
+    if (defaultPrevented) {
+      return;
+    }
+    if (!((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig)) {
+      return;
+    }
+    this.callbackUpdateAppSwitchModal = await showAppSwitch((_b = this.applicationLayoutContext) === null || _b === void 0 ? void 0 : _b.appSwitchConfig);
+  }
+  updateHasSlotAssignedElementsStates() {
+    const defaultSlot = this.hostElement.shadowRoot.querySelector(".content slot:not([name])");
+    const secondarySlot = this.hostElement.shadowRoot.querySelector('.content slot[name="secondary"]');
+    const overflowSlot = this.hostElement.shadowRoot.querySelector('.content slot[name="overflow"]');
+    this.hasDefaultSlotElements = hasSlottedElements(defaultSlot);
+    this.hasSecondarySlotElements = hasSlottedElements(secondarySlot);
+    this.hasOverflowSlotElements = hasSlottedElements(overflowSlot);
+    this.hasOverflowContextMenu = this.hasDefaultSlotElements || this.hasSecondarySlotElements;
+  }
+  onContentBgClick(e) {
+    if (e.target === this.contentBackground) {
+      e.preventDefault();
+    }
+  }
+  render() {
+    var _a;
+    const hasApplicationContextAvailable = !!this.applicationLayoutContext;
+    const showMenuByApplicationFrame = this.breakpoint === "sm" && this.suppressResponsive === false && hasApplicationContextAvailable;
+    const showApplicationSwitch = ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) && this.breakpoint !== "sm" && this.suppressResponsive === false;
+    const showCompanyLogoByProperty = this.breakpoint !== "sm" && !!this.companyLogo;
+    return h(Host, { key: "ef0ab6f2a81031458e8ed28d37498fc8b1446bac", class: {
+      [`breakpoint-${this.breakpoint}`]: true,
+      "hide-bottom-border": this.hideBottomBorder
+    }, slot: "application-header" }, h("div", { key: "efe93ad72d12055c809bba772b705d20fed00ee7", class: "left-side" }, this.appIcon && this.breakpoint !== "sm" && h("div", { key: "ef86725dc6c5d99b629115e1142f11d513a76f52", class: {
+      "app-icon": true,
+      "app-icon-outline": this.appIconOutline
+    } }, h("img", { key: "aaca1d8a674774635a0f0774aaf1c6cb8c63ca3e", src: this.appIcon, alt: this.appIconAlt })), (this.showMenu || showMenuByApplicationFrame) && h("ix-menu-expand-icon", { key: "6cd981d9c4398e0c72ba5096694e30855f970bec", onClick: () => this.onMenuClick(), expanded: this.menuExpanded, ixAriaLabel: this.ariaLabelMenuExpandIconButton }), showApplicationSwitch && h("ix-icon-button", { key: "933e394225b9239f10b18962c40f8021a5e4b059", onClick: () => this.showAppSwitch(), icon: iconApps, variant: "subtle-tertiary", class: {
+      "app-switch": true,
+      "without-app-icon": !this.appIcon
+    }, "aria-label": this.ariaLabelAppSwitchIconButton }), showCompanyLogoByProperty && h("div", { key: "df4c4e5db00d5f7b7680ea05c9da06250c769308", class: "logo" }, h("img", { key: "2187d02dedbb48e5b27ea431b90a1a33a4b1e9e6", src: this.companyLogo, alt: this.companyLogoAlt })), h("div", { key: "0abdbb9bf1b3fc81c14d46ea826ee73336c560b5", class: {
+      logo: true,
+      "hide-logo": !this.hasSlottedLogo
+    } }, h("slot", { key: "468f56a361d387af9b46dddabbece87e03f1692b", name: "logo", onSlotchange: () => this.hasSlottedLogo = this.checkLogoSlot() })), h("div", { key: "84265b38ce425386a4df25a52e2334b760d28067", class: "name" }, h("ix-typography", { key: "c2cb4a0e91d28ccdb07dd8a68a6b6989b3faab14", format: "body-lg", class: "application-name" }, this.name), this.nameSuffix && this.breakpoint !== "sm" && h("ix-typography", { key: "f34d596a5071ee964fecfc1021a420b0cc5fad32", format: "body-xs", class: "application-name-suffix" }, this.nameSuffix))), h("div", { key: "e4f60f5f9fb727385eb180ea91f5c75b7a207993", class: { "right-side": true, sm: this.breakpoint === "sm" } }, this.breakpoint !== "sm" && h("div", { key: "b78fcf9127124d7c57d2ebf15f65fb271efd30fc", class: "secondary" }, h("slot", { key: "0c82211f37d6cb285047f97ee222f22aa424bfad", name: "secondary" })), h("div", { key: "acb023efd34eeba9730ad5a60dd933240bb09b80", class: "content" }, this.breakpoint !== "sm" && h("slot", { key: "05fcf4ca0ee08e392ebba65ef7f671e5822cc9c5" }), h("ix-icon-button", { key: "196aa553bc0ed8f7ac43586c8bd065c3c4990535", class: {
+      "context-menu": true,
+      "context-menu-visible": this.hasOverflowContextMenu || this.hasOverflowSlotElements
+    }, "data-context-menu": true, "data-testid": "show-more", icon: iconMoreMenu, variant: "subtle-tertiary", "aria-label": this.ariaLabelMoreMenuIconButton, "aria-hidden": a11yBoolean(!(this.hasOverflowContextMenu || this.hasOverflowSlotElements)) }), h("ix-dropdown", { key: "7657364247c4964e0cbe2380fffedcd22f6513d9", "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton(), "aria-hidden": a11yBoolean(!(this.hasOverflowContextMenu || this.hasOverflowSlotElements)) }, h("div", { key: "06f57598668ae32ef6fc377ae9ccf180ffbd5361", class: "dropdown-content", onClick: (e) => this.onContentBgClick(e) }, this.breakpoint === "sm" && h("div", { key: "f59b62075ac364ccc86791e6dda77a155135dc91", class: {
+      "slot-content": true,
+      "slot-content-active": this.hasSecondarySlotElements
+    } }, h("slot", { key: "25a1cbf08436b248cb892cabcc4b6377abcdda4f", name: "secondary", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })), this.breakpoint === "sm" && h("div", { key: "903e47dc9fe7906bc94650d9617031a9ec8ecbd3", class: {
+      "slot-content": true,
+      "slot-content-active": this.hasDefaultSlotElements
+    } }, h("slot", { key: "dd848b5a87034692f1b0c518ec694cc9e3197787", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })), h("div", { key: "0fe4250f4a64d239ca6db9eea89d1cc4869492e6", class: {
+      "slot-content": true,
+      "slot-content-active": this.hasOverflowSlotElements
+    } }, h("slot", { key: "10862703e3e6701ff5bb110039242b826914e8af", name: "overflow", onSlotchange: () => this.updateHasSlotAssignedElementsStates() })))), h("slot", { key: "eb5fbef4f3783afba128d57fdc3924e4957af6b1", name: "ix-application-header-avatar" }))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "applicationLayoutContext": ["watchApplicationLayoutContext"],
+      "suppressResponsive": ["watchSuppressResponsive"]
+    };
+  }
+};
+ApplicationHeader.style = applicationHeaderCss;
+export {
+  ApplicationHeader as ix_application_header
+};

package/build/static/demo/v2/preview/html/assets/ix-application-sidebar.entry-Bxhj1CbF.js

@@ -0,0 +1,40 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
+import { a as animate } from "./anime.esm-DhE1t8Qh-B6Ygv72Z.js";
+import { A as Animation } from "./animation-C5MWUgDN-BXCJNYHu.js";
+const applicationSidebarCss = ":host{display:block;position:relative;width:22rem;height:100%;padding:0}: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(.visible){border-right:2px solid var(--theme-color-soft-bdr);padding:1.5rem 0.5rem 0}";
+const ApplicationSidebar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.visible = true;
+  }
+  listenToggleEvent() {
+    const visibility = !this.visible;
+    const animation = {
+      width: visibility ? ["0", "22rem"] : ["22rem", "0"],
+      opacity: visibility ? [0, 1] : [1, 0],
+      easing: "easeInSine",
+      duration: Animation.defaultTime
+    };
+    const changeVisibility = () => {
+      this.visible = visibility;
+    };
+    if (visibility) {
+      animation.begin = changeVisibility.bind(this);
+    } else {
+      animation.complete = changeVisibility.bind(this);
+    }
+    animate(this.hostElement, animation);
+  }
+  render() {
+    return h(Host, { key: "9930b3444817c8ad6c3da375484018d294897472", slot: "application-sidebar", class: {
+      visible: this.visible
+    } }, this.visible ? h("slot", null) : null);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+ApplicationSidebar.style = applicationSidebarCss;
+export {
+  ApplicationSidebar as ix_application_sidebar
+};

package/build/static/demo/v2/preview/html/assets/ix-application-switch-modal.entry-EO35_mW9.js

@@ -0,0 +1,48 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
+import "./animation-C5MWUgDN-BXCJNYHu.js";
+import { d as dismissModal } from "./modal-D9BaTrTa-h5wbphR-.js";
+import { e as iconApps, f as iconOpenExternal } from "./index-Cz75KU1f-BUHLjWzB.js";
+import "./typed-event-BdCnOrqW-CWsLM0S_.js";
+const applicationSwitchModalCss = ":host{display:block}: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 .content{padding:2rem;padding-right:0}:host .content-apps{display:flex;position:relative;flex-wrap:wrap;justify-content:space-evenly;max-height:50vh;margin-right:0.25rem;gap:1.5rem}:host .loading{display:flex;flex-direction:row;align-items:center}:host .loading ix-spinner{margin-right:1rem}:host .AppEntry{all:unset;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0.5rem;flex:1 1 45%;cursor:pointer;border:0.0625rem solid transparent}:host .AppEntry.Selected{background-color:var(--theme-color-ghost--selected);border:var(--theme-dynamic-bdr-1)}:host .AppEntry:not(.disabled):not(:disabled).hover,:host .AppEntry:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .AppEntry:not(.disabled):not(:disabled).active,:host .AppEntry:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .AppEntry:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host .AppName{display:flex;flex-direction:column}:host .AppName ix-icon{margin-left:1rem}:host .AppIcon{width:3rem;height:3rem;border-radius:0.25rem}";
+function ApplicationItem(props) {
+  function isExternal(target) {
+    if (target !== "_blank" && target !== "_parent" && target !== "_self" && target !== "_top") {
+      return true;
+    }
+    if (target === "_blank") {
+      return true;
+    }
+    return false;
+  }
+  return h("button", { class: {
+    AppEntry: true,
+    Selected: props.selected
+  }, onClick: () => {
+    dismissModal(props.host);
+    window.open(props.url, props.target);
+  } }, h("div", null, h("img", { class: "AppIcon", src: props.iconSrc })), h("div", { class: "AppName" }, h("ix-typography", { format: "h4" }, props.name, isExternal(props.target) && h("ix-icon", { size: "12", name: iconOpenExternal, color: "color-soft-text" })), h("ix-typography", { format: "label-sm", textColor: "soft" }, props.description)));
+}
+const ApplicationSwitchModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    if (!this.config) {
+      throw Error("ApplicationConfig not provided");
+    }
+  }
+  render() {
+    var _a, _b, _c, _d;
+    return h(Host, { key: "ad91bb8276f431a5eaf9efc39520c3d679fa1c35" }, h("ix-modal-header", { key: "8818474a3ac6e57a7758af5f9ed2707c1d741f36", icon: iconApps }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || "Switch to application"), h("ix-modal-content", { key: "2499c10197c91b9f167f38ab864083453b497325", class: "content" }, h("div", { key: "1f6f1fe8f3cf57506aa28a9f758dcfa7a0114163", class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && h("div", { key: "096832c472ffa6665e1d1a3e61234dbf867c43c8", class: "loading" }, h("ix-spinner", { key: "89524c61771cea96b31e89b59d722e22a418ca98", size: "medium", variant: "primary" }), h("span", { key: "a9bb64f0ba5ae12e77cb86dd38a1e4da0abd7ab4" }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) || "Loading available applications...")), (_d = this.config) === null || _d === void 0 ? void 0 : _d.apps.map((appEntry) => {
+      var _a2;
+      return h(ApplicationItem, { host: this.hostElement, name: appEntry.name, description: appEntry.description, iconSrc: appEntry.iconSrc, target: appEntry.target, url: appEntry.url, selected: appEntry.id === ((_a2 = this.config) === null || _a2 === void 0 ? void 0 : _a2.currentAppId) });
+    }))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+};
+ApplicationSwitchModal.style = applicationSwitchModalCss;
+export {
+  ApplicationSwitchModal as ix_application_switch_modal
+};

package/build/static/demo/v2/preview/html/assets/ix-application.entry-CXUpkGb5.js

@@ -0,0 +1,112 @@
+import { r as registerInstance, h, H as Host, g as getElement } from "./global-C8r7td8X.js";
+import { u as useContextProvider, A as ApplicationLayoutContext } from "./context-CKM5pVsv-B0zIukL5.js";
+import { a as applicationLayoutService } from "./service-Da0kv8hS-ChZKlHDF.js";
+import { m as menuController } from "./menu-service-BMvtckRa-Dk6abri9.js";
+import { h as hasSlottedElements } from "./shadow-dom-i60z1FJC-Cx4XiL3F.js";
+import { t as themeSwitcher } from "./theme-switcher-DRqJGlG2-DVSIP9tc.js";
+import "./typed-event-BdCnOrqW-CWsLM0S_.js";
+import "./breakpoints-D_Hmobxf-DBbixPq4.js";
+const applicationCss = ":host{display:flex;position:relative;width:100vw;height:100vh;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .application{display:flex;position:relative;flex-direction:row;height:100%;width:100%;overflow:hidden}:host .content-area{display:flex;position:relative;flex-direction:column;flex-wrap:nowrap;height:calc(100% - var(--ix-safe-area-inset-bottom, 0px));width:100%;margin-left:var(--ix-application-menu-margin-left);min-width:0}:host main{display:block;position:relative;flex-grow:1;width:100%;padding-bottom:var(--ix-safe-area-inset-bottom);overflow:auto}:host footer{display:block;position:relative;width:100%}:host(.breakpoint-md){--ix-application-menu-margin-left:calc(\n    3.25rem + var(--ix-application-menu-safe-area-left, 0rem)\n  )}:host(.breakpoint-md) aside.slotted{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-md) aside.slotted+.content-area{margin-left:0}:host(.breakpoint-md) aside:not(.slotted)+.content-area{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-lg){--ix-application-menu-margin-left:0}:host(.breakpoint-sm){--ix-application-menu-margin-left:var(\n    --ix-application-menu-safe-area-left,\n    0rem\n  )}";
+const Application = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.themeSystemAppearance = false;
+    this.breakpoints = ["sm", "md", "lg"];
+    this.breakpoint = "lg";
+    this.applicationSidebarSlotted = false;
+  }
+  forceLayoutChange(newMode) {
+    if (!newMode) {
+      applicationLayoutService.enableBreakpointDetection();
+      return;
+    }
+    applicationLayoutService.disableBreakpointDetection();
+    applicationLayoutService.setBreakpoint(newMode);
+  }
+  onBreakpointsChange(breakpoints) {
+    applicationLayoutService.setBreakpoints(breakpoints);
+  }
+  get menu() {
+    return this.hostElement.querySelector("ix-menu");
+  }
+  get applicationSidebarSlot() {
+    return this.hostElement.shadowRoot.querySelector(".application-sidebar slot");
+  }
+  onContentClick() {
+    var _a;
+    if (menuController.isPinned) {
+      return;
+    }
+    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+  }
+  componentWillLoad() {
+    applicationLayoutService.setBreakpoints(this.breakpoints);
+    this.contextProvider = useContextProvider(this.hostElement, ApplicationLayoutContext, {
+      hideHeader: false,
+      host: "basic-navigation",
+      sidebar: this.applicationSidebarSlotted,
+      appSwitchConfig: this.appSwitchConfig
+    });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      this.breakpoint = mode;
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+    if (this.forceBreakpoint) {
+      this.forceLayoutChange(this.forceBreakpoint);
+    }
+    this.changeTheme();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+  }
+  changeTheme() {
+    if (!this.theme) {
+      if (this.themeSystemAppearance) {
+        themeSwitcher.setVariant();
+      }
+      return;
+    }
+    if (themeSwitcher.hasVariantSuffix(this.theme)) {
+      themeSwitcher.setTheme(`theme-${this.theme}`);
+      return;
+    }
+    themeSwitcher.setTheme(`theme-${this.theme}-dark`, this.themeSystemAppearance);
+  }
+  onApplicationSidebarChange() {
+    if (!this.contextProvider) {
+      console.error("Context provider not available");
+      return;
+    }
+    this.contextProvider.emit({
+      hideHeader: false,
+      host: "basic-navigation",
+      sidebar: this.applicationSidebarSlotted,
+      appSwitchConfig: this.appSwitchConfig
+    });
+  }
+  render() {
+    return h(Host, { key: "8ec10f51dff7f068d6d9ecc3482f57f7eee372e1", "data-role": "", class: {
+      [`breakpoint-${this.breakpoint}`]: true
+    } }, h("slot", { key: "0907c0a93f6baa2bec75388748c5b380ac57ba9f", name: "application-header" }), h("div", { key: "20dbe63e526f7842680f6c4abc6d4295892ae7f6", class: "application" }, h("slot", { key: "d47121e13a25c0738cba759b53fac4e33ec05dc6", name: "menu" }), h("aside", { key: "61e0b686faca2fb562651b67286b837d94053b99", class: {
+      "application-sidebar": true,
+      slotted: this.applicationSidebarSlotted
+    }, onClick: () => this.onContentClick() }, h("slot", { key: "2e84b0947f7f8f663ea18211e8cd2112e2702048", name: "application-sidebar", onSlotchange: () => this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot) })), h("div", { key: "89cc5e6a029a43cedb58865984d0e46b6b14c4d3", class: "content-area" }, h("main", { key: "dfc4b2e1842a43ca077d0b87168ac7119c7bb80d", class: "content", onClick: () => this.onContentClick() }, h("slot", { key: "6af3c3a4f10005a8d3d10d86e3388c41ffce7204" })), h("footer", { key: "44c8fdcf8f6fe6c6c03e2c03214c5acbb8e9d7bf", class: "footer" }, h("slot", { key: "c066f4dcc1948952fa8218b70fb697470385f4d8", name: "bottom" })))));
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "breakpoints": ["onBreakpointsChange"],
+      "theme": ["changeTheme"],
+      "themeSystemAppearance": ["changeTheme"],
+      "appSwitchConfig": ["onApplicationSidebarChange"],
+      "applicationSidebarSlotted": ["onApplicationSidebarChange"]
+    };
+  }
+};
+Application.style = applicationCss;
+export {
+  Application as ix_application
+};