npm - @siemens/ix-docs - Versions diffs - 4.4.0 → 5.0.0 - Mend

@siemens/ix-docs 4.4.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2401) hide show

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

@@ -0,0 +1,45 @@
+import { a as registerInstance, g as getElement, h, H as Host } from "./global-DjWMysHf.js";
+import { a as iconApps, K as iconOpenExternal } from "./index-Cl7fhG1I-C77BCFLW.js";
+import { d as dismissModal } from "./modal-DaGSr1j4-DDLDpRwP.js";
+import "./typed-event-CWshStHZ-DBYwEilm.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);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /** @internal */
+  config;
+  componentWillLoad() {
+    if (!this.config) {
+      throw Error("ApplicationConfig not provided");
+    }
+  }
+  render() {
+    return h(Host, { key: "16262d6c110470be996a5db506a9a610c51ef0d6" }, h("ix-modal-header", { key: "5386a2b3ce91ad901f270ccb25c3b32c28de5cc0", icon: iconApps }, this.config?.i18nAppSwitch || "Switch to application"), h("ix-modal-content", { key: "65666bad6b09fd3af20b9266d7f30b232da01a31", class: "content" }, h("div", { key: "1622ad7361a15518bdf367e13a6d20159495d15e", class: "content-apps" }, (!this.config || this.config?.apps.length === 0) && h("div", { key: "778d2f8110c1f79b1a65a1765c393c922de4a1bb", class: "loading" }, h("ix-spinner", { key: "c80583bc15238aac1ec59ddd0cf6638217667fa5", size: "medium", variant: "primary" }), h("span", { key: "ac4257820259ae71b62e9703e730e7367c463bcf" }, this.config?.i18nLoadingApps || "Loading available applications...")), this.config?.apps.map((appEntry) => h(ApplicationItem, { host: this.hostElement, name: appEntry.name, description: appEntry.description, iconSrc: appEntry.iconSrc, target: appEntry.target, url: appEntry.url, selected: appEntry.id === this.config?.currentAppId })))));
+  }
+};
+ApplicationSwitchModal.style = applicationSwitchModalCss();
+export {
+  ApplicationSwitchModal as ix_application_switch_modal
+};

package/build/static/demo/v2/preview/html/assets/ix-application.entry-D7P6T6qh.js ADDED Viewed

@@ -0,0 +1,138 @@
+import { a as registerInstance, g as getElement, h, H as Host } from "./global-DjWMysHf.js";
+import { a as useContextProvider, A as ApplicationLayoutContext } from "./context-zqk3Dkv--CsY55SLG.js";
+import { a as applicationLayoutService } from "./service-CEglFEKY-CaUBmgY_.js";
+import { m as menuController } from "./menu-service-DTIYRV47-C3CDZAa1.js";
+import { h as hasSlottedElements } from "./shadow-dom-BIe8Nw9M-DxOF84uP.js";
+import { t as themeSwitcher } from "./theme-switcher-CRVG13AN-OnrBiSI3.js";
+import "./typed-event-CWshStHZ-DBYwEilm.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(     3.25rem + var(--ix-application-menu-safe-area-left, 0rem)   )}: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(     --ix-application-menu-safe-area-left,     0rem   )}`;
+const Application = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * Application theme
+   */
+  theme;
+  /**
+   * Color schema of the theme
+   *
+   * @since 5.0.0
+   */
+  colorSchema = "system";
+  /**
+   * Change the responsive layout of the menu structure
+   */
+  forceBreakpoint;
+  forceLayoutChange(newMode) {
+    if (!newMode) {
+      applicationLayoutService.enableBreakpointDetection();
+      return;
+    }
+    applicationLayoutService.disableBreakpointDetection();
+    applicationLayoutService.setBreakpoint(newMode);
+  }
+  /**
+   * Supported layouts
+   */
+  breakpoints = ["sm", "md", "lg"];
+  onBreakpointsChange(breakpoints) {
+    applicationLayoutService.setBreakpoints(breakpoints);
+  }
+  /**
+   * Define application switch configuration
+   */
+  appSwitchConfig;
+  breakpoint = "lg";
+  applicationSidebarSlotted = false;
+  contextProvider;
+  get menu() {
+    return this.hostElement.querySelector("ix-menu");
+  }
+  get applicationSidebarSlot() {
+    return this.hostElement.shadowRoot.querySelector(".application-sidebar slot");
+  }
+  modeDisposable;
+  onContentClick() {
+    if (menuController.isPinned) {
+      return;
+    }
+    this.menu?.toggleMenu(false);
+  }
+  componentWillLoad() {
+    applicationLayoutService.setBreakpoints(this.breakpoints);
+    this.contextProvider = useContextProvider(this.hostElement, ApplicationLayoutContext, {
+      hideHeader: false,
+      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);
+    }
+  }
+  disconnectedCallback() {
+    this.modeDisposable?.dispose();
+  }
+  changeTheme() {
+    if (!this.theme) {
+      return;
+    }
+    themeSwitcher.setTheme(this.theme);
+  }
+  changeColorSchema() {
+    if (!this.colorSchema) {
+      return;
+    }
+    themeSwitcher.setColorSchema(this.colorSchema);
+  }
+  onApplicationSidebarChange() {
+    if (!this.contextProvider) {
+      console.error("Context provider not available");
+      return;
+    }
+    this.contextProvider.emit({
+      hideHeader: false,
+      sidebar: this.applicationSidebarSlotted,
+      appSwitchConfig: this.appSwitchConfig
+    });
+  }
+  render() {
+    return h(Host, { key: "9621e446a9532a740dcdef516a51d326c59587a7", "data-role": "", class: {
+      [`breakpoint-${this.breakpoint}`]: true
+    } }, h("slot", { key: "0061a139b7fa722e97da65fbcaf2853bdd185466", name: "application-header" }), h("div", { key: "b2da184f99ab27ce576be02221497bb24462bb69", class: "application" }, h("slot", { key: "8e5895c10cb495320f251c9c44949700629be9ee", name: "menu" }), h("aside", { key: "60a6cd879294682b56061f4b0fd9bb2342fce229", class: {
+      "application-sidebar": true,
+      slotted: this.applicationSidebarSlotted
+    }, onClick: () => this.onContentClick() }, h("slot", { key: "19416cec696ff2b7ae2818ebe375b98892df3116", name: "application-sidebar", onSlotchange: () => this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot) })), h("div", { key: "d6bd6479222c1b19c6e45f68e6993c534ce5afd2", class: "content-area" }, h("main", { key: "ac7117c1a192eadf913e8ab474019dcdd5c81025", class: "content", onClick: () => this.onContentClick() }, h("slot", { key: "bac13c155b023321b111f3ea89603840c6b73fe0" })), h("footer", { key: "5acded667f8360c952516a0a55ca5b0936834add", class: "footer" }, h("slot", { key: "34be70c1aa056e735aa52c17d4a8c469a68611ed", name: "bottom" })))));
+  }
+  static get watchers() {
+    return {
+      "breakpoints": [{
+        "onBreakpointsChange": 0
+      }],
+      "theme": [{
+        "changeTheme": 0
+      }],
+      "colorSchema": [{
+        "changeColorSchema": 0
+      }],
+      "appSwitchConfig": [{
+        "onApplicationSidebarChange": 0
+      }],
+      "applicationSidebarSlotted": [{
+        "onApplicationSidebarChange": 0
+      }]
+    };
+  }
+};
+Application.style = applicationCss();
+export {
+  Application as ix_application
+};

package/build/static/demo/v2/preview/html/assets/ix-avatar_2.entry-DQif5UTE.js ADDED Viewed

@@ -0,0 +1,195 @@
+import { M as Mixin, a as registerInstance, g as getElement, r as readTask, h, F as Fragment, H as Host, c as createEvent } from "./global-DjWMysHf.js";
+import { B as BaseButton } from "./base-button-hppF0uUM-BayQ2Iat.js";
+import { b as a11yHostAttributes, a as a11yBoolean } from "./a11y-B5k8YVR0-BOSd6BQK.js";
+import { m as makeRef } from "./make-ref-Djkc69iv-BpP6uHEs.js";
+import { c as closestElement, h as hasSlottedElements } from "./shadow-dom-BIe8Nw9M-DxOF84uP.js";
+import { P as PROXY_LISTITEM_ID_SUFFIX, u as updateFocusProxyList, F as FocusProxy } from "./focus-proxy-BgLEsVE2-zgdA9p1m.js";
+import { D as DefaultMixins } from "./component-Chfbghog-DFMCI9TH.js";
+import { C as ComponentIdMixin } from "./id.mixin-CUbYLenp-DR0VgaO1.js";
+import { A as AriaActiveDescendantMixin } from "./aria-activedescendant.mixin-CM-NUHTW-CwKLvkpN.js";
+import "./focus-utilities-DnaItyVQ-Degzwldb.js";
+const avatarCss = () => `:host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}: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 .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar>.avatar-initials>ix-typography{margin-top:1px}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{border-radius:100px !important;all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host(.avatar-button) button{padding:0px}:host(.avatar-button) .btn-tertiary{text-align:start;border-top-left-radius:var(--ix-button-border-radius-left);border-bottom-left-radius:var(--ix-button-border-radius-left);border-top-right-radius:var(--ix-button-border-radius-right);border-bottom-right-radius:var(--ix-button-border-radius-right)}:host(.avatar-button) .btn-tertiary{background-color:var(--theme-btn-tertiary--background);color:var(--theme-btn-tertiary--color);--ix-button-color:var(--theme-btn-tertiary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-tertiary--border-color);border-style:solid}:host(.avatar-button) .btn-tertiary.selected{background-color:var(--theme-btn-tertiary--background--pressed);color:var(--theme-btn-tertiary--color--pressed)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).hover{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-hover)}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-tertiary--background--pressed-hover);color:var(--theme-btn-tertiary--color--pressed-active)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):hover,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).hover{border-color:var(--theme-btn-tertiary--border-color--hover);background-color:var(--theme-btn-tertiary--background--hover);color:var(--theme-btn-tertiary--color--hover)}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-tertiary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-tertiary--border-color--active);background-color:var(--theme-btn-tertiary--background--active);color:var(--theme-btn-tertiary--color--active)}:host(.avatar-button) button:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .avatar{transform:scale(0.8)}:host(.avatar-button) .proxy-list{all:unset;position:absolute;left:0px;top:0px;overflow:hidden;color:transparent;opacity:0;pointer-events:all;z-index:1000}:host(.avatar-button) .proxy-list li{height:2px;width:2px;pointer-events:all}`;
+function DefaultAvatar(props) {
+  const { initials } = props;
+  if (initials) {
+    return h("div", { class: "avatar-initials" }, h("ix-typography", { format: "label-lg" }, initials));
+  }
+  return h("svg", { class: "avatar-image", xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", "aria-label": props.ariaLabel }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }), h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" })));
+}
+function AvatarImage(props) {
+  return h("div", { class: "avatar" }, props.image ? h("img", { src: props.image, class: "avatar-image", "aria-label": props.ariaLabel }) : h(DefaultAvatar, { initials: props.initials, ariaLabel: props.ariaLabel }));
+}
+function UserInfo(props) {
+  return h(Fragment, null, h("div", { class: "user-info", onClick: (event) => event.preventDefault() }, h(AvatarImage, { image: props.image, initials: props.initials, ariaLabel: props.ariaLabel }), h("div", { class: "user" }, h("div", { class: "username" }, props.userName), props.extra && h("ix-typography", { class: "extra", "text-color": "soft" }, props.extra))));
+}
+const Avatar = class extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActiveDescendantMixin) {
+  constructor(hostRef) {
+    super();
+    registerInstance(this, hostRef);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * Display an avatar image
+   *
+   */
+  image;
+  /**
+   * Display the initials of the user. Will be overwritten by image
+   *
+   */
+  initials;
+  /**
+   * If set an info card displaying the username will be placed inside the dropdown.
+   * Note: Only working if avatar is part of the ix-application-header
+   */
+  username;
+  /**
+   * Optional description text that will be displayed underneath the username.
+   * Note: Only working if avatar is part of the ix-application-header
+   */
+  extra;
+  /**
+   * Text to display in a tooltip when hovering over the avatar
+   *
+   * @since 4.0.0
+   */
+  tooltipText;
+  /**
+   * aria-label for the tooltip
+   *
+   * @since 4.0.0
+   */
+  ariaLabelTooltip;
+  isClosestApplicationHeader = false;
+  dropdownShow = false;
+  hasSlottedElements = false;
+  slotElement;
+  dropdownElement;
+  observeChildrenChange;
+  tooltipRef = makeRef();
+  a11yAttributes = {};
+  get items() {
+    return Array.from(this.hostElement.querySelectorAll("ix-dropdown-item"));
+  }
+  componentWillLoad() {
+    this.a11yAttributes = a11yHostAttributes(this.hostElement);
+    const closest = closestElement("ix-application-header", this.hostElement);
+    this.isClosestApplicationHeader = closest !== null;
+    this.observeChildrenChange = new MutationObserver(() => {
+      this.updateProxyList();
+    });
+    this.observeChildrenChange.observe(this.hostElement, {
+      childList: true,
+      subtree: true
+    });
+  }
+  componentDidLoad() {
+    this.updateProxyList();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observeChildrenChange?.disconnect();
+  }
+  async slottedChanged() {
+    this.hasSlottedElements = hasSlottedElements(this.slotElement);
+  }
+  resolveAvatarTrigger() {
+    return new Promise((resolve, reject) => {
+      readTask(() => {
+        const button = this.hostElement.shadowRoot.querySelector("button");
+        if (button) {
+          resolve(button);
+        } else {
+          reject(new Error("ix-avatar - trigger element not found"));
+        }
+      });
+    });
+  }
+  resolveTooltipTrigger() {
+    return this.resolveAvatarTrigger().catch(() => this.hostElement);
+  }
+  onDropdownClick(event) {
+    if (event.target === this.dropdownElement) {
+      event.preventDefault();
+    }
+  }
+  getControllingAriaElement() {
+    return this.hostElement.shadowRoot.querySelector(`[aria-controls="${this.getHostElementId()}-proxy-listbox"]`);
+  }
+  isAriaActiveDescendantActive() {
+    return this.dropdownShow;
+  }
+  getAriaActiveDescendantProxyItemId() {
+    return PROXY_LISTITEM_ID_SUFFIX;
+  }
+  updateProxyList() {
+    const items = this.items;
+    const proxyList = this.hostElement.shadowRoot.querySelector(".proxy-list");
+    if (!proxyList) {
+      return;
+    }
+    updateFocusProxyList(proxyList, items, (item, proxyElement) => {
+      proxyElement.role = "menuitem";
+      proxyElement.innerText = item.label ?? item.textContent ?? "";
+      proxyElement.ariaLabel = item.ariaLabel ?? item.label ?? item.textContent ?? "";
+    });
+  }
+  render() {
+    const ariaLabel = this.a11yAttributes["aria-label"];
+    const tooltipText = this.tooltipText || this.username;
+    const ariaHidden = tooltipText === this.username;
+    const Avatar2 = h(Fragment, null, h(AvatarImage, { image: this.image, initials: this.initials, ariaLabel }), !!tooltipText && h("ix-tooltip", { ref: this.tooltipRef, for: this.resolveTooltipTrigger(), "aria-hidden": a11yBoolean(ariaHidden), "aria-label": this.ariaLabelTooltip }, tooltipText));
+    if (this.isClosestApplicationHeader) {
+      return h(Host, { slot: "ix-application-header-avatar", class: "avatar-button" }, h(BaseButton, { disabled: false, iconOval: false, icon: void 0, iconOnly: false, loading: false, selected: false, type: "button", variant: "tertiary", ariaAttributes: {
+        role: "menu",
+        "aria-controls": `${this.getHostElementId()}-proxy-listbox`,
+        "aria-expanded": a11yBoolean(this.dropdownShow),
+        "aria-haspopup": "menu"
+      } }, Avatar2), h("ix-dropdown", { ref: (ref) => this.dropdownElement = ref, trigger: this.resolveAvatarTrigger(), class: "avatar-dropdown", onClick: (e) => this.onDropdownClick(e), onShowChanged: (event) => {
+        this.dropdownShow = event.detail;
+        if (event.detail && this.tooltipRef.current) {
+          this.tooltipRef.current.hideTooltip(0);
+        }
+      }, disableFocusTrap: true, focusHost: this.hostElement }, h(FocusProxy, { hostId: this.getHostElementId(), otherProps: {} }), this.username && h(Fragment, null, h(UserInfo, { extra: this.extra, image: this.image, initials: this.initials, userName: this.username, ariaLabel }), this.hasSlottedElements && h("ix-divider", { onClick: (e) => e.preventDefault() })), h("slot", { onSlotchange: () => this.slottedChanged(), ref: (ref) => this.slotElement = ref })));
+    }
+    return h(Host, null, Avatar2);
+  }
+};
+Avatar.style = avatarCss();
+const menuAvatarItemCss = () => `:host{display:block;color:var(--theme-color-std-text)}: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}`;
+const MenuAvatarItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.itemClick = createEvent(this, "itemClick", 7);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * Avatar dropdown icon
+   */
+  icon;
+  /**
+   * Avatar dropdown label
+   */
+  label;
+  /**
+   * Avatar dropdown item clicked
+   */
+  itemClick;
+  dropdownItemRef = makeRef();
+  /** @internal */
+  async getDropdownItemElement() {
+    return this.dropdownItemRef.waitForCurrent();
+  }
+  render() {
+    return h("ix-dropdown-item", { key: "f96a631b215cb1d42035b4d5ffb7ce7fbea2b34a", ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) });
+  }
+};
+MenuAvatarItem.style = menuAvatarItemCss();
+export {
+  Avatar as ix_avatar,
+  MenuAvatarItem as ix_menu_avatar_item
+};

package/build/static/demo/v2/preview/html/assets/ix-blind.entry-BpVlm5PM.js ADDED Viewed

@@ -0,0 +1,109 @@
+import { g as getElement, a as registerInstance, c as createEvent, h, F as Fragment, H as Host } from "./global-DjWMysHf.js";
+import { a as animate } from "./anime.esm-DhE1t8Qh-cS95-bBh.js";
+import { a as a11yBoolean } from "./a11y-B5k8YVR0-BOSd6BQK.js";
+import { f as iconChevronDownSmall } from "./index-Cl7fhG1I-C77BCFLW.js";
+import { A as Animation } from "./animation-DNIQ2C1K-BYpQk_MF.js";
+const blindCss = () => `:host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}: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 .blind-header-wrapper{position:relative;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;margin-right:0.5rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1;overflow:hidden}:host .blind-header-title-col{display:inline-flex;align-items:center;width:calc(100% - 1rem);overflow:hidden}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{padding-inline-end:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-sublabel{padding-inline:0.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:var(--theme-default-time);transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all;margin-left:auto}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-filled) .blind-header{background-color:var(--theme-color-filled)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-filled) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-filled) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-filled) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-filled) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-filled){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-outline){border-color:var(--theme-color-soft-bdr)}`;
+let sequentialInstanceId = 0;
+const Blind = class {
+  /**
+   * Collapsed state
+   */
+  collapsed = false;
+  /**
+   * Label of blind
+   */
+  label;
+  /**
+   * Secondary label inside blind header
+   */
+  sublabel;
+  /**
+   * Optional icon to be displayed next to the header label
+   */
+  icon;
+  /**
+   * Blind variant
+   */
+  variant = "filled";
+  /**
+   * Collapsed state changed
+   */
+  collapsedChange;
+  get hostElement() {
+    return getElement(this);
+  }
+  chevronRef;
+  blindId = ++sequentialInstanceId;
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.collapsedChange = createEvent(this, "collapsedChange", 7);
+  }
+  onHeaderClick() {
+    this.collapsed = !this.collapsed;
+    this.collapsedChange.emit(this.collapsed);
+  }
+  componentDidLoad() {
+    this.animateCollapse(this.collapsed);
+  }
+  get content() {
+    return this.hostElement.shadowRoot.querySelector(".blind-content");
+  }
+  animation(isCollapsed) {
+    this.animateCollapse(isCollapsed);
+  }
+  animateCollapse(isCollapsed) {
+    if (isCollapsed) {
+      this.rotateChevronDown();
+    } else {
+      this.rotateChevronUp();
+    }
+  }
+  rotateChevronUp() {
+    animate(this.chevronRef, {
+      duration: Animation.defaultTime,
+      easing: "easeInOutSine",
+      rotateZ: 180
+    });
+    animate(this.content, {
+      duration: Animation.defaultTime,
+      easing: "easeInOutSine",
+      opacity: 1
+    });
+  }
+  rotateChevronDown() {
+    animate(this.chevronRef, {
+      duration: Animation.defaultTime,
+      easing: "easeInOutSine",
+      rotateZ: 0
+    });
+    animate(this.content, {
+      duration: Animation.defaultTime,
+      easing: "easeInOutSine",
+      opacity: 0
+    });
+  }
+  render() {
+    return h(Host, { key: "08686a07866cce941b0d3fee3c59acda57fd9697", class: {
+      [`blind-${this.variant}`]: true
+    } }, h("div", { key: "37c3d29dfa4113fa51971c8487158c30dcac0cf6", class: "blind-header-wrapper" }, h("button", { key: "1a725a4d9991ef417fdcd06d83565a994d20bc10", class: {
+      "blind-header": true,
+      [`blind-${this.variant}`]: true,
+      closed: this.collapsed
+    }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: () => this.onHeaderClick() }, h("slot", { key: "acae9cd5182dcfb6003a18713709ef5c5f5ba5c9", name: "custom-header" })), h("div", { key: "c183148b712d24ce5416f704496af3982c5f063c", class: "blind-header-content" }, h("ix-icon", { key: "679080e49ed99d10528d6b44f483349794880e9f", class: "collapse-icon", name: iconChevronDownSmall, color: this.variant === "filled" || this.variant === "outline" ? "color-std-text" : `color-${this.variant}--contrast`, ref: (ref) => this.chevronRef = ref }), h("div", { key: "790921a5077d08519a86e53da114615c62ab3520", class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== void 0 ? h(Fragment, null, this.icon && h("ix-icon", { class: "blind-header-title-icon", name: this.icon, color: this.variant === "filled" || this.variant === "outline" ? "color-std-text" : `color-${this.variant}--contrast` }), h("div", { class: "blind-header-title-row" }, h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), this.sublabel && h("div", { class: "blind-header-title-col" }, h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-sublabel" }, this.sublabel)))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" }))) : null))), h("section", { key: "e009be22aca2af68a71115cd828695ab6f16d230", id: `ix-blind-content-section-${this.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { key: "482ac28924b2edd0b5b6a751a07434764fcb64f8", class: {
+      "blind-content": true,
+      hide: this.collapsed
+    } }, !this.collapsed ? h("slot", null) : null)));
+  }
+  static get watchers() {
+    return {
+      "collapsed": [{
+        "animation": 0
+      }]
+    };
+  }
+};
+Blind.style = blindCss();
+export {
+  Blind as ix_blind
+};