@siemens/ix 2.1.0 → 2.1.1-beta.0

package/dist/siemens-ix/p-abc9c138.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,H as o,g as i}from"./p-a9cf5eb2.js";import{c as a}from"./p-e898862b.js";const s=':host{position:relative;display:block;cursor:pointer;height:var(--ix-menu-item-height, 3rem);min-height:var(--ix-menu-item-height, 3rem);max-height:var(--ix-menu-item-height, 3rem)}:host .tab{all:unset;box-sizing:border-box;display:flex;position:relative;align-items:center;height:var(--ix-menu-item-height, 3rem);width:100%;z-index:500;padding-left:0.875rem}:host .tab:not(.disabled):not(:disabled).hover,:host .tab:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .tab:not(.disabled):not(:disabled).active,:host .tab:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .tab-icon{color:var(--theme-nav-item-primary-icon--color);position:relative;pointer-events:none}:host .tab:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:-1px}:host .tab:not(:last-child){margin-bottom:0.5rem}:host .notification{display:inline-flex;position:absolute;top:0.25rem;left:1.75rem}:host .notification .pill{display:inline-flex;justify-content:center;align-items:center;height:0.5rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}:host .tab-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}:host(.active) .tab,:host(.selected) .tab{background-color:var(--theme-nav-item-primary--background--selected)}:host(.active) .tab::before,:host(.selected) .tab::before{content:"";background-color:var(--theme-nav-item-primary--border-color--selected);height:var(--ix-menu-item-height, 3rem);width:0.25rem;left:0;position:absolute}:host(.active) .tab>.glyph,:host(.selected) .tab>.glyph{color:var(--theme-nav-item-primary-icon--color--selected)}:host(.disabled){color:var(--theme-color-weak-text);pointer-events:none;cursor:default}:host(.disabled) .tab>.tab-icon{color:var(--theme-color-weak-text)}:host(.disabled) .tab-text{color:var(--theme-color-weak-text)}:host(.bottom-tab),:host([slot=bottom]){min-height:2.25rem;height:2.25rem;max-height:2.25rem}:host(.bottom-tab) .tab,:host([slot=bottom]) .tab{height:2.25rem}:host(.bottom-tab) .tab::before,:host([slot=bottom]) .tab::before{height:2.25rem;background-color:transparent}:host(.bottom-tab).active:hover,:host(.bottom-tab).selected:hover,:host([slot=bottom]).active:hover,:host([slot=bottom]).selected:hover{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab).active:active,:host(.bottom-tab).selected:active,:host([slot=bottom]).active:active,:host([slot=bottom]).selected:active{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.bottom-tab.active) .tab,:host(.bottom-tab.selected) .tab,:host(.active[slot=bottom]) .tab,:host(.selected[slot=bottom]) .tab{background-color:var(--theme-nav-item-secondary--background--selected)}:host(.tab-nested) .tab::before{display:none}';const r=s;const c=class{constructor(e){t(this,e);this.isHostedInsideCategory=false;this.home=false;this.bottom=false;this.tabIcon="document";this.icon=undefined;this.notifications=undefined;this.active=undefined;this.disabled=undefined;this.title=undefined}componentWillLoad(){this.isHostedInsideCategory=!!this.hostElement.closest("ix-menu-category")}componentWillRender(){this.title=this.hostElement.innerText}connectedCallback(){this.observer=a((()=>{this.title=this.hostElement.innerText}));this.observer.observe(this.hostElement,{subtree:true,childList:true,characterData:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){var t;let i={};if(this.home){i={slot:"home"}}if(this.bottom){i={slot:"bottom"}}return e(o,Object.assign({key:"d00ab2e99c623bcb386887b3173ad3afe94fcb35",class:{disabled:this.disabled,"home-tab":this.home,"bottom-tab":this.bottom,active:this.active,"tab-nested":this.isHostedInsideCategory}},i),e("button",{key:"8d6b02cc96f0477c1eee2a665fbbcbacfada4197",class:"tab",title:this.title,tabIndex:this.disabled?-1:0,role:"listitem"},e("ix-icon",{key:"881303994ea8a29f49ac55b4599bee5b4755beec",class:"tab-icon",name:(t=this.icon)!==null&&t!==void 0?t:this.tabIcon}),e("div",{key:"2cb1cc719ca29def024b81b72dfe6861d0e4c77c",class:"notification"},this.notifications?e("div",{class:"pill"},this.notifications):null),e("span",{key:"cbe86fcfb2b26056b7d9c3bc1ec26539ec7bf481",class:"tab-text text-default"},e("slot",{key:"9c71b007cff4024971ae2f64a3e3fbe2c8ac85b5"}))))}get hostElement(){return i(this)}};c.style=r;export{c as ix_menu_item};
-//# sourceMappingURL=p-abc9c138.entry.js.map

package/dist/siemens-ix/p-abc9c138.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["menuItemCss","IxMenuItemStyle0","MenuItem","this","isHostedInsideCategory","componentWillLoad","hostElement","closest","componentWillRender","title","innerText","connectedCallback","observer","createMutationObserver","observe","subtree","childList","characterData","disconnectedCallback","disconnect","render","extendedAttributes","home","slot","bottom","h","Host","Object","assign","key","class","disabled","active","tabIndex","role","name","_a","icon","tabIcon","notifications"],"sources":["src/components/menu-item/menu-item.scss?tag=ix-menu-item&encapsulation=shadow","src/components/menu-item/menu-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$menuItemHeight: 3rem;\n$menuItemPadding: 0.875rem;\n\n:host {\n  position: relative;\n  display: block;\n  cursor: pointer;\n\n  height: var(--ix-menu-item-height, $menuItemHeight);\n  min-height: var(--ix-menu-item-height, $menuItemHeight);\n  max-height: var(--ix-menu-item-height, $menuItemHeight);\n\n  .tab {\n    all: unset;\n    box-sizing: border-box;\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: var(--ix-menu-item-height, $menuItemHeight);\n    width: calc(100%);\n    z-index: 500;\n    padding-left: $menuItemPadding;\n\n    @include ghost-hover-pressed;\n  }\n\n  .tab-icon {\n    color: var(--theme-nav-item-primary-icon--color);\n    position: relative;\n    pointer-events: none;\n  }\n\n  .tab:focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: -1px;\n  }\n\n  .tab:not(:last-child) {\n    margin-bottom: $small-space;\n  }\n\n  .notification {\n    display: inline-flex;\n    position: absolute;\n    top: 0.25rem;\n    left: 1.75rem;\n\n    .pill {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 0.5rem;\n      min-width: 1rem;\n      position: relative;\n      border-radius: 6.25rem;\n      background-color: var(--theme-color-primary);\n      border-radius: 6.25rem;\n      font-size: 0.75rem;\n      font-weight: bold;\n      line-height: 1;\n      font-family: Siemens Sans, Arial, sans-serif;\n      color: var(--theme-color-primary--contrast);\n      padding: $tiny-space;\n    }\n  }\n\n  .tab-text {\n    @include ellipsis;\n    color: var(--theme-nav-item-primary--color);\n    margin: 0 1.25rem;\n    user-select: none;\n    width: 100%;\n  }\n}\n\n:host(.active),\n:host(.selected) {\n  .tab {\n    background-color: var(--theme-nav-item-primary--background--selected);\n  }\n\n  .tab::before {\n    content: '';\n    background-color: var(--theme-nav-item-primary--border-color--selected);\n    height: var(--ix-menu-item-height, $menuItemHeight);\n    width: 0.25rem;\n    left: 0;\n    position: absolute;\n  }\n\n  .tab > .glyph {\n    color: var(--theme-nav-item-primary-icon--color--selected);\n  }\n}\n\n:host(.disabled) {\n  color: var(--theme-color-weak-text);\n  pointer-events: none;\n  cursor: default;\n\n  .tab > .tab-icon {\n    color: var(--theme-color-weak-text);\n  }\n\n  .tab-text {\n    color: var(--theme-color-weak-text);\n  }\n}\n\n:host(.bottom-tab),\n:host([slot='bottom']) {\n  $bottom-height: 2.25rem;\n\n  min-height: $bottom-height;\n  height: $bottom-height;\n  max-height: $bottom-height;\n\n  .tab {\n    height: $bottom-height;\n  }\n\n  .tab::before {\n    height: $bottom-height;\n    background-color: transparent;\n  }\n\n  &.active,\n  &.selected {\n    &:hover {\n      background-color: var(--theme-nav-item-secondary--background--selected);\n    }\n\n    &:active {\n      background-color: var(--theme-nav-item-secondary--background--selected);\n    }\n  }\n}\n\n:host(.bottom-tab.active),\n:host(.bottom-tab.selected),\n:host(.active[slot='bottom']),\n:host(.selected[slot='bottom']) {\n  .tab {\n    background-color: var(--theme-nav-item-secondary--background--selected);\n  }\n}\n\n:host(.tab-nested) {\n  .tab::before {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n/**\n * @slot menu-item-label Custom label\n */\n@Component({\n  tag: 'ix-menu-item',\n  styleUrl: 'menu-item.scss',\n  shadow: true,\n})\nexport class MenuItem {\n  /**\n   * Move the Tab to a top position.\n   */\n  @Prop() home = false;\n\n  /**\n   * Caution: this is no longer working. Please use slot=\"bottom\" instead.\n   *\n   * Place tab on bottom\n   */\n  @Prop() bottom = false;\n\n  /**\n   * Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n   *\n   * @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0\n   */\n  @Prop() tabIcon = 'document';\n\n  /**\n   * Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show notification count on tab\n   */\n  @Prop() notifications: number;\n\n  /**\n   * State to display active\n   */\n  @Prop() active: boolean;\n\n  /**\n   * Disable tab and remove event handlers\n   */\n  @Prop() disabled: boolean;\n\n  @Element() hostElement: HTMLIxMenuItemElement;\n\n  @State() title: string;\n\n  private observer: MutationObserver;\n  private isHostedInsideCategory = false;\n\n  componentWillLoad() {\n    this.isHostedInsideCategory =\n      !!this.hostElement.closest('ix-menu-category');\n  }\n\n  componentWillRender() {\n    this.title = this.hostElement.innerText;\n  }\n\n  connectedCallback() {\n    this.observer = createMutationObserver(() => {\n      this.title = this.hostElement.innerText;\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    let extendedAttributes = {};\n    if (this.home) {\n      extendedAttributes = {\n        slot: 'home',\n      };\n    }\n\n    if (this.bottom) {\n      extendedAttributes = {\n        slot: 'bottom',\n      };\n    }\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          'home-tab': this.home,\n          'bottom-tab': this.bottom,\n          active: this.active,\n          'tab-nested': this.isHostedInsideCategory,\n        }}\n        {...extendedAttributes}\n      >\n        <button\n          class=\"tab\"\n          title={this.title}\n          tabIndex={this.disabled ? -1 : 0}\n          role=\"listitem\"\n        >\n          <ix-icon\n            class={'tab-icon'}\n            name={this.icon ?? this.tabIcon}\n          ></ix-icon>\n          <div class=\"notification\">\n            {this.notifications ? (\n              <div class=\"pill\">{this.notifications}</div>\n            ) : null}\n          </div>\n          <span class=\"tab-text text-default\">\n            <slot></slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAc,+lGACpB,MAAAC,EAAeD,E,MCmBFE,EAAQ,M,yBA6CXC,KAAAC,uBAAyB,M,UAzClB,M,YAOE,M,aAOC,W,oHA6BlB,iBAAAC,GACEF,KAAKC,yBACDD,KAAKG,YAAYC,QAAQ,mB,CAG/B,mBAAAC,GACEL,KAAKM,MAAQN,KAAKG,YAAYI,S,CAGhC,iBAAAC,GACER,KAAKS,SAAWC,GAAuB,KACrCV,KAAKM,MAAQN,KAAKG,YAAYI,SAAS,IAGzCP,KAAKS,SAASE,QAAQX,KAAKG,YAAa,CACtCS,QAAS,KACTC,UAAW,KACXC,cAAe,M,CAInB,oBAAAC,GACE,GAAIf,KAAKS,SAAU,CACjBT,KAAKS,SAASO,Y,EAIlB,MAAAC,G,MACE,IAAIC,EAAqB,GACzB,GAAIlB,KAAKmB,KAAM,CACbD,EAAqB,CACnBE,KAAM,O,CAIV,GAAIpB,KAAKqB,OAAQ,CACfH,EAAqB,CACnBE,KAAM,S,CAGV,OACEE,EAACC,EAAIC,OAAAC,OAAA,CAAAC,IAAA,2CACHC,MAAO,CACLC,SAAU5B,KAAK4B,SACf,WAAY5B,KAAKmB,KACjB,aAAcnB,KAAKqB,OACnBQ,OAAQ7B,KAAK6B,OACb,aAAc7B,KAAKC,yBAEjBiB,GAEJI,EAAA,UAAAI,IAAA,2CACEC,MAAM,MACNrB,MAAON,KAAKM,MACZwB,SAAU9B,KAAK4B,UAAY,EAAI,EAC/BG,KAAK,YAELT,EAAA,WAAAI,IAAA,2CACEC,MAAO,WACPK,MAAMC,EAAAjC,KAAKkC,QAAI,MAAAD,SAAA,EAAAA,EAAIjC,KAAKmC,UAE1Bb,EAAA,OAAAI,IAAA,2CAAKC,MAAM,gBACR3B,KAAKoC,cACJd,EAAA,OAAKK,MAAM,QAAQ3B,KAAKoC,eACtB,MAENd,EAAA,QAAAI,IAAA,2CAAMC,MAAM,yBACVL,EAAA,QAAAI,IAAA,+C"}

package/dist/siemens-ix/p-b4ca36ac.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,H as i,g as n}from"./p-a9cf5eb2.js";import{m as o}from"./p-64c3fa3d.js";const r=":host{display:contents}";const c=r;const a=class{constructor(s){t(this,s);this.itemClick=e(this,"itemClick",7);this.wrapperRef=o();this.icon=undefined;this.label=undefined}async getDropdownItemElement(){return this.wrapperRef.waitForCurrent()}render(){return s(i,{key:"ef07b2d6b51ae7356319d47e610517676651f2ae"},s("ix-dropdown-item",{key:"83b4d7597071c2337aae657211c2c093fabe5eb1",ref:this.wrapperRef,suppressChecked:true,icon:this.icon,label:this.label,onItemClick:t=>{t.preventDefault();t.stopPropagation()},onClick:t=>this.itemClick.emit(t)}))}get hostElement(){return n(this)}};a.style=c;export{a as ix_split_button_item};
-//# sourceMappingURL=p-b4ca36ac.entry.js.map

package/dist/siemens-ix/p-c5965787.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,H as e,g as r}from"./p-a9cf5eb2.js";import{f as n,i as o,s as h,o as a,a as d,c}from"./p-00df4a8c.js";function l(t){return t.getDropdownItemElement!==undefined&&typeof t.getDropdownItemElement==="function"}class u{constructor(){this.dropdowns=new Map;this.submenuIds={};this.isWindowListenerActive=false}connected(t){if(!this.isWindowListenerActive){this.addOverlayListeners()}this.dropdowns.set(t.getId(),t);if(t.discoverAllSubmenus){this.discoverSubmenus()}}disconnected(t){this.dropdowns.delete(t.getId())}discoverSubmenus(){this.dropdowns.forEach((t=>{t.discoverSubmenu()}))}present(t){if(!t.isPresent()&&t.willPresent()){this.submenuIds[t.getId()]=t.getAssignedSubmenuIds();t.present()}}dismissChildren(t){const s=this.submenuIds[t]||[];for(const t of s){this.dismiss(this.dropdowns.get(t))}}dismiss(t){if(t.isPresent()&&t.willDismiss()){this.dismissChildren(t.getId());t.dismiss();delete this.submenuIds[t.getId()]}}dismissAll(t){this.dropdowns.forEach((s=>{if(!(t===null||t===void 0?void 0:t.includes(s.getId()))&&(s.closeBehavior==="inside"||s.closeBehavior===false)){return}this.dismiss(s)}))}dismissOthers(t){let s=this.buildComposedPath(t,new Set);this.dropdowns.forEach((t=>{if(t.isPresent()&&t.closeBehavior!=="inside"&&t.closeBehavior!==false&&!s.has(t.getId())){this.dismiss(t)}}))}pathIncludesTrigger(t){return!!t.find((t=>{var s;return!!((s=t.hasAttribute)===null||s===void 0?void 0:s.call(t,"data-ix-dropdown-trigger"))}))}pathIncludesDropdown(t){return!!t.find((t=>t.tagName==="IX-DROPDOWN"))}buildComposedPath(t,s){if(this.submenuIds[t]){s.add(t)}for(const i of Object.keys(this.submenuIds)){if(this.submenuIds[i].includes(t)){this.buildComposedPath(i,s).forEach((t=>s.add(t)))}}return s}addOverlayListeners(){this.isWindowListenerActive=true;window.addEventListener("click",(t=>{const s=this.pathIncludesTrigger(t.composedPath());const i=this.pathIncludesDropdown(t.composedPath());if(!s&&!i){this.dismissAll()}}));window.addEventListener("keydown",(t=>{if(t.key==="Escape"){this.dismissAll([...this.dropdowns.keys()])}}))}}const f=(t,s,i)=>{t.addEventListener(s,i);return()=>{t.removeEventListener(s,i)}};const b=new u;const m=":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}: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 ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:50vh;overflow-y:auto}:host(:not(.show)){display:none}";const w=m;let p=0;const g=class{constructor(i){t(this,i);this.showChanged=s(this,"showChanged",7);this.autoUpdateCleanup=null;this.localUId=`dropdown-${p++}`;this.assignedSubmenu=[];this.suppressAutomaticPlacement=false;this.show=false;this.trigger=undefined;this.anchor=undefined;this.closeBehavior="both";this.placement="bottom-start";this.positioningStrategy="fixed";this.header=undefined;this.offset=undefined;this.overwriteDropdownStyle=undefined;this.discoverAllSubmenus=false}connectedCallback(){b.connected(this)}cacheSubmenuId(t){t.stopImmediatePropagation();t.preventDefault();const{detail:s}=t;if(this.assignedSubmenu.indexOf(s)===-1){this.assignedSubmenu.push(s)}}disconnectedCallback(){var t;(t=this.disposeListener)===null||t===void 0?void 0:t.call(this);b.disconnected(this);if(this.autoUpdateCleanup){this.autoUpdateCleanup()}}getAssignedSubmenuIds(){return this.assignedSubmenu}isPresent(){return this.show}present(){this.show=true}dismiss(){this.show=false}getId(){return this.localUId}willDismiss(){const{defaultPrevented:t}=this.showChanged.emit(false);return!t}willPresent(){const{defaultPrevented:t}=this.showChanged.emit(true);return!t}get dropdownItems(){return Array.from(this.hostElement.querySelectorAll("ix-dropdown-item"))}get slotElement(){return this.hostElement.shadowRoot.querySelector("slot")}addEventListenersFor(){var t;(t=this.disposeListener)===null||t===void 0?void 0:t.call(this);const s=()=>{if(!this.isPresent()){b.present(this)}else{b.dismiss(this)}b.dismissOthers(this.getId())};this.disposeListener=f(this.triggerElement,"click",(t=>{if(!t.defaultPrevented)s()}));this.triggerElement.setAttribute("data-ix-dropdown-trigger",this.localUId)}async discoverSubmenu(){var t;(t=this.triggerElement)===null||t===void 0?void 0:t.dispatchEvent(new CustomEvent("ix-assign-sub-menu",{bubbles:true,composed:false,cancelable:true,detail:this.localUId}))}async registerListener(t){this.triggerElement=await this.resolveElement(t);if(this.triggerElement){this.addEventListenersFor();this.discoverSubmenu()}}async resolveElement(t){const s=await this.findElement(t);return this.checkForSubmenuAnchor(s)}async checkForSubmenuAnchor(t){if(l(t)){const s=await t.getDropdownItemElement();s.isSubMenu=true;this.hostElement.style.zIndex=`var(--theme-z-index-dropdown)`;return s}if(t.tagName==="IX-DROPDOWN-ITEM"){t.isSubMenu=true;this.hostElement.style.zIndex=`var(--theme-z-index-dropdown)`}return t}findElement(t){if(t instanceof Promise){return t}if(typeof t==="object"){return Promise.resolve(t)}const s=`#${t}`;return new Promise((t=>{if(document.querySelector(s)){return t(document.querySelector(s))}const i=new MutationObserver((()=>{if(document.querySelector(s)){t(document.querySelector(s));i.disconnect()}}));i.observe(document.body,{childList:true,subtree:true})}))}async changedShow(t){if(t){this.anchorElement=await(this.anchor?this.resolveElement(this.anchor):this.resolveElement(this.trigger));if(this.anchorElement){this.applyDropdownPosition()}}}changedTrigger(t){this.registerListener(t)}isAnchorSubmenu(){var t;if(!l(this.anchorElement)){return!!((t=this.anchorElement)===null||t===void 0?void 0:t.closest("ix-dropdown-item"))}return true}async applyDropdownPosition(){if(!this.anchorElement){return}if(!this.dropdownRef){return}const t=this.isAnchorSubmenu();let s={strategy:this.positioningStrategy,middleware:[]};if(!this.suppressAutomaticPlacement){s.middleware.push(n({fallbackStrategy:"initialPlacement"}))}s.placement=t?"right-start":this.placement;s.middleware=[...s.middleware,o(),h()];if(this.offset){s.middleware.push(a(this.offset))}if(this.autoUpdateCleanup){this.autoUpdateCleanup();this.autoUpdateCleanup=null}this.autoUpdateCleanup=d(this.anchorElement,this.dropdownRef,(async()=>{const t=await c(this.anchorElement,this.dropdownRef,s);Object.assign(this.dropdownRef.style,{top:"0",left:"0",transform:`translate(${Math.round(t.x)}px,${Math.round(t.y)}px)`});if(this.overwriteDropdownStyle){const t=await this.overwriteDropdownStyle({dropdownRef:this.dropdownRef,triggerRef:this.triggerElement});Object.assign(this.dropdownRef.style,t)}}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}async componentDidLoad(){this.changedTrigger(this.trigger)}async componentDidRender(){await this.applyDropdownPosition();this.anchorElement=await(this.anchor?this.resolveElement(this.anchor):this.resolveElement(this.trigger))}isTriggerElement(t){const s=!!t.hasAttribute("data-ix-dropdown-trigger");return s}onDropdownClick(t){if(b.pathIncludesTrigger(t.composedPath())){t.preventDefault();if(this.isTriggerElement(t.target))return}if(this.closeBehavior==="inside"||this.closeBehavior==="both"){b.dismissAll([this.getId()])}b.dismissOthers(this.getId())}async updatePosition(){this.applyDropdownPosition()}render(){return i(e,{key:"6747db1bc7c303781400a3ede0635fc84a32d61b","data-ix-dropdown":this.localUId,ref:t=>this.dropdownRef=t,class:{"dropdown-menu":true,show:this.show,overflow:true},style:{margin:"0",minWidth:"0px",position:this.positioningStrategy},role:"list",onClick:t=>this.onDropdownClick(t)},i("div",{key:"3407be8208d5fb220b80744afb9a5aa938b4b658",style:{display:"contents"}},this.header&&i("div",{class:"dropdown-header"},this.header),i("slot",{key:"48df3c460330d7ef698b1624d93ad548e95902d0"})))}get hostElement(){return r(this)}static get watchers(){return{show:["changedShow"],trigger:["changedTrigger"]}}};g.style=w;export{g as ix_dropdown};
-//# sourceMappingURL=p-c5965787.entry.js.map

package/dist/siemens-ix/p-c5965787.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["hasDropdownItemWrapperImplemented","item","getDropdownItemElement","undefined","DropdownController","constructor","this","dropdowns","Map","submenuIds","isWindowListenerActive","connected","dropdown","addOverlayListeners","set","getId","discoverAllSubmenus","discoverSubmenus","disconnected","delete","forEach","discoverSubmenu","present","isPresent","willPresent","getAssignedSubmenuIds","dismissChildren","uid","childIds","id","dismiss","get","willDismiss","dismissAll","includeUids","includes","closeBehavior","dismissOthers","path","buildComposedPath","Set","has","pathIncludesTrigger","eventTargets","find","element","_a","hasAttribute","call","pathIncludesDropdown","tagName","add","ruleKey","Object","keys","key","window","addEventListener","event","hasTrigger","composedPath","hasDropdown","addDisposableEventListener","eventType","callback","removeEventListener","dropdownController","dropdownCss","IxDropdownStyle0","sequenceId","Dropdown","autoUpdateCleanup","localUId","assignedSubmenu","connectedCallback","cacheSubmenuId","stopImmediatePropagation","preventDefault","detail","indexOf","push","disconnectedCallback","disposeListener","show","defaultPrevented","showChanged","emit","dropdownItems","Array","from","hostElement","querySelectorAll","slotElement","shadowRoot","querySelector","addEventListenersFor","toggleController","triggerElement","setAttribute","dispatchEvent","CustomEvent","bubbles","composed","cancelable","registerListener","resolveElement","el","findElement","checkForSubmenuAnchor","dropdownItem","isSubMenu","style","zIndex","Promise","resolve","selector","document","observer","MutationObserver","disconnect","observe","body","childList","subtree","changedShow","newShow","anchorElement","anchor","trigger","applyDropdownPosition","changedTrigger","newTriggerValue","isAnchorSubmenu","closest","dropdownRef","isSubmenu","positionConfig","strategy","positioningStrategy","middleware","suppressAutomaticPlacement","flip","fallbackStrategy","placement","inline","shift","offset","autoUpdate","async","computeResponse","computePosition","assign","top","left","transform","Math","round","x","y","overwriteDropdownStyle","overwriteStyle","triggerRef","ancestorResize","ancestorScroll","elementResize","componentDidLoad","componentDidRender","isTriggerElement","onDropdownClick","target","updatePosition","render","h","Host","ref","class","overflow","margin","minWidth","position","role","onClick","display","header"],"sources":["src/components/dropdown/dropdown-controller.ts","src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { IxComponent } from '../utils/internal';\nexport type CloseBehavior = 'inside' | 'outside' | 'both' | boolean;\n\nexport interface DropdownInterface extends IxComponent {\n  closeBehavior: CloseBehavior;\n  discoverAllSubmenus: boolean;\n\n  getAssignedSubmenuIds(): string[];\n  getId(): string;\n\n  discoverSubmenu(): void;\n\n  isPresent(): boolean;\n\n  willPresent?(): boolean;\n  willDismiss?(): boolean;\n\n  present(): void;\n  dismiss(): void;\n}\n\nexport function hasDropdownItemWrapperImplemented(\n  item: unknown\n): item is DropdownItemWrapper {\n  return (\n    (item as DropdownItemWrapper).getDropdownItemElement !== undefined &&\n    typeof (item as DropdownItemWrapper).getDropdownItemElement === 'function'\n  );\n}\n\nexport interface DropdownItemWrapper {\n  getDropdownItemElement(): Promise<HTMLIxDropdownItemElement>;\n}\n\ntype SubmenuIds = Record<string, string[]>;\n\nclass DropdownController {\n  private dropdowns: Map<string, DropdownInterface> = new Map<\n    string,\n    DropdownInterface\n  >();\n  private submenuIds: SubmenuIds = {};\n\n  private isWindowListenerActive = false;\n\n  connected(dropdown: DropdownInterface) {\n    if (!this.isWindowListenerActive) {\n      this.addOverlayListeners();\n    }\n    this.dropdowns.set(dropdown.getId(), dropdown);\n\n    if (dropdown.discoverAllSubmenus) {\n      this.discoverSubmenus();\n    }\n  }\n\n  disconnected(dropdown: DropdownInterface) {\n    this.dropdowns.delete(dropdown.getId());\n  }\n\n  discoverSubmenus() {\n    this.dropdowns.forEach((dropdown) => {\n      dropdown.discoverSubmenu();\n    });\n  }\n\n  present(dropdown: DropdownInterface) {\n    if (!dropdown.isPresent() && dropdown.willPresent()) {\n      this.submenuIds[dropdown.getId()] = dropdown.getAssignedSubmenuIds();\n      dropdown.present();\n    }\n  }\n\n  dismissChildren(uid: string) {\n    const childIds = this.submenuIds[uid] || [];\n    for (const id of childIds) {\n      this.dismiss(this.dropdowns.get(id));\n    }\n  }\n\n  dismiss(dropdown: DropdownInterface) {\n    if (dropdown.isPresent() && dropdown.willDismiss()) {\n      this.dismissChildren(dropdown.getId());\n      dropdown.dismiss();\n      delete this.submenuIds[dropdown.getId()];\n    }\n  }\n\n  dismissAll(includeUids?: string[]) {\n    this.dropdowns.forEach((dropdown) => {\n      if (\n        !includeUids?.includes(dropdown.getId()) &&\n        (dropdown.closeBehavior === 'inside' ||\n          dropdown.closeBehavior === false)\n      ) {\n        return;\n      }\n\n      this.dismiss(dropdown);\n    });\n  }\n\n  dismissOthers(uid: string) {\n    let path = this.buildComposedPath(uid, new Set<string>());\n\n    this.dropdowns.forEach((dropdown) => {\n      if (\n        dropdown.isPresent() &&\n        dropdown.closeBehavior !== 'inside' &&\n        dropdown.closeBehavior !== false &&\n        !path.has(dropdown.getId())\n      ) {\n        this.dismiss(dropdown);\n      }\n    });\n  }\n\n  pathIncludesTrigger(eventTargets: EventTarget[]) {\n    return !!eventTargets.find(\n      (element: HTMLElement) =>\n        !!element.hasAttribute?.('data-ix-dropdown-trigger')\n    );\n  }\n\n  private pathIncludesDropdown(eventTargets: EventTarget[]) {\n    return !!eventTargets.find(\n      (element: HTMLElement) => element.tagName === 'IX-DROPDOWN'\n    );\n  }\n\n  private buildComposedPath(id: string, path: Set<string>): Set<string> {\n    if (this.submenuIds[id]) {\n      path.add(id);\n    }\n\n    for (const ruleKey of Object.keys(this.submenuIds)) {\n      if (this.submenuIds[ruleKey].includes(id)) {\n        this.buildComposedPath(ruleKey, path).forEach((key) => path.add(key));\n      }\n    }\n\n    return path;\n  }\n\n  private addOverlayListeners() {\n    this.isWindowListenerActive = true;\n\n    window.addEventListener('click', (event: PointerEvent) => {\n      const hasTrigger = this.pathIncludesTrigger(event.composedPath());\n      const hasDropdown = this.pathIncludesDropdown(event.composedPath());\n\n      if (!hasTrigger && !hasDropdown) {\n        this.dismissAll();\n      }\n    });\n\n    window.addEventListener('keydown', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.dismissAll([...this.dropdowns.keys()]);\n      }\n    });\n  }\n}\n\nexport const addDisposableEventListener = (\n  element: Element | Window | Document,\n  eventType: string,\n  callback: EventListenerOrEventListenerObject\n) => {\n  element.addEventListener(eventType, callback);\n\n  return () => {\n    element.removeEventListener(eventType, callback);\n  };\n};\n\nexport const addDisposableEventListenerAsArray = (\n  listener: {\n    element: Element | Window | Document;\n    eventType: string;\n    callback: EventListenerOrEventListenerObject;\n  }[]\n) => {\n  const disposables = listener.map(({ callback, element, eventType }) =>\n    addDisposableEventListener(element, eventType, callback)\n  );\n\n  return () => disposables.forEach((dispose) => dispose());\n};\n\nexport const dropdownController = new DropdownController();\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  background-color: var(--theme-color-2);\n  border-radius: var(--theme-default-border-radius);\n  @include ix-component;\n  min-width: 0px;\n  z-index: var(--theme-z-index-dropdown);\n  box-shadow: var(--theme-shadow-4);\n\n  padding: 0.25rem 0px;\n\n  .dropdown-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    color: var(--theme-menu-header--color);\n    padding: 0 $default-space;\n  }\n}\n\n:host(.overflow) {\n  max-height: 50vh;\n  overflow-y: auto;\n}\n\n:host(:not(.show)) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { ComponentInterface } from '@stencil/core/internal';\nimport {\n  addDisposableEventListener,\n  CloseBehavior,\n  dropdownController,\n  DropdownInterface,\n  hasDropdownItemWrapperImplemented,\n} from './dropdown-controller';\nimport { AlignedPlacement } from './placement';\n\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown implements ComponentInterface, DropdownInterface {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   *\n   * @since 2.0.0\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement | Promise<HTMLElement>;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   * If the dropdown is a child of another one, it will be closed with the parent, regardless of its own close behavior.\n   */\n  @Prop() closeBehavior: CloseBehavior = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * @internal\n   * If initialisation of this dropdown is expected to be defered submenu discovery will have to be re-run globally by the controller.\n   * This property indicates the need for that to the controller.\n   */\n  @Prop() discoverAllSubmenus = false;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n  private localUId = `dropdown-${sequenceId++}`;\n  private assignedSubmenu: string[] = [];\n\n  connectedCallback(): void {\n    dropdownController.connected(this);\n  }\n\n  @Listen('ix-assign-sub-menu')\n  cacheSubmenuId(event: CustomEvent<string>) {\n    event.stopImmediatePropagation();\n    event.preventDefault();\n\n    const { detail } = event;\n\n    if (this.assignedSubmenu.indexOf(detail) === -1) {\n      this.assignedSubmenu.push(detail);\n    }\n  }\n\n  disconnectedCallback() {\n    this.disposeListener?.();\n    dropdownController.disconnected(this);\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  getAssignedSubmenuIds() {\n    return this.assignedSubmenu;\n  }\n\n  isPresent() {\n    return this.show;\n  }\n\n  present() {\n    this.show = true;\n  }\n\n  dismiss() {\n    this.show = false;\n  }\n\n  getId() {\n    return this.localUId;\n  }\n\n  willDismiss() {\n    const { defaultPrevented } = this.showChanged.emit(false);\n    return !defaultPrevented;\n  }\n\n  willPresent() {\n    const { defaultPrevented } = this.showChanged.emit(true);\n    return !defaultPrevented;\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  get slotElement() {\n    return this.hostElement.shadowRoot.querySelector('slot');\n  }\n\n  private disposeListener?: Function;\n\n  private addEventListenersFor() {\n    this.disposeListener?.();\n\n    const toggleController = () => {\n      if (!this.isPresent()) {\n        dropdownController.present(this);\n      } else {\n        dropdownController.dismiss(this);\n      }\n\n      dropdownController.dismissOthers(this.getId());\n    };\n\n    this.disposeListener = addDisposableEventListener(\n      this.triggerElement,\n      'click',\n      (event: PointerEvent) => {\n        if (!event.defaultPrevented) toggleController();\n      }\n    );\n    this.triggerElement.setAttribute('data-ix-dropdown-trigger', this.localUId);\n  }\n\n  /** @internal */\n  @Method()\n  async discoverSubmenu() {\n    this.triggerElement?.dispatchEvent(\n      new CustomEvent('ix-assign-sub-menu', {\n        bubbles: true,\n        composed: false,\n        cancelable: true,\n        detail: this.localUId,\n      })\n    );\n  }\n\n  private async registerListener(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      this.addEventListenersFor();\n      this.discoverSubmenu();\n    }\n  }\n\n  private async resolveElement(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ) {\n    const el = await this.findElement(element);\n\n    return this.checkForSubmenuAnchor(el);\n  }\n\n  private async checkForSubmenuAnchor(element: Element) {\n    if (hasDropdownItemWrapperImplemented(element)) {\n      const dropdownItem = await element.getDropdownItemElement();\n      dropdownItem.isSubMenu = true;\n      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n\n      return dropdownItem;\n    }\n\n    if (element.tagName === 'IX-DROPDOWN-ITEM') {\n      (element as HTMLIxDropdownItemElement).isSubMenu = true;\n      this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;\n    }\n\n    return element;\n  }\n\n  private findElement(\n    element: string | HTMLElement | Promise<HTMLElement>\n  ): Promise<Element> {\n    if (element instanceof Promise) {\n      return element;\n    }\n\n    if (typeof element === 'object') {\n      return Promise.resolve(element);\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n        // await this.checkForSubmenuAnchor();\n      }\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(newTriggerValue: string | HTMLElement | Promise<HTMLElement>) {\n    this.registerListener(newTriggerValue);\n  }\n\n  private isAnchorSubmenu(): boolean {\n    if (!hasDropdownItemWrapperImplemented(this.anchorElement)) {\n      // Is no official dropdown-item, but check if any dropdown-item\n      // is placed somewhere up the DOM\n      return !!this.anchorElement?.closest('ix-dropdown-item');\n    }\n\n    return true;\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n\n    positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  async componentDidLoad() {\n    this.changedTrigger(this.trigger);\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n    this.anchorElement = await (this.anchor\n      ? this.resolveElement(this.anchor)\n      : this.resolveElement(this.trigger));\n  }\n\n  private isTriggerElement(element: HTMLElement) {\n    const trigger = !!element.hasAttribute('data-ix-dropdown-trigger');\n\n    return trigger;\n  }\n\n  private onDropdownClick(event: PointerEvent) {\n    if (dropdownController.pathIncludesTrigger(event.composedPath())) {\n      event.preventDefault();\n\n      if (this.isTriggerElement(event.target as HTMLElement)) return;\n    }\n\n    if (this.closeBehavior === 'inside' || this.closeBehavior === 'both') {\n      dropdownController.dismissAll([this.getId()]);\n    }\n\n    dropdownController.dismissOthers(this.getId());\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        data-ix-dropdown={this.localUId}\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n        role=\"list\"\n        onClick={(event: PointerEvent) => this.onDropdownClick(event)}\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header && <div class=\"dropdown-header\">{this.header}</div>}\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-c65dca4b.entry.js

@@ -1,2 +0,0 @@
-import{r,h as e,H as t}from"./p-a9cf5eb2.js";const a=".sc-ix-playground-internal-h{display:block;position:relative;width:100vw;height:100vh;padding:0rem 0rem 0rem 0rem}";const n=a;const s=class{constructor(e){r(this,e)}render(){return e(t,{key:"64dc9d49b33337f3f1fbfef272dbe26bc08a17a8"})}};s.style=n;export{s as ix_playground_internal};
-//# sourceMappingURL=p-c65dca4b.entry.js.map

package/dist/siemens-ix/p-cb61d053.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["waitForElement","selector","doc","timeout","Promise","resolve","reject","startTime","Date","now","checkIfElementExist","dialog","querySelector","setTimeout","modalCss","IxModalStyle0","Modal","this","ariaAttributes","onKey","e","key","preventDefault","hostElement","shadowRoot","slideInModal","duration","animation","Animation","mediumTime","transformY","centered","anime","targets","opacity","translateY","translateX","easing","slideOutModal","completeCallback","complete","onModalClick","event","rect","getBoundingClientRect","isClickOutside","top","clientY","height","left","clientX","width","closeOnBackdropClick","dismissModal","showModal","modalVisible","console","error","reason","allowDismiss","beforeDismiss","undefined","close","JSON","stringify","type","dialogDismiss","emit","closeModal","dialogClose","componentDidLoad","componentWillLoad","a11yHostAttributes","render","h","Host","class","visible","backdrop","a11yBoolean","modal","size","onClose","onClick","onCancel","__decorate","OnListener","self","closeOnEscape","keyboard"],"sources":["src/components/utils/waitForElement.ts","src/components/modal/modal.scss?tag=ix-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport function waitForElement<R extends HTMLElement>(\n  selector: string,\n  doc: any,\n  timeout = 3000\n): Promise<R> {\n  return new Promise<R>((resolve, reject) => {\n    const startTime = Date.now();\n\n    const checkIfElementExist = () => {\n      const dialog = doc.querySelector(selector) satisfies R;\n\n      if (dialog) {\n        resolve(dialog);\n      } else {\n        if (Date.now() - startTime < timeout) {\n          setTimeout(checkIfElementExist);\n        } else {\n          reject();\n        }\n      }\n    };\n\n    checkIfElementExist();\n  });\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n::backdrop {\n  --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);\n}\n\n:focus-visible {\n  outline: none !important;\n}\n\n:host {\n  display: none;\n\n  dialog {\n    margin: 0;\n    left: 50%;\n  }\n\n  dialog::backdrop {\n    backdrop-filter: blur(2.7182817459106445px);\n  }\n\n  .modal {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    border: none;\n    border-radius: var(--theme-default-border-radius);\n    background: var(--theme-modal--background);\n    box-shadow: var(--theme-shadow-4);\n    color: var(--theme-color-std-text);\n    overflow: visible;\n    max-height: 80vh;\n    pointer-events: all;\n  }\n\n  .modal-size-360 {\n    width: 22.5rem;\n  }\n\n  .modal-size-480 {\n    width: 30rem;\n  }\n\n  .modal-size-600 {\n    width: 37.5rem;\n  }\n\n  .modal-size-720 {\n    width: 45rem;\n  }\n\n  .modal-size-840 {\n    width: 52.5rem;\n  }\n\n  .modal-size-full-width {\n    width: 95%;\n  }\n\n  .modal-size-full-screen {\n    left: 0px !important;\n    top: 0px !important;\n    transform: none !important;\n\n    width: calc(100% - 28px);\n    min-width: calc(100% - 28px);\n    max-width: calc(100% - 28px);\n\n    height: calc(100% - 28px);\n    min-height: calc(100% - 28px);\n    max-height: calc(100% - 28px);\n  }\n\n  .dialog-backdrop {\n    display: block;\n    position: fixed;\n    width: 100vw;\n    height: 100vh;\n    top: 0px;\n    left: 0px;\n\n    pointer-events: none;\n  }\n\n  ::slotted(ix-modal-footer) {\n    margin-top: auto;\n  }\n}\n\n:host(.visible) {\n  display: block;\n}\n\n:host(.align-center) {\n  dialog {\n    margin: 0;\n    left: 50%;\n    top: 50%;\n  }\n}\n\n:host(.no-backdrop) {\n  dialog::backdrop {\n    background-color: transparent !important;\n    backdrop-filter: none !important;\n  }\n}\n\n:host(.with-icon) {\n  ::slotted(ix-modal-footer),\n  ::slotted(ix-modal-content) {\n    margin-left: 2.5rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\n\nexport type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';\nexport type IxModalDynamicSize = 'full-width' | 'full-screen';\nexport type IxModalSize = IxModalFixedSize | IxModalDynamicSize;\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  private ariaAttributes: A11yAttributes = {};\n\n  @Element() hostElement!: HTMLIxModalElement;\n\n  /**\n   * Modal size\n   *\n   * @since 2.0.0\n   */\n  @Prop() size: IxModalSize = '360';\n\n  /**\n   * Should the modal be animated\n   */\n  @Prop() animation = true;\n\n  /**\n   * Show a backdrop behind the modal dialog\n   */\n  @Prop() backdrop = true;\n\n  /**\n   * Dismiss modal on backdrop click\n   *\n   * @since 2.0.0\n   */\n  @Prop() closeOnBackdropClick = false;\n\n  /**\n   * Is called before the modal is dismissed.\n   *\n   * - Return `true` to proceed in dismissing the modal\n   * - Return `false` to abort in dismissing the modal\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Use ESC to dismiss the modal\n   * @deprecated - Use closeOnEscape instead\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * If set to true the modal can be closed by pressing the Escape key\n   */\n  @Prop() closeOnEscape = true;\n\n  /**\n   * Dialog close\n   */\n  @Event() dialogClose: EventEmitter;\n\n  /**\n   * Dialog cancel\n   */\n  @Event() dialogDismiss: EventEmitter;\n\n  @State() modalVisible = false;\n\n  @OnListener<Modal>('keydown', (self) => !self.closeOnEscape || !self.keyboard)\n  onKey(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n    }\n  }\n\n  get dialog() {\n    return this.hostElement.shadowRoot.querySelector('dialog');\n  }\n\n  private slideInModal() {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [0, 1],\n      translateY: [0, transformY],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideOutModal(completeCallback: Function) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    let transformY = this.centered ? '-50%' : 40;\n\n    anime({\n      targets: this.dialog,\n      duration,\n      opacity: [1, 0],\n      translateY: [transformY, 0],\n      translateX: ['-50%', '-50%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onModalClick(event: MouseEvent) {\n    const rect = this.dialog.getBoundingClientRect();\n    const isClickOutside =\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width;\n    if (!isClickOutside && this.closeOnBackdropClick) {\n      this.dismissModal();\n    }\n  }\n\n  /**\n   * Show the dialog\n   */\n  @Method()\n  async showModal() {\n    try {\n      const dialog = await waitForElement<HTMLDialogElement>(\n        'dialog',\n        this.hostElement.shadowRoot\n      );\n      this.modalVisible = true;\n      dialog.showModal();\n    } catch (e) {\n      console.error('HTMLDialogElement not existing');\n    }\n  }\n\n  /**\n   * Dismiss the dialog\n   */\n  @Method()\n  async dismissModal<T = any>(reason?: T) {\n    let allowDismiss = true;\n\n    if (this.beforeDismiss !== undefined) {\n      allowDismiss = await this.beforeDismiss(reason);\n    }\n    if (!allowDismiss) {\n      return;\n    }\n\n    this.slideOutModal(() => {\n      this.modalVisible = false;\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'dismiss',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogDismiss.emit(reason);\n    });\n  }\n\n  /**\n   * Close the dialog\n   */\n  @Method()\n  async closeModal<T = any>(reason: T) {\n    this.slideOutModal(() => {\n      this.dialog.close(\n        JSON.stringify(\n          {\n            type: 'close',\n            reason,\n          },\n          null,\n          2\n        )\n      );\n\n      this.dialogClose.emit(reason);\n    });\n  }\n\n  componentDidLoad() {\n    this.slideInModal();\n  }\n\n  componentWillLoad() {\n    this.ariaAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.modalVisible,\n          'no-backdrop': this.backdrop === false,\n          'align-center': this.centered,\n        }}\n      >\n        <div class=\"dialog-backdrop\">\n          <dialog\n            aria-modal={a11yBoolean(true)}\n            aria-describedby={this.ariaAttributes['aria-describedby']}\n            aria-labelledby={this.ariaAttributes['aria-labelledby']}\n            class={{\n              modal: true,\n              [`modal-size-${this.size}`]: true,\n            }}\n            onClose={() => this.dismissModal()}\n            onClick={(event) => this.onModalClick(event)}\n            onCancel={(e) => {\n              e.preventDefault();\n              this.dismissModal();\n            }}\n          >\n            <slot></slot>\n          </dialog>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}