@siemens/ix 0.0.0-20240522073858 → 0.0.0-pr-1318-20240627080522

package/dist/siemens-ix/{p-e2464e13.entry.js.map → p-c6dcff7e.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["menuAvatarCss","IxMenuAvatarStyle0","MenuAvatar","this","avatarElementId","onSlotChange","slot","hostElement","shadowRoot","querySelector","elements","getSlottedElements","showContextMenu","length","render","h","Host","key","class","title","top","id","tabIndex","image","initials","bottom","trigger","placement","hidden","showLogoutButton","offset","mainAxis","onSlotchange","label","i18nLogout","icon","onClick","e","logoutClick","emit"],"sources":["src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=shadow","src/components/menu-avatar/menu-avatar.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/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  margin-bottom: 0.5rem;\n  margin-right: 0.75rem;\n\n  .avatar {\n    all: unset;\n    box-sizing: border-box;\n\n    display: flex;\n    align-items: center;\n    height: 2.5rem;\n    width: 100%;\n    max-height: 2.5rem;\n    padding-left: 0.25rem;\n    margin-left: 0.41rem;\n    margin-right: 0.35rem;\n    transition: var(--theme-default-time);\n\n    .avatar-name {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      white-space: nowrap;\n      margin-left: $default-space;\n      line-height: 1.14;\n\n      .text-default-single {\n        color: var(--theme-nav-item-primary--color);\n        @include ellipsis;\n      }\n    }\n\n    border-radius: 1.25rem;\n\n    @include hover {\n      background-color: var(--theme-avatar-btn--background--hover);\n      color: var(--theme-avatar-btn--color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-avatar-btn--background--active);\n      color: var(--theme-avatar-btn--color--active);\n    }\n  }\n\n  .avatar:focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\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  Prop,\n  State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  shadow: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom: string;\n\n  /**\n   * Display a avatar image\n   *\n   * @since 1.4.0\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   * @since 1.4.0\n   */\n  @Prop() initials: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout: string = 'Logout';\n\n  /**\n   *  Control the visibility of the logout button\n   *  @since 2.1.0\n   */\n  @Prop() showLogoutButton: boolean = true;\n\n  /**\n   * Control the visibility of the dropdown menu\n   * @since 2.1.0\n   */\n  @State() showContextMenu: boolean = false;\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n  }\n\n  render() {\n    return (\n      <Host slot=\"ix-menu-avatar\">\n        <button\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n          tabIndex={0}\n        >\n          <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </button>\n        <ix-dropdown\n          trigger={this.hostElement}\n          placement={'right-start'}\n          hidden={!this.showContextMenu && !this.showLogoutButton}\n          offset={{\n            mainAxis: 16,\n          }}\n        >\n          <slot onSlotchange={() => this.onSlotChange()}></slot>\n          {this.showLogoutButton ? (\n            <ix-menu-avatar-item\n              label={this.i18nLogout}\n              icon={'log-out'}\n              onClick={(e) => {\n                this.logoutClick.emit(e);\n              }}\n            ></ix-menu-avatar-item>\n          ) : null}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAgB,ouDACtB,MAAAC,EAAeD,E,MCwBFE,EAAU,M,kEAiDbC,KAAAC,gBAAkB,oB,sGAnBG,S,sBAMO,K,qBAMA,K,CASpC,YAAAC,GACE,MAAMC,EAAOH,KAAKI,YAAYC,WAAWC,cAAc,QACvD,IAAKH,EAAM,CACT,M,CAEF,MAAMI,EAAWC,EAAmBL,GACpCH,KAAKS,gBAAkBF,EAASG,SAAW,C,CAG7C,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACX,KAAK,kBACTS,EAAA,UAAAE,IAAA,2CACEC,MAAM,oCACNC,MAAOhB,KAAKiB,IACZC,GAAIlB,KAAKC,gBACTkB,SAAU,GAEVP,EAAA,aAAAE,IAAA,2CAAWM,MAAOpB,KAAKoB,MAAOC,SAAUrB,KAAKqB,WAE7CT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,sBAAsBC,MAAOhB,KAAKiB,KAC3CjB,KAAKiB,KAERL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,sBAAsBC,MAAOhB,KAAKsB,QAC3CtB,KAAKsB,UAIZV,EAAA,eAAAE,IAAA,2CACES,QAASvB,KAAKI,YACdoB,UAAW,cACXC,QAASzB,KAAKS,kBAAoBT,KAAK0B,iBACvCC,OAAQ,CACNC,SAAU,KAGZhB,EAAA,QAAAE,IAAA,2CAAMe,aAAc,IAAM7B,KAAKE,iBAC9BF,KAAK0B,iBACJd,EAAA,uBACEkB,MAAO9B,KAAK+B,WACZC,KAAM,UACNC,QAAUC,IACRlC,KAAKmC,YAAYC,KAAKF,EAAE,IAG1B,M"}
+{"version":3,"names":["menuAvatarCss","IxMenuAvatarStyle0","MenuAvatar","this","avatarElementId","onSlotChange","slot","hostElement","shadowRoot","querySelector","elements","getSlottedElements","showContextMenu","length","render","h","Host","key","class","title","top","id","tabIndex","image","initials","bottom","trigger","placement","hidden","showLogoutButton","offset","mainAxis","onSlotchange","label","i18nLogout","icon","onClick","e","logoutClick","emit"],"sources":["src/components/menu-avatar/menu-avatar.scss?tag=ix-menu-avatar&encapsulation=shadow","src/components/menu-avatar/menu-avatar.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/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  margin-bottom: 0.5rem;\n  margin-right: 0.75rem;\n\n  .avatar {\n    all: unset;\n    box-sizing: border-box;\n\n    display: flex;\n    align-items: center;\n    height: 2.5rem;\n    width: 100%;\n    max-height: 2.5rem;\n    padding-left: 0.25rem;\n    margin-left: 0.41rem;\n    margin-right: 0.35rem;\n    transition: var(--theme-default-time);\n\n    .avatar-name {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      white-space: nowrap;\n      margin-left: $default-space;\n      line-height: 1.14;\n\n      .text-default-single {\n        color: var(--theme-nav-item-primary--color);\n        @include ellipsis;\n      }\n    }\n\n    border-radius: 1.25rem;\n\n    @include hover {\n      background-color: var(--theme-avatar-btn--background--hover);\n      color: var(--theme-avatar-btn--color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-avatar-btn--background--active);\n      color: var(--theme-avatar-btn--color--active);\n    }\n  }\n\n  .avatar:focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\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  Prop,\n  State,\n} from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-menu-avatar',\n  styleUrl: 'menu-avatar.scss',\n  shadow: true,\n})\nexport class MenuAvatar {\n  @Element() hostElement!: HTMLIxMenuAvatarElement;\n\n  /**\n   * First line of text\n   */\n  @Prop() top: string;\n\n  /**\n   * Second line of text\n   */\n  @Prop() bottom: string;\n\n  /**\n   * Display a avatar image\n   *\n   * @since 1.4.0\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   * @since 1.4.0\n   */\n  @Prop() initials: string;\n\n  /**\n   * Use for translation\n   */\n  @Prop() i18nLogout: string = 'Logout';\n\n  /**\n   *  Control the visibility of the logout button\n   *  @since 2.1.0\n   */\n  @Prop() showLogoutButton: boolean = true;\n\n  /**\n   * Control the visibility of the dropdown menu\n   * @since 2.1.0\n   */\n  @State() showContextMenu: boolean = false;\n\n  /**\n   * Logout click\n   */\n  @Event() logoutClick: EventEmitter;\n\n  private avatarElementId = 'ix-menu-avatar-id';\n\n  onSlotChange() {\n    const slot = this.hostElement.shadowRoot.querySelector('slot');\n    if (!slot) {\n      return;\n    }\n    const elements = getSlottedElements(slot);\n    this.showContextMenu = elements.length !== 0;\n  }\n\n  render() {\n    return (\n      <Host slot=\"ix-menu-avatar\">\n        <button\n          class=\"nav-item top-item avatar no-hover\"\n          title={this.top}\n          id={this.avatarElementId}\n          tabIndex={0}\n        >\n          <ix-avatar image={this.image} initials={this.initials}></ix-avatar>\n\n          <div class=\"avatar-name\">\n            <span class=\"text-default-single\" title={this.top}>\n              {this.top}\n            </span>\n            <span class=\"text-default-single\" title={this.bottom}>\n              {this.bottom}\n            </span>\n          </div>\n        </button>\n        <ix-dropdown\n          trigger={this.hostElement}\n          placement={'right-start'}\n          hidden={!this.showContextMenu && !this.showLogoutButton}\n          offset={{\n            mainAxis: 16,\n          }}\n        >\n          <slot onSlotchange={() => this.onSlotChange()}></slot>\n          {this.showLogoutButton ? (\n            <ix-menu-avatar-item\n              label={this.i18nLogout}\n              icon={'log-out'}\n              onClick={(e) => {\n                this.logoutClick.emit(e);\n              }}\n            ></ix-menu-avatar-item>\n          ) : null}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAgB,g4DACtB,MAAAC,EAAeD,E,MCwBFE,EAAU,M,kEAiDbC,KAAAC,gBAAkB,oB,sGAnBG,S,sBAMO,K,qBAMA,K,CASpC,YAAAC,GACE,MAAMC,EAAOH,KAAKI,YAAYC,WAAWC,cAAc,QACvD,IAAKH,EAAM,CACT,M,CAEF,MAAMI,EAAWC,EAAmBL,GACpCH,KAAKS,gBAAkBF,EAASG,SAAW,C,CAG7C,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACX,KAAK,kBACTS,EAAA,UAAAE,IAAA,2CACEC,MAAM,oCACNC,MAAOhB,KAAKiB,IACZC,GAAIlB,KAAKC,gBACTkB,SAAU,GAEVP,EAAA,aAAAE,IAAA,2CAAWM,MAAOpB,KAAKoB,MAAOC,SAAUrB,KAAKqB,WAE7CT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,sBAAsBC,MAAOhB,KAAKiB,KAC3CjB,KAAKiB,KAERL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,sBAAsBC,MAAOhB,KAAKsB,QAC3CtB,KAAKsB,UAIZV,EAAA,eAAAE,IAAA,2CACES,QAASvB,KAAKI,YACdoB,UAAW,cACXC,QAASzB,KAAKS,kBAAoBT,KAAK0B,iBACvCC,OAAQ,CACNC,SAAU,KAGZhB,EAAA,QAAAE,IAAA,2CAAMe,aAAc,IAAM7B,KAAKE,iBAC9BF,KAAK0B,iBACJd,EAAA,uBACEkB,MAAO9B,KAAK+B,WACZC,KAAM,UACNC,QAAUC,IACRlC,KAAKmC,YAAYC,KAAKF,EAAE,IAG1B,M"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as i,g as s}from"./p-f86a894a.js";import{c as n,a as o}from"./p-42c66a44.js";import{r}from"./p-7f4b78e5.js";import"./p-da8517ed.js";const a=":host{display:block}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}";const h=a;const l=class{constructor(e){t(this,e);this.observer=new MutationObserver((()=>this.checkForRequired()));this.htmlFor=undefined;this.helperText=undefined;this.invalidText=undefined;this.validText=undefined;this.infoText=undefined;this.warningText=undefined;this.validationResults={isInfo:false,isInvalid:false,isValid:false,isWarning:false,isInvalidByRequired:false}}connectedCallback(){this.observer.observe(window.document,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}componentWillRender(){this.checkForRequired()}async checkForRequired(){if(!this.htmlFor){return}const t=document.getElementById(this.htmlFor);if(!t){return}if(this.classObserver){this.classObserver.destroy()}this.classObserver=n(t,(()=>{this.validationResults=o(t)}));this.validationResults=o(t)}render(){return e(i,{key:"3db11c77053d58bea53cb0be437354ebfda9f004"},r(Object.assign({helperText:this.helperText,invalidText:this.invalidText,validText:this.validText,infoText:this.infoText,warningText:this.warningText},this.validationResults)))}get hostElement(){return s(this)}};l.style=h;export{l as ix_helper_text};
+//# sourceMappingURL=p-c71d1690.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["helperTextCss","IxHelperTextStyle0","HelperText","this","observer","MutationObserver","checkForRequired","isInfo","isInvalid","isValid","isWarning","isInvalidByRequired","connectedCallback","observe","window","document","childList","subtree","disconnectedCallback","disconnect","componentWillRender","htmlFor","forElement","getElementById","classObserver","destroy","createClassMutationObserver","validationResults","checkFieldClasses","render","h","Host","key","renderHelperText","Object","assign","helperText","invalidText","validText","infoText","warningText"],"sources":["src/components/helper-text/helper-text.scss?tag=ix-helper-text&encapsulation=shadow","src/components/helper-text/helper-text.tsx"],"sourcesContent":["@import \"./../field-wrapper/field-wrapper.mixins.scss\";\n\n:host {\n  display: block;\n\n  @include helper-text;\n}\n","import { Component, Host, Prop, State, h, Element } from '@stencil/core';\nimport {\n  ClassMutationObserver,\n  HTMLIxFormComponentElement,\n  ValidationResults,\n  checkFieldClasses,\n  createClassMutationObserver,\n} from '../utils/field';\nimport { renderHelperText } from '../field-wrapper/helper-text-util';\nimport { IxComponent } from '../utils/internal';\n\n@Component({\n  tag: 'ix-helper-text',\n  styleUrl: 'helper-text.scss',\n  shadow: true,\n})\nexport class HelperText implements IxComponent {\n  @Element() hostElement!: HTMLIxHelperTextElement;\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlFor?: string;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  @State() validationResults: ValidationResults = {\n    isInfo: false,\n    isInvalid: false,\n    isValid: false,\n    isWarning: false,\n    isInvalidByRequired: false,\n  };\n\n  private observer = new MutationObserver(() => this.checkForRequired());\n  private classObserver?: ClassMutationObserver;\n\n  connectedCallback() {\n    this.observer.observe(window.document, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForRequired();\n  }\n\n  private async checkForRequired() {\n    if (!this.htmlFor) {\n      return;\n    }\n    const forElement = document.getElementById(\n      this.htmlFor\n    ) as HTMLIxFormComponentElement<unknown>;\n    if (!forElement) {\n      return;\n    }\n\n    if (this.classObserver) {\n      this.classObserver.destroy();\n    }\n    this.classObserver = createClassMutationObserver(forElement, () => {\n      this.validationResults = checkFieldClasses(forElement);\n    });\n    this.validationResults = checkFieldClasses(forElement);\n  }\n\n  render() {\n    return (\n      <Host>\n        {renderHelperText({\n          helperText: this.helperText,\n          invalidText: this.invalidText,\n          validText: this.validText,\n          infoText: this.infoText,\n          warningText: this.warningText,\n          ...this.validationResults,\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"2JAAA,MAAMA,EAAgB,mdACtB,MAAAC,EAAeD,E,MCeFE,EAAU,M,yBAwCbC,KAAAC,SAAW,IAAIC,kBAAiB,IAAMF,KAAKG,qB,+KARH,CAC9CC,OAAQ,MACRC,UAAW,MACXC,QAAS,MACTC,UAAW,MACXC,oBAAqB,M,CAMvB,iBAAAC,GACET,KAAKC,SAASS,QAAQC,OAAOC,SAAU,CACrCC,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,GACE,GAAIf,KAAKC,SAAU,CACjBD,KAAKC,SAASe,Y,EAIlB,mBAAAC,GACEjB,KAAKG,kB,CAGC,sBAAMA,GACZ,IAAKH,KAAKkB,QAAS,CACjB,M,CAEF,MAAMC,EAAaP,SAASQ,eAC1BpB,KAAKkB,SAEP,IAAKC,EAAY,CACf,M,CAGF,GAAInB,KAAKqB,cAAe,CACtBrB,KAAKqB,cAAcC,S,CAErBtB,KAAKqB,cAAgBE,EAA4BJ,GAAY,KAC3DnB,KAAKwB,kBAAoBC,EAAkBN,EAAW,IAExDnB,KAAKwB,kBAAoBC,EAAkBN,E,CAG7C,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFC,EAAgBC,OAAAC,OAAA,CACfC,WAAYjC,KAAKiC,WACjBC,YAAalC,KAAKkC,YAClBC,UAAWnC,KAAKmC,UAChBC,SAAUpC,KAAKoC,SACfC,YAAarC,KAAKqC,aACfrC,KAAKwB,oB"}

package/dist/siemens-ix/p-cce7a3d5.js

@@ -0,0 +1,2 @@
+import{h as n}from"./p-f86a894a.js";import{a as e}from"./p-36c0f378.js";import{s as t}from"./p-42c66a44.js";import{a}from"./p-71206084.js";function i(e){return n("textarea",Object.assign({readOnly:e.readonly,disabled:e.disabled,maxLength:e.maxLength,minLength:e.minLength,cols:Number(e.textareaCols),rows:Number(e.textareaRows),ref:e.textAreaRef,class:{"is-invalid":e.isInvalid},required:e.required,value:e.value,placeholder:e.placeholder,onChange:n=>{const t=n.target;e.valueChange(t.value)},onInput:n=>{const t=n.target;e.updateFormInternalValue(t.value)},onBlur:()=>e.onBlur(),style:{height:e.textareaHeight,width:e.textareaWidth}},e.ariaAttributes))}function o(e){return n("input",Object.assign({id:e.id,autoComplete:"off",readOnly:e.readonly,disabled:e.disabled,min:e.min,max:e.max,maxLength:e.maxLength?Number(e.maxLength):undefined,minLength:e.maxLength?Number(e.minLength):undefined,ref:e.inputRef,pattern:e.pattern,type:e.type,class:{"is-invalid":e.isInvalid},required:e.required,value:e.value,placeholder:e.placeholder,onKeyPress:n=>e.onKeyPress(n),onChange:n=>{const t=n.target;e.valueChange(t.value)},onInput:n=>{const t=n.target;e.updateFormInternalValue(t.value)},onBlur:()=>e.onBlur()},e.ariaAttributes))}function r(e,t){return n("div",{class:"postfix-container",ref:e.postfixRef},n("slot",{name:"postfix",onSlotchange:e.onSlotChange}),t)}function s(e){return n("div",{class:"prefix-container",ref:e.prefixRef},n("slot",{name:"prefix",onSlotchange:e.onSlotChange}))}function u(n){const e=5;a({targets:n,duration:200,easing:"easeInOutSine",loop:2,translateX:[{value:e*-1},{value:e},{value:e/-2},{value:e/2},{value:0}]})}function c(n,e){n.isInvalid=e.isInvalid||e.isInvalidByRequired;n.isValid=e.isValid;n.isInfo=e.isInfo;n.isWarning=e.isWarning}function f(n,e){if(n.allowedCharactersPattern){const t=new RegExp(n.allowedCharactersPattern);if(!t.test(e.key)){e.preventDefault();u(n.inputRef.current)}}}async function l(n,e){const a=e.validity;const i=n.validityStateChange.emit(a);if(i.defaultPrevented){return}if(!n.value){return}const o=await t(n);if(o){return}const{valid:r}=a;n.hostElement.classList.toggle("ix-invalid",!r)}function d(n,e){n.ixBlur.emit();l(n,e)}function p(n,e,t){var a;if(!n){return}if(e===0){return}const i=`${(e+12)/16}rem`;if(t.postfix){n.style.paddingRight=`calc(${i} + ${(a=t.additionalPaddingRight)!==null&&a!==void 0?a:"0rem"})`}else{n.style.paddingLeft=i}}function m(n,e,t){const a=n.getBoundingClientRect();const i=e.getBoundingClientRect();if(a){p(t,a.width,{postfix:false})}if(i){p(t,i.width,{postfix:true})}}function v(n){const t={"aria-invalid":`${e(n.isInvalid)}`,"aria-required":`${e(n.required)}`};if(n.isInvalid&&n.invalidText){t["aria-errormessage"]=n.invalidText}return t}export{o as I,r as P,i as T,m as a,s as b,p as c,f as d,l as e,v as g,c as m,d as o};
+//# sourceMappingURL=p-cce7a3d5.js.map

package/dist/siemens-ix/p-cce7a3d5.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TextareaElement","props","h","Object","assign","readOnly","readonly","disabled","maxLength","minLength","cols","Number","textareaCols","rows","textareaRows","ref","textAreaRef","class","isInvalid","required","value","placeholder","onChange","changeEvent","target","valueChange","onInput","inputEvent","updateFormInternalValue","onBlur","style","height","textareaHeight","width","textareaWidth","ariaAttributes","InputElement","id","autoComplete","min","max","undefined","inputRef","pattern","type","onKeyPress","event","PostfixSlot","children","postfixRef","name","onSlotchange","onSlotChange","PrefixSlot","prefixRef","shakeInput","input","xMax","anime","targets","duration","easing","loop","translateX","mapValidationResult","result","isInvalidByRequired","isValid","isInfo","isWarning","checkAllowedKeys","comp","allowedCharactersPattern","regex","RegExp","test","key","preventDefault","current","async","checkInternalValidity","validityState","validity","eventResult","validityStateChange","emit","defaultPrevented","skipValidation","shouldSuppressInternalValidation","valid","hostElement","classList","toggle","onInputBlur","ixBlur","applyPostfixPadding","inputElement","options","padding","postfix","paddingRight","_a","additionalPaddingRight","paddingLeft","adjustPaddingForPrefixAndPostfix","prefixElement","postfixElement","prefixBoundingRect","getBoundingClientRect","postfixBoundingRect","getAriaAttributesForInput","component","inputAria","a11yBoolean","invalidText"],"sources":["src/components/text-field/input.fc.tsx","src/components/text-field/text-field.animation.ts","src/components/text-field/text-field.util.ts"],"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 */\nimport { h } from '@stencil/core';\nimport { MakeRef } from '../utils/make-ref';\nimport { A11yAttributes } from '../utils/a11y';\n\nexport function TextareaElement(props: {\n  textareaHeight?: string;\n  textareaWidth?: string;\n  textareaRows?: string;\n  textareaCols?: string;\n  disabled: boolean;\n  readonly: boolean;\n  maxLength?: number;\n  minLength?: number;\n  isInvalid: boolean;\n  required: boolean;\n  value: string;\n  placeholder?: string;\n  textAreaRef: (el: HTMLTextAreaElement) => void;\n  valueChange: (value: string) => void;\n  updateFormInternalValue: (value: string) => void;\n  onBlur: () => void;\n  ariaAttributes?: A11yAttributes;\n}) {\n  return (\n    <textarea\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      maxLength={props.maxLength}\n      minLength={props.minLength}\n      cols={Number(props.textareaCols)}\n      rows={Number(props.textareaRows)}\n      ref={props.textAreaRef}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onChange={(changeEvent) => {\n        const target = changeEvent.target as HTMLInputElement;\n        props.valueChange(target.value);\n      }}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      style={{ height: props.textareaHeight, width: props.textareaWidth }}\n      {...props.ariaAttributes}\n    ></textarea>\n  );\n}\n\nexport function InputElement(props: {\n  id: string;\n  disabled: boolean;\n  readonly: boolean;\n  maxLength?: string | number;\n  minLength?: string | number;\n  max?: string | number;\n  min?: string | number;\n  pattern?: string;\n  type: string;\n  isInvalid: boolean;\n  required: boolean;\n  value: string | number;\n  placeholder?: string;\n  inputRef: (el: HTMLInputElement) => void;\n  onKeyPress: (event: KeyboardEvent) => void;\n  valueChange: (value: string) => void;\n  updateFormInternalValue: (value: string) => void;\n  onBlur: () => void;\n  ariaAttributes?: A11yAttributes;\n}) {\n  return (\n    <input\n      id={props.id}\n      autoComplete=\"off\"\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      min={props.min}\n      max={props.max}\n      maxLength={props.maxLength ? Number(props.maxLength) : undefined}\n      minLength={props.maxLength ? Number(props.minLength) : undefined}\n      ref={props.inputRef}\n      pattern={props.pattern}\n      type={props.type}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onKeyPress={(event) => props.onKeyPress(event)}\n      onChange={(changeEvent) => {\n        const target = changeEvent.target as HTMLInputElement;\n        props.valueChange(target.value);\n      }}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      {...props.ariaAttributes}\n    ></input>\n  );\n}\n\nexport function PostfixSlot(\n  props: {\n    postfixRef: MakeRef<HTMLDivElement>;\n    onSlotChange?: (e: Event) => void;\n  },\n  children\n) {\n  return (\n    <div class=\"postfix-container\" ref={props.postfixRef}>\n      <slot name=\"postfix\" onSlotchange={props.onSlotChange}></slot>\n      {children}\n    </div>\n  );\n}\n\nexport function PrefixSlot(props: {\n  prefixRef: MakeRef<HTMLDivElement>;\n  onSlotChange?: (e: Event) => void;\n}) {\n  return (\n    <div class=\"prefix-container\" ref={props.prefixRef}>\n      <slot name=\"prefix\" onSlotchange={props.onSlotChange}></slot>\n    </div>\n  );\n}\n","/*\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 */\nimport anime from 'animejs';\n\nexport function shakeInput(input: HTMLInputElement) {\n  const xMax = 5;\n  anime({\n    targets: input,\n    duration: 200,\n    easing: 'easeInOutSine',\n    loop: 2,\n    translateX: [\n      {\n        value: xMax * -1,\n      },\n      {\n        value: xMax,\n      },\n      {\n        value: xMax / -2,\n      },\n      {\n        value: xMax / 2,\n      },\n      {\n        value: 0,\n      },\n    ],\n  });\n}\n","/*\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 { A11yAttributes, a11yBoolean } from '../utils/a11y';\nimport {\n  IxFormComponent,\n  IxInputFieldComponent,\n  ValidationResults,\n  shouldSuppressInternalValidation,\n} from '../utils/field';\nimport { generateUUID } from '../utils/uuid';\nimport { shakeInput } from './text-field.animation';\n\nexport function createIdIfNotExists(\n  element: IxFormComponent,\n  idPrefix: string = 'field'\n) {\n  return element.hasAttribute('id')\n    ? element.getAttribute('id')\n    : `${idPrefix}-${generateUUID()}`;\n}\n\nexport function mapValidationResult(\n  ref: IxInputFieldComponent<unknown>,\n  result: ValidationResults\n) {\n  ref.isInvalid = result.isInvalid || result.isInvalidByRequired;\n  ref.isValid = result.isValid;\n  ref.isInfo = result.isInfo;\n  ref.isWarning = result.isWarning;\n}\n\nexport function checkAllowedKeys(\n  comp: IxInputFieldComponent<unknown>,\n  event: KeyboardEvent\n) {\n  if (comp.allowedCharactersPattern) {\n    const regex = new RegExp(comp.allowedCharactersPattern);\n    if (!regex.test(event.key)) {\n      event.preventDefault();\n      shakeInput(comp.inputRef.current);\n    }\n  }\n}\n\nexport async function checkInternalValidity(\n  comp: IxFormComponent<unknown>,\n  input: HTMLInputElement | HTMLTextAreaElement\n) {\n  const validityState = input.validity;\n\n  const eventResult = comp.validityStateChange.emit(validityState);\n\n  if (eventResult.defaultPrevented) {\n    return;\n  }\n\n  if (!comp.value) {\n    return;\n  }\n\n  const skipValidation = await shouldSuppressInternalValidation(comp);\n  if (skipValidation) {\n    return;\n  }\n\n  const { valid } = validityState;\n  comp.hostElement.classList.toggle('ix-invalid', !valid);\n}\n\nexport function onInputBlur(\n  comp: IxInputFieldComponent<unknown>,\n  input: HTMLInputElement | HTMLTextAreaElement\n) {\n  comp.ixBlur.emit();\n  checkInternalValidity(comp, input);\n}\n\nexport function applyPostfixPadding(\n  inputElement: HTMLElement,\n  width: number,\n  options: {\n    postfix: boolean;\n    additionalPaddingRight?: string;\n  }\n) {\n  if (!inputElement) {\n    return;\n  }\n\n  if (width === 0) {\n    return;\n  }\n\n  const padding = `${(width + 12) / 16}rem`;\n\n  if (options.postfix) {\n    inputElement.style.paddingRight = `calc(${padding} + ${\n      options.additionalPaddingRight ?? '0rem'\n    })`;\n  } else {\n    inputElement.style.paddingLeft = padding;\n  }\n}\n\nexport function adjustPaddingForPrefixAndPostfix(\n  prefixElement: HTMLElement,\n  postfixElement: HTMLElement,\n  inputElement: HTMLElement\n) {\n  const prefixBoundingRect = prefixElement.getBoundingClientRect();\n  const postfixBoundingRect = postfixElement.getBoundingClientRect();\n\n  if (prefixBoundingRect) {\n    applyPostfixPadding(inputElement, prefixBoundingRect.width, {\n      postfix: false,\n    });\n  }\n\n  if (postfixBoundingRect) {\n    applyPostfixPadding(inputElement, postfixBoundingRect.width, {\n      postfix: true,\n    });\n  }\n}\n\nexport function getAriaAttributesForInput(\n  component: IxInputFieldComponent\n): A11yAttributes {\n  const inputAria: A11yAttributes = {\n    'aria-invalid': `${a11yBoolean(component.isInvalid)}`,\n    'aria-required': `${a11yBoolean(component.required)}`,\n  };\n\n  if (component.isInvalid && component.invalidText) {\n    inputAria['aria-errormessage'] = component.invalidText;\n  }\n  return inputAria;\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,H as s,g as n}from"./p-f86a894a.js";import{H as a}from"./p-42c66a44.js";const l=":host{display:inline-block;position:relative}:host .checkbox-container{display:flex;flex-direction:row;gap:0.5rem;margin:0.35rem 0;flex-wrap:wrap}";const r=l;var d=undefined&&undefined.__decorate||function(e,t,i,s){var n=arguments.length,a=n<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,i):s,l;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,s);else for(var r=e.length-1;r>=0;r--)if(l=e[r])a=(n<3?l(a):n>3?l(t,i,a):l(t,i))||a;return n>3&&a&&Object.defineProperty(t,i,a),a};const h=class{constructor(i){e(this,i);this.valueChange=t(this,"valueChange",7);this.observer=new MutationObserver((()=>{this.ensureOnlyLastRadioChecked()}));this.helperText=undefined;this.label=undefined;this.value=undefined;this.invalidText=undefined;this.infoText=undefined;this.warningText=undefined;this.validText=undefined;this.showTextAsTooltip=undefined;this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false}get radiobuttonElements(){return Array.from(this.hostElement.querySelectorAll("ix-radio"))}connectedCallback(){this.observer.observe(this.hostElement,{childList:true,subtree:true,attributes:true,attributeFilter:["checked"]})}componentWillLoad(){this.selectInitialValue();this.ensureOnlyLastRadioChecked()}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}selectInitialValue(){if(!this.value){return}this.radiobuttonElements.forEach((e=>{e.checked=e.value===this.value}))}ensureOnlyLastRadioChecked(){const e=this.radiobuttonElements.filter((e=>e.checked));e.forEach(((t,i)=>{if(i===e.length-1){return}t.checked=false}))}onValueChangeHandler(e){this.radiobuttonElements.forEach((t=>{t.checked=t.value===e}))}onCheckedChangeHandler(e){this.radiobuttonElements.forEach((t=>{if(t!==e.target){t.checked=false;return}t.checked=true;this.valueChange.emit(t.value)}))}onClassField({isInvalid:e,isInfo:t,isValid:i,isWarning:s}){this.isInvalid=e;this.isInfo=t;this.isValid=i;this.isWarning=s}render(){return i(s,{key:"06f2de8cda259460c5b3c0a898f565ada89c8880"},i("ix-field-wrapper",{key:"7d29f98bc31ee137db616621ace4887db15c9350",label:this.label,helperText:this.helperText,invalidText:this.invalidText,infoText:this.infoText,warningText:this.warningText,validText:this.validText,showTextAsTooltip:this.showTextAsTooltip,isValid:this.isValid,isInfo:this.isInfo,isWarning:this.isWarning,isInvalid:this.isInvalid},i("slot",{key:"961f7f85c2f2f9c319eb924bdd06e9500fc1543d",name:"label",slot:"label"}),i("div",{key:"8c52e80c230edde2254ef6105a71e660f6d3e1d7",class:"checkbox-container"},i("slot",{key:"cf0e1efd134143c4a15f798fc88ef024c941f03c"}))))}get hostElement(){return n(this)}static get watchers(){return{value:["onValueChangeHandler"]}}};d([a({includeChildren:true})],h.prototype,"onClassField",null);h.style=r;export{h as ix_radio_group};
+//# sourceMappingURL=p-ce8a0611.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["radioGroupCss","IxRadioGroupStyle0","RadiobuttonGroup","this","observer","MutationObserver","ensureOnlyLastRadioChecked","radiobuttonElements","Array","from","hostElement","querySelectorAll","connectedCallback","observe","childList","subtree","attributes","attributeFilter","componentWillLoad","selectInitialValue","disconnectedCallback","disconnect","value","forEach","radiobutton","checked","checkedRadios","filter","radio","index","length","onValueChangeHandler","newValue","onCheckedChangeHandler","event","target","valueChange","emit","onClassField","isInvalid","isInfo","isValid","isWarning","render","h","Host","key","label","helperText","invalidText","infoText","warningText","validText","showTextAsTooltip","name","slot","class","__decorate","HookValidationLifecycle","includeChildren"],"sources":["src/components/radio-group/radio-group.scss?tag=ix-radio-group&encapsulation=shadow","src/components/radio-group/radio-group.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@import 'mixins/shadow-dom/component';\n\n:host {\n  display: inline-block;\n  position: relative;\n\n  .checkbox-container {\n    display: flex;\n    flex-direction: row;\n    gap: 0.5rem;\n    margin: 0.35rem 0;\n    flex-wrap: wrap;\n  }\n}\n","import {\n  Component,\n  Element,\n  EventEmitter,\n  Host,\n  Event,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n} from '@stencil/core';\nimport {\n  ValidationResults,\n  HookValidationLifecycle,\n  FieldWrapperInterface,\n  IxFormValidationState,\n} from '../utils/field';\n\n/**\n * @since 2.4.0\n * @form-ready 2.4.0\n */\n@Component({\n  tag: 'ix-radio-group',\n  styleUrl: 'radio-group.scss',\n  shadow: true,\n})\nexport class RadiobuttonGroup\n  implements FieldWrapperInterface, IxFormValidationState\n{\n  @Element() hostElement!: HTMLIxRadioGroupElement;\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Value of the radiobutton group component\n   */\n  @Prop() value?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * Event emitted when the value of the radiobutton group changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  private observer = new MutationObserver(() => {\n    this.ensureOnlyLastRadioChecked();\n  });\n\n  private get radiobuttonElements() {\n    return Array.from(this.hostElement.querySelectorAll('ix-radio'));\n  }\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['checked'],\n    });\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.selectInitialValue();\n    this.ensureOnlyLastRadioChecked();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private selectInitialValue() {\n    if (!this.value) {\n      return;\n    }\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === this.value;\n    });\n  }\n\n  private ensureOnlyLastRadioChecked() {\n    const checkedRadios = this.radiobuttonElements.filter(\n      (radio) => radio.checked\n    );\n    checkedRadios.forEach((radio, index) => {\n      if (index === checkedRadios.length - 1) {\n        return;\n      }\n      radio.checked = false;\n    });\n  }\n\n  @Watch('value')\n  onValueChangeHandler(newValue: string) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      radiobutton.checked = radiobutton.value === newValue;\n    });\n  }\n\n  @Listen('checkedChange')\n  onCheckedChangeHandler(event: CustomEvent<boolean>) {\n    this.radiobuttonElements.forEach((radiobutton) => {\n      if (radiobutton !== event.target) {\n        radiobutton.checked = false;\n        return;\n      }\n      radiobutton.checked = true;\n      this.valueChange.emit(radiobutton.value);\n    });\n  }\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  onClassField({ isInvalid, isInfo, isValid, isWarning }: ValidationResults) {\n    this.isInvalid = isInvalid;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          isInvalid={this.isInvalid}\n        >\n          <slot name=\"label\" slot=\"label\"></slot>\n\n          <div class={'checkbox-container'}>\n            <slot></slot>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAgB,qJACtB,MAAAC,EAAeD,E,iXC2BFE,EAAgB,M,kEAsDnBC,KAAAC,SAAW,IAAIC,kBAAiB,KACtCF,KAAKG,4BAA4B,I,2NANd,M,aACF,M,YACD,M,eACG,K,CAMrB,uBAAYC,GACV,OAAOC,MAAMC,KAAKN,KAAKO,YAAYC,iBAAiB,Y,CAGtD,iBAAAC,GACET,KAAKC,SAASS,QAAQV,KAAKO,YAAa,CACtCI,UAAW,KACXC,QAAS,KACTC,WAAY,KACZC,gBAAiB,CAAC,Y,CAItB,iBAAAC,GACEf,KAAKgB,qBACLhB,KAAKG,4B,CAGP,oBAAAc,GACE,GAAIjB,KAAKC,SAAU,CACjBD,KAAKC,SAASiB,Y,EAIV,kBAAAF,GACN,IAAKhB,KAAKmB,MAAO,CACf,M,CAEFnB,KAAKI,oBAAoBgB,SAASC,IAChCA,EAAYC,QAAUD,EAAYF,QAAUnB,KAAKmB,KAAK,G,CAIlD,0BAAAhB,GACN,MAAMoB,EAAgBvB,KAAKI,oBAAoBoB,QAC5CC,GAAUA,EAAMH,UAEnBC,EAAcH,SAAQ,CAACK,EAAOC,KAC5B,GAAIA,IAAUH,EAAcI,OAAS,EAAG,CACtC,M,CAEFF,EAAMH,QAAU,KAAK,G,CAKzB,oBAAAM,CAAqBC,GACnB7B,KAAKI,oBAAoBgB,SAASC,IAChCA,EAAYC,QAAUD,EAAYF,QAAUU,CAAQ,G,CAKxD,sBAAAC,CAAuBC,GACrB/B,KAAKI,oBAAoBgB,SAASC,IAChC,GAAIA,IAAgBU,EAAMC,OAAQ,CAChCX,EAAYC,QAAU,MACtB,M,CAEFD,EAAYC,QAAU,KACtBtB,KAAKiC,YAAYC,KAAKb,EAAYF,MAAM,G,CAO5C,YAAAgB,EAAaC,UAAEA,EAASC,OAAEA,EAAMC,QAAEA,EAAOC,UAAEA,IACzCvC,KAAKoC,UAAYA,EACjBpC,KAAKqC,OAASA,EACdrC,KAAKsC,QAAUA,EACftC,KAAKuC,UAAYA,C,CAGnB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,oBAAAE,IAAA,2CACEC,MAAO5C,KAAK4C,MACZC,WAAY7C,KAAK6C,WACjBC,YAAa9C,KAAK8C,YAClBC,SAAU/C,KAAK+C,SACfC,YAAahD,KAAKgD,YAClBC,UAAWjD,KAAKiD,UAChBC,kBAAmBlD,KAAKkD,kBACxBZ,QAAStC,KAAKsC,QACdD,OAAQrC,KAAKqC,OACbE,UAAWvC,KAAKuC,UAChBH,UAAWpC,KAAKoC,WAEhBK,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,QAAQC,KAAK,UAExBX,EAAA,OAAAE,IAAA,2CAAKU,MAAO,sBACVZ,EAAA,QAAAE,IAAA,+C,iGA1BVW,EAAA,CAHCC,EAAwB,CACvBC,gBAAiB,Q"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,H as e,g as r}from"./p-f86a894a.js";import{f as o,i as h,s as n,o as a,a as d,c}from"./p-b3f35666.js";import{A as l}from"./p-c09553f3.js";import{d as u,a as f,h as b}from"./p-3782e028.js";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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 v=0;const g=class{constructor(s){t(this,s);this.showChanged=i(this,"showChanged",7);this.autoUpdateCleanup=null;this.localUId=`dropdown-${v++}`;this.assignedSubmenu=[];this.focusDropdownItemBind=this.focusDropdownItem.bind(this);this.itemObserver=new MutationObserver((()=>{this.arrowFocusController.items=this.dropdownItems}));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;this.ignoreRelatedSubmenu=false}connectedCallback(){u.connected(this);if(this.trigger!=undefined){this.registerListener(this.trigger)}}cacheSubmenuId(t){t.stopImmediatePropagation();t.preventDefault();const{detail:i}=t;if(this.assignedSubmenu.indexOf(i)===-1){this.assignedSubmenu.push(i)}}disconnectedCallback(){u.dismiss(this);u.disconnected(this);if(this.disposeClickListener){this.disposeClickListener()}if(this.disposeKeyListener){this.disposeKeyListener()}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,i,s;(t=this.disposeClickListener)===null||t===void 0?void 0:t.call(this);(i=this.disposeKeyListener)===null||i===void 0?void 0:i.call(this);const e=()=>{if(!this.isPresent()){u.present(this)}else{u.dismiss(this)}u.dismissOthers(this.getId())};this.disposeClickListener=f(this.triggerElement,"click",(t=>{if(!t.defaultPrevented){e()}}));(s=this.triggerElement)===null||s===void 0?void 0:s.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:true,cancelable:true,detail:this.localUId}))}registerKeyListener(){if(!this.triggerElement){return}this.disposeKeyListener=f(this.triggerElement,"keydown",(t=>{if(t.key!=="ArrowDown"){return}if(document.activeElement!==this.triggerElement){return}u.present(this);setTimeout((()=>{this.focusDropdownItem(0)}))}))}async registerListener(t){this.triggerElement=await this.resolveElement(t);if(this.triggerElement){this.addEventListenersFor();this.discoverSubmenu()}}async resolveElement(t){const i=await this.findElement(t);return this.checkForSubmenuAnchor(i)}async checkForSubmenuAnchor(t){if(!t){return null}if(b(t)){const i=await t.getDropdownItemElement();i.isSubMenu=true;this.hostElement.style.zIndex=`var(--theme-z-index-dropdown)`}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)}if(typeof t!="string"){return}const i=`#${t}`;return new Promise((t=>{if(document.querySelector(i)){return t(document.querySelector(i))}const s=new MutationObserver((()=>{if(document.querySelector(i)){t(document.querySelector(i));s.disconnect()}}));s.observe(document.body,{childList:true,subtree:true})}))}async changedShow(t){var i,s,e;if(t){this.anchorElement=await(this.anchor?this.resolveElement(this.anchor):this.resolveElement(this.trigger));if(this.anchorElement){this.applyDropdownPosition()}this.arrowFocusController=new l(this.dropdownItems,this.dropdownRef,this.focusDropdownItemBind);this.itemObserver.observe(this.dropdownRef,{childList:true,subtree:true});this.registerKeyListener()}else{(i=this.arrowFocusController)===null||i===void 0?void 0:i.disconnect();(s=this.itemObserver)===null||s===void 0?void 0:s.disconnect();(e=this.disposeKeyListener)===null||e===void 0?void 0:e.call(this)}}changedTrigger(t){this.registerListener(t)}isAnchorSubmenu(){var t;if(!b(this.anchorElement)){return!!((t=this.anchorElement)===null||t===void 0?void 0:t.closest("ix-dropdown-item"))}return true}async applyDropdownPosition(){if(!this.show){return}if(!this.anchorElement){return}if(!this.dropdownRef){return}const t=this.isAnchorSubmenu();let i={strategy:this.positioningStrategy,middleware:[]};if(!this.suppressAutomaticPlacement){i.middleware.push(o({fallbackStrategy:"initialPlacement"}))}i.placement=t?"right-start":this.placement;i.middleware=[...i.middleware,h(),n()];if(this.offset){i.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,i);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})}focusDropdownItem(t){requestAnimationFrame((()=>{var i;(i=this.dropdownItems[t])===null||i===void 0?void 0:i.shadowRoot.querySelector("button").focus()}))}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 i=!!t.hasAttribute("data-ix-dropdown-trigger");return i}onDropdownClick(t){const i=u.pathIncludesTrigger(t.composedPath());if(i){if(i!==this.triggerElement){t.preventDefault()}if(this.isTriggerElement(i)){return}}if(!t.defaultPrevented&&(this.closeBehavior==="inside"||this.closeBehavior==="both")){u.dismissAll([this.getId()],this.ignoreRelatedSubmenu);return}u.dismissOthers(this.getId())}async updatePosition(){this.applyDropdownPosition()}render(){return s(e,{key:"c5fa949b336dfa2d85453647ec285661866b4c05","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)},s("div",{key:"bd0b94a0f4f12fe426ea040eba252e2b571f10a2",style:{display:"contents"}},this.header&&s("div",{key:"353ea10f7608c8a822058eb869345ca0178f4c91",class:"dropdown-header"},this.header),s("slot",{key:"b573d70610827470688dc4369d152fcdf55bdd3d"})))}get hostElement(){return r(this)}static get watchers(){return{show:["changedShow"],trigger:["changedTrigger"]}}};g.style=w;export{g as ix_dropdown};
+//# sourceMappingURL=p-cf65d3b6.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","IxDropdownStyle0","sequenceId","Dropdown","this","autoUpdateCleanup","localUId","assignedSubmenu","focusDropdownItemBind","focusDropdownItem","bind","itemObserver","MutationObserver","arrowFocusController","items","dropdownItems","connectedCallback","dropdownController","connected","trigger","undefined","registerListener","cacheSubmenuId","event","stopImmediatePropagation","preventDefault","detail","indexOf","push","disconnectedCallback","dismiss","disconnected","disposeClickListener","disposeKeyListener","getAssignedSubmenuIds","isPresent","show","present","getId","willDismiss","defaultPrevented","showChanged","emit","willPresent","Array","from","hostElement","querySelectorAll","slotElement","shadowRoot","querySelector","addEventListenersFor","_a","call","_b","toggleController","dismissOthers","addDisposableEventListener","triggerElement","_c","setAttribute","discoverSubmenu","dispatchEvent","CustomEvent","bubbles","composed","cancelable","registerKeyListener","key","document","activeElement","setTimeout","element","resolveElement","el","findElement","checkForSubmenuAnchor","hasDropdownItemWrapperImplemented","dropdownItem","getDropdownItemElement","isSubMenu","style","zIndex","tagName","Promise","resolve","selector","observer","disconnect","observe","body","childList","subtree","changedShow","newShow","anchorElement","anchor","applyDropdownPosition","ArrowFocusController","dropdownRef","changedTrigger","newTriggerValue","isAnchorSubmenu","closest","isSubmenu","positionConfig","strategy","positioningStrategy","middleware","suppressAutomaticPlacement","flip","fallbackStrategy","placement","inline","shift","offset","autoUpdate","async","computeResponse","computePosition","Object","assign","top","left","transform","Math","round","x","y","overwriteDropdownStyle","overwriteStyle","triggerRef","ancestorResize","ancestorScroll","elementResize","index","requestAnimationFrame","focus","componentDidLoad","componentDidRender","isTriggerElement","hasAttribute","onDropdownClick","target","pathIncludesTrigger","composedPath","closeBehavior","dismissAll","ignoreRelatedSubmenu","updatePosition","render","h","Host","ref","class","overflow","margin","minWidth","position","role","onClick","display","header"],"sources":["src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","src/components/dropdown/dropdown.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\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 { ArrowFocusController } from '../utils/focus';\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  /** @internal */\n  @Prop() ignoreRelatedSubmenu = 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  private arrowFocusController: ArrowFocusController;\n  private focusDropdownItemBind = this.focusDropdownItem.bind(this);\n\n  private itemObserver = new MutationObserver(() => {\n    this.arrowFocusController.items = this.dropdownItems;\n  });\n\n  connectedCallback(): void {\n    dropdownController.connected(this);\n\n    if (this.trigger != undefined) {\n      this.registerListener(this.trigger);\n    }\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    dropdownController.dismiss(this);\n    dropdownController.disconnected(this);\n\n    if (this.disposeClickListener) {\n      this.disposeClickListener();\n    }\n\n    if (this.disposeKeyListener) {\n      this.disposeKeyListener();\n    }\n\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 disposeClickListener?: () => void;\n  private disposeKeyListener?: () => void;\n\n  private addEventListenersFor() {\n    this.disposeClickListener?.();\n    this.disposeKeyListener?.();\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.disposeClickListener = addDisposableEventListener(\n      this.triggerElement,\n      'click',\n      (event: PointerEvent) => {\n        if (!event.defaultPrevented) {\n          toggleController();\n        }\n      }\n    );\n\n    this.triggerElement?.setAttribute(\n      'data-ix-dropdown-trigger',\n      this.localUId\n    );\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: true,\n        cancelable: true,\n        detail: this.localUId,\n      })\n    );\n  }\n\n  private registerKeyListener() {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    this.disposeKeyListener = addDisposableEventListener(\n      this.triggerElement,\n      'keydown',\n      (event: KeyboardEvent) => {\n        if (event.key !== 'ArrowDown') {\n          return;\n        }\n\n        if (document.activeElement !== this.triggerElement) {\n          return;\n        }\n\n        dropdownController.present(this);\n\n        setTimeout(() => {\n          this.focusDropdownItem(0);\n        });\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 (!element) {\n      return null;\n    }\n\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\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    if (typeof element != 'string') {\n      return;\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      }\n\n      this.arrowFocusController = new ArrowFocusController(\n        this.dropdownItems,\n        this.dropdownRef,\n        this.focusDropdownItemBind\n      );\n\n      this.itemObserver.observe(this.dropdownRef, {\n        childList: true,\n        subtree: true,\n      });\n\n      this.registerKeyListener();\n    } else {\n      this.arrowFocusController?.disconnect();\n      this.itemObserver?.disconnect();\n      this.disposeKeyListener?.();\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.show) {\n      return;\n    }\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        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  private focusDropdownItem(index: number) {\n    requestAnimationFrame(() => {\n      this.dropdownItems[index]?.shadowRoot.querySelector('button').focus();\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    const target = dropdownController.pathIncludesTrigger(event.composedPath());\n    if (target) {\n      if (target !== this.triggerElement) {\n        event.preventDefault();\n      }\n\n      if (this.isTriggerElement(target)) {\n        return;\n      }\n    }\n\n    if (\n      !event.defaultPrevented &&\n      (this.closeBehavior === 'inside' || this.closeBehavior === 'both')\n    ) {\n      dropdownController.dismissAll([this.getId()], this.ignoreRelatedSubmenu);\n      return;\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          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as r,g as s}from"./p-f86a894a.js";import{c as o}from"./p-e898862b.js";const l=":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}: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 ::-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 .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:0.5rem}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";const a=l;function n(t){if(t.label===""){return null}return i("div",{class:"CardList_Title"},i("ix-icon-button",{ghost:true,icon:"chevron-down",onClick:t.onClick,color:"color-primary",class:{CardList__Title__Button:true,CardList__Title__Button__Collapsed:t.isCollapsed}}),i("ix-typography",{variant:"large-single"},t.label),!t.hideShowAll&&i("ix-button",{class:"CardList__Title__Show__All",ghost:true,onClick:t.onShowAllClick},i("span",null,t.showAllLabel),i("span",null,!isNaN(t.showAllCounter)?` (${t.showAllCounter})`:null)))}const h=class{constructor(i){t(this,i);this.collapseChanged=e(this,"collapseChanged",7);this.showAllClick=e(this,"showAllClick",7);this.showMoreCardClick=e(this,"showMoreCardClick",7);this.label=undefined;this.collapse=false;this.listStyle="stack";this.maxVisibleCards=12;this.showAllCount=undefined;this.suppressOverflowHandling=false;this.hideShowAll=false;this.i18nShowAll="Show all";this.i18nMoreCards="There are more cards available";this.hasOverflowingElements=false;this.numberOfOverflowingElements=0;this.numberOfAllChildElements=0;this.leftScrollDistance=0;this.rightScrollDistance=0}onCardListVisibilityToggle(){this.collapse=!this.collapse;this.collapseChanged.emit(this.collapse)}onShowAllClick(t){this.showAllClick.emit({nativeEvent:t})}getListChildren(){const t=this.hostElement.shadowRoot.querySelector(".CardList__Content > slot");return t.assignedElements({flatten:true})}changeVisibilityOfSlotChildren(){const t=this.getListChildren();t.forEach(((t,e)=>{if(t instanceof HTMLElement){if(e>this.maxVisibleCards-1){t.classList.add("d-none");return}t.classList.remove("d-none")}}));this.hasOverflowingElements=t.length>this.maxVisibleCards;this.numberOfOverflowingElements=t.length-this.maxVisibleCards;this.numberOfAllChildElements=t.length;this.detectOverflow()}registerOverflowHandler(){this.observer=o((()=>{this.changeVisibilityOfSlotChildren()}));this.observer.observe(this.hostElement.shadowRoot.querySelector(".CardList__Content"),{childList:true,subtree:true});requestAnimationFrame((()=>{this.changeVisibilityOfSlotChildren()}))}shouldHandleOverflow(){if(this.suppressOverflowHandling){return false}if(this.listStyle==="stack"||this.listStyle==="scroll"){return true}}get listElement(){return this.hostElement.shadowRoot.querySelector(".CardList__Content")}onCardListScroll(){this.detectOverflow()}isShowMoreCardVisible(){return this.suppressOverflowHandling===false&&this.hasOverflowingElements}getOpacityFromScrollDistance(t){if(!this.listElement){return 0}if(t===0){return 0}if(t>100){return 1}return t/100}computeMaskLayer(){const t=80;const e=`linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${t*(this.getOpacityFromScrollDistance(this.leftScrollDistance)>0?1:0)}px,\n      black calc(100% - ${t*(this.getOpacityFromScrollDistance(this.rightScrollDistance)>0?1:0)}px),\n      transparent 100%\n    )`;return{"--ix-card-list-overflow":e}}detectOverflow(){const{clientWidth:t,scrollWidth:e,scrollLeft:i}=this.listElement;this.leftScrollDistance=i;this.rightScrollDistance=e-i-t}componentDidLoad(){if(this.shouldHandleOverflow()){this.registerOverflowHandler()}}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){return i(r,{key:"ada39cb89614cd0cad3347eedf2be1e5c41feff1"},i(n,{key:"d6f36fae6be5f42dad90cf857ce0299f815884ca",isCollapsed:this.collapse,label:this.label,showAllLabel:this.i18nShowAll,showAllCounter:this.showAllCount===undefined?this.numberOfAllChildElements:this.showAllCount,onClick:()=>this.onCardListVisibilityToggle(),onShowAllClick:t=>this.onShowAllClick(t),hideShowAll:this.hideShowAll}),i("div",{key:"3cd90edbe2b68d1af6cf513dda3d421e4e8726bd",class:{CardList__Overflow:true},style:this.computeMaskLayer()},i("div",{key:"204fb870de26ad28183bfec6d46e1156c2f05727",class:{CardList__Content:true,CardList__Content__Collapsed:this.collapse,CardList__Style__Flexbox__Scroll:this.listStyle==="stack",CardList__Style__Infinite__Scroll:this.listStyle==="scroll"},onScroll:()=>this.onCardListScroll()},i("slot",{key:"8bd77dd2e09e6cdac4fa773786f6d811305b8209",onSlotchange:()=>this.changeVisibilityOfSlotChildren()}),this.isShowMoreCardVisible()?i("ix-card",{class:{Show__All__Card:true},onClick:t=>this.showMoreCardClick.emit({nativeEvent:t})},i("ix-card-content",{class:"Show__All__Card__Content"},i("ix-icon",{name:"more-menu",size:"32",class:"Show__All__Card__Icon"}),i("span",{class:"Show__All__Card__Text"},this.i18nMoreCards," (",this.numberOfOverflowingElements,")"))):null)))}get hostElement(){return s(this)}};h.style=a;export{h as ix_card_list};
+//# sourceMappingURL=p-cfcd2bd3.entry.js.map

package/dist/siemens-ix/{p-4d57ca67.entry.js.map → p-cfcd2bd3.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["cardListCss","IxCardListStyle0","CardListTitle","props","label","h","class","ghost","icon","onClick","color","CardList__Title__Button","CardList__Title__Button__Collapsed","isCollapsed","variant","hideShowAll","onShowAllClick","showAllLabel","isNaN","showAllCounter","CardList","onCardListVisibilityToggle","this","collapse","collapseChanged","emit","event","showAllClick","nativeEvent","getListChildren","slot","hostElement","shadowRoot","querySelector","assignedElements","flatten","changeVisibilityOfSlotChildren","childElements","forEach","element","index","HTMLElement","maxVisibleCards","classList","add","remove","hasOverflowingElements","length","numberOfOverflowingElements","numberOfAllChildElements","detectOverflow","registerOverflowHandler","observer","createMutationObserver","observe","childList","subtree","requestAnimationFrame","shouldHandleOverflow","suppressOverflowHandling","listStyle","listElement","onCardListScroll","isShowMoreCardVisible","getOpacityFromScrollDistance","distance","computeMaskLayer","maxOverflowWidth","maskLayer","leftScrollDistance","rightScrollDistance","clientWidth","scrollWidth","scrollLeft","componentDidLoad","disconnectedCallback","disconnect","render","Host","key","i18nShowAll","showAllCount","undefined","e","CardList__Overflow","style","CardList__Content","CardList__Content__Collapsed","CardList__Style__Flexbox__Scroll","CardList__Style__Infinite__Scroll","onScroll","onSlotchange","Show__All__Card","showMoreCardClick","name","size","i18nMoreCards"],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 0.5rem;\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (props.label === '') {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={'chevron-down'}\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography variant=\"large-single\">{props.label}</ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          ghost\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount: number | undefined;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   *\n   * @since 2.2.0\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content class=\"Show__All__Card__Content\">\n                  <ix-icon\n                    name={'more-menu'}\n                    size={'32'}\n                    class={'Show__All__Card__Icon'}\n                  ></ix-icon>\n                  <span class=\"Show__All__Card__Text\">\n                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                  </span>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["cardListCss","IxCardListStyle0","CardListTitle","props","label","h","class","ghost","icon","onClick","color","CardList__Title__Button","CardList__Title__Button__Collapsed","isCollapsed","variant","hideShowAll","onShowAllClick","showAllLabel","isNaN","showAllCounter","CardList","onCardListVisibilityToggle","this","collapse","collapseChanged","emit","event","showAllClick","nativeEvent","getListChildren","slot","hostElement","shadowRoot","querySelector","assignedElements","flatten","changeVisibilityOfSlotChildren","childElements","forEach","element","index","HTMLElement","maxVisibleCards","classList","add","remove","hasOverflowingElements","length","numberOfOverflowingElements","numberOfAllChildElements","detectOverflow","registerOverflowHandler","observer","createMutationObserver","observe","childList","subtree","requestAnimationFrame","shouldHandleOverflow","suppressOverflowHandling","listStyle","listElement","onCardListScroll","isShowMoreCardVisible","getOpacityFromScrollDistance","distance","computeMaskLayer","maxOverflowWidth","maskLayer","leftScrollDistance","rightScrollDistance","clientWidth","scrollWidth","scrollLeft","componentDidLoad","disconnectedCallback","disconnect","render","Host","key","i18nShowAll","showAllCount","undefined","e","CardList__Overflow","style","CardList__Content","CardList__Content__Collapsed","CardList__Style__Flexbox__Scroll","CardList__Style__Infinite__Scroll","onScroll","onSlotchange","Show__All__Card","showMoreCardClick","name","size","i18nMoreCards"],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 0.5rem;\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (props.label === '') {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={'chevron-down'}\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography variant=\"large-single\">{props.label}</ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          ghost\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount: number | undefined;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   *\n   * @since 2.2.0\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content class=\"Show__All__Card__Content\">\n                  <ix-icon\n                    name={'more-menu'}\n                    size={'32'}\n                    class={'Show__All__Card__Icon'}\n                  ></ix-icon>\n                  <span class=\"Show__All__Card__Text\">\n                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                  </span>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,F as s,H as a,g as o}from"./p-f86a894a.js";import{D as h}from"./p-f5e574da.js";const r=":host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-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}@media (max-width: 48em){:host .min-width{width:-moz-min-content;width:min-content}}@media (min-width: 48em){:host .border-right{border-right:var(--theme-x-weak-bdr-2)}}:host ix-button{width:100%}:host .max-height{max-height:-moz-max-content;max-height:max-content}:host .no-margin{margin:0;padding:0}:host .pull-right{float:right;padding:0.25rem 1rem}";const n=r;const d=class{constructor(i){t(this,i);this.dateRangeChange=e(this,"dateRangeChange",7);this.datePickerTouched=false;this.disabled=false;this.format="yyyy/LL/dd";this.range=true;this.from=undefined;this.to=undefined;this.minDate=undefined;this.maxDate=undefined;this.dateRangeId="custom";this.customRangeAllowed=true;this.dateRangeOptions=[];this.i18nCustomItem="Custom...";this.i18nDone="Done";this.i18nNoRange="No range set";this.today=h.now().toISO();this.selectedDateRangeId=undefined;this.currentRangeValue=undefined;this.triggerRef=undefined}onDateRangeIdChange(){this.onRangeListSelect(this.dateRangeId);this.updateCurrentDate();this.setDateRangeSelection(this.dateRangeId);this.onDateSelect({from:this.currentRangeValue.from,to:this.currentRangeValue.to,id:this.currentRangeValue.id})}onDateRangeOptionsChange(){this.initialize();this.onDateRangeIdChange()}onDisabledChange(){if(this.disabled){this.closeDropdown()}}componentWillLoad(){this.initialize();this.setDateRangeSelection(this.dateRangeId)}async getDateRange(){return this.currentRangeValue}initialize(){const t=this.dateRangeId==="custom"||!this.dateRangeId&&!!this.from&&!!this.to;if(t&&this.customRangeAllowed){this.selectedDateRangeId="custom";this.updateCurrentDate();return}const e=!t&&!this.from;if(!e){console.warn('"from" and "range-date-id" is provided this is an invalid combination. Using "custom".');this.selectedDateRangeId="custom";this.updateCurrentDate();return}}updateCurrentDate(){this.currentRangeValue={id:this.selectedDateRangeId,from:this.from,to:this.to}}onDateSelect(t,e=true){this.dateRangeChange.emit(t);if(e){this.closeDropdown()}this.datePickerTouched=false}onRangeListSelect(t){if(this.setDateRangeSelection(t)){this.onDateSelect(this.currentRangeValue)}}setDateRangeSelection(t){this.selectedDateRangeId=t;const e=this.dateRangeOptions.find((e=>e.id===t));if(e){this.currentRangeValue=e}return e}closeDropdown(){this.hostElement.shadowRoot.querySelector("ix-dropdown").show=false}getButtonLabel(){var t,e;if(this.selectedDateRangeId==="custom"&&((t=this.currentRangeValue)===null||t===void 0?void 0:t.from)){let t=this.currentRangeValue.from;if(this.currentRangeValue.to){t+=` - ${this.currentRangeValue.to}`}return t}if(!this.selectedDateRangeId){return this.i18nNoRange}if(!this.dateRangeOptions||((e=this.dateRangeOptions)===null||e===void 0?void 0:e.length)===0){return this.i18nNoRange}const i=this.dateRangeOptions.find((t=>t.id===this.selectedDateRangeId));if(!i){console.error(`Cannot find range option with id ${this.selectedDateRangeId}`);return this.i18nNoRange}return i.label}render(){var t,e,o;return i(a,{key:"d66ef545b12f469b74a6693942a4fdbd7eb60382"},i("ix-button",{key:"8b6c5227aaf9d39fa6b8aa209170f10d9f4e46e8","data-testid":"date-dropdown-trigger","data-date-dropdown-trigger":true,variant:"primary",icon:"history",ref:t=>this.triggerRef=t,disabled:this.disabled},this.getButtonLabel()),i("ix-dropdown",{key:"909f713bc65e1371143ce50b438d5222319b794e","data-testid":"date-dropdown","data-date-dropdown":true,class:"min-width max-height",trigger:this.triggerRef,closeBehavior:"outside",placement:"bottom-start",onShowChanged:({detail:t})=>{if(!t&&this.selectedDateRangeId==="custom"&&this.datePickerTouched){this.onDateSelect(this.currentRangeValue)}}},i("ix-layout-grid",{key:"b8d09d4ddac4960ee2ea23ed9ec6bf5ecb59c5ae","no-margin":"true"},i("ix-row",{key:"fa9099679383056a268265eec7316ced4cd0085a"},((t=this.dateRangeOptions)===null||t===void 0?void 0:t.length)>1&&i("ix-col",{key:"9107d5b1053c93d662568b0efa7bb89d60b80ed6",class:{"no-margin":true,"border-right":this.selectedDateRangeId==="custom"}},this.dateRangeOptions.map((t=>i("ix-dropdown-item",{label:t.label,onClick:()=>this.onRangeListSelect(t.id),checked:this.selectedDateRangeId===t.id}))),i("div",{key:"0a2993cbe4d995e4dd6345e8f1b4e32cb39997d8",hidden:!this.customRangeAllowed},i("ix-dropdown-item",{key:"7bddded3f580f85c9222e563df5ef80a6a5470ed",label:this.i18nCustomItem,checked:this.selectedDateRangeId==="custom",onClick:()=>this.onRangeListSelect("custom")}))),i("ix-col",{key:"fe530809dc0eff3d95e4305ef48d8f46ebaf2a20",class:"no-margin"},this.selectedDateRangeId==="custom"&&i(s,{key:"6fb55cd06c7467fa1277476177b8db788fc6e614"},i("ix-date-picker",{key:"dac5bfab1baa592aaf0db6aaec80b44592c048f9",standaloneAppearance:false,onDateChange:t=>{t.stopPropagation();this.currentRangeValue=Object.assign(Object.assign({},t.detail),{id:"custom"});this.datePickerTouched=true},onDateRangeChange:t=>t.stopPropagation(),format:this.format,range:this.range,from:this.from||((e=this.currentRangeValue)===null||e===void 0?void 0:e.from),to:this.to||((o=this.currentRangeValue)===null||o===void 0?void 0:o.to),minDate:this.minDate,maxDate:this.maxDate,today:this.today}),i("div",{key:"613a674664d2b55a8012fc2b869021e8dfeb10b3",class:"pull-right"},i("ix-button",{key:"9d5470cfb8ddb6e086bb821baaefb25723777337",onClick:()=>{this.onDateSelect(this.currentRangeValue)}},this.i18nDone))))))))}get hostElement(){return o(this)}static get watchers(){return{dateRangeId:["onDateRangeIdChange"],to:["onDateRangeIdChange"],from:["onDateRangeIdChange"],dateRangeOptions:["onDateRangeOptionsChange"],disabled:["onDisabledChange"]}}};d.style=n;export{d as ix_date_dropdown};
+//# sourceMappingURL=p-d7131f75.entry.js.map

package/dist/siemens-ix/{p-a147b152.entry.js.map → p-d7131f75.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["dateDropdownCss","IxDateDropdownStyle0","DateDropdown","this","datePickerTouched","DateTime","now","toISO","onDateRangeIdChange","onRangeListSelect","dateRangeId","updateCurrentDate","setDateRangeSelection","onDateSelect","from","currentRangeValue","to","id","onDateRangeOptionsChange","initialize","onDisabledChange","disabled","closeDropdown","componentWillLoad","getDateRange","isCustomRange","customRangeAllowed","selectedDateRangeId","isValidConfiguration","console","warn","rangeValue","preserveDropdown","dateRangeChange","emit","option","dateRangeOptions","find","range","hostElement","shadowRoot","querySelector","show","getButtonLabel","_a","i18nNoRange","_b","length","error","label","render","h","Host","key","variant","icon","ref","triggerRef","class","trigger","closeBehavior","placement","onShowChanged","detail","map","dateRangeOption","onClick","checked","hidden","i18nCustomItem","Fragment","standaloneAppearance","onDateChange","e","stopPropagation","Object","assign","onDateRangeChange","format","_c","minDate","maxDate","today","i18nDone"],"sources":["src/components/date-dropdown/date-dropdown.scss?tag=ix-date-dropdown&encapsulation=shadow","src/components/date-dropdown/date-dropdown.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/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  @media (max-width: 48em) {\n    .min-width {\n      width: min-content;\n    }\n  }\n\n  @media (min-width: 48em) {\n    .border-right {\n      border-right: var(--theme-x-weak-bdr-2);\n    }\n  }\n\n  ix-button {\n    width: 100%;\n  }\n\n  .max-height {\n    max-height: max-content;\n  }\n\n  .no-margin {\n    margin: 0;\n    padding: 0;\n  }\n\n  .pull-right {\n    float: right;\n    padding: $tiny-space $default-space;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\n\nexport type DateDropdownOption = {\n  id: string;\n  label: string;\n  from: string;\n  to: string;\n};\n\nexport type DateRangeChangeEvent = {\n  id: string;\n  from: string;\n  to: string;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-date-dropdown',\n  styleUrl: 'date-dropdown.scss',\n  shadow: true,\n})\nexport class DateDropdown {\n  @Element() hostElement: HTMLIxDateDropdownElement;\n\n  /**\n   * Disable the button that opens the dropdown containing the date picker.\n   *\n   * @since 2.3.0\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range = true;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   */\n  @Prop() to: string;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Used to set the initial select date range as well as the button name,\n   * if not set or no according date range label is found, nothing will be selected\n   */\n  @Prop() dateRangeId = 'custom';\n  @Watch('dateRangeId')\n  @Watch('to')\n  @Watch('from')\n  onDateRangeIdChange() {\n    this.onRangeListSelect(this.dateRangeId);\n    this.updateCurrentDate();\n    this.setDateRangeSelection(this.dateRangeId);\n\n    this.onDateSelect({\n      from: this.currentRangeValue.from,\n      to: this.currentRangeValue.to,\n      id: this.currentRangeValue.id,\n    });\n  }\n\n  /**\n   * Controls whether the user is allowed to pick custom date ranges in the component.\n   * When set to 'true', the user can select a custom date range using the date picker.\n   * When set to 'false', only predefined time date ranges are available for selection.\n   */\n  @Prop() customRangeAllowed = true;\n\n  /**\n   * An array of predefined date range options for the date picker.\n   * Each option is an object with a label describing the range and a function\n   * that returns the start and end dates of the range as a DateRangeOption object.\n   *\n   * Example format:\n   *   {\n   *     id: 'some unique id',\n   *     label: 'Name of the range',\n   *     from: undefined, to: '2023/03/29'\n   *   },\n   *   // ... other predefined date range options ...\n   */\n  @Prop() dateRangeOptions: DateDropdownOption[] = [];\n  @Watch('dateRangeOptions')\n  onDateRangeOptionsChange() {\n    this.initialize();\n    this.onDateRangeIdChange();\n  }\n\n  /**\n   * Text for custom dropdown item. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * EventEmitter for date range change events.\n   *\n   * This event is emitted when the date range changes within the component.\n   * The event payload contains information about the selected date range.\n   */\n  @Event() private dateRangeChange: EventEmitter<DateRangeChangeEvent>;\n\n  @State() private selectedDateRangeId: 'custom' | (string & {});\n  @State() private currentRangeValue: {\n    from: string;\n    to: string;\n    id: string;\n  };\n  @State() private triggerRef: HTMLElement;\n\n  @Watch('disabled')\n  onDisabledChange() {\n    if (this.disabled) {\n      this.closeDropdown();\n    }\n  }\n  private datePickerTouched = false;\n\n  componentWillLoad() {\n    this.initialize();\n    this.setDateRangeSelection(this.dateRangeId);\n  }\n\n  /**\n   * Retrieves the currently selected date range from the component.\n   * This method returns the selected date range as a `DateChangeEvent` object.\n   */\n  @Method()\n  public async getDateRange(): Promise<DateRangeChangeEvent> {\n    return this.currentRangeValue;\n  }\n\n  private initialize() {\n    const isCustomRange =\n      this.dateRangeId === 'custom' ||\n      (!this.dateRangeId && !!this.from && !!this.to);\n\n    if (isCustomRange && this.customRangeAllowed) {\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n    const isValidConfiguration = !isCustomRange && !this.from;\n    if (!isValidConfiguration) {\n      console.warn(\n        '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n      );\n\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n  }\n\n  private updateCurrentDate() {\n    this.currentRangeValue = {\n      id: this.selectedDateRangeId,\n      from: this.from,\n      to: this.to,\n    };\n  }\n\n  private onDateSelect(\n    rangeValue: { from: string; to: string; id: string },\n    preserveDropdown = true\n  ) {\n    this.dateRangeChange.emit(rangeValue);\n\n    if (preserveDropdown) {\n      this.closeDropdown();\n    }\n\n    this.datePickerTouched = false;\n  }\n\n  private onRangeListSelect(id: string) {\n    if (this.setDateRangeSelection(id)) {\n      this.onDateSelect(this.currentRangeValue);\n    }\n  }\n\n  private setDateRangeSelection(id: string) {\n    this.selectedDateRangeId = id;\n    const option = this.dateRangeOptions.find((range) => range.id === id);\n\n    if (option) {\n      this.currentRangeValue = option;\n    }\n\n    return option;\n  }\n\n  private closeDropdown() {\n    this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n  }\n\n  private getButtonLabel() {\n    if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n      let range = this.currentRangeValue.from;\n\n      if (this.currentRangeValue.to) {\n        range += ` - ${this.currentRangeValue.to}`;\n      }\n\n      return range;\n    }\n\n    if (!this.selectedDateRangeId) {\n      return this.i18nNoRange;\n    }\n\n    if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n      return this.i18nNoRange;\n    }\n\n    const option = this.dateRangeOptions.find(\n      (option) => option.id === this.selectedDateRangeId\n    );\n\n    if (!option) {\n      console.error(\n        `Cannot find range option with id ${this.selectedDateRangeId}`\n      );\n      return this.i18nNoRange;\n    }\n\n    return option.label;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-button\n          data-testid=\"date-dropdown-trigger\"\n          data-date-dropdown-trigger\n          variant=\"primary\"\n          icon=\"history\"\n          ref={(ref) => (this.triggerRef = ref)}\n          disabled={this.disabled}\n        >\n          {this.getButtonLabel()}\n        </ix-button>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          data-date-dropdown\n          class=\"min-width max-height\"\n          trigger={this.triggerRef}\n          closeBehavior=\"outside\"\n          placement=\"bottom-start\"\n          onShowChanged={({ detail: show }) => {\n            if (\n              !show &&\n              this.selectedDateRangeId === 'custom' &&\n              this.datePickerTouched\n            ) {\n              this.onDateSelect(this.currentRangeValue);\n            }\n          }}\n        >\n          <ix-layout-grid no-margin=\"true\">\n            <ix-row>\n              {this.dateRangeOptions?.length > 1 && (\n                <ix-col\n                  class={{\n                    'no-margin': true,\n                    'border-right': this.selectedDateRangeId === 'custom',\n                  }}\n                >\n                  {this.dateRangeOptions.map((dateRangeOption) => (\n                    <ix-dropdown-item\n                      label={dateRangeOption.label}\n                      onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n                      checked={this.selectedDateRangeId === dateRangeOption.id}\n                    ></ix-dropdown-item>\n                  ))}\n                  <div hidden={!this.customRangeAllowed}>\n                    <ix-dropdown-item\n                      label={this.i18nCustomItem}\n                      checked={this.selectedDateRangeId === 'custom'}\n                      onClick={() => this.onRangeListSelect('custom')}\n                    ></ix-dropdown-item>\n                  </div>\n                </ix-col>\n              )}\n              <ix-col class=\"no-margin\">\n                {this.selectedDateRangeId === 'custom' && (\n                  <Fragment>\n                    <ix-date-picker\n                      standaloneAppearance={false}\n                      onDateChange={(e) => {\n                        e.stopPropagation();\n                        this.currentRangeValue = {\n                          ...e.detail,\n                          id: 'custom',\n                        };\n                        this.datePickerTouched = true;\n                      }}\n                      onDateRangeChange={(e) => e.stopPropagation()}\n                      format={this.format}\n                      range={this.range}\n                      from={this.from || this.currentRangeValue?.from}\n                      to={this.to || this.currentRangeValue?.to}\n                      minDate={this.minDate}\n                      maxDate={this.maxDate}\n                      today={this.today}\n                    ></ix-date-picker>\n                    <div class=\"pull-right\">\n                      <ix-button\n                        onClick={() => {\n                          this.onDateSelect(this.currentRangeValue);\n                        }}\n                      >\n                        {this.i18nDone}\n                      </ix-button>\n                    </div>\n                  </Fragment>\n                )}\n              </ix-col>\n            </ix-row>\n          </ix-layout-grid>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["dateDropdownCss","IxDateDropdownStyle0","DateDropdown","this","datePickerTouched","DateTime","now","toISO","onDateRangeIdChange","onRangeListSelect","dateRangeId","updateCurrentDate","setDateRangeSelection","onDateSelect","from","currentRangeValue","to","id","onDateRangeOptionsChange","initialize","onDisabledChange","disabled","closeDropdown","componentWillLoad","getDateRange","isCustomRange","customRangeAllowed","selectedDateRangeId","isValidConfiguration","console","warn","rangeValue","preserveDropdown","dateRangeChange","emit","option","dateRangeOptions","find","range","hostElement","shadowRoot","querySelector","show","getButtonLabel","_a","i18nNoRange","_b","length","error","label","render","h","Host","key","variant","icon","ref","triggerRef","class","trigger","closeBehavior","placement","onShowChanged","detail","map","dateRangeOption","onClick","checked","hidden","i18nCustomItem","Fragment","standaloneAppearance","onDateChange","e","stopPropagation","Object","assign","onDateRangeChange","format","_c","minDate","maxDate","today","i18nDone"],"sources":["src/components/date-dropdown/date-dropdown.scss?tag=ix-date-dropdown&encapsulation=shadow","src/components/date-dropdown/date-dropdown.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/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  @media (max-width: 48em) {\n    .min-width {\n      width: min-content;\n    }\n  }\n\n  @media (min-width: 48em) {\n    .border-right {\n      border-right: var(--theme-x-weak-bdr-2);\n    }\n  }\n\n  ix-button {\n    width: 100%;\n  }\n\n  .max-height {\n    max-height: max-content;\n  }\n\n  .no-margin {\n    margin: 0;\n    padding: 0;\n  }\n\n  .pull-right {\n    float: right;\n    padding: $tiny-space $default-space;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\n\nexport type DateDropdownOption = {\n  id: string;\n  label: string;\n  from: string;\n  to: string;\n};\n\nexport type DateRangeChangeEvent = {\n  id: string;\n  from: string;\n  to: string;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-date-dropdown',\n  styleUrl: 'date-dropdown.scss',\n  shadow: true,\n})\nexport class DateDropdown {\n  @Element() hostElement: HTMLIxDateDropdownElement;\n\n  /**\n   * Disable the button that opens the dropdown containing the date picker.\n   *\n   * @since 2.3.0\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range = true;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   */\n  @Prop() to: string;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Used to set the initial select date range as well as the button name,\n   * if not set or no according date range label is found, nothing will be selected\n   */\n  @Prop() dateRangeId = 'custom';\n  @Watch('dateRangeId')\n  @Watch('to')\n  @Watch('from')\n  onDateRangeIdChange() {\n    this.onRangeListSelect(this.dateRangeId);\n    this.updateCurrentDate();\n    this.setDateRangeSelection(this.dateRangeId);\n\n    this.onDateSelect({\n      from: this.currentRangeValue.from,\n      to: this.currentRangeValue.to,\n      id: this.currentRangeValue.id,\n    });\n  }\n\n  /**\n   * Controls whether the user is allowed to pick custom date ranges in the component.\n   * When set to 'true', the user can select a custom date range using the date picker.\n   * When set to 'false', only predefined time date ranges are available for selection.\n   */\n  @Prop() customRangeAllowed = true;\n\n  /**\n   * An array of predefined date range options for the date picker.\n   * Each option is an object with a label describing the range and a function\n   * that returns the start and end dates of the range as a DateRangeOption object.\n   *\n   * Example format:\n   *   {\n   *     id: 'some unique id',\n   *     label: 'Name of the range',\n   *     from: undefined, to: '2023/03/29'\n   *   },\n   *   // ... other predefined date range options ...\n   */\n  @Prop() dateRangeOptions: DateDropdownOption[] = [];\n  @Watch('dateRangeOptions')\n  onDateRangeOptionsChange() {\n    this.initialize();\n    this.onDateRangeIdChange();\n  }\n\n  /**\n   * Text for custom dropdown item. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * EventEmitter for date range change events.\n   *\n   * This event is emitted when the date range changes within the component.\n   * The event payload contains information about the selected date range.\n   */\n  @Event() private dateRangeChange: EventEmitter<DateRangeChangeEvent>;\n\n  @State() private selectedDateRangeId: 'custom' | (string & {});\n  @State() private currentRangeValue: {\n    from: string;\n    to: string;\n    id: string;\n  };\n  @State() private triggerRef: HTMLElement;\n\n  @Watch('disabled')\n  onDisabledChange() {\n    if (this.disabled) {\n      this.closeDropdown();\n    }\n  }\n  private datePickerTouched = false;\n\n  componentWillLoad() {\n    this.initialize();\n    this.setDateRangeSelection(this.dateRangeId);\n  }\n\n  /**\n   * Retrieves the currently selected date range from the component.\n   * This method returns the selected date range as a `DateChangeEvent` object.\n   */\n  @Method()\n  public async getDateRange(): Promise<DateRangeChangeEvent> {\n    return this.currentRangeValue;\n  }\n\n  private initialize() {\n    const isCustomRange =\n      this.dateRangeId === 'custom' ||\n      (!this.dateRangeId && !!this.from && !!this.to);\n\n    if (isCustomRange && this.customRangeAllowed) {\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n    const isValidConfiguration = !isCustomRange && !this.from;\n    if (!isValidConfiguration) {\n      console.warn(\n        '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n      );\n\n      this.selectedDateRangeId = 'custom';\n      this.updateCurrentDate();\n\n      return;\n    }\n  }\n\n  private updateCurrentDate() {\n    this.currentRangeValue = {\n      id: this.selectedDateRangeId,\n      from: this.from,\n      to: this.to,\n    };\n  }\n\n  private onDateSelect(\n    rangeValue: { from: string; to: string; id: string },\n    preserveDropdown = true\n  ) {\n    this.dateRangeChange.emit(rangeValue);\n\n    if (preserveDropdown) {\n      this.closeDropdown();\n    }\n\n    this.datePickerTouched = false;\n  }\n\n  private onRangeListSelect(id: string) {\n    if (this.setDateRangeSelection(id)) {\n      this.onDateSelect(this.currentRangeValue);\n    }\n  }\n\n  private setDateRangeSelection(id: string) {\n    this.selectedDateRangeId = id;\n    const option = this.dateRangeOptions.find((range) => range.id === id);\n\n    if (option) {\n      this.currentRangeValue = option;\n    }\n\n    return option;\n  }\n\n  private closeDropdown() {\n    this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n  }\n\n  private getButtonLabel() {\n    if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n      let range = this.currentRangeValue.from;\n\n      if (this.currentRangeValue.to) {\n        range += ` - ${this.currentRangeValue.to}`;\n      }\n\n      return range;\n    }\n\n    if (!this.selectedDateRangeId) {\n      return this.i18nNoRange;\n    }\n\n    if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n      return this.i18nNoRange;\n    }\n\n    const option = this.dateRangeOptions.find(\n      (option) => option.id === this.selectedDateRangeId\n    );\n\n    if (!option) {\n      console.error(\n        `Cannot find range option with id ${this.selectedDateRangeId}`\n      );\n      return this.i18nNoRange;\n    }\n\n    return option.label;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-button\n          data-testid=\"date-dropdown-trigger\"\n          data-date-dropdown-trigger\n          variant=\"primary\"\n          icon=\"history\"\n          ref={(ref) => (this.triggerRef = ref)}\n          disabled={this.disabled}\n        >\n          {this.getButtonLabel()}\n        </ix-button>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          data-date-dropdown\n          class=\"min-width max-height\"\n          trigger={this.triggerRef}\n          closeBehavior=\"outside\"\n          placement=\"bottom-start\"\n          onShowChanged={({ detail: show }) => {\n            if (\n              !show &&\n              this.selectedDateRangeId === 'custom' &&\n              this.datePickerTouched\n            ) {\n              this.onDateSelect(this.currentRangeValue);\n            }\n          }}\n        >\n          <ix-layout-grid no-margin=\"true\">\n            <ix-row>\n              {this.dateRangeOptions?.length > 1 && (\n                <ix-col\n                  class={{\n                    'no-margin': true,\n                    'border-right': this.selectedDateRangeId === 'custom',\n                  }}\n                >\n                  {this.dateRangeOptions.map((dateRangeOption) => (\n                    <ix-dropdown-item\n                      label={dateRangeOption.label}\n                      onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n                      checked={this.selectedDateRangeId === dateRangeOption.id}\n                    ></ix-dropdown-item>\n                  ))}\n                  <div hidden={!this.customRangeAllowed}>\n                    <ix-dropdown-item\n                      label={this.i18nCustomItem}\n                      checked={this.selectedDateRangeId === 'custom'}\n                      onClick={() => this.onRangeListSelect('custom')}\n                    ></ix-dropdown-item>\n                  </div>\n                </ix-col>\n              )}\n              <ix-col class=\"no-margin\">\n                {this.selectedDateRangeId === 'custom' && (\n                  <Fragment>\n                    <ix-date-picker\n                      standaloneAppearance={false}\n                      onDateChange={(e) => {\n                        e.stopPropagation();\n                        this.currentRangeValue = {\n                          ...e.detail,\n                          id: 'custom',\n                        };\n                        this.datePickerTouched = true;\n                      }}\n                      onDateRangeChange={(e) => e.stopPropagation()}\n                      format={this.format}\n                      range={this.range}\n                      from={this.from || this.currentRangeValue?.from}\n                      to={this.to || this.currentRangeValue?.to}\n                      minDate={this.minDate}\n                      maxDate={this.maxDate}\n                      today={this.today}\n                    ></ix-date-picker>\n                    <div class=\"pull-right\">\n                      <ix-button\n                        onClick={() => {\n                          this.onDateSelect(this.currentRangeValue);\n                        }}\n                      >\n                        {this.i18nDone}\n                      </ix-button>\n                    </div>\n                  </Fragment>\n                )}\n              </ix-col>\n            </ix-row>\n          </ix-layout-grid>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-da8517ed.js

@@ -0,0 +1,2 @@
+const e="data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='scheduler' transform='translate(64.000000, 64.000000)'><path d='M384,1.42108547e-14 L384,384 L1.42108547e-14,384 L1.42108547e-14,1.42108547e-14 L384,1.42108547e-14 Z M341.333333,128 L42.6666667,128 L42.6666667,341.333333 L341.333333,341.333333 L341.333333,128 Z M128,256 L128,298.666667 L85.3333333,298.666667 L85.3333333,256 L128,256 Z M213.333333,256 L213.333333,298.666667 L170.666667,298.666667 L170.666667,256 L213.333333,256 Z M298.666667,256 L298.666667,298.666667 L256,298.666667 L256,256 L298.666667,256 Z M128,170.666667 L128,213.333333 L85.3333333,213.333333 L85.3333333,170.666667 L128,170.666667 Z M213.333333,170.666667 L213.333333,213.333333 L170.666667,213.333333 L170.666667,170.666667 L213.333333,170.666667 Z M298.666667,170.666667 L298.666667,213.333333 L256,213.333333 L256,170.666667 L298.666667,170.666667 Z M341.333333,42.6666667 L42.6666667,42.6666667 L42.6666667,85.3333333 L341.333333,85.3333333 L341.333333,42.6666667 Z' id='Combined-Shape'/></g></g></svg>";const t="data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C331.136,3.55271368e-14 426.666667,95.5306667 426.666667,213.333333 C426.666667,331.136 331.136,426.666667 213.333333,426.666667 C95.5306667,426.666667 3.55271368e-14,331.136 3.55271368e-14,213.333333 C3.55271368e-14,95.5306667 95.5306667,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,42.6666667 C119.232,42.6666667 42.6666667,119.232 42.6666667,213.333333 C42.6666667,307.434667 119.232,384 213.333333,384 C307.434667,384 384,307.434667 384,213.333333 C384,119.232 307.434667,42.6666667 213.333333,42.6666667 Z M262.250667,134.250667 L292.416,164.416 L243.498667,213.333333 L292.416,262.250667 L262.250667,292.416 L213.333333,243.498667 L164.416,292.416 L134.250667,262.250667 L183.168,213.333333 L134.250667,164.416 L164.416,134.250667 L213.333333,183.168 L262.250667,134.250667 Z' id='error'/></g></g></svg>";const n="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><path fill-rule='evenodd' d='M47.0849493,2.84217094e-14 L185.740632,138.655563 C194.095501,134.657276 203.45297,132.418278 213.333333,132.418278 C248.679253,132.418278 277.333333,161.072358 277.333333,196.418278 C277.333333,206.299034 275.094157,215.656855 271.095572,224.011976 L409.751616,362.666662 L379.581717,392.836561 L320.374817,333.628896 C291.246618,353.329494 255.728838,367.084945 213.333333,367.084945 C64,367.084945 7.10542736e-15,196.418278 7.10542736e-15,196.418278 C7.10542736e-15,196.418278 22.862032,135.452859 73.1408088,86.3974274 L16.9150553,30.169894 L47.0849493,2.84217094e-14 Z M103.440016,116.694904 C74.7091717,144.512844 55.9626236,177.598744 46.7136,196.424891 C64.7370667,233.114811 119.071573,324.418278 213.333333,324.418278 C242.440012,324.418278 267.739844,315.712374 289.339919,302.595012 L240.926035,254.180993 C232.571166,258.17928 223.213696,260.418278 213.333333,260.418278 C177.987413,260.418278 149.333333,231.764198 149.333333,196.418278 C149.333333,186.537915 151.572331,177.180445 155.570618,168.825577 Z M213.333333,25.7516113 C362.666667,25.7516113 426.666667,196.418278 426.666667,196.418278 C426.666667,196.418278 412.428071,234.387867 381.712212,274.508373 L351.151213,243.941206 C364.581948,225.697449 374.142733,208.239347 379.954347,196.410385 C361.9296,159.721745 307.595093,68.418278 213.333333,68.418278 C201.495833,68.418278 190.287983,69.858232 179.702584,72.449263 L145.662385,38.4000762 C165.913597,30.494948 188.437631,25.7516113 213.333333,25.7516113 Z' transform='translate(42.667 59.582)'/></svg>";const i="data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='Shape' transform='translate(42.666667, 85.333333)'><path d='M213.333333,1.42108547e-14 C64,1.42108547e-14 7.10542736e-15,170.666667 7.10542736e-15,170.666667 C7.10542736e-15,170.666667 64,341.333333 213.333333,341.333333 C362.666667,341.333333 426.666667,170.666667 426.666667,170.666667 C426.666667,170.666667 362.666667,1.42108547e-14 213.333333,1.42108547e-14 Z M213.333333,298.666667 C119.071573,298.666667 64.7370667,207.3632 46.7136,170.67328 C64.7850667,133.88928 119.114667,42.6666667 213.333333,42.6666667 C307.595093,42.6666667 361.9296,133.970133 379.954347,170.658773 C361.8816,207.444053 307.552,298.666667 213.333333,298.666667 Z M213.333333,96 C172.096427,96 138.666667,129.42976 138.666667,170.666667 C138.666667,211.903573 172.096427,245.333333 213.333333,245.333333 C254.57024,245.333333 288,211.903573 288,170.666667 C288,129.42976 254.57024,96 213.333333,96 Z M213.333333,202.666667 C195.688747,202.666667 181.333333,188.311253 181.333333,170.666667 C181.333333,153.02208 195.688747,138.666667 213.333333,138.666667 C230.97792,138.666667 245.333333,153.02208 245.333333,170.666667 C245.333333,188.311253 230.97792,202.666667 213.333333,202.666667 Z'/></g></g></svg>";const s="data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51168 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.154987,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51168 331.154987,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.44,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.44,384 213.333333,384 Z M240.04672,128 C240.04672,143.46752 228.785067,154.666667 213.55008,154.666667 C197.698773,154.666667 186.713387,143.46752 186.713387,127.704107 C186.713387,112.5536 197.99616,101.333333 213.55008,101.333333 C228.785067,101.333333 240.04672,112.5536 240.04672,128 Z M192.04672,192 L234.713387,192 L234.713387,320 L192.04672,320 L192.04672,192 Z' id='Shape'/></g></g></svg>";const g="data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(64.000000, 234.666667)'><rect id='Combined-Shape' x='0' y='0' width='384' height='42.6666667'/></g></g></svg>";const o="data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='uncollapse' transform='translate(64.000000, 64.000000)'><path d='M213.333333,1.42108547e-14 L213.333,170.666 L384,170.666667 L384,213.333333 L213.333,213.333 L213.333333,384 L170.666667,384 L170.666,213.333 L1.42108547e-14,213.333333 L1.42108547e-14,170.666667 L170.666,170.666 L170.666667,1.42108547e-14 L213.333333,1.42108547e-14 Z'/></g></g></svg>";const l="data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add-copy' transform='translate(42.666667, 42.666667)'><path d='M213.333333,3.55271368e-14 C95.51296,3.55271368e-14 3.55271368e-14,95.51296 3.55271368e-14,213.333333 C3.55271368e-14,331.153707 95.51296,426.666667 213.333333,426.666667 C331.153707,426.666667 426.666667,331.153707 426.666667,213.333333 C426.666667,95.51296 331.153707,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,384 C119.227947,384 42.6666667,307.43872 42.6666667,213.333333 C42.6666667,119.227947 119.227947,42.6666667 213.333333,42.6666667 C307.43872,42.6666667 384,119.227947 384,213.333333 C384,307.43872 307.438933,384 213.333333,384 Z M293.669333,137.114453 L323.835947,167.281067 L192,299.66912 L112.916693,220.585813 L143.083307,190.4192 L192,239.335893 L293.669333,137.114453 Z' id='Shape'/></g></g></svg>";const d="data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?><svg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g id='add' transform='translate(32.000000, 42.666667)'><path d='M246.312928,5.62892705 C252.927596,9.40873724 258.409564,14.8907053 262.189374,21.5053731 L444.667042,340.84129 C456.358134,361.300701 449.250007,387.363834 428.790595,399.054926 C422.34376,402.738832 415.04715,404.676552 407.622001,404.676552 L42.6666667,404.676552 C19.1025173,404.676552 7.10542736e-15,385.574034 7.10542736e-15,362.009885 C7.10542736e-15,354.584736 1.93772021,347.288125 5.62162594,340.84129 L188.099293,21.5053731 C199.790385,1.04596203 225.853517,-6.06216498 246.312928,5.62892705 Z M225.144334,42.6739678 L42.6666667,362.009885 L407.622001,362.009885 L225.144334,42.6739678 Z M224,272 C239.238095,272 250.666667,283.264 250.666667,298.624 C250.666667,313.984 239.238095,325.248 224,325.248 C208.415584,325.248 197.333333,313.984 197.333333,298.282667 C197.333333,283.264 208.761905,272 224,272 Z M245.333333,106.666667 L245.333333,234.666667 L202.666667,234.666667 L202.666667,106.666667 L245.333333,106.666667 Z' id='Combined-Shape'/></g></g></svg>";export{t as a,d as b,s as c,l as d,g as e,o as f,i as g,n as h,e as i};
+//# sourceMappingURL=p-da8517ed.js.map