npm - @siemens/ix - Versions diffs - 0.0.0-20240419081748 - Mend

@siemens/ix 0.0.0-20240419081748

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

Files changed (2134) hide show

package/dist/siemens-ix/p-c89a070a.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as e,h as t,H as r,g as n}from"./p-26e9d40e.js";import{B as i}from"./p-16826ff7.js";import{a as s}from"./p-4f8ac3bf.js";import"./p-16d378f3.js";const a=":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host ,:host ::after,:host ::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default},::after,::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}";const d=a;const l=class{constructor(t){o(this,t);this.pressedChange=e(this,"pressedChange",7);this.variant="secondary";this.outline=false;this.ghost=false;this.icon=undefined;this.pressed=false;this.size="24";this.disabled=false;this.loading=false}isIllegalToggleButtonConfig(){return this.variant==="primary"&&(this.outline\|\|this.ghost)}logIllegalConfig(){console.warn('iX toggle button with illegal configuration detected. Variant "primary" can only be combined with "outline" or "ghost".')}onVariantChange(){if(this.isIllegalToggleButtonConfig()){this.logIllegalConfig()}}onGhostChange(){this.onVariantChange()}onOutlineChange(){this.onVariantChange()}componentDidLoad(){this.onVariantChange()}dispatchPressedChange(){this.pressedChange.emit(!this.pressed)}getIconSizeClass(){return{"btn-icon-12":this.size==="12","btn-icon-16":this.size==="16","btn-icon-32":this.size==="24"}}render(){const o={variant:this.variant,outline:this.outline,ghost:this.ghost,iconOnly:true,iconOval:false,selected:this.pressed,disabled:this.disabled\|\|this.loading,icon:this.icon,iconSize:this.size,loading:this.loading,onClick:()=>this.dispatchPressedChange(),type:"button",ariaAttributes:{"aria-pressed":s(this.pressed)},extraClasses:Object.assign({"icon-button":true},this.getIconSizeClass())};console.log(o,this.disabled,this.loading);return t(r,{key:"d36e5f7e9bad1ea53f65d5b2b805f69e4e76e4b0",class:Object.assign(Object.assign({},this.getIconSizeClass()),{disabled:this.disabled\|\|this.loading})},t(i,Object.assign({key:"1e19be2923cec5d80bb27cc96ef50caf267bcd70"},o)))}get hostElement(){return n(this)}static get watchers(){return{variant:["onVariantChange"],ghost:["onGhostChange"],outline:["onOutlineChange"]}}};l.style=d;export{l as ix_icon_toggle_button};
2	+ //# sourceMappingURL=p-c89a070a.entry.js.map

package/dist/siemens-ix/p-c89a070a.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["iconToggleButtonCss","IxIconToggleButtonStyle0","IconToggleButton","isIllegalToggleButtonConfig","this","variant","outline","ghost","logIllegalConfig","console","warn","onVariantChange","onGhostChange","onOutlineChange","componentDidLoad","dispatchPressedChange","pressedChange","emit","pressed","getIconSizeClass","size","render","baseButtonProps","iconOnly","iconOval","selected","disabled","loading","icon","iconSize","onClick","type","ariaAttributes","a11yBoolean","extraClasses","Object","assign","log","h","Host","key","class","BaseIconButton"],"sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-button.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 '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\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 h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n tag: 'ix-icon-toggle-button',\n shadow: true,\n styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n /**\n * Button variant.\n * Important: Variant 'primary' can only be combined with either outline or ghost.\n */\n @Prop() variant: ButtonVariant = 'secondary';\n\n /**\n * Outline button\n */\n @Prop() outline = false;\n\n /**\n * Button with no background or outline\n */\n @Prop() ghost = false;\n\n /**\n * Icon name\n */\n @Prop() icon: string;\n\n /**\n * Show button as pressed\n */\n @Prop() pressed = false;\n\n /**\n * Size of icon in button\n */\n @Prop() size: '24' | '16' | '12' = '24';\n\n /**\n * Disable the button\n */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * Loading button\n */\n @Prop() loading: boolean = false;\n\n /**\n * Pressed change event\n */\n @Event() pressedChange: EventEmitter<boolean>;\n\n @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n private isIllegalToggleButtonConfig() {\n return this.variant === 'primary' && (this.outline || this.ghost);\n }\n\n private logIllegalConfig() {\n console.warn(\n 'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n );\n }\n\n @Watch('variant')\n onVariantChange() {\n if (this.isIllegalToggleButtonConfig()) {\n this.logIllegalConfig();\n }\n }\n\n @Watch('ghost')\n onGhostChange() {\n this.onVariantChange();\n }\n\n @Watch('outline')\n onOutlineChange() {\n this.onVariantChange();\n }\n\n componentDidLoad() {\n this.onVariantChange();\n }\n\n private dispatchPressedChange() {\n this.pressedChange.emit(!this.pressed);\n }\n\n private getIconSizeClass() {\n return {\n 'btn-icon-12': this.size === '12',\n 'btn-icon-16': this.size === '16',\n 'btn-icon-32': this.size === '24',\n };\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: true,\n iconOval: false,\n selected: this.pressed,\n disabled: this.disabled || this.loading,\n icon: this.icon,\n iconSize: this.size,\n loading: this.loading,\n onClick: () => this.dispatchPressedChange(),\n type: 'button',\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.pressed),\n },\n extraClasses: {\n 'icon-button': true,\n ...this.getIconSizeClass(),\n },\n };\n console.log(baseButtonProps, this.disabled, this.loading);\n\n return (\n <Host\n class={{\n ...this.getIconSizeClass(),\n disabled: this.disabled || this.loading,\n }}\n >\n <BaseIconButton {...baseButtonProps}></BaseIconButton>\n </Host>\n );\n }\n}\n"],"mappings":"gKAAA,MAAMA,EAAsB,wpgBAC5B,MAAAC,EAAeD,E,MC+BFE,EAAgB,M,mFAKM,Y,aAKf,M,WAKF,M,iCAUE,M,UAKiB,K,cAKC,M,aAKT,K,CASnB,2BAAAC,GACN,OAAOC,KAAKC,UAAY,YAAcD,KAAKE,SAAWF,KAAKG,M,CAGrD,gBAAAC,GACNC,QAAQC,KACN,0H,CAKJ,eAAAC,GACE,GAAIP,KAAKD,8BAA+B,CACtCC,KAAKI,kB,EAKT,aAAAI,GACER,KAAKO,iB,CAIP,eAAAE,GACET,KAAKO,iB,CAGP,gBAAAG,GACEV,KAAKO,iB,CAGC,qBAAAI,GACNX,KAAKY,cAAcC,MAAMb,KAAKc,Q,CAGxB,gBAAAC,GACN,MAAO,CACL,cAAef,KAAKgB,OAAS,KAC7B,cAAehB,KAAKgB,OAAS,KAC7B,cAAehB,KAAKgB,OAAS,K,CAIjC,MAAAC,GACE,MAAMC,EAAmC,CACvCjB,QAASD,KAAKC,QACdC,QAASF,KAAKE,QACdC,MAAOH,KAAKG,MACZgB,SAAU,KACVC,SAAU,MACVC,SAAUrB,KAAKc,QACfQ,SAAUtB,KAAKsB,UAAYtB,KAAKuB,QAChCC,KAAMxB,KAAKwB,KACXC,SAAUzB,KAAKgB,KACfO,QAASvB,KAAKuB,QACdG,QAAS,IAAM1B,KAAKW,wBACpBgB,KAAM,SACNC,eAAgB,CACd,eAAgBC,EAAY7B,KAAKc,UAEnCgB,aAAYC,OAAAC,OAAA,CACV,cAAe,MACZhC,KAAKe,qBAGZV,QAAQ4B,IAAIf,EAAiBlB,KAAKsB,SAAUtB,KAAKuB,SAEjD,OACEW,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAKN,OAAAC,OAAAD,OAAAC,OAAA,GACAhC,KAAKe,oBAAkB,CAC1BO,SAAUtB,KAAKsB,UAAYtB,KAAKuB,WAGlCW,EAACI,EAAcP,OAAAC,OAAA,CAAAI,IAAA,4CAAKlB,I"}

package/dist/siemens-ix/p-c8e0563a.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as t,H as o,g as r}from"./p-26e9d40e.js";const s=":host{min-width:11.937rem;max-width:11.937rem;width:11.937rem;display:flex;flex-direction:column;border:1px solid var(--theme-tile--border);border-radius:var(--theme-tile--border-radius);background-color:var(--theme-color-2);color:var(--theme-color-std-text);box-shadow:var(--theme-tile--box-shadow)}:host ,:host ::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tile-header{display:flex;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host .tile-header,:host .tile-subheader,:host .tile-content,:host .tile-footer{padding:0 1rem}:host .tile-header,:host .tile-content{flex-grow:1}:host .tile-header.has-content{display:flex;height:2.5rem;max-height:2.5rem;padding-inline-end:0.5rem}:host .tile-subheader{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}:host .tile-footer.has-content{border-block-start:1px solid var(--theme-color-1);height:2.5rem}:host(.tile-small){height:2.5rem;min-height:2.5rem;max-height:2.5rem}:host(.tile-medium){height:5rem;min-height:5rem;max-height:5rem}:host(.tile-big){height:10rem;min-height:10rem;max-height:10rem}:host(:active),:host(:focus-visible),:host(:visited){outline:none}";const a=s;const i=class{constructor(t){e(this,t);this.size="medium";this.hasHeaderSlot=false;this.hasFooterSlot=false}handleHeaderSlotChange(){this.hasHeaderSlot=!!this.hostElement.querySelector('[slot="header"]')}handleFooterSlotChange(){this.hasFooterSlot=!!this.hostElement.querySelector('[slot="footer"]')}render(){return t(o,{key:"c0d60ca326a0a16f2255ae8a755f03a86c4c2bdf",class:{"tile-small":this.size==="small","tile-medium":this.size==="medium","tile-big":this.size==="big"}},t("div",{key:"b43e41051b62b8146749b884c9d611f79b6bf9c8",class:{"tile-header":true,"has-content":this.hasHeaderSlot}},t("slot",{key:"3dc74cc4beb1b24023463d62daf862c28ba2177a",name:"header",onSlotchange:()=>this.handleHeaderSlotChange()})),t("div",{key:"4935b7758861eab0fd305ceccba9d4d3a7cc90de",class:"tile-subheader"},t("slot",{key:"31d66eb3e361c0b811ab3c0f89976c39f3576629",name:"subheader"})),t("div",{key:"083b54d5455f1015811c904826dda8fb2b35a243",class:"tile-content"},t("slot",{key:"14c79b5d8365444f234c030c56b2592b7cb38dc8"})),t("div",{key:"a12114c3593b8032aa4e5d841efc55723deb7b44",class:{"tile-footer":true,"has-content":this.hasFooterSlot}},t("slot",{key:"aa1f08fe633554658a5119cd7d61febb3928e8f4",name:"footer",onSlotchange:()=>this.handleFooterSlotChange()})))}get hostElement(){return r(this)}};i.style=a;export{i as ix_tile};
2	+ //# sourceMappingURL=p-c8e0563a.entry.js.map

package/dist/siemens-ix/p-c8e0563a.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["tileCss","IxTileStyle0","Tile","handleHeaderSlotChange","this","hasHeaderSlot","hostElement","querySelector","handleFooterSlotChange","hasFooterSlot","render","h","Host","key","class","size","name","onSlotchange"],"sources":["src/components/tile/tile.scss?tag=ix-tile&encapsulation=shadow","src/components/tile/tile.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/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n@mixin set-height($height) {\n height: $height;\n min-height: $height;\n max-height: $height;\n}\n\n$heightSmall: 2.5rem;\n$heightMedium: 5rem;\n$heightBig: 10rem;\n$width: 11.937rem;\n\n:host {\n @include ix-component;\n\n min-width: $width;\n max-width: $width;\n width: $width;\n\n display: flex;\n flex-direction: column;\n border: 1px solid var(--theme-tile--border);\n border-radius: var(--theme-tile--border-radius);\n\n background-color: var(--theme-color-2);\n color: var(--theme-color-std-text);\n box-shadow: var(--theme-tile--box-shadow);\n\n // @each $key, $value in $color-map-status {\n // &.tile-#{$key} {\n // background-color: #{$value};\n // color: automatic-text-color($value, 65);\n // }\n // }\n\n .tile-header {\n display: flex;\n align-items: center;\n\n @include text-l-title;\n }\n\n .tile-header,\n .tile-subheader,\n .tile-content,\n .tile-footer {\n padding: 0 $default-space;\n }\n\n .tile-header,\n .tile-content {\n flex-grow: 1;\n }\n\n .tile-header.has-content {\n display: flex;\n height: $large-control-height;\n max-height: $large-control-height;\n padding-inline-end: $small-space;\n }\n\n .tile-subheader {\n color: var(--theme-btn-invisible-secondary--color);\n flex-grow: 0;\n }\n\n .tile-footer.has-content {\n border-block-start: 1px solid var(--theme-color-1);\n height: $large-control-height;\n }\n}\n\n:host(.tile-small) {\n @include set-height($heightSmall);\n}\n\n:host(.tile-medium) {\n @include set-height($heightMedium);\n}\n\n:host(.tile-big) {\n @include set-height($heightBig);\n}\n\n:host(:active),\n:host(:focus-visible),\n:host(:visited) {\n outline: 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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'ix-tile',\n styleUrl: 'tile.scss',\n shadow: true,\n})\nexport class Tile {\n @Element() hostElement: HTMLIxTileElement;\n\n /**\n * Size of the tile - one of 'small', 'medium' or 'large'\n */\n @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n\n @State() hasHeaderSlot: boolean = false;\n @State() hasFooterSlot: boolean = false;\n\n handleHeaderSlotChange() {\n this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n }\n\n handleFooterSlotChange() {\n this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n }\n\n render() {\n return (\n <Host\n class={{\n 'tile-small': this.size === 'small',\n 'tile-medium': this.size === 'medium',\n 'tile-big': this.size === 'big',\n }}\n >\n <div\n class={{\n 'tile-header': true,\n 'has-content': this.hasHeaderSlot,\n }}\n >\n <slot\n name=\"header\"\n onSlotchange={() => this.handleHeaderSlotChange()}\n ></slot>\n </div>\n <div class=\"tile-subheader\">\n <slot name=\"subheader\"></slot>\n </div>\n <div class=\"tile-content\">\n <slot></slot>\n </div>\n <div\n class={{\n 'tile-footer': true,\n 'has-content': this.hasFooterSlot,\n }}\n >\n <slot\n name=\"footer\"\n onSlotchange={() => this.handleFooterSlotChange()}\n ></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAU,4yDAChB,MAAAC,EAAeD,E,MCeFE,EAAI,M,mCAM4B,S,mBAET,M,mBACA,K,CAElC,sBAAAC,GACEC,KAAKC,gBAAkBD,KAAKE,YAAYC,cAAc,kB,CAGxD,sBAAAC,GACEJ,KAAKK,gBAAkBL,KAAKE,YAAYC,cAAc,kB,CAGxD,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAcV,KAAKW,OAAS,QAC5B,cAAeX,KAAKW,OAAS,SAC7B,WAAYX,KAAKW,OAAS,QAG5BJ,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,cAAe,KACf,cAAeV,KAAKC,gBAGtBM,EAAA,QAAAE,IAAA,2CACEG,KAAK,SACLC,aAAc,IAAMb,KAAKD,4BAG7BQ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,QAAAE,IAAA,2CAAMG,KAAK,eAEbL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,cAAe,KACf,cAAeV,KAAKK,gBAGtBE,EAAA,QAAAE,IAAA,2CACEG,KAAK,SACLC,aAAc,IAAMb,KAAKI,4B"}

package/dist/siemens-ix/p-ca658a19.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,H as s,g as i}from"./p-26e9d40e.js";import{g as r}from"./p-712e0ee0.js";const o=":host{position:relative;display:flex;width:100%;flex-wrap:wrap;align-items:stretch}:host ,:host ::after,:host ::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .group{display:flex;position:absolute;align-items:center;height:100%}:host .group-start{left:0px;height:2rem;margin-left:0.5rem;color:var(--theme-color-soft-text)}:host .group-end{right:0px;height:2rem;margin-right:0.5rem;color:var(--theme-color-soft-text)}:host ::slotted(){display:flex}:host(.disabled){pointer-events:none}:host(.disabled) .group-start ::slotted(),:host(.disabled) .group-end ::slotted(){opacity:0.4 !important}";const a=o;const h=class{constructor(e){t(this,e);this.disabled=false;this.inputPaddingLeft=0;this.inputPaddingRight=0}get inputElement(){return this.hostElement.querySelector("input")}componentWillLoad(){var t;const{valid:e}=this.inputElement.validity;this.inputElement.addEventListener("valid",(()=>{this.onValidInput()}));this.inputElement.addEventListener("invalid",(()=>{this.onInvalidInput()}));this.inputElement.addEventListener("input",(()=>{this.startSlotChanged()}));(t=this.inputElement.form)===null\|\|t===void 0?void 0:t.addEventListener("submit",(()=>{this.startSlotChanged()}));e?this.onValidInput():this.onInvalidInput();this.observer=new MutationObserver((()=>{this.slotChanged();this.startSlotChanged();this.endSlotChanged()}));this.observer.observe(this.hostElement,{subtree:true,childList:true,attributes:true,characterData:true})}componentDidRender(){this.prepareInputElement()}onValidInput(){this.startSlotChanged()}onInvalidInput(){this.startSlotChanged()}prepareInputElement(){if(this.inputElement){this.inputElement.style.width="100%";if(this.inputPaddingRight!==0){this.inputElement.style.paddingRight=this.inputPaddingRight+"px"}else{this.inputElement.style.paddingRight="0.5rem"}if(this.inputPaddingLeft!==0){this.inputElement.style.paddingLeft=this.inputPaddingLeft+"px"}else{this.inputElement.style.paddingLeft="0.5rem"}}else{console.warn('You used the ix-input-group without an input tag, e.g. <input class="form-control" />')}}slotChanged(){var t;this.disabled=(t=this.inputElement)===null\|\|t===void 0?void 0:t.disabled}startSlotChanged(){const t=this.hostElement.shadowRoot.querySelector('slot[name="input-start"]');setTimeout((()=>{var e,s;const i=this.getChildrenWidth(t);if(i!==0){this.inputPaddingLeft=11+i}else{this.inputPaddingLeft=0}if(!this.inputElement){return}const r=!this.inputElement.validity.valid\|\|this.inputElement.classList.contains("is-invalid");const o=((e=this.inputElement.form)===null\|\|e===void 0?void 0:e.classList.contains("was-validated"))\|\|((s=this.inputElement.form)===null\|\|s===void 0?void 0:s.noValidate)===false;if(o&&r){const t=this.inputPaddingLeft!==0?this.inputPaddingLeft:7;this.inputElement.style.backgroundPosition=`left ${t}px center`;this.inputPaddingLeft+=26}}))}endSlotChanged(){const t=this.hostElement.shadowRoot.querySelector('slot[name="input-end"]');setTimeout((()=>{this.inputPaddingRight=15+this.getChildrenWidth(t)}))}getChildrenWidth(t){if(!t){return 0}const e=r(t);if(e.length===0){return 0}let s=0;e.forEach((t=>{s+=t.getBoundingClientRect().width}));return s}render(){return e(s,{key:"d347bbb23bf05a8315f422ad77eb519736cae42a",class:{disabled:this.disabled}},e("div",{key:"11b71f6e732610672b81fb84c68bce4263dc05ce",class:"group group-start"},e("slot",{key:"0dcab523c356c1a85779c9d04fff293a99988b2c",name:"input-start"})),e("slot",{key:"bc6e83ae8ffb35fa6ab3004de1363d6d1016a912"}),e("div",{key:"dd56e9147b66fef48e6ed4e95a4f666079304650",class:"group group-end"},e("slot",{key:"ba31566fea59c9bcb35cca6512dc317b11c769cd",name:"input-end"})))}get hostElement(){return i(this)}};h.style=a;export{h as ix_input_group};
2	+ //# sourceMappingURL=p-ca658a19.entry.js.map

package/dist/siemens-ix/p-ca658a19.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["inputGroupCss","IxInputGroupStyle0","InputGroup","inputElement","this","hostElement","querySelector","componentWillLoad","valid","validity","addEventListener","onValidInput","onInvalidInput","startSlotChanged","_a","form","observer","MutationObserver","slotChanged","endSlotChanged","observe","subtree","childList","attributes","characterData","componentDidRender","prepareInputElement","style","width","inputPaddingRight","paddingRight","inputPaddingLeft","paddingLeft","console","warn","disabled","slot","shadowRoot","setTimeout","startPadding","getChildrenWidth","isInputInvalid","classList","contains","formWasValidated","_b","noValidate","left","backgroundPosition","slotElement","endElements","getSlottedElements","length","forEach","element","getBoundingClientRect","render","h","Host","key","class","name"],"sources":["src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","src/components/input-group/input-group.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@import 'mixins/shadow-dom/host-disabled';\n\n:host {\n @include ix-component;\n\n position: relative;\n display: flex;\n width: 100%;\n flex-wrap: wrap;\n align-items: stretch;\n\n .group {\n display: flex;\n position: absolute;\n align-items: center;\n height: 100%;\n }\n\n .group-start {\n left: 0px;\n height: 2rem;\n margin-left: 0.5rem;\n color: var(--theme-color-soft-text);\n }\n\n .group-end {\n right: 0px;\n height: 2rem;\n margin-right: 0.5rem;\n color: var(--theme-color-soft-text);\n }\n\n ::slotted(*) {\n display: flex;\n }\n}\n\n@include host-disabled {\n .group-start,\n .group-end {\n ::slotted(*) {\n opacity: 0.4 !important;\n }\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n tag: 'ix-input-group',\n styleUrl: 'input-group.scss',\n shadow: true,\n})\nexport class InputGroup {\n @Element() hostElement!: HTMLIxInputGroupElement;\n\n @State() disabled = false;\n\n @State() inputPaddingLeft = 0;\n @State() inputPaddingRight = 0;\n\n private get inputElement() {\n return this.hostElement.querySelector('input') as HTMLInputElement;\n }\n\n private observer: MutationObserver;\n\n componentWillLoad() {\n const { valid } = this.inputElement.validity;\n this.inputElement.addEventListener('valid', () => {\n this.onValidInput();\n });\n this.inputElement.addEventListener('invalid', () => {\n this.onInvalidInput();\n });\n this.inputElement.addEventListener('input', () => {\n this.startSlotChanged();\n });\n\n this.inputElement.form?.addEventListener('submit', () => {\n this.startSlotChanged();\n });\n\n valid ? this.onValidInput() : this.onInvalidInput();\n\n this.observer = new MutationObserver(() => {\n this.slotChanged();\n this.startSlotChanged();\n this.endSlotChanged();\n });\n\n this.observer.observe(this.hostElement, {\n subtree: true,\n childList: true,\n attributes: true,\n characterData: true,\n });\n }\n\n componentDidRender() {\n this.prepareInputElement();\n }\n\n private onValidInput() {\n this.startSlotChanged();\n }\n\n private onInvalidInput() {\n this.startSlotChanged();\n }\n\n private prepareInputElement() {\n if (this.inputElement) {\n this.inputElement.style.width = '100%';\n\n if (this.inputPaddingRight !== 0) {\n this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n } else {\n this.inputElement.style.paddingRight = '0.5rem';\n }\n\n if (this.inputPaddingLeft !== 0) {\n this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n } else {\n this.inputElement.style.paddingLeft = '0.5rem';\n }\n } else {\n console.warn(\n 'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n );\n }\n }\n\n private slotChanged() {\n this.disabled = this.inputElement?.disabled;\n }\n\n private startSlotChanged() {\n const slot = this.hostElement.shadowRoot.querySelector(\n 'slot[name=\"input-start\"]'\n );\n\n setTimeout(() => {\n const startPadding = this.getChildrenWidth(slot);\n\n if (startPadding !== 0) {\n this.inputPaddingLeft = 11 + startPadding;\n } else {\n this.inputPaddingLeft = 0;\n }\n\n if (!this.inputElement) {\n return;\n }\n\n const isInputInvalid =\n !this.inputElement.validity.valid ||\n this.inputElement.classList.contains('is-invalid');\n\n const formWasValidated =\n this.inputElement.form?.classList.contains('was-validated') ||\n this.inputElement.form?.noValidate === false;\n\n if (formWasValidated && isInputInvalid) {\n const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n this.inputElement.style.backgroundPosition = `left ${left}px center`;\n this.inputPaddingLeft += 26;\n }\n });\n }\n\n private endSlotChanged() {\n const slot = this.hostElement.shadowRoot.querySelector(\n 'slot[name=\"input-end\"]'\n );\n\n setTimeout(() => {\n this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n });\n }\n\n private getChildrenWidth(slotElement: Element) {\n if (!slotElement) {\n return 0;\n }\n\n const endElements = getSlottedElements<HTMLElement>(slotElement);\n if (endElements.length === 0) {\n return 0;\n }\n\n let width = 0;\n\n endElements.forEach((element) => {\n width += element.getBoundingClientRect().width;\n });\n\n return width;\n }\n\n render() {\n return (\n <Host class={{ disabled: this.disabled }}>\n <div class=\"group group-start\">\n <slot name=\"input-start\"></slot>\n </div>\n <slot></slot>\n <div class=\"group group-end\">\n <slot name=\"input-end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,ymCACtB,MAAAC,EAAeD,E,MCgBFE,EAAU,M,uCAGD,M,sBAEQ,E,uBACC,C,CAE7B,gBAAYC,GACV,OAAOC,KAAKC,YAAYC,cAAc,Q,CAKxC,iBAAAC,G,MACE,MAAMC,MAAEA,GAAUJ,KAAKD,aAAaM,SACpCL,KAAKD,aAAaO,iBAAiB,SAAS,KAC1CN,KAAKO,cAAc,IAErBP,KAAKD,aAAaO,iBAAiB,WAAW,KAC5CN,KAAKQ,gBAAgB,IAEvBR,KAAKD,aAAaO,iBAAiB,SAAS,KAC1CN,KAAKS,kBAAkB,KAGzBC,EAAAV,KAAKD,aAAaY,QAAI,MAAAD,SAAA,SAAAA,EAAEJ,iBAAiB,UAAU,KACjDN,KAAKS,kBAAkB,IAGzBL,EAAQJ,KAAKO,eAAiBP,KAAKQ,iBAEnCR,KAAKY,SAAW,IAAIC,kBAAiB,KACnCb,KAAKc,cACLd,KAAKS,mBACLT,KAAKe,gBAAgB,IAGvBf,KAAKY,SAASI,QAAQhB,KAAKC,YAAa,CACtCgB,QAAS,KACTC,UAAW,KACXC,WAAY,KACZC,cAAe,M,CAInB,kBAAAC,GACErB,KAAKsB,qB,CAGC,YAAAf,GACNP,KAAKS,kB,CAGC,cAAAD,GACNR,KAAKS,kB,CAGC,mBAAAa,GACN,GAAItB,KAAKD,aAAc,CACrBC,KAAKD,aAAawB,MAAMC,MAAQ,OAEhC,GAAIxB,KAAKyB,oBAAsB,EAAG,CAChCzB,KAAKD,aAAawB,MAAMG,aAAe1B,KAAKyB,kBAAoB,I,KAC3D,CACLzB,KAAKD,aAAawB,MAAMG,aAAe,Q,CAGzC,GAAI1B,KAAK2B,mBAAqB,EAAG,CAC/B3B,KAAKD,aAAawB,MAAMK,YAAc5B,KAAK2B,iBAAmB,I,KACzD,CACL3B,KAAKD,aAAawB,MAAMK,YAAc,Q,MAEnC,CACLC,QAAQC,KACN,wF,EAKE,WAAAhB,G,MACNd,KAAK+B,UAAWrB,EAAAV,KAAKD,gBAAY,MAAAW,SAAA,SAAAA,EAAEqB,Q,CAG7B,gBAAAtB,GACN,MAAMuB,EAAOhC,KAAKC,YAAYgC,WAAW/B,cACvC,4BAGFgC,YAAW,K,QACT,MAAMC,EAAenC,KAAKoC,iBAAiBJ,GAE3C,GAAIG,IAAiB,EAAG,CACtBnC,KAAK2B,iBAAmB,GAAKQ,C,KACxB,CACLnC,KAAK2B,iBAAmB,C,CAG1B,IAAK3B,KAAKD,aAAc,CACtB,M,CAGF,MAAMsC,GACHrC,KAAKD,aAAaM,SAASD,OAC5BJ,KAAKD,aAAauC,UAAUC,SAAS,cAEvC,MAAMC,IACJ9B,EAAAV,KAAKD,aAAaY,QAAI,MAAAD,SAAA,SAAAA,EAAE4B,UAAUC,SAAS,qBAC3CE,EAAAzC,KAAKD,aAAaY,QAAI,MAAA8B,SAAA,SAAAA,EAAEC,cAAe,MAEzC,GAAIF,GAAoBH,EAAgB,CACtC,MAAMM,EAAO3C,KAAK2B,mBAAqB,EAAI3B,KAAK2B,iBAAmB,EACnE3B,KAAKD,aAAawB,MAAMqB,mBAAqB,QAAQD,aACrD3C,KAAK2B,kBAAoB,E,KAKvB,cAAAZ,GACN,MAAMiB,EAAOhC,KAAKC,YAAYgC,WAAW/B,cACvC,0BAGFgC,YAAW,KACTlC,KAAKyB,kBAAoB,GAAKzB,KAAKoC,iBAAiBJ,EAAK,G,CAIrD,gBAAAI,CAAiBS,GACvB,IAAKA,EAAa,CAChB,OAAO,C,CAGT,MAAMC,EAAcC,EAAgCF,GACpD,GAAIC,EAAYE,SAAW,EAAG,CAC5B,OAAO,C,CAGT,IAAIxB,EAAQ,EAEZsB,EAAYG,SAASC,IACnB1B,GAAS0B,EAAQC,wBAAwB3B,KAAK,IAGhD,OAAOA,C,CAGT,MAAA4B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEzB,SAAU/B,KAAK+B,WAC5BsB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,iBAEbJ,EAAA,QAAAE,IAAA,6CACAF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,e"}

package/dist/siemens-ix/p-ca838b5c.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as a,h as e,H as n,g as i}from"./p-26e9d40e.js";import{a as o}from"./p-71206084.js";import{s as r}from"./p-0ca3528f.js";import{a as s,A as m}from"./p-7c36d3fa.js";import{a as f}from"./p-702f9349.js";import{m as c}from"./p-c146af8e.js";import{a as l}from"./p-360b158e.js";import{t as d}from"./p-1da901d5.js";import"./p-46a6cd9d.js";import"./p-6e6efb4c.js";import"./p-c4749812.js";import"./p-68a274e7.js";class p extends Event{constructor(t){super("application-sidebar-toggle",{bubbles:true,composed:true});this.force=t}}const u="/!\n animate.css - https://animate.style/\n* Version - 4.1.1\n* Licensed under the MIT license - http://opensource.org/licenses/MIT\n\n Copyright (c) 2020 Animate.css\n/:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{animation-duration:1s;animation-duration:var(--animate-duration);animation-fill-mode:both}.animate__animated.animate__infinite{animation-iteration-count:infinite}.animate__animated.animate__repeat-1{animation-iteration-count:1;animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{animation-iteration-count:2;animation-iteration-count:calc(var(--animate-repeat) 2)}.animate__animated.animate__repeat-3{animation-iteration-count:3;animation-iteration-count:calc(var(--animate-repeat) * 3)}.animate__animated.animate__delay-1s{animation-delay:1s;animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{animation-delay:2s;animation-delay:calc(var(--animate-delay) * 2)}.animate__animated.animate__delay-3s{animation-delay:3s;animation-delay:calc(var(--animate-delay) * 3)}.animate__animated.animate__delay-4s{animation-delay:4s;animation-delay:calc(var(--animate-delay) * 4)}.animate__animated.animate__delay-5s{animation-delay:5s;animation-delay:calc(var(--animate-delay) * 5)}.animate__animated.animate__faster{animation-duration:0.5s;animation-duration:calc(var(--animate-duration) / 2)}.animate__animated.animate__fast{animation-duration:0.8s;animation-duration:calc(var(--animate-duration) * 0.8)}.animate__animated.animate__slow{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2)}.animate__animated.animate__slower{animation-duration:3s;animation-duration:calc(var(--animate-duration) * 3)}@media (prefers-reduced-motion: reduce), print{.animate__animated{animation-duration:1ms !important;transition-duration:1ms !important;animation-iteration-count:1 !important}.animate__animated[class=Out]{opacity:0}}@keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}.animate__bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scaleX(1)}}.animate__pulse{animation-name:pulse;animation-timing-function:ease-in-out}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}to{transform:scaleX(1)}}.animate__rubberBand{animation-name:rubberBand}@keyframes shakeX{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{transform:translate3d(10px, 0, 0)}}.animate__shakeX{animation-name:shakeX}@keyframes shakeY{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(0, -10px, 0)}20%,40%,60%,80%{transform:translate3d(0, 10px, 0)}}.animate__shakeY{animation-name:shakeY}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.animate__headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.animate__swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)}to{transform:scaleX(1)}}.animate__tada{animation-name:tada}@keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%, 0, 0) rotate(-5deg)}30%{transform:translate3d(20%, 0, 0) rotate(3deg)}45%{transform:translate3d(-15%, 0, 0) rotate(-3deg)}60%{transform:translate3d(10%, 0, 0) rotate(2deg)}75%{transform:translate3d(-5%, 0, 0) rotate(-1deg)}to{transform:translateZ(0)}}.animate__wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}.animate__jello{animation-name:jello;transform-origin:center}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.animate__heartBeat{animation-name:heartBeat;animation-duration:1.3s;animation-duration:calc(var(--animate-duration) 1.3);animation-timing-function:ease-in-out}@keyframes backInDown{0%{transform:translateY(-1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInDown{animation-name:backInDown}@keyframes backInLeft{0%{transform:translateX(-2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInLeft{animation-name:backInLeft}@keyframes backInRight{0%{transform:translateX(2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInRight{animation-name:backInRight}@keyframes backInUp{0%{transform:translateY(1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInUp{animation-name:backInUp}@keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(700px) scale(0.7);opacity:0.7}}.animate__backOutDown{animation-name:backOutDown}@keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(-2000px) scale(0.7);opacity:0.7}}.animate__backOutLeft{animation-name:backOutLeft}@keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(2000px) scale(0.7);opacity:0.7}}.animate__backOutRight{animation-name:backOutRight}@keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(-700px) scale(0.7);opacity:0.7}}.animate__backOutUp{animation-name:backOutUp}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scaleX(1)}}.animate__bounceIn{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, -3000px, 0) scaleY(3)}60%{opacity:1;transform:translate3d(0, 25px, 0) scaleY(0.9)}75%{transform:translate3d(0, -10px, 0) scaleY(0.95)}90%{transform:translate3d(0, 5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(-3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(25px, 0, 0) scaleX(1)}75%{transform:translate3d(-10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(-25px, 0, 0) scaleX(1)}75%{transform:translate3d(10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(-5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, 3000px, 0) scaleY(5)}60%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}75%{transform:translate3d(0, 10px, 0) scaleY(0.95)}90%{transform:translate3d(0, -5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%,55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}to{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}.animate__bounceOut{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0, 10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, 2000px, 0) scaleY(3)}}.animate__bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(-2000px, 0, 0) scaleX(2)}}.animate__bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(2000px, 0, 0) scaleX(2)}}.animate__bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0, -10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, 20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, -2000px, 0) scaleY(3)}}.animate__bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0, -2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0, 2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeInTopLeft{0%{opacity:0;transform:translate3d(-100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopLeft{animation-name:fadeInTopLeft}@keyframes fadeInTopRight{0%{opacity:0;transform:translate3d(100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopRight{animation-name:fadeInTopRight}@keyframes fadeInBottomLeft{0%{opacity:0;transform:translate3d(-100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomLeft{animation-name:fadeInBottomLeft}@keyframes fadeInBottomRight{0%{opacity:0;transform:translate3d(100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomRight{animation-name:fadeInBottomRight}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0, 100%, 0)}}.animate__fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, 2000px, 0)}}.animate__fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%, 0, 0)}}.animate__fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px, 0, 0)}}.animate__fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0)}}.animate__fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px, 0, 0)}}.animate__fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0, -100%, 0)}}.animate__fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, -2000px, 0)}}.animate__fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes fadeOutTopLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, -100%, 0)}}.animate__fadeOutTopLeft{animation-name:fadeOutTopLeft}@keyframes fadeOutTopRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, -100%, 0)}}.animate__fadeOutTopRight{animation-name:fadeOutTopRight}@keyframes fadeOutBottomRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, 100%, 0)}}.animate__fadeOutBottomRight{animation-name:fadeOutBottomRight}@keyframes fadeOutBottomLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, 100%, 0)}}.animate__fadeOutBottomLeft{animation-name:fadeOutBottomLeft}@keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}to{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}}.animate__animated.animate__flip{backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.animate__flipInX{backface-visibility:visible !important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.animate__flipInY{backface-visibility:visible !important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:flipOutX;backface-visibility:visible !important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);backface-visibility:visible !important;animation-name:flipOutY}@keyframes lightSpeedInRight{0%{transform:translate3d(100%, 0, 0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInRight{animation-name:lightSpeedInRight;animation-timing-function:ease-out}@keyframes lightSpeedInLeft{0%{transform:translate3d(-100%, 0, 0) skewX(30deg);opacity:0}60%{transform:skewX(-20deg);opacity:1}80%{transform:skewX(5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInLeft{animation-name:lightSpeedInLeft;animation-timing-function:ease-out}@keyframes lightSpeedOutRight{0%{opacity:1}to{transform:translate3d(100%, 0, 0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{animation-name:lightSpeedOutRight;animation-timing-function:ease-in}@keyframes lightSpeedOutLeft{0%{opacity:1}to{transform:translate3d(-100%, 0, 0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{animation-name:lightSpeedOutLeft;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform:rotate(-200deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateIn{animation-name:rotateIn;transform-origin:center}@keyframes rotateInDownLeft{0%{transform:rotate(-45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{animation-name:rotateInDownLeft;transform-origin:left bottom}@keyframes rotateInDownRight{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{animation-name:rotateInDownRight;transform-origin:right bottom}@keyframes rotateInUpLeft{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{animation-name:rotateInUpLeft;transform-origin:left bottom}@keyframes rotateInUpRight{0%{transform:rotate(-90deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{animation-name:rotateInUpRight;transform-origin:right bottom}@keyframes rotateOut{0%{opacity:1}to{transform:rotate(200deg);opacity:0}}.animate__rotateOut{animation-name:rotateOut;transform-origin:center}@keyframes rotateOutDownLeft{0%{opacity:1}to{transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{animation-name:rotateOutDownLeft;transform-origin:left bottom}@keyframes rotateOutDownRight{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{animation-name:rotateOutDownRight;transform-origin:right bottom}@keyframes rotateOutUpLeft{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{animation-name:rotateOutUpLeft;transform-origin:left bottom}@keyframes rotateOutUpRight{0%{opacity:1}to{transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{animation-name:rotateOutUpRight;transform-origin:right bottom}@keyframes hinge{0%{animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0, 700px, 0);opacity:0}}.animate__hinge{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2);animation-name:hinge;transform-origin:top left}@keyframes jackInTheBox{0%{opacity:0;transform:scale(0.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.animate__jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%, 0, 0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}.animate__rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0) rotate(120deg)}}.animate__rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}.animate__zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}to{opacity:0}}.animate__zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutDown{animation-name:zoomOutDown;transform-origin:center bottom}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px, 0, 0)}}.animate__zoomOutLeft{animation-name:zoomOutLeft;transform-origin:left center}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(2000px, 0, 0)}}.animate__zoomOutRight{animation-name:zoomOutRight;transform-origin:right center}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutUp{animation-name:zoomOutUp;transform-origin:center bottom}@keyframes slideInDown{0%{transform:translate3d(0, -100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0, 100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, 100%, 0)}}.animate__slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%, 0, 0)}}.animate__slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%, 0, 0)}}.animate__slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, -100%, 0)}}.animate__slideOutUp{animation-name:slideOutUp}:host{display:flex;flex-direction:row;position:absolute;height:100%;min-height:-moz-min-content;min-height:min-content;z-index:var(--theme-z-index-sticky);width:auto;bottom:0}:host ,:host ::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tabs{height:100%;position:relative;overflow-y:auto;pointer-events:all;-ms-overflow-style:none;scrollbar-width:inherit}:host .tabs::-webkit-scrollbar{display:none}:host .show-scrollbar{scrollbar-width:inherit}:host .show-scrollbar::-webkit-scrollbar{display:inherit}:host .tabs-shadow-container{overflow:hidden;display:block;position:relative;margin-bottom:0.75rem}:host .tabs--shadow{opacity:0;position:absolute;width:100%;height:0.625rem;background:linear-gradient(var(--theme-color-shadow-1), transparent);pointer-events:none;z-index:var(--theme-z-index-sticky);transition:opacity var(--theme-default-time)}:host .tabs--shadow-top{top:0;background:linear-gradient(var(--theme-color-shadow-1), transparent)}:host .tabs--shadow-bottom{bottom:0;background:linear-gradient(transparent, var(--theme-color-shadow-1))}:host .tabs--shadow--show{opacity:1}:host .menu{display:flex;flex-direction:column;position:relative;width:3.25rem;height:100%;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--theme-default-time) ease-in-out}:host .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}:host .menu-overlay{display:none;position:absolute;width:calc(100vw - 3.25rem);height:100%;left:3.25rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:left var(--theme-default-time) ease-in-out}:host .menu-overlay.visible{display:block}:host .menu.expanded{width:16rem}:host .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}:host .menu-overlay-container{display:contents}:host .menu-avatar{max-height:3rem}:host .avatar{margin-bottom:2rem}:host #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}:host #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}:host #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}:host .bottom-tab-divider{margin-top:auto}:host .menu-buttons{margin:0.5rem 0 0 0.625rem}:host .menu-buttons>:last-child{margin-bottom:1rem}:host(.breakpoint-sm) .menu:not(.expanded){width:0}:host(.breakpoint-sm) .menu-overlay{left:0;width:100vw}:host(.breakpoint-lg){position:relative}:host(.breakpoint-lg) .menu.expanded{box-shadow:none}:host ::slotted(a[href]){all:unset}";const h=u;const b=class{constructor(e){t(this,e);this.expandChange=a(this,"expandChange",7);this.mapExpandChange=a(this,"mapExpandChange",7);this.isTransitionDisabled=false;this.isVisible=t=>{var a,e;return t.style.display!=="none"&&((e=(a=t.parentElement)===null\|\|a===void 0?void 0:a.parentElement)===null\|\|e===void 0?void 0:e.style.display)!=="none"};this.showSettings=false;this.showAbout=false;this.enableToggleTheme=false;this.enableSettings=true;this.enableMapExpand=false;this.applicationName=undefined;this.applicationDescription="";this.maxVisibleMenuItems=9;this.i18nExpandSidebar="Expand sidebar";this.expand=false;this.startExpanded=false;this.pinned=false;this.i18nLegal="About & legal information";this.i18nSettings="Settings";this.i18nToggleTheme="Toggle theme";this.i18nExpand=" Expand";this.i18nCollapse="Collapse";this.showPinned=false;this.mapExpand=true;this.activeTab=undefined;this.breakpoint="lg";this.itemsScrollShadowTop=false;this.itemsScrollShadowBottom=false;this.applicationLayoutContext=undefined}pinnedChange(t){var a;if(((a=this.applicationLayoutContext)===null\|\|a===void 0?void 0:a.host)==="map-navigation"){console.warn("ix-map-navigation does not support pinning of the menu");return}this.setPinned(this.pinned);if(t){f.disableBreakpointDetection();f.setBreakpoint("lg");return}f.enableBreakpointDetection()}get popoverArea(){return this.hostElement.shadowRoot.querySelector("#popover-area")}get menu(){return this.hostElement.shadowRoot.querySelector(".menu")}get menuItemsContainer(){return this.menu.querySelector(".tabs")}get overlayContainer(){return this.hostElement.shadowRoot.querySelector(".menu-overlay")}get menuItems(){return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot="bottom"])')).filter(this.isVisible)}get menuBottomItems(){return Array.from(this.hostElement.querySelectorAll("ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)")).filter(this.isVisible)}get homeTab(){return this.hostElement.querySelector("ix-menu-item.home-tab")}get moreItemsDropdown(){return this.hostElement.shadowRoot.querySelector(".internal-tab ix-dropdown")}get isMoreItemsDropdownEmpty(){return this.hostElement.shadowRoot.querySelectorAll(".internal-tab ix-dropdown .appended").length===0}get moreItemsDropdownItems(){return this.hostElement.shadowRoot.querySelectorAll(".internal-tab ix-dropdown ix-menu-item")}get activeMoreTabContainer(){return this.hostElement.shadowRoot.querySelector(".active-more-tab")}get activeMoreTab(){return this.hostElement.shadowRoot.querySelector(".active-more-tab ix-menu-item")}get aboutPopoverContainer(){return this.hostElement.querySelector(".about-news")}get aboutNewsPopover(){var t;return(t=document.querySelector("ix-menu-about-news"))!==null&&t!==void 0?t:this.hostElement.querySelector("ix-menu-about-news")}get aboutTab(){return this.hostElement.shadowRoot.querySelector("#aboutAndLegal")}get about(){return this.hostElement.querySelector("ix-menu-about")}get settings(){return this.hostElement.querySelector("ix-menu-settings")}get isSettingsEmpty(){return Array.from(this.hostElement.shadowRoot.querySelectorAll("ix-menu-settings-item")).length===0}get tabsContainer(){return this.hostElement}componentDidLoad(){requestAnimationFrame((()=>{this.handleOverflowIndicator()}));if(this.pinned){this.pinnedChange(this.pinned)}}componentWillLoad(){s(this.hostElement,m,(t=>{this.applicationLayoutContext=t;if(t.hideHeader===true){this.onBreakpointChange("md");return}this.onBreakpointChange(f.breakpoint)}),true);c.register(this.hostElement);f.onChange.on((t=>this.onBreakpointChange(t)));this.onBreakpointChange(f.breakpoint,true)}componentWillRender(){this.appendTabs()}componentDidRender(){this.appendFragments()}setPinned(t){this.showPinned=t;c.setIsPinned(t)}onBreakpointChange(t,a=false){var e;if(!this.applicationLayoutContext&&t==="sm"){return}if(((e=this.applicationLayoutContext)===null\|\|e===void 0?void 0:e.host)==="map-navigation"){this.breakpoint="md";return}if(!this.applicationLayoutContext){return}if(this.applicationLayoutContext.hideHeader&&t==="sm"){return}this.setPinned(t==="lg");if(a\|\|t!==this.breakpoint)this.toggleMenu(t==="lg"&&this.startExpanded);this.breakpoint=t}appendFragments(){this.appendAboutNewsPopover()}resetActiveTab(){this.activeTab=null}appendTabs(){this.activeTab=null}getAboutPopoverVerticalPosition(){const t=12;const a=6;const e=this.aboutTab.getBoundingClientRect();const n=window.innerHeight-(e.bottom-e.height/2+t/2+a);return l(n)}appendAboutNewsPopover(){var t;if(!this.aboutNewsPopover){return}this.aboutNewsPopover.style.bottom=this.getAboutPopoverVerticalPosition();if(!((t=this.popoverArea)===null\|\|t===void 0?void 0:t.contains(this.aboutNewsPopover))){const t=()=>{var t;if(((t=this.aboutNewsPopover)===null\|\|t===void 0?void 0:t.aboutItemLabel)&&this.about){this.about.activeTabLabel=this.aboutNewsPopover.aboutItemLabel;this.toggleAbout(true)}};this.aboutNewsPopover.addEventListener("showMore",t.bind(this));document.body.appendChild(this.aboutNewsPopover)}}async toggleMapExpand(t){if(t!==undefined){this.mapExpand=t}else{this.mapExpand=!this.mapExpand}}async toggleMenu(t){if(t!==undefined){this.expand=t}else{this.expand=!this.expand}if(this.aboutNewsPopover){this.aboutNewsPopover.expanded=this.expand}this.expandChange.emit(this.expand);this.isTransitionDisabled=false;this.checkTransition();if(this.breakpoint=="sm"&&this.expand){setTimeout((()=>{this.handleOverflowIndicator()}),100)}}checkTransition(){const t=this.overlayContainer;if(!t){return}if(this.isTransitionDisabled){t.style.transitionProperty="left"}else{t.style.transitionProperty="all"}}isOverlayVisible(){return this.showAbout\|\|this.showSettings}async toggleSettings(t){if(!this.settings){return}if(!this.isOverlayVisible()){this.animateOverlayFadeIn()}if(t){this.resetOverlay();this.showSettings=t;this.settings.show=this.showSettings}else{this.onOverlayClose()}}async toggleAbout(t){if(!this.about){return}if(!this.isOverlayVisible()){this.animateOverlayFadeIn()}if(t){this.resetOverlay();this.showAbout=t;this.about.show=this.showAbout}else{this.onOverlayClose()}}resetOverlay(){this.showSettings=false;this.showAbout=false;if(this.settings){this.settings.show=false}if(this.about){this.about.show=false}}getCollapseText(){return this.mapExpand?this.i18nCollapse:this.i18nExpand}getCollapseIcon(){return this.mapExpand?"navigation-left":"navigation-right"}isMenuItemClicked(t){if(t.target instanceof HTMLElement){return t.target.tagName==="IX-MENU-ITEM"}return false}handleOverflowIndicator(){const{clientHeight:t,scrollTop:a,scrollHeight:e}=this.menuItemsContainer;this.itemsScrollShadowTop=a>0;this.itemsScrollShadowBottom=Math.round(a+t)<e}onOverlayClose(){this.animateOverlayFadeOut((()=>{this.resetOverlay()}))}animateOverlayFadeIn(){requestAnimationFrame((()=>{o({targets:this.overlayContainer,duration:300,backdropFilter:[0,"blur(1rem)"],translateX:["-4rem",0],opacity:[0,1],easing:"easeInSine",begin:()=>{if(this.showPinned){return}this.toggleMenu(false)}})}))}animateOverlayFadeOut(t){requestAnimationFrame((()=>{o({targets:this.overlayContainer,duration:300,backdropFilter:["blur(1rem)",0],translateX:[0,"-4rem"],opacity:[1,0],easing:"easeInSine",complete:()=>t()})}))}onMenuItemsClick(t){if(this.isMenuItemClicked(t)){if(!this.showPinned){this.toggleMenu(false)}this.onOverlayClose()}}isHiddenFromViewport(){return this.breakpoint==="sm"&&this.expand===false}sidebarToggle(){this.mapExpandChange.emit(this.mapExpand);this.hostElement.dispatchEvent(new p(this.mapExpand))}render(){var t;return e(n,{key:"61f040004004c0ac92ac737c133bbdc5c8a0479d",class:{expanded:this.expand,[`breakpoint-${this.breakpoint}`]:true},slot:"menu"},e("aside",{key:"dd588610dfacb86ede84c8ebc73ad8653e8d31e2",class:{menu:true,expanded:this.expand},onClick:()=>{this.resetActiveTab()}},e("div",{key:"56538ac36be893ab8b78c8859da08b05a2f05201",class:"menu-buttons"},this.breakpoint!=="sm"&&e("ix-menu-expand-icon",{breakpoint:this.breakpoint,expanded:this.expand,pinned:this.pinned,class:"menu-expand-icon",ixAriaLabel:this.i18nExpandSidebar,onClick:async()=>this.toggleMenu()}),this.breakpoint==="sm"&&this.applicationLayoutContext.appSwitchConfig&&e("ix-icon-button",{onClick:()=>r(this.applicationLayoutContext.appSwitchConfig),icon:"apps",ghost:true})),e("div",{key:"36df72f91c00ed97845198f30676475202ff000d",id:"menu-tabs",style:{display:"contents"},onClick:t=>this.onMenuItemsClick(t)},e("div",{key:"2af53795b7e3250848d9014271f97ea5cd330672",class:"tabs-shadow-container"},e("div",{key:"bcf6e5caf81a5eee24d6575923c6b7694742e5a0",class:{"tabs--shadow":true,"tabs--shadow-top":true,"tabs--shadow--show":this.itemsScrollShadowTop}}),e("div",{key:"8bf83467772dabd34f296de37f5926a935b9facd",class:{tabs:true,"show-scrollbar":this.expand},onScroll:()=>this.handleOverflowIndicator()},e("div",{key:"ac25103b4145a4c3ce9426119f32278812dfd908",class:"menu-avatar"},e("slot",{key:"2f4f9d54fc218d4a8d87b74317000aee7b4e613a",name:"ix-menu-avatar"})),e("slot",{key:"87e191c1a7c73eca7f58eed464affbcd2baa0812",name:"home"}),this.breakpoint!=="sm"\|\|!this.isHiddenFromViewport()?e("slot",null):null),e("div",{key:"85d1018c78bf76b49eb9162357e8862ff6fb6ed5",class:{"tabs--shadow":true,"tabs--shadow-bottom":true,"tabs--shadow--show":this.itemsScrollShadowBottom}}))),e("div",{key:"28adcb235d366f352575973034ff5d2d7dca1bc0",class:"bottom-tab-divider"}),this.settings?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"settings",class:{"internal-tab":true,"bottom-tab":true,active:this.showSettings},icon:"cogwheel",onClick:async()=>this.toggleSettings(!this.showSettings)},this.i18nSettings):null,e("div",{key:"f87516229b665d80e620d9b96a85247e970733a4",onClick:t=>this.onMenuItemsClick(t)},e("slot",{key:"fac63e22b70435a22482af1fee8595e3a510ad6e",name:"bottom"})),e("div",{key:"150bea99ffcfe3277da5f42ff27b57b4dc9fc6ec",id:"popover-area"}),this.about?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"aboutAndLegal",class:{"internal-tab":true,"bottom-tab":true,active:this.showAbout},icon:"info",onClick:async()=>this.toggleAbout(!this.showAbout)},this.i18nLegal):null,this.enableToggleTheme?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"toggleTheme",onClick:()=>d.toggleMode(),class:"internal-tab bottom-tab",icon:"light-dark"},this.i18nToggleTheme):null,this.enableMapExpand\|\|((t=this.applicationLayoutContext)===null\|\|t===void 0?void 0:t.sidebar)?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"menu-collapse",onClick:()=>this.sidebarToggle(),class:"internal-tab bottom-tab",icon:`${this.getCollapseIcon()}`},this.getCollapseText()):null),e("div",{key:"f45c34fbbaa23c7b1918a8468adb42f535a72444",class:{"menu-overlay":true,visible:this.isOverlayVisible(),expanded:this.expand},onTransitionEnd:()=>{this.isTransitionDisabled=true;this.checkTransition()}},e("div",{key:"a404af2395bf1659555e8581687564ded60f4811",class:"menu-overlay-container"},this.showSettings?e("slot",{name:"ix-menu-settings"}):null),e("div",{key:"03b635c41744e4dea67330f02bfe89eac4f1ad82",class:"menu-overlay-container"},this.showAbout?e("slot",{name:"ix-menu-about"}):null)))}get hostElement(){return i(this)}static get watchers(){return{pinned:["pinnedChange"]}}};b.style=h;export{b as ix_menu};
2	+ //# sourceMappingURL=p-ca838b5c.entry.js.map

package/dist/siemens-ix/p-ca838b5c.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["ApplicationSidebarToggleEvent","Event","constructor","force","super","bubbles","composed","this","menuCss","IxMenuStyle0","Menu","isTransitionDisabled","isVisible","elm","style","display","_b","_a","parentElement","pinnedChange","newPinned","applicationLayoutContext","host","console","warn","setPinned","pinned","applicationLayoutService","disableBreakpointDetection","setBreakpoint","enableBreakpointDetection","popoverArea","hostElement","shadowRoot","querySelector","menu","menuItemsContainer","overlayContainer","menuItems","Array","from","querySelectorAll","filter","menuBottomItems","homeTab","moreItemsDropdown","isMoreItemsDropdownEmpty","length","moreItemsDropdownItems","activeMoreTabContainer","activeMoreTab","aboutPopoverContainer","aboutNewsPopover","document","aboutTab","about","settings","isSettingsEmpty","tabsContainer","componentDidLoad","requestAnimationFrame","handleOverflowIndicator","componentWillLoad","useContextConsumer","ApplicationLayoutContext","ctx","hideHeader","onBreakpointChange","breakpoint","menuController","register","onChange","on","componentWillRender","appendTabs","componentDidRender","appendFragments","showPinned","setIsPinned","mode","initial","toggleMenu","startExpanded","appendAboutNewsPopover","resetActiveTab","activeTab","getAboutPopoverVerticalPosition","heightArrow","offsetArrow","rectAbout","getBoundingClientRect","offset","window","innerHeight","bottom","height","convertToRemString","contains","showMore","aboutItemLabel","activeTabLabel","toggleAbout","addEventListener","bind","body","appendChild","toggleMapExpand","show","undefined","mapExpand","expand","expanded","expandChange","emit","checkTransition","setTimeout","container","transitionProperty","isOverlayVisible","showAbout","showSettings","toggleSettings","animateOverlayFadeIn","resetOverlay","onOverlayClose","getCollapseText","i18nCollapse","i18nExpand","getCollapseIcon","isMenuItemClicked","event","target","HTMLElement","tagName","clientHeight","scrollTop","scrollHeight","itemsScrollShadowTop","itemsScrollShadowBottom","Math","round","animateOverlayFadeOut","anime","targets","duration","backdropFilter","translateX","opacity","easing","begin","onComplete","complete","onMenuItemsClick","isHiddenFromViewport","sidebarToggle","mapExpandChange","dispatchEvent","render","h","Host","key","class","slot","onClick","ixAriaLabel","i18nExpandSidebar","async","appSwitchConfig","showAppSwitch","icon","ghost","id","e","tabs","onScroll","name","disabled","active","i18nSettings","i18nLegal","enableToggleTheme","themeSwitcher","toggleMode","i18nToggleTheme","enableMapExpand","sidebar","visible","onTransitionEnd"],"sources":["src/components/application-sidebar/events.ts","src/components/menu/menu.scss?tag=ix-menu&encapsulation=shadow","src/components/menu/menu.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\nexport class ApplicationSidebarToggleEvent extends Event {\n public constructor(public readonly force?: boolean) {\n super('application-sidebar-toggle', { bubbles: true, composed: true });\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import '~animate.css/animate.min';\n\n$menu-expanded-width: 16rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-direction: row;\n position: absolute;\n height: 100%;\n min-height: min-content;\n z-index: var(--theme-z-index-sticky);\n width: auto;\n\n bottom: 0;\n\n .tabs {\n height: 100%;\n position: relative;\n overflow-y: auto;\n pointer-events: all;\n\n -ms-overflow-style: none;\n\n scrollbar-width: inherit;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .show-scrollbar {\n scrollbar-width: inherit;\n\n &::-webkit-scrollbar {\n display: inherit;\n }\n }\n\n .tabs-shadow-container {\n overflow: hidden;\n display: block;\n position: relative;\n margin-bottom: 0.75rem;\n }\n\n .tabs--shadow {\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 0.625rem;\n\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n pointer-events: none;\n z-index: var(--theme-z-index-sticky);\n\n transition: opacity var(--theme-default-time);\n }\n .tabs--shadow-top {\n top: 0;\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n }\n\n .tabs--shadow-bottom {\n bottom: 0;\n background: linear-gradient(transparent, var(--theme-color-shadow-1));\n }\n\n .tabs--shadow--show {\n opacity: 1;\n }\n\n .menu {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 3.25rem;\n height: 100%;\n padding-block-end: 1rem;\n overflow: hidden;\n\n &.expanded {\n box-shadow: var(--theme-navigation--box-shadow);\n }\n\n background-color: var(--theme-nav--background);\n transition: width var(--theme-default-time) ease-in-out;\n }\n\n .menu-overlay {\n display: none;\n position: absolute;\n width: calc(100vw - 3.25rem);\n height: 100%;\n left: 3.25rem;\n z-index: -1;\n backdrop-filter: blur(1rem);\n background-color: var(--theme-sidebar-overlay-blur);\n transition: left var(--theme-default-time) ease-in-out;\n }\n\n .menu-overlay.visible {\n display: block;\n }\n\n .menu.expanded {\n width: $menu-expanded-width;\n }\n\n .menu-overlay.expanded {\n width: calc(100vw - $menu-expanded-width);\n left: $menu-expanded-width;\n }\n\n .menu-overlay-container {\n display: contents;\n }\n\n .menu-avatar {\n max-height: 3rem;\n }\n\n .avatar {\n margin-bottom: 2rem;\n }\n\n #cui-imprint {\n .cui-imprint-product-name {\n margin-bottom: $default-space;\n }\n\n .cui-imprint-product-description {\n margin-bottom: $x-large-space;\n }\n\n .cui-imprint-link-container {\n display: flex;\n align-items: center;\n }\n }\n\n .bottom-tab-divider {\n margin-top: auto;\n }\n\n .menu-buttons {\n margin: 0.5rem 0 0 0.625rem;\n }\n\n .menu-buttons > :last-child {\n margin-bottom: 1rem;\n }\n}\n\n:host(.breakpoint-sm) {\n .menu:not(.expanded) {\n width: 0;\n }\n\n .menu-overlay {\n left: 0;\n width: 100vw;\n }\n}\n\n:host(.breakpoint-lg) {\n position: relative;\n\n .menu.expanded {\n box-shadow: none;\n }\n}\n\n:host {\n ::slotted(a[href]) {\n all: unset;\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 h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationSidebarToggleEvent } from '../application-sidebar/events';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n tag: 'ix-menu',\n styleUrl: 'menu.scss',\n shadow: true,\n})\nexport class Menu {\n @Element() hostElement!: HTMLIxMenuElement;\n\n /**\n * Is settings tab visible\n */\n @Prop({ mutable: true }) showSettings = false;\n\n /**\n * Is about tab visible\n */\n @Prop({ mutable: true }) showAbout = false;\n\n /**\n * Show toggle between light and dark variant. Only if the provided theme have implemented both!\n */\n @Prop() enableToggleTheme = false;\n\n /**\n * Is settings tab is visible\n */\n @Prop() enableSettings = true;\n\n /**\n * Internal\n */\n @Prop() enableMapExpand = false;\n\n /**\n * Should only be set if you use ix-menu standalone\n */\n @Prop() applicationName: string;\n\n /**\n * Should only be set if you use ix-menu standalone\n */\n @Prop() applicationDescription = '';\n\n /**\n * Maximum number of menu items to show in case enough vertical space is available.\n * Extra menu items will be collapsed to 'show more' menu item.\n *\n * @deprecated - Has no effect on component. Will get removed with next major release (v3)\n */\n @Prop() maxVisibleMenuItems = 9;\n\n /**\n * Accessibility i18n label for the burger menu of the sidebar\n */\n @Prop() i18nExpandSidebar = 'Expand sidebar';\n\n /**\n * Toggle the expand state of the menu\n */\n @Prop({ mutable: true, reflect: true }) expand = false;\n\n /**\n * If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.\n *\n * @since 2.2.0\n */\n @Prop() startExpanded = false;\n\n /**\n * Menu stays pinned to the left\n */\n @Prop() pinned = false;\n @Watch('pinned')\n pinnedChange(newPinned: boolean) {\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n console.warn('ix-map-navigation does not support pinning of the menu');\n return;\n }\n this.setPinned(this.pinned);\n if (newPinned) {\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint('lg');\n return;\n }\n\n applicationLayoutService.enableBreakpointDetection();\n }\n\n /**\n */\n @Prop() i18nLegal = 'About & legal information';\n\n /**\n */\n @Prop() i18nSettings = 'Settings';\n\n /**\n */\n @Prop() i18nToggleTheme = 'Toggle theme';\n\n /**\n */\n @Prop() i18nExpand = ' Expand';\n\n /**\n */\n @Prop() i18nCollapse = 'Collapse';\n\n /**\n * Menu expanded\n */\n @Event() expandChange: EventEmitter<boolean>;\n\n /**\n * Map Sidebar expanded\n */\n @Event() mapExpandChange: EventEmitter<boolean>;\n\n @State() showPinned = false;\n @State() mapExpand = true;\n @State() activeTab: HTMLIxMenuItemElement | null;\n @State() breakpoint: Breakpoint = 'lg';\n @State() itemsScrollShadowTop = false;\n @State() itemsScrollShadowBottom = false;\n @State() applicationLayoutContext: ContextType<\n typeof ApplicationLayoutContext\n >;\n private isTransitionDisabled = false;\n\n // FBC IAM workaround #488\n private readonly isVisible = (elm: HTMLElement) => {\n return (\n elm.style.display !== 'none' &&\n elm.parentElement?.parentElement?.style.display !== 'none'\n );\n };\n\n get popoverArea() {\n return this.hostElement.shadowRoot!.querySelector('#popover-area');\n }\n\n get menu() {\n return this.hostElement.shadowRoot!.querySelector('.menu');\n }\n\n get menuItemsContainer(): HTMLDivElement {\n return this.menu!.querySelector('.tabs')!;\n }\n\n get overlayContainer() {\n return this.hostElement.shadowRoot.querySelector(\n '.menu-overlay'\n ) as HTMLDivElement;\n }\n\n get menuItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n )\n ).filter(this.isVisible);\n }\n\n get menuBottomItems() {\n return Array.from(\n this.hostElement.querySelectorAll(\n 'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n )\n ).filter(this.isVisible);\n }\n\n get homeTab() {\n return this.hostElement.querySelector('ix-menu-item.home-tab');\n }\n\n get moreItemsDropdown(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector(\n '.internal-tab ix-dropdown'\n )!;\n }\n\n get isMoreItemsDropdownEmpty(): boolean {\n return (\n this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown .appended'\n ).length === 0\n );\n }\n\n get moreItemsDropdownItems() {\n return this.hostElement.shadowRoot!.querySelectorAll(\n '.internal-tab ix-dropdown ix-menu-item'\n );\n }\n\n get activeMoreTabContainer() {\n return this.hostElement.shadowRoot!.querySelector('.active-more-tab');\n }\n\n get activeMoreTab() {\n return this.hostElement.shadowRoot!.querySelector(\n '.active-more-tab ix-menu-item'\n );\n }\n\n get aboutPopoverContainer(): HTMLElement {\n return this.hostElement.querySelector('.about-news')!;\n }\n\n get aboutNewsPopover(): HTMLIxMenuAboutNewsElement {\n return (\n document.querySelector('ix-menu-about-news') ??\n this.hostElement.querySelector('ix-menu-about-news')!\n );\n }\n\n get aboutTab(): HTMLElement {\n return this.hostElement.shadowRoot!.querySelector('#aboutAndLegal');\n }\n\n get about(): HTMLIxMenuAboutElement | null {\n return this.hostElement.querySelector('ix-menu-about');\n }\n\n get settings(): HTMLIxMenuSettingsElement | null {\n return this.hostElement.querySelector('ix-menu-settings');\n }\n\n get isSettingsEmpty(): boolean {\n return (\n Array.from(\n this.hostElement.shadowRoot!.querySelectorAll('ix-menu-settings-item')\n ).length === 0\n );\n }\n\n get tabsContainer() {\n return this.hostElement;\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n this.handleOverflowIndicator();\n });\n\n if (this.pinned) {\n this.pinnedChange(this.pinned);\n }\n }\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n this.applicationLayoutContext = ctx;\n if (ctx.hideHeader === true) {\n this.onBreakpointChange('md');\n return;\n }\n\n this.onBreakpointChange(applicationLayoutService.breakpoint);\n },\n true\n );\n\n menuController.register(this.hostElement);\n applicationLayoutService.onChange.on((breakpoint) =>\n this.onBreakpointChange(breakpoint)\n );\n this.onBreakpointChange(applicationLayoutService.breakpoint, true);\n }\n\n componentWillRender() {\n this.appendTabs();\n }\n\n componentDidRender() {\n this.appendFragments();\n }\n\n private setPinned(pinned: boolean) {\n this.showPinned = pinned;\n menuController.setIsPinned(pinned);\n }\n\n private onBreakpointChange(mode: Breakpoint, initial = false) {\n if (!this.applicationLayoutContext && mode === 'sm') {\n return;\n }\n if (this.applicationLayoutContext?.host === 'map-navigation') {\n this.breakpoint = 'md';\n return;\n }\n if (!this.applicationLayoutContext) {\n return;\n }\n\n if (this.applicationLayoutContext.hideHeader && mode === 'sm') {\n return;\n }\n\n this.setPinned(mode === 'lg');\n if (initial || mode !== this.breakpoint)\n this.toggleMenu(mode === 'lg' && this.startExpanded);\n\n this.breakpoint = mode;\n }\n\n private appendFragments() {\n this.appendAboutNewsPopover();\n }\n\n private resetActiveTab() {\n this.activeTab = null;\n }\n\n private appendTabs() {\n this.activeTab = null;\n }\n\n private getAboutPopoverVerticalPosition() {\n const heightArrow = 12;\n const offsetArrow = 6;\n const rectAbout = this.aboutTab.getBoundingClientRect();\n const offset =\n window.innerHeight -\n (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n return convertToRemString(offset);\n }\n\n private appendAboutNewsPopover() {\n if (!this.aboutNewsPopover) {\n return;\n }\n\n this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n if (!this.popoverArea?.contains(this.aboutNewsPopover)) {\n const showMore = () => {\n if (this.aboutNewsPopover?.aboutItemLabel && this.about) {\n this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;\n this.toggleAbout(true);\n }\n };\n\n this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));\n document.body.appendChild(this.aboutNewsPopover);\n }\n }\n\n /**\n * Toggle map sidebar expand\n * @param show\n */\n @Method()\n async toggleMapExpand(show?: boolean) {\n if (show !== undefined) {\n this.mapExpand = show;\n } else {\n this.mapExpand = !this.mapExpand;\n }\n }\n\n /**\n * Toggle menu\n * @param show\n */\n @Method()\n async toggleMenu(show?: boolean) {\n if (show !== undefined) {\n this.expand = show;\n } else {\n this.expand = !this.expand;\n }\n\n if (this.aboutNewsPopover) {\n this.aboutNewsPopover.expanded = this.expand;\n }\n\n this.expandChange.emit(this.expand);\n\n this.isTransitionDisabled = false;\n this.checkTransition();\n\n if (this.breakpoint == 'sm' && this.expand) {\n setTimeout(() => {\n this.handleOverflowIndicator();\n }, 100);\n }\n }\n\n /**\n * Disable transition of overlay while menu animation is running.\n */\n private checkTransition() {\n const container = this.overlayContainer;\n\n if (!container) {\n return;\n }\n\n if (this.isTransitionDisabled) {\n container.style.transitionProperty = 'left';\n } else {\n container.style.transitionProperty = 'all';\n }\n }\n\n private isOverlayVisible() {\n return this.showAbout || this.showSettings;\n }\n\n /**\n * Toggle Settings tabs\n * @param show\n */\n @Method()\n async toggleSettings(show: boolean) {\n if (!this.settings) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showSettings = show;\n this.settings.show = this.showSettings;\n } else {\n this.onOverlayClose();\n }\n }\n\n /**\n * Toggle About tabs\n * @param show\n */\n @Method()\n async toggleAbout(show: boolean) {\n if (!this.about) {\n return;\n }\n\n if (!this.isOverlayVisible()) {\n this.animateOverlayFadeIn();\n }\n\n if (show) {\n this.resetOverlay();\n this.showAbout = show;\n this.about.show = this.showAbout;\n } else {\n this.onOverlayClose();\n }\n }\n\n private resetOverlay() {\n this.showSettings = false;\n this.showAbout = false;\n\n if (this.settings) {\n this.settings.show = false;\n }\n\n if (this.about) {\n this.about.show = false;\n }\n }\n\n private getCollapseText() {\n return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n }\n\n private getCollapseIcon() {\n return this.mapExpand ? 'navigation-left' : 'navigation-right';\n }\n\n private isMenuItemClicked(event: Event) {\n if (event.target instanceof HTMLElement) {\n return event.target.tagName === 'IX-MENU-ITEM';\n }\n\n return false;\n }\n\n @Listen('resize', { target: 'window' })\n private handleOverflowIndicator() {\n const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;\n this.itemsScrollShadowTop = scrollTop > 0;\n this.itemsScrollShadowBottom =\n Math.round(scrollTop + clientHeight) < scrollHeight;\n }\n\n @Listen('close')\n onOverlayClose() {\n this.animateOverlayFadeOut(() => {\n this.resetOverlay();\n });\n }\n\n private animateOverlayFadeIn() {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeInSine',\n begin: () => {\n if (this.showPinned) {\n return;\n }\n\n this.toggleMenu(false);\n },\n });\n });\n }\n\n private animateOverlayFadeOut(onComplete: Function) {\n requestAnimationFrame(() => {\n anime({\n targets: this.overlayContainer,\n duration: 300,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => onComplete(),\n });\n });\n }\n\n private onMenuItemsClick(event: Event) {\n if (this.isMenuItemClicked(event)) {\n if (!this.showPinned) {\n this.toggleMenu(false);\n }\n this.onOverlayClose();\n }\n }\n\n private isHiddenFromViewport() {\n return this.breakpoint === 'sm' && this.expand === false;\n }\n\n private sidebarToggle() {\n this.mapExpandChange.emit(this.mapExpand);\n\n this.hostElement.dispatchEvent(\n new ApplicationSidebarToggleEvent(this.mapExpand)\n );\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expand,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n slot=\"menu\"\n >\n <aside\n class={{\n menu: true,\n expanded: this.expand,\n }}\n onClick={() => {\n this.resetActiveTab();\n }}\n >\n <div class=\"menu-buttons\">\n {this.breakpoint !== 'sm' && (\n <ix-menu-expand-icon\n breakpoint={this.breakpoint}\n expanded={this.expand}\n pinned={this.pinned}\n class=\"menu-expand-icon\"\n ixAriaLabel={this.i18nExpandSidebar}\n onClick={async () => this.toggleMenu()}\n ></ix-menu-expand-icon>\n )}\n {this.breakpoint === 'sm' &&\n this.applicationLayoutContext.appSwitchConfig && (\n <ix-icon-button\n onClick={() =>\n showAppSwitch(this.applicationLayoutContext.appSwitchConfig)\n }\n icon=\"apps\"\n ghost\n ></ix-icon-button>\n )}\n </div>\n\n <div\n id=\"menu-tabs\"\n style={{\n display: 'contents',\n }}\n onClick={(e) => this.onMenuItemsClick(e)}\n >\n <div class=\"tabs-shadow-container\">\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-top': true,\n 'tabs--shadow--show': this.itemsScrollShadowTop,\n }}\n ></div>\n <div\n class={{\n tabs: true,\n 'show-scrollbar': this.expand,\n }}\n onScroll={() => this.handleOverflowIndicator()}\n >\n <div class=\"menu-avatar\">\n <slot name=\"ix-menu-avatar\"></slot>\n </div>\n <slot name=\"home\"></slot>\n {this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (\n <slot></slot>\n ) : null}\n </div>\n <div\n class={{\n 'tabs--shadow': true,\n 'tabs--shadow-bottom': true,\n 'tabs--shadow--show': this.itemsScrollShadowBottom,\n }}\n ></div>\n </div>\n </div>\n <div class=\"bottom-tab-divider\"></div>\n {this.settings ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"settings\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showSettings,\n }}\n icon={'cogwheel'}\n onClick={async () => this.toggleSettings(!this.showSettings)}\n >\n {this.i18nSettings}\n </ix-menu-item>\n ) : null}\n <div onClick={(e) => this.onMenuItemsClick(e)}>\n <slot name=\"bottom\"></slot>\n </div>\n\n <div id=\"popover-area\"></div>\n {this.about ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"aboutAndLegal\"\n class={{\n 'internal-tab': true,\n 'bottom-tab': true,\n active: this.showAbout,\n }}\n icon={'info'}\n onClick={async () => this.toggleAbout(!this.showAbout)}\n >\n {this.i18nLegal}\n </ix-menu-item>\n ) : null}\n {this.enableToggleTheme ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"toggleTheme\"\n onClick={() => themeSwitcher.toggleMode()}\n class=\"internal-tab bottom-tab\"\n icon={'light-dark'}\n >\n {this.i18nToggleTheme}\n </ix-menu-item>\n ) : null}\n {this.enableMapExpand || this.applicationLayoutContext?.sidebar ? (\n <ix-menu-item\n disabled={this.isHiddenFromViewport()}\n id=\"menu-collapse\"\n onClick={() => this.sidebarToggle()}\n class=\"internal-tab bottom-tab\"\n icon={`${this.getCollapseIcon()}`}\n >\n {this.getCollapseText()}\n </ix-menu-item>\n ) : null}\n </aside>\n <div\n class={{\n 'menu-overlay': true,\n visible: this.isOverlayVisible(),\n expanded: this.expand,\n }}\n onTransitionEnd={() => {\n this.isTransitionDisabled = true;\n this.checkTransition();\n }}\n >\n <div class={'menu-overlay-container'}>\n {this.showSettings ? <slot name=\"ix-menu-settings\"></slot> : null}\n </div>\n <div class={'menu-overlay-container'}>\n {this.showAbout ? <slot name=\"ix-menu-about\"></slot> : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yaASaA,UAAsCC,MACjD,WAAAC,CAAmCC,GACjCC,MAAM,6BAA8B,CAAEC,QAAS,KAAMC,SAAU,OAD9BC,KAAAJ,O,ECVrC,MAAMK,EAAU,us1BAChB,MAAAC,EAAeD,E,MCqCFE,EAAI,M,qHA0HPH,KAAAI,qBAAuB,MAGdJ,KAAAK,UAAaC,I,QAC5B,OACEA,EAAIC,MAAMC,UAAY,UACtBC,GAAAC,EAAAJ,EAAIK,iBAAa,MAAAD,SAAA,SAAAA,EAAEC,iBAAa,MAAAF,SAAA,SAAAA,EAAEF,MAAMC,WAAY,MAAM,E,kBA1HtB,M,eAKH,M,uBAKT,M,oBAKH,K,qBAKC,M,2DAUO,G,yBAQH,E,uBAKF,iB,YAKqB,M,mBAOzB,M,YAKP,M,eAmBG,4B,kBAIG,W,qBAIG,e,gBAIL,U,kBAIE,W,gBAYD,M,eACD,K,yCAEa,K,0BACF,M,6BACG,M,wCAlDnC,YAAAI,CAAaC,G,MACX,KAAIH,EAAAV,KAAKc,4BAAwB,MAAAJ,SAAA,SAAAA,EAAEK,QAAS,iBAAkB,CAC5DC,QAAQC,KAAK,0DACb,M,CAEFjB,KAAKkB,UAAUlB,KAAKmB,QACpB,GAAIN,EAAW,CACbO,EAAyBC,6BACzBD,EAAyBE,cAAc,MACvC,M,CAGFF,EAAyBG,2B,CAoD3B,eAAIC,GACF,OAAOxB,KAAKyB,YAAYC,WAAYC,cAAc,gB,CAGpD,QAAIC,GACF,OAAO5B,KAAKyB,YAAYC,WAAYC,cAAc,Q,CAGpD,sBAAIE,GACF,OAAO7B,KAAK4B,KAAMD,cAAc,Q,CAGlC,oBAAIG,GACF,OAAO9B,KAAKyB,YAAYC,WAAWC,cACjC,gB,CAIJ,aAAII,GACF,OAAOC,MAAMC,KACXjC,KAAKyB,YAAYS,iBACf,yFAEFC,OAAOnC,KAAKK,U,CAGhB,mBAAI+B,GACF,OAAOJ,MAAMC,KACXjC,KAAKyB,YAAYS,iBACf,8DAEFC,OAAOnC,KAAKK,U,CAGhB,WAAIgC,GACF,OAAOrC,KAAKyB,YAAYE,cAAc,wB,CAGxC,qBAAIW,GACF,OAAOtC,KAAKyB,YAAYC,WAAYC,cAClC,4B,CAIJ,4BAAIY,GACF,OACEvC,KAAKyB,YAAYC,WAAYQ,iBAC3B,uCACAM,SAAW,C,CAIjB,0BAAIC,GACF,OAAOzC,KAAKyB,YAAYC,WAAYQ,iBAClC,yC,CAIJ,0BAAIQ,GACF,OAAO1C,KAAKyB,YAAYC,WAAYC,cAAc,mB,CAGpD,iBAAIgB,GACF,OAAO3C,KAAKyB,YAAYC,WAAYC,cAClC,gC,CAIJ,yBAAIiB,GACF,OAAO5C,KAAKyB,YAAYE,cAAc,c,CAGxC,oBAAIkB,G,MACF,OACEnC,EAAAoC,SAASnB,cAAc,yBAAqB,MAAAjB,SAAA,EAAAA,EAC5CV,KAAKyB,YAAYE,cAAc,qB,CAInC,YAAIoB,GACF,OAAO/C,KAAKyB,YAAYC,WAAYC,cAAc,iB,CAGpD,SAAIqB,GACF,OAAOhD,KAAKyB,YAAYE,cAAc,gB,CAGxC,YAAIsB,GACF,OAAOjD,KAAKyB,YAAYE,cAAc,mB,CAGxC,mBAAIuB,GACF,OACElB,MAAMC,KACJjC,KAAKyB,YAAYC,WAAYQ,iBAAiB,0BAC9CM,SAAW,C,CAIjB,iBAAIW,GACF,OAAOnD,KAAKyB,W,CAGd,gBAAA2B,GACEC,uBAAsB,KACpBrD,KAAKsD,yBAAyB,IAGhC,GAAItD,KAAKmB,OAAQ,CACfnB,KAAKY,aAAaZ,KAAKmB,O,EAI3B,iBAAAoC,GACEC,EACExD,KAAKyB,YACLgC,GACCC,IACC1D,KAAKc,yBAA2B4C,EAChC,GAAIA,EAAIC,aAAe,KAAM,CAC3B3D,KAAK4D,mBAAmB,MACxB,M,CAGF5D,KAAK4D,mBAAmBxC,EAAyByC,WAAW,GAE9D,MAGFC,EAAeC,SAAS/D,KAAKyB,aAC7BL,EAAyB4C,SAASC,IAAIJ,GACpC7D,KAAK4D,mBAAmBC,KAE1B7D,KAAK4D,mBAAmBxC,EAAyByC,WAAY,K,CAG/D,mBAAAK,GACElE,KAAKmE,Y,CAGP,kBAAAC,GACEpE,KAAKqE,iB,CAGC,SAAAnD,CAAUC,GAChBnB,KAAKsE,WAAanD,EAClB2C,EAAeS,YAAYpD,E,CAGrB,kBAAAyC,CAAmBY,EAAkBC,EAAU,O,MACrD,IAAKzE,KAAKc,0BAA4B0D,IAAS,KAAM,CACnD,M,CAEF,KAAI9D,EAAAV,KAAKc,4BAAwB,MAAAJ,SAAA,SAAAA,EAAEK,QAAS,iBAAkB,CAC5Df,KAAK6D,WAAa,KAClB,M,CAEF,IAAK7D,KAAKc,yBAA0B,CAClC,M,CAGF,GAAId,KAAKc,yBAAyB6C,YAAca,IAAS,KAAM,CAC7D,M,CAGFxE,KAAKkB,UAAUsD,IAAS,MACxB,GAAIC,GAAWD,IAASxE,KAAK6D,WAC3B7D,KAAK0E,WAAWF,IAAS,MAAQxE,KAAK2E,eAExC3E,KAAK6D,WAAaW,C,CAGZ,eAAAH,GACNrE,KAAK4E,wB,CAGC,cAAAC,GACN7E,KAAK8E,UAAY,I,CAGX,UAAAX,GACNnE,KAAK8E,UAAY,I,CAGX,+BAAAC,GACN,MAAMC,EAAc,GACpB,MAAMC,EAAc,EACpB,MAAMC,EAAYlF,KAAK+C,SAASoC,wBAChC,MAAMC,EACJC,OAAOC,aACNJ,EAAUK,OAASL,EAAUM,OAAS,EAAIR,EAAc,EAAIC,GAC/D,OAAOQ,EAAmBL,E,CAGpB,sBAAAR,G,MACN,IAAK5E,KAAK6C,iBAAkB,CAC1B,M,CAGF7C,KAAK6C,iBAAiBtC,MAAMgF,OAASvF,KAAK+E,kCAE1C,MAAKrE,EAAAV,KAAKwB,eAAW,MAAAd,SAAA,SAAAA,EAAEgF,SAAS1F,KAAK6C,mBAAmB,CACtD,MAAM8C,EAAW,K,MACf,KAAIjF,EAAAV,KAAK6C,oBAAgB,MAAAnC,SAAA,SAAAA,EAAEkF,iBAAkB5F,KAAKgD,MAAO,CACvDhD,KAAKgD,MAAM6C,eAAiB7F,KAAK6C,iBAAiB+C,eAClD5F,KAAK8F,YAAY,K,GAIrB9F,KAAK6C,iBAAiBkD,iBAAiB,WAAYJ,EAASK,KAAKhG,OACjE8C,SAASmD,KAAKC,YAAYlG,KAAK6C,iB,EASnC,qBAAMsD,CAAgBC,GACpB,GAAIA,IAASC,UAAW,CACtBrG,KAAKsG,UAAYF,C,KACZ,CACLpG,KAAKsG,WAAatG,KAAKsG,S,EAS3B,gBAAM5B,CAAW0B,GACf,GAAIA,IAASC,UAAW,CACtBrG,KAAKuG,OAASH,C,KACT,CACLpG,KAAKuG,QAAUvG,KAAKuG,M,CAGtB,GAAIvG,KAAK6C,iBAAkB,CACzB7C,KAAK6C,iBAAiB2D,SAAWxG,KAAKuG,M,CAGxCvG,KAAKyG,aAAaC,KAAK1G,KAAKuG,QAE5BvG,KAAKI,qBAAuB,MAC5BJ,KAAK2G,kBAEL,GAAI3G,KAAK6D,YAAc,MAAQ7D,KAAKuG,OAAQ,CAC1CK,YAAW,KACT5G,KAAKsD,yBAAyB,GAC7B,I,EAOC,eAAAqD,GACN,MAAME,EAAY7G,KAAK8B,iBAEvB,IAAK+E,EAAW,CACd,M,CAGF,GAAI7G,KAAKI,qBAAsB,CAC7ByG,EAAUtG,MAAMuG,mBAAqB,M,KAChC,CACLD,EAAUtG,MAAMuG,mBAAqB,K,EAIjC,gBAAAC,GACN,OAAO/G,KAAKgH,WAAahH,KAAKiH,Y,CAQhC,oBAAMC,CAAed,GACnB,IAAKpG,KAAKiD,SAAU,CAClB,M,CAGF,IAAKjD,KAAK+G,mBAAoB,CAC5B/G,KAAKmH,sB,CAGP,GAAIf,EAAM,CACRpG,KAAKoH,eACLpH,KAAKiH,aAAeb,EACpBpG,KAAKiD,SAASmD,KAAOpG,KAAKiH,Y,KACrB,CACLjH,KAAKqH,gB,EAST,iBAAMvB,CAAYM,GAChB,IAAKpG,KAAKgD,MAAO,CACf,M,CAGF,IAAKhD,KAAK+G,mBAAoB,CAC5B/G,KAAKmH,sB,CAGP,GAAIf,EAAM,CACRpG,KAAKoH,eACLpH,KAAKgH,UAAYZ,EACjBpG,KAAKgD,MAAMoD,KAAOpG,KAAKgH,S,KAClB,CACLhH,KAAKqH,gB,EAID,YAAAD,GACNpH,KAAKiH,aAAe,MACpBjH,KAAKgH,UAAY,MAEjB,GAAIhH,KAAKiD,SAAU,CACjBjD,KAAKiD,SAASmD,KAAO,K,CAGvB,GAAIpG,KAAKgD,MAAO,CACdhD,KAAKgD,MAAMoD,KAAO,K,EAId,eAAAkB,GACN,OAAOtH,KAAKsG,UAAYtG,KAAKuH,aAAevH,KAAKwH,U,CAG3C,eAAAC,GACN,OAAOzH,KAAKsG,UAAY,kBAAoB,kB,CAGtC,iBAAAoB,CAAkBC,GACxB,GAAIA,EAAMC,kBAAkBC,YAAa,CACvC,OAAOF,EAAMC,OAAOE,UAAY,c,CAGlC,OAAO,K,CAID,uBAAAxE,GACN,MAAMyE,aAAEA,EAAYC,UAAEA,EAASC,aAAEA,GAAiBjI,KAAK6B,mBACvD7B,KAAKkI,qBAAuBF,EAAY,EACxChI,KAAKmI,wBACHC,KAAKC,MAAML,EAAYD,GAAgBE,C,CAI3C,cAAAZ,GACErH,KAAKsI,uBAAsB,KACzBtI,KAAKoH,cAAc,G,CAIf,oBAAAD,GACN9D,uBAAsB,KACpBkF,EAAM,CACJC,QAASxI,KAAK8B,iBACd2G,SAAU,IACVC,eAAgB,CAAC,EAAG,cACpBC,WAAY,CAAC,QAAS,GACtBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRC,MAAO,KACL,GAAI9I,KAAKsE,WAAY,CACnB,M,CAGFtE,KAAK0E,WAAW,MAAM,GAExB,G,CAIE,qBAAA4D,CAAsBS,GAC5B1F,uBAAsB,KACpBkF,EAAM,CACJC,QAASxI,KAAK8B,iBACd2G,SAAU,IACVC,eAAgB,CAAC,aAAc,GAC/BC,WAAY,CAAC,EAAG,SAChBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRG,SAAU,IAAMD,KAChB,G,CAIE,gBAAAE,CAAiBtB,GACvB,GAAI3H,KAAK0H,kBAAkBC,GAAQ,CACjC,IAAK3H,KAAKsE,WAAY,CACpBtE,KAAK0E,WAAW,M,CAElB1E,KAAKqH,gB,EAID,oBAAA6B,GACN,OAAOlJ,KAAK6D,aAAe,MAAQ7D,KAAKuG,SAAW,K,CAG7C,aAAA4C,GACNnJ,KAAKoJ,gBAAgB1C,KAAK1G,KAAKsG,WAE/BtG,KAAKyB,YAAY4H,cACf,IAAI5J,EAA8BO,KAAKsG,W,CAI3C,MAAAgD,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLlD,SAAUxG,KAAKuG,OACf,CAAC,cAAcvG,KAAK6D,cAAe,MAErC8F,KAAK,QAELJ,EAAA,SAAAE,IAAA,2CACEC,MAAO,CACL9H,KAAM,KACN4E,SAAUxG,KAAKuG,QAEjBqD,QAAS,KACP5J,KAAK6E,gBAAgB,GAGvB0E,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACR1J,KAAK6D,aAAe,MACnB0F,EAAA,uBACE1F,WAAY7D,KAAK6D,WACjB2C,SAAUxG,KAAKuG,OACfpF,OAAQnB,KAAKmB,OACbuI,MAAM,mBACNG,YAAa7J,KAAK8J,kBAClBF,QAASG,SAAY/J,KAAK0E,eAG7B1E,KAAK6D,aAAe,MACnB7D,KAAKc,yBAAyBkJ,iBAC5BT,EAAA,kBACEK,QAAS,IACPK,EAAcjK,KAAKc,yBAAyBkJ,iBAE9CE,KAAK,OACLC,MAAK,QAKbZ,EAAA,OAAAE,IAAA,2CACEW,GAAG,YACH7J,MAAO,CACLC,QAAS,YAEXoJ,QAAUS,GAAMrK,KAAKiJ,iBAAiBoB,IAEtCd,EAAA,OAAAE,IAAA,2CAAKC,MAAM,yBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,eAAgB,KAChB,mBAAoB,KACpB,qBAAsB1J,KAAKkI,wBAG/BqB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLY,KAAM,KACN,iBAAkBtK,KAAKuG,QAEzBgE,SAAU,IAAMvK,KAAKsD,2BAErBiG,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,QAAAE,IAAA,2CAAMe,KAAK,oBAEbjB,EAAA,QAAAE,IAAA,2CAAMe,KAAK,SACVxK,KAAK6D,aAAe,OAAS7D,KAAKkJ,uBACjCK,EAAA,aACE,MAENA,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,eAAgB,KAChB,sBAAuB,KACvB,qBAAsB1J,KAAKmI,6BAKnCoB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACV1J,KAAKiD,SACJsG,EAAA,gBACEkB,SAAUzK,KAAKkJ,uBACfkB,GAAG,WACHV,MAAO,CACL,eAAgB,KAChB,aAAc,KACdgB,OAAQ1K,KAAKiH,cAEfiD,KAAM,WACNN,QAASG,SAAY/J,KAAKkH,gBAAgBlH,KAAKiH,eAE9CjH,KAAK2K,cAEN,KACJpB,EAAA,OAAAE,IAAA,2CAAKG,QAAUS,GAAMrK,KAAKiJ,iBAAiBoB,IACzCd,EAAA,QAAAE,IAAA,2CAAMe,KAAK,YAGbjB,EAAA,OAAAE,IAAA,2CAAKW,GAAG,iBACPpK,KAAKgD,MACJuG,EAAA,gBACEkB,SAAUzK,KAAKkJ,uBACfkB,GAAG,gBACHV,MAAO,CACL,eAAgB,KAChB,aAAc,KACdgB,OAAQ1K,KAAKgH,WAEfkD,KAAM,OACNN,QAASG,SAAY/J,KAAK8F,aAAa9F,KAAKgH,YAE3ChH,KAAK4K,WAEN,KACH5K,KAAK6K,kBACJtB,EAAA,gBACEkB,SAAUzK,KAAKkJ,uBACfkB,GAAG,cACHR,QAAS,IAAMkB,EAAcC,aAC7BrB,MAAM,0BACNQ,KAAM,cAELlK,KAAKgL,iBAEN,KACHhL,KAAKiL,mBAAmBvK,EAAAV,KAAKc,4BAAwB,MAAAJ,SAAA,SAAAA,EAAEwK,SACtD3B,EAAA,gBACEkB,SAAUzK,KAAKkJ,uBACfkB,GAAG,gBACHR,QAAS,IAAM5J,KAAKmJ,gBACpBO,MAAM,0BACNQ,KAAM,GAAGlK,KAAKyH,qBAEbzH,KAAKsH,mBAEN,MAENiC,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,eAAgB,KAChByB,QAASnL,KAAK+G,mBACdP,SAAUxG,KAAKuG,QAEjB6E,gBAAiB,KACfpL,KAAKI,qBAAuB,KAC5BJ,KAAK2G,iBAAiB,GAGxB4C,EAAA,OAAAE,IAAA,2CAAKC,MAAO,0BACT1J,KAAKiH,aAAesC,EAAA,QAAMiB,KAAK,qBAA6B,MAE/DjB,EAAA,OAAAE,IAAA,2CAAKC,MAAO,0BACT1J,KAAKgH,UAAYuC,EAAA,QAAMiB,KAAK,kBAA0B,O"}

package/dist/siemens-ix/p-cb1c0d63.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as e,h as t,H as r}from"./p-26e9d40e.js";import{D as n}from"./p-f5e574da.js";const a="label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input,input:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea,textarea:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg 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'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}:host{display:block;position:relative;width:22rem}:host ,:host ::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .form-control,:host .form-control-plaintext{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem}:host .form-control::-moz-placeholder,:host .form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}:host .form-control::placeholder,:host .form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}:host .form-control:focus-visible{color:var(--theme-input--color)}:host .form-control[type=number]{text-align:right}:host .form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}:host .form-control.readonly,:host .form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}:host .form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}:host .form-control:read-only,:host .form-control[readonly],:host .form-control[readOnly],:host .form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}:host .form-control:read-only::-moz-placeholder,:host .form-control[readonly]::-moz-placeholder,:host .form-control[readOnly]::-moz-placeholder,:host .form-control.readonly::-moz-placeholder{color:transparent}:host .form-control:-moz-read-only::placeholder{color:transparent}:host .form-control:read-only::placeholder,:host .form-control[readonly]::placeholder,:host .form-control[readOnly]::placeholder,:host .form-control.readonly::placeholder{color:transparent}:host .form-control:disabled,:host .form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}:host .form-control:disabled::-moz-placeholder,:host .form-control.disabled::-moz-placeholder{color:transparent}:host .form-control:disabled::placeholder,:host .form-control.disabled::placeholder{color:transparent}:host .form-control-plaintext{outline:0}:host .form-group{position:relative}:host .input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}:host .input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}:host .input-wrapper>input{padding-inline-start:2.2rem}:host select.form-control{padding:0 0.312rem}:host textarea.form-control{padding:0.375rem 0.5rem}:host input.disabled,:host input:disabled{color:var(--theme-input--color--disabled)}:host input:-moz-read-only{cursor:default}:host input:read-only,:host input.readonly{cursor:default}@media (max-width: 576px){:host .clock{padding:1.5rem 0}:host .header{height:1.5rem !important}}@media (min-width: 576px){:host .clock{padding:4.25rem 0}:host .header{height:2.5rem !important}}:host .header{display:flex;align-items:center;justify-content:center;height:2.5rem}:host .flex{display:flex}:host .clock{display:flex;justify-content:center;align-items:center}:host input,:host .time-reference{width:2.625rem;height:1.5rem;text-align:center;margin-top:0.25rem;margin-bottom:0.25rem;}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button,:host .time-reference::-webkit-outer-spin-button,:host .time-reference::-webkit-inner-spin-button{-webkit-appearance:none;margin:0 0.3125rem}:host input[type=number],:host .time-reference[type=number]{-moz-appearance:textfield}:host .form-control[type=number]{text-align:center}:host .columns{display:flex;flex-direction:column;align-items:center;justify-content:space-around}:host .column-seperator{display:flex;align-items:center;margin:0 0.25rem}:host .button{display:flex;justify-content:flex-end}:host .default-space{margin-left:1rem}:host .text-align{text-align:center}:host .hidden{display:none}:host .time-reference{margin-top:0.5rem;margin-bottom:0.5rem}";const i=a;const l=class{constructor(t){o(this,t);this.timeSelect=e(this,"timeSelect",7);this.done=e(this,"done",7);this.timeChange=e(this,"timeChange",7);this.format="TT";this.corners="rounded";this.standaloneAppearance=true;this.individual=true;this.showHour=true;this.showMinutes=true;this.showSeconds=true;this.time=n.now().toFormat(this.format);this.showTimeReference=undefined;this.timeReference=undefined;this.textSelectTime="Done";this.textTime="Time";this._time=undefined;this._timeRef=undefined;this._formattedTime=undefined}watchTimePropHandler(o){this._time=n.fromFormat(o,this.format);if(!this._time.isValid){throw new Error("Format is not supported or not correct")}}componentWillLoad(){this._time=n.fromFormat(this.time,this.format);if(!this._time.isValid){console.error(`Invalid time format. The configured format does not match the format of the passed time. ${this._time.invalidReason}: ${this._time.invalidExplanation}`);return}this._timeRef=this.format.includes("a")?n.fromFormat(this.time,this.format).toFormat("a"):undefined;this.formatTime()}formatTime(){const[o,e,t]=this._time.toFormat(this.format).split(" ")[0].split(":");this._formattedTime={hour:o,minute:e,second:t}}onInternalTimeChange(){this.timeChange.emit(this._time.toFormat(this.format));if(this._timeRef)this._timeRef=this._time.toFormat("a")}timeUpdate(o,e){let t=n.now().endOf("day").get(o);if(this._timeRef==="PM"&&o==="hour")e+=12;if(this._timeRef==="AM"&&o==="hour")t=12;if(e>t){e=t}else if(e<0){e=0}this._time=this._time.set({[o]:e});return e}changeTimeReference(){this._timeRef=this._timeRef==="AM"?"PM":"AM";if(!this._time.toFormat("a").includes(this._timeRef)){this._time=this._time.plus({hour:12})}}async getCurrentTime(){return this._time.toFormat(this.format)}render(){let o=[{unit:"hour",placeholder:"HH",hidden:!this.showHour},{unit:"minute",placeholder:"MM",hidden:!this.showMinutes},{unit:"second",placeholder:"SS",hidden:!this.showSeconds}];o=o.filter((o=>!o.hidden));return t(r,{key:"c09337ff6d0366929f77fe9bbdd89eb43bcc71ea"},t("ix-date-time-card",{key:"80c29872490f5968979a802b92113377ec9df678",standaloneAppearance:this.standaloneAppearance,corners:this.corners},t("div",{key:"35981c4cde62451368ee30fc4bcc19f894939cda",class:"header",slot:"header"},t("ix-typography",{key:"cd88a3f06e8907419acc45cd71d9954b7365096c",variant:"default-title"},this.textTime\|\|"Time")),t("div",{key:"fd5d74523fd649fedac87ac0887fb643fd9795ce",class:"clock"},o.map(((e,r)=>t("div",{class:"flex"},t("div",{class:{columns:true,hidden:e.hidden}},t("ix-icon-button",{size:"16",onClick:()=>this._time=this._time.plus({[e.unit]:1}),ghost:true,icon:"chevron-up",variant:"primary",class:"arrows"}),t("input",{class:"form-control",name:e.unit,type:"number",placeholder:e.placeholder,value:this._formattedTime?this._formattedTime[e.unit]:null,onKeyDown:o=>{if(o.key!=="ArrowUp"&&o.key!=="ArrowDown")return;const t=o.key==="ArrowUp"?1:-1;this._time=this._time.plus({[e.unit]:t});o.preventDefault()},onChange:o=>{let t=o.target;t.value=this.timeUpdate(e.unit,+t.value).toString()}}),t("ix-icon-button",{size:"16",onClick:()=>this._time=this._time.minus({[e.unit]:1}),ghost:true,icon:"chevron-down",variant:"primary",class:"arrows"})),r!==o.length-1&&t("div",{class:{"column-seperator":true,hidden:e.hidden}},":")))),t("div",{key:"819d9ce8cdfc94e7c4a1d2f7190587f052a9d246",class:{columns:true,"default-space":true,hidden:this._timeRef===undefined}},t("ix-icon-button",{key:"6ec3654d6a81bb2420695dd3292677395bd6adc2",size:"16",onClick:()=>this.changeTimeReference(),ghost:true,icon:"chevron-up",variant:"primary",class:"arrows"}),t("div",{key:"09b1dd7076112d4dc5168a968ed0ebebaa67e69f",class:"time-reference"},this._timeRef),t("ix-icon-button",{key:"ff24cdad6df286cc2da51958c2b51fe43f1e4fea",size:"16",onClick:()=>this.changeTimeReference(),ghost:true,icon:"chevron-down",variant:"primary",class:"arrows"}))),t("div",{key:"82602709c4107324d9498426cb30959fe81bacc4",class:{button:true,hidden:!this.standaloneAppearance}},t("ix-button",{key:"64da9baed02906baad694bbe066bc355197d293e",onClick:()=>{this.timeSelect.emit(this._time.toFormat(this.format));this.done.emit(this._time.toFormat(this.format))}},this.textSelectTime))))}static get watchers(){return{time:["watchTimePropHandler"],_time:["formatTime","onInternalTimeChange"]}}};l.style=i;export{l as ix_time_picker};
2	+ //# sourceMappingURL=p-cb1c0d63.entry.js.map

package/dist/siemens-ix/p-cb1c0d63.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["timePickerCss","IxTimePickerStyle0","TimePicker","DateTime","now","toFormat","this","format","undefined","watchTimePropHandler","newValue","_time","fromFormat","isValid","Error","componentWillLoad","time","console","error","invalidReason","invalidExplanation","_timeRef","includes","formatTime","hour","minute","second","split","_formattedTime","onInternalTimeChange","timeChange","emit","timeUpdate","unit","value","maxValue","endOf","get","set","changeTimeReference","plus","getCurrentTime","render","timepickerInformation","placeholder","hidden","showHour","showMinutes","showSeconds","filter","item","h","Host","key","standaloneAppearance","corners","class","slot","variant","textTime","map","descriptor","index","columns","size","onClick","ghost","icon","name","type","onKeyDown","e","preventDefault","onChange","inputElement","target","toString","minus","length","button","timeSelect","done","textSelectTime"],"sources":["src/components/time-picker/time-picker.scss?tag=ix-time-picker&encapsulation=shadow","src/components/time-picker/time-picker.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@import 'components/form/input';\n\n:host {\n @include ix-component;\n @import 'legacy/components/forms';\n\n display: block;\n position: relative;\n width: 22rem;\n\n @media (max-width: 576px) {\n .clock {\n padding: 1.5rem 0;\n }\n\n .header {\n height: $medium-control-height !important;\n }\n }\n\n @media (min-width: 576px) {\n .clock {\n padding: 4.25rem 0;\n }\n\n .header {\n height: $large-control-height !important;\n }\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: $large-control-height;\n }\n\n .flex {\n display: flex;\n }\n\n .clock {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n input,\n .time-reference {\n width: 2.625rem;\n height: $large-space;\n text-align: center;\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n\n /* Chrome, Safari, Edge, Opera */\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0 0.3125rem;\n }\n\n /* Firefox */\n &[type='number'] {\n -moz-appearance: textfield;\n }\n }\n\n .form-control[type='number'] {\n text-align: center;\n }\n\n .columns {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n }\n\n .column-seperator {\n display: flex;\n align-items: center;\n margin: 0 $tiny-space;\n }\n\n .button {\n display: flex;\n justify-content: flex-end;\n }\n\n .default-space {\n margin-left: $default-space;\n }\n\n .text-align {\n text-align: center;\n }\n\n .hidden {\n display: none;\n }\n\n .time-reference {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nexport type TimePickerCorners = DateTimeCardCorners;\n\ninterface TimePickerDescriptor {\n unit: 'hour' | 'minute' | 'second';\n placeholder: string;\n hidden: boolean;\n}\n\ninterface TimeOutputFormat {\n hour: string;\n minute: string;\n second: string;\n}\n\n@Component({\n tag: 'ix-time-picker',\n styleUrl: 'time-picker.scss',\n shadow: true,\n})\nexport class TimePicker {\n /**\n * Format of time string\n * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n *\n * @since 1.1.0\n */\n @Prop() format: string = 'TT';\n\n /**\n * Corner style\n */\n @Prop() corners: TimePickerCorners = 'rounded';\n\n /**\n * Controls the visual presentation and styling of the component when it is displayed as a standalone element\n */\n @Prop() standaloneAppearance: boolean = true;\n\n /**\n * @deprecated Not supported since 2.0.0.\n */\n @Prop() individual: boolean = true;\n\n /**\n * Show hour input\n */\n @Prop() showHour = true;\n\n /**\n * Show minutes input\n */\n @Prop() showMinutes = true;\n\n /**\n * Show seconds input\n */\n @Prop() showSeconds = true;\n\n /**\n * Select time with format string\n * Format has to match the `format` property.\n *\n * @since 1.1.0\n */\n @Prop() time: string = DateTime.now().toFormat(this.format);\n\n @Watch('time')\n watchTimePropHandler(newValue: string) {\n this._time = DateTime.fromFormat(newValue, this.format);\n if (!this._time.isValid) {\n throw new Error('Format is not supported or not correct');\n }\n }\n\n /**\n * Show time reference input\n *\n * @since 1.1.0 time reference is default aligned with format tt\n * @deprecated Since 2.0.0 time reference will be displayed depending on format.\n */\n // eslint-disable-next-line @stencil-community/strict-mutable\n @Prop({ mutable: true }) showTimeReference?: boolean = undefined;\n\n /**\n * Set time reference\n */\n @Prop() timeReference: 'AM' | 'PM' | undefined;\n\n /**\n * Text of date select button\n *\n * @since 1.1.0\n */\n @Prop() textSelectTime = 'Done';\n\n /**\n * Text for top label\n *\n * @since 2.1.0\n */\n @Prop() textTime: string = 'Time';\n\n /**\n * Time event\n */\n @Event() timeSelect: EventEmitter<string>;\n\n /**\n * Time event\n * @deprecated Will be removed in 3.0.0. Use `time-select` event.\n */\n @Event() done: EventEmitter<string>;\n\n /**\n * Time change event\n */\n @Event() timeChange: EventEmitter<string>;\n\n @State() private _time: DateTime;\n @State() private _timeRef: 'AM' | 'PM' | undefined;\n @State() private _formattedTime: TimeOutputFormat;\n\n componentWillLoad() {\n this._time = DateTime.fromFormat(this.time, this.format);\n\n if (!this._time.isValid) {\n console.error(\n `Invalid time format. The configured format does not match the format of the passed time. ${this._time.invalidReason}: ${this._time.invalidExplanation}`\n );\n return;\n }\n\n this._timeRef = this.format.includes('a')\n ? (DateTime.fromFormat(this.time, this.format).toFormat('a') as\n | 'AM'\n | 'PM')\n : undefined;\n this.formatTime();\n }\n\n @Watch('_time')\n formatTime() {\n const [hour, minute, second] = this._time\n .toFormat(this.format)\n .split(' ')[0]\n .split(':');\n\n this._formattedTime = {\n hour: hour,\n minute: minute,\n second: second,\n };\n }\n\n @Watch('_time')\n onInternalTimeChange() {\n this.timeChange.emit(this._time.toFormat(this.format));\n if (this._timeRef) this._timeRef = this._time.toFormat('a') as 'AM' | 'PM';\n }\n\n timeUpdate(unit: 'hour' | 'minute' | 'second', value: number): number {\n let maxValue = DateTime.now().endOf('day').get(unit);\n\n if (this._timeRef === 'PM' && unit === 'hour') value += 12;\n if (this._timeRef === 'AM' && unit === 'hour') maxValue = 12;\n\n if (value > maxValue) {\n value = maxValue;\n } else if (value < 0) {\n value = 0;\n }\n\n this._time = this._time.set({\n [unit]: value,\n });\n return value;\n }\n\n changeTimeReference() {\n this._timeRef = this._timeRef === 'AM' ? 'PM' : 'AM';\n\n if (!this._time.toFormat('a').includes(this._timeRef)) {\n this._time = this._time.plus({\n hour: 12,\n });\n }\n }\n\n /**\n * Get the current time based on the wanted format\n */\n @Method()\n async getCurrentTime() {\n return this._time.toFormat(this.format);\n }\n\n render() {\n let timepickerInformation: TimePickerDescriptor[] = [\n {\n unit: 'hour',\n placeholder: 'HH',\n hidden: !this.showHour,\n },\n {\n unit: 'minute',\n placeholder: 'MM',\n hidden: !this.showMinutes,\n },\n {\n unit: 'second',\n placeholder: 'SS',\n hidden: !this.showSeconds,\n },\n ];\n\n timepickerInformation = timepickerInformation.filter(\n (item) => !item.hidden\n );\n\n return (\n <Host>\n <ix-date-time-card\n standaloneAppearance={this.standaloneAppearance}\n corners={this.corners}\n >\n <div class=\"header\" slot=\"header\">\n <ix-typography variant=\"default-title\">\n {this.textTime || 'Time'}\n </ix-typography>\n </div>\n <div class=\"clock\">\n {timepickerInformation.map((descriptor, index: number) => (\n <div class=\"flex\">\n <div class={{ columns: true, hidden: descriptor.hidden }}>\n <ix-icon-button\n size=\"16\"\n onClick={() =>\n (this._time = this._time.plus({\n [descriptor.unit]: 1,\n }))\n }\n ghost\n icon=\"chevron-up\"\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n\n <input\n class=\"form-control\"\n name={descriptor.unit}\n type=\"number\"\n placeholder={descriptor.placeholder}\n value={\n this._formattedTime\n ? this._formattedTime[descriptor.unit]\n : null\n }\n onKeyDown={(e) => {\n if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;\n\n const value = e.key === 'ArrowUp' ? 1 : -1;\n this._time = this._time.plus({\n [descriptor.unit]: value,\n });\n e.preventDefault();\n }}\n onChange={(e: any) => {\n let inputElement = e.target as HTMLInputElement;\n inputElement.value = this.timeUpdate(\n descriptor.unit,\n +inputElement.value\n ).toString();\n }}\n ></input>\n\n <ix-icon-button\n size=\"16\"\n onClick={() =>\n (this._time = this._time.minus({\n [descriptor.unit]: 1,\n }))\n }\n ghost\n icon=\"chevron-down\"\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n </div>\n\n {index !== timepickerInformation.length - 1 && (\n <div\n class={{\n 'column-seperator': true,\n hidden: descriptor.hidden,\n }}\n >\n :\n </div>\n )}\n </div>\n ))}\n\n <div\n class={{\n columns: true,\n 'default-space': true,\n hidden: this._timeRef === undefined,\n }}\n >\n <ix-icon-button\n size=\"16\"\n onClick={() => this.changeTimeReference()}\n ghost\n icon=\"chevron-up\"\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n <div class=\"time-reference\">{this._timeRef}</div>\n <ix-icon-button\n size=\"16\"\n onClick={() => this.changeTimeReference()}\n ghost\n icon=\"chevron-down\"\n variant=\"primary\"\n class=\"arrows\"\n ></ix-icon-button>\n </div>\n </div>\n <div class={{ button: true, hidden: !this.standaloneAppearance }}>\n <ix-button\n onClick={() => {\n this.timeSelect.emit(this._time.toFormat(this.format));\n this.done.emit(this._time.toFormat(this.format));\n }}\n >\n {this.textSelectTime}\n </ix-button>\n </div>\n </ix-date-time-card>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-ced10144.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{g as t}from"./p-26e9d40e.js";const n={target:"window",defaultEnabled:true};function e(t,e={}){const i=Object.assign(Object.assign({},n),e);let o;const s=t=>{o(t)};const c={on:t=>{o=t},isEnabled:i.defaultEnabled,enable:n=>{c.isEnabled=n;if(n){addEventListener(t,s)}else{removeEventListener(t,s)}},destroy:()=>{c.enable(false)}};c.enable(i.defaultEnabled);return c}function i(n,i){return(o,s)=>{const{componentWillLoad:c,componentWillRender:r,disconnectedCallback:_}=o;if(i){o.componentWillRender=function(){var n;const e=t(this);(n=e[`__ix__${s}`])===null\|\|n===void 0?void 0:n.enable(i(this));return r&&r.call(this)}}o.componentWillLoad=function(){const i=e(n);const o=t(this);const r=this[s];o[`__ix__${s}`]=i;i.on(r.bind(this));return c&&c.call(this)};o.disconnectedCallback=function(){var n;const e=t(this);if(e&&e[`__ix__${s}`]){(n=e[`__ix__${s}`])===null\|\|n===void 0?void 0:n.destroy();e[`__ix__${s}`]=null}return _&&_.call(this)}}}export{i as O};
2	+ //# sourceMappingURL=p-ced10144.js.map

package/dist/siemens-ix/p-ced10144.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["defaultOptions","target","defaultEnabled","createListener","event","options","opts","Object","assign","callback","onEvent","resultObject","on","onEventCallback","isEnabled","enable","state","addEventListener","removeEventListener","destroy","OnListener","fnExp","proto","methodName","componentWillLoad","componentWillRender","disconnectedCallback","host","getElement","this","_a","call","listener","method","bind"],"sources":["src/components/utils/listener.ts"],"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\nimport { getElement } from '@stencil/core';\n\nexport type ListenerOptions = {\n target?: 'window';\n defaultEnabled?: boolean;\n};\n\nconst defaultOptions: ListenerOptions = {\n target: 'window',\n defaultEnabled: true,\n};\n\nexport function createListener(event: string, options: ListenerOptions = {}) {\n const opts = {\n ...defaultOptions,\n ...options,\n };\n\n let callback: any;\n const onEvent = (event: Event) => {\n callback(event);\n };\n\n const resultObject = {\n on: (onEventCallback: any) => {\n callback = onEventCallback;\n },\n\n isEnabled: opts.defaultEnabled,\n\n enable: (state: boolean) => {\n resultObject.isEnabled = state;\n\n if (state) {\n addEventListener(event, onEvent);\n } else {\n removeEventListener(event, onEvent);\n }\n },\n\n destroy: () => {\n resultObject.enable(false);\n },\n };\n\n resultObject.enable(opts.defaultEnabled);\n return resultObject;\n}\n\nexport function OnListener<T>(event: string, fnExp?: (self: T) => boolean) {\n return (proto: any, methodName: string) => {\n const { componentWillLoad, componentWillRender, disconnectedCallback } =\n proto;\n\n if (fnExp) {\n proto.componentWillRender = function () {\n const host = getElement(this);\n host[`__ix__${methodName}`]?.enable(fnExp(this));\n return componentWillRender && componentWillRender.call(this);\n };\n }\n\n proto.componentWillLoad = function () {\n const listener = createListener(event);\n const host = getElement(this);\n const method = this[methodName];\n\n host[`__ix__${methodName}`] = listener;\n\n listener.on(method.bind(this));\n return componentWillLoad && componentWillLoad.call(this);\n };\n\n proto.disconnectedCallback = function () {\n const host = getElement(this);\n\n if (host && host[`__ix__${methodName}`]) {\n host[`__ix__${methodName}`]?.destroy();\n host[`__ix__${methodName}`] = null;\n }\n\n return disconnectedCallback && disconnectedCallback.call(this);\n };\n };\n}\n"],"mappings":"oCAgBA,MAAMA,EAAkC,CACtCC,OAAQ,SACRC,eAAgB,M,SAGFC,EAAeC,EAAeC,EAA2B,IACvE,MAAMC,EAAIC,OAAAC,OAAAD,OAAAC,OAAA,GACLR,GACAK,GAGL,IAAII,EACJ,MAAMC,EAAWN,IACfK,EAASL,EAAM,EAGjB,MAAMO,EAAe,CACnBC,GAAKC,IACHJ,EAAWI,CAAe,EAG5BC,UAAWR,EAAKJ,eAEhBa,OAASC,IACPL,EAAaG,UAAYE,EAEzB,GAAIA,EAAO,CACTC,iBAAiBb,EAAOM,E,KACnB,CACLQ,oBAAoBd,EAAOM,E,GAI/BS,QAAS,KACPR,EAAaI,OAAO,MAAM,GAI9BJ,EAAaI,OAAOT,EAAKJ,gBACzB,OAAOS,CACT,C,SAEgBS,EAAchB,EAAeiB,GAC3C,MAAO,CAACC,EAAYC,KAClB,MAAMC,kBAAEA,EAAiBC,oBAAEA,EAAmBC,qBAAEA,GAC9CJ,EAEF,GAAID,EAAO,CACTC,EAAMG,oBAAsB,W,MAC1B,MAAME,EAAOC,EAAWC,OACxBC,EAAAH,EAAK,SAASJ,QAAa,MAAAO,SAAA,SAAAA,EAAEf,OAAOM,EAAMQ,OAC1C,OAAOJ,GAAuBA,EAAoBM,KAAKF,K,EAI3DP,EAAME,kBAAoB,WACxB,MAAMQ,EAAW7B,EAAeC,GAChC,MAAMuB,EAAOC,EAAWC,MACxB,MAAMI,EAASJ,KAAKN,GAEpBI,EAAK,SAASJ,KAAgBS,EAE9BA,EAASpB,GAAGqB,EAAOC,KAAKL,OACxB,OAAOL,GAAqBA,EAAkBO,KAAKF,K,EAGrDP,EAAMI,qBAAuB,W,MAC3B,MAAMC,EAAOC,EAAWC,MAExB,GAAIF,GAAQA,EAAK,SAASJ,KAAe,EACvCO,EAAAH,EAAK,SAASJ,QAAa,MAAAO,SAAA,SAAAA,EAAEX,UAC7BQ,EAAK,SAASJ,KAAgB,I,CAGhC,OAAOG,GAAwBA,EAAqBK,KAAKF,K,CAC1D,CAEL,Q"}

package/dist/siemens-ix/p-d0cf522c.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as d,H as a,g as c}from"./p-26e9d40e.js";import"./p-46a6cd9d.js";import{d as s,c as t}from"./p-6e6efb4c.js";import"./p-c4749812.js";const o=class{constructor(d){e(this,d)}dismiss(){s(this.host)}close(){t(this.host,"Done!")}render(){return d(a,{key:"6588eca80a4a796627317d549ced3d767792d528"},d("div",{key:"06a4f6cb97ef30f9bdc406ca7bad4a1978c8df03"},d("div",{key:"dfc00207c3d9ead47420a30768e216b7907588c9",class:"modal-header"},"Message headline",d("ix-icon-button",{key:"2b01ad4f2e9ca5e277c4d53b6d6cdb5d2b9b74c8","data-close-button":true,ghost:true,icon:"close",onClick:()=>this.dismiss()})),d("div",{key:"4d1ac160957975fe53162ebd42dd2bd8d6dee0d9",class:"modal-body"},"Message text lorem ipsum"),d("div",{key:"9709cda6c07d7c0abe13424dc87c64bb11162622",class:"modal-footer"},d("ix-button",{key:"f2c257ebea902ef30674ad2d24a150ad17b82df3",outline:true,onClick:()=>this.dismiss()},"Cancel"),d("ix-button",{key:"1f512110cfacee2259d709031be3e5a5869d9704",onClick:()=>this.close()},"OK"))))}get host(){return c(this)}};export{o as ix_modal_example};
2	+ //# sourceMappingURL=p-d0cf522c.entry.js.map

package/dist/siemens-ix/p-d0cf522c.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["ModalExample","dismiss","dismissModal","this","host","close","closeModal","render","h","Host","key","class","ghost","icon","onClick","outline"],"sources":["src/components/playground/example-modal.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\nimport { Component, Element, h, Host } from '@stencil/core';\nimport { closeModal, dismissModal } from '../utils/modal';\n\n@Component({\n tag: 'ix-modal-example',\n})\nexport class ModalExample {\n @Element() host!: HTMLIxModalExampleElement;\n\n private dismiss() {\n dismissModal(this.host);\n }\n\n private close() {\n closeModal(this.host, 'Done!');\n }\n\n render() {\n return (\n <Host>\n <div>\n <div class=\"modal-header\">\n Message headline\n <ix-icon-button\n data-close-button\n ghost\n icon={'close'}\n onClick={() => this.dismiss()}\n ></ix-icon-button>\n </div>\n <div class=\"modal-body\">Message text lorem ipsum</div>\n <div class=\"modal-footer\">\n <ix-button outline onClick={() => this.dismiss()}>\n Cancel\n </ix-button>\n <ix-button onClick={() => this.close()}>OK</ix-button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"0JAeaA,EAAY,M,yBAGf,OAAAC,GACNC,EAAaC,KAAKC,K,CAGZ,KAAAC,GACNC,EAAWH,KAAKC,KAAM,Q,CAGxB,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,4CACEF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBAAc,mBAEvBH,EAAA,kBAAAE,IAAA,oEAEEE,MAAK,KACLC,KAAM,QACNC,QAAS,IAAMX,KAAKF,aAGxBO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cAAY,4BACvBH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,aAAAE,IAAA,2CAAWK,QAAO,KAACD,QAAS,IAAMX,KAAKF,WAAS,UAGhDO,EAAA,aAAAE,IAAA,2CAAWI,QAAS,IAAMX,KAAKE,SAAO,Q"}

package/dist/siemens-ix/p-d2ee87ae.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as t,h as s,H as a,g as i}from"./p-26e9d40e.js";import{U as r}from"./p-ef0d5678.js";const o=":host{display:block;min-height:4rem;height:4rem}:host ,:host ::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .file-upload-area{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}:host .file-upload-area.multiline{max-height:unset;height:auto}:host .file-upload-area.multiline .glyph{align-self:flex-start;margin-block-start:3px}:host .file-upload-area.multiline>div{align-self:flex-start}:host .file-upload-area:not(.multiline) .state,:host .file-upload-area:not(.multiline) .upload-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .file-upload-area:not(.disabled).file-over{border-color:var(--theme-upload--border-color--dragover);border-style:solid}:host .file-upload-area.checking{color:var(--theme-upload-text--color--checking);border-style:solid}:host .file-upload-area.disabled{border-style:solid;color:var(--theme-upload-text--color--disabled)}:host .file-upload-area ix-button{margin-inline-start:1rem}:host .file-upload-area .upload-browser{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host .file-upload-area .loader{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}:host .file-upload-area .upload-filename{margin-bottom:1rem}:host .file-upload-area .state{display:flex;align-items:center}:host .file-upload-area .state>ix-spinner{margin-inline-end:0.5rem;height:1.5rem;width:1.5rem}:host .file-upload-area .state>ix-icon{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon.icon-error{color:var(--theme-color-alarm)}:host .file-upload-area .state>ix-icon.icon-success{color:var(--theme-color-success)}:host(.disabled){pointer-events:none}";const l=o;const n=class{get inputElement(){return this.hostElement.shadowRoot.querySelector("#upload-browser")}constructor(s){e(this,s);this.filesChanged=t(this,"filesChanged",7);this.accept=undefined;this.multiple=false;this.multiline=false;this.disabled=false;this.state=r.SELECT_FILE;this.selectFileText="+ Drag files here or…";this.loadingText="Checking files…";this.uploadFailedText="Upload failed. Please try again.";this.uploadSuccessText="Upload successful";this.i18nUploadFile="Upload file…";this.i18nUploadDisabled="File upload currently not possible.";this.isFileOver=false}fileDropped(e){e.preventDefault();if(this.disabled){return}const t=e.dataTransfer.files;this.isFileOver=false;this.filesToUpload=this.convertToFileArray(t);this.filesChanged.emit(this.filesToUpload)}fileOver(e){if(this.state!==r.LOADING){e.preventDefault();e.dataTransfer.dropEffect="move"}if(!this.multiple&&e.dataTransfer.items.length>1){e.preventDefault();e.stopPropagation();e.dataTransfer.effectAllowed="none";e.dataTransfer.dropEffect="none"}else{this.isFileOver=true}}fileLeave(){this.isFileOver=false}fileChangeEvent(e){if(this.disabled){return}this.filesToUpload=this.convertToFileArray(e.target.files);this.filesChanged.emit(this.filesToUpload);this.inputElement.type="";this.inputElement.type="file"}convertToFileArray(e){let t=[];if(e instanceof FileList){t=Array.from(e)}else{t=[e]}return t}renderUploadState(){if(this.disabled){return s("span",{class:"state"},s("span",{class:"upload-text"},this.i18nUploadDisabled))}switch(this.state){case r.SELECT_FILE:return s("span",{class:"state"},s("span",{class:"upload-text"},this.selectFileText));case r.LOADING:return s("span",{class:"state"},s("ix-spinner",{variant:"primary"}),s("span",{class:"upload-text"},this.loadingText));case r.UPLOAD_FAILED:return s("span",{class:"state"},s("ix-icon",{name:"error",class:"icon-error"}),s("span",{class:"upload-text"},this.uploadFailedText));case r.UPLOAD_SUCCESSED:return s("span",{class:"state"},s("ix-icon",{name:"success",class:"icon-success"}),s("span",{class:"upload-text"},this.uploadSuccessText));default:return""}}async setFilesToUpload(e){this.filesToUpload=e}render(){return s(a,{key:"24415b4716bc4e6e575668cb5b09f978ebd387d4"},s("div",{key:"877e983ae775fa95ffd5254b3bb7697db4cd2720",class:{"file-upload-area":true,"file-over":this.state!==r.LOADING&&this.isFileOver,checking:this.state===r.LOADING,disabled:this.disabled,multiline:this.multiline},onDrop:e=>{if(this.state!==r.LOADING){this.fileDropped(e)}},onDragOver:e=>this.fileOver(e),onDragLeave:()=>this.fileLeave(),draggable:!this.disabled},this.renderUploadState(),s("div",{key:"6828b521609b8698f3ebc78ed83256a4fbb3cfea"},s("input",{key:"e825ce2834b93d3ef09100d29d127573eb812cfa",multiple:this.multiple,type:"file",class:"upload-browser",id:"upload-browser",onChange:e=>{this.fileChangeEvent(e)},accept:this.accept}),s("ix-button",{key:"117dd488e465ec542381b38b90d9d6a2ac5afb35",tabindex:"-1",outline:true,onClick:()=>this.inputElement.click(),disabled:this.disabled\|\|this.state===r.LOADING},this.i18nUploadFile))))}get hostElement(){return i(this)}};n.style=l;export{n as ix_upload};
2	+ //# sourceMappingURL=p-d2ee87ae.entry.js.map

package/dist/siemens-ix/p-d2ee87ae.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["uploadCss","IxUploadStyle0","Upload","inputElement","this","hostElement","shadowRoot","querySelector","constructor","hostRef","registerInstance","filesChanged","createEvent","accept","undefined","multiple","multiline","disabled","state","UploadFileState","SELECT_FILE","selectFileText","loadingText","uploadFailedText","uploadSuccessText","i18nUploadFile","i18nUploadDisabled","isFileOver","fileDropped","evt","preventDefault","file","dataTransfer","files","filesToUpload","convertToFileArray","emit","fileOver","event","LOADING","dropEffect","items","length","stopPropagation","effectAllowed","fileLeave","fileChangeEvent","target","type","filesFromEvent","FileList","Array","from","renderUploadState","h","class","variant","UPLOAD_FAILED","name","UPLOAD_SUCCESSED","setFilesToUpload","obj","render","Host","key","checking","onDrop","e","onDragOver","onDragLeave","draggable","id","onChange","tabindex","outline","onClick","click"],"sources":["src/components/upload/upload.scss?tag=ix-upload&encapsulation=shadow","src/components/upload/upload.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@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n display: block;\n min-height: 4rem;\n height: 4rem;\n\n .file-upload-area {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n\n overflow: hidden;\n\n height: 100%;\n width: 100%;\n\n padding: $default-space;\n\n border: 1px dashed var(--theme-upload--border-color);\n border-radius: var(--theme-upload--border-radius);\n color: var(--theme-upload-text--color);\n\n &.multiline {\n max-height: unset;\n height: auto;\n\n .glyph {\n align-self: flex-start;\n margin-block-start: 3px;\n }\n\n > div {\n align-self: flex-start;\n }\n }\n\n &:not(.multiline) {\n .state,\n .upload-text {\n @include ellipsis;\n }\n }\n\n &:not(.disabled).file-over {\n border-color: var(--theme-upload--border-color--dragover);\n border-style: solid;\n }\n\n &.checking {\n color: var(--theme-upload-text--color--checking);\n border-style: solid;\n }\n\n &.disabled {\n border-style: solid;\n color: var(--theme-upload-text--color--disabled);\n }\n\n ix-button {\n margin-inline-start: $default-space;\n }\n\n .upload-browser {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n }\n\n .loader {\n margin: 2.187rem auto;\n font-size: 0.937rem;\n width: $default-space;\n height: $default-space;\n border-radius: 50%;\n position: relative;\n text-indent: -9999em;\n animation: optimise-loading 1.1s infinite ease;\n transform: translateZ(0);\n }\n\n .upload-filename {\n margin-bottom: $default-space;\n }\n\n .state {\n display: flex;\n align-items: center;\n\n > ix-spinner {\n margin-inline-end: $small-space;\n height: $large-space;\n width: $large-space;\n }\n\n > ix-icon {\n margin-inline-end: $small-space;\n\n &.icon-error {\n color: var(--theme-color-alarm);\n }\n\n &.icon-success {\n color: var(--theme-color-success);\n }\n }\n }\n }\n}\n\n:host(.disabled) {\n pointer-events: 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 Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { UploadFileState } from './upload-file-state';\n\n@Component({\n tag: 'ix-upload',\n styleUrl: 'upload.scss',\n shadow: true,\n})\nexport class Upload {\n /**\n * The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).\n * [accept]{@link \"https://www.w3schools.com/tags/att_input_accept.asp\"}\n */\n @Prop() accept: string;\n\n /**\n * If multiple is true the user can drop or select multiple files\n */\n @Prop() multiple = false;\n\n /**\n * Whether the text should wrap to more than one line\n */\n @Prop() multiline = false;\n\n /**\n * Disable all input events\n */\n @Prop() disabled = false;\n\n /**\n * After a file is uploaded you can set the upload component to a defined state\n */\n @Prop() state: UploadFileState = UploadFileState.SELECT_FILE;\n\n /**\n * Will be used by state = UploadFileState.SELECT_FILE\n */\n @Prop() selectFileText = '+ Drag files here or…';\n\n /**\n * Will be used by state = UploadFileState.LOADING\n */\n @Prop() loadingText = 'Checking files…';\n\n /**\n * Will be used by state = UploadFileState.UPLOAD_FAILED\n */\n @Prop() uploadFailedText = 'Upload failed. Please try again.';\n\n /**\n * Will be used by state = UploadFileState.UPLOAD_SUCCESSED\n */\n @Prop() uploadSuccessText = 'Upload successful';\n\n /**\n * Label for upload file button\n */\n @Prop() i18nUploadFile = 'Upload file…';\n\n /**\n * Text for disabled state\n */\n @Prop() i18nUploadDisabled = 'File upload currently not possible.';\n\n /**\n * You get an array of Files after drop-action or browse action is finished\n */\n @Event() filesChanged: EventEmitter<Array<File>>;\n\n @Element() hostElement!: HTMLIxUploadElement;\n\n get inputElement(): HTMLInputElement {\n return this.hostElement.shadowRoot.querySelector('#upload-browser');\n }\n\n @State() isFileOver = false;\n\n private filesToUpload: Array<File>;\n\n constructor() {}\n\n private fileDropped(evt: DragEvent) {\n evt.preventDefault();\n if (this.disabled) {\n return;\n }\n\n const file: File | FileList = evt.dataTransfer.files;\n this.isFileOver = false;\n\n this.filesToUpload = this.convertToFileArray(file);\n this.filesChanged.emit(this.filesToUpload);\n }\n\n private fileOver(event: DragEvent) {\n if (this.state !== UploadFileState.LOADING) {\n event.preventDefault();\n event.dataTransfer.dropEffect = 'move';\n }\n\n if (!this.multiple && event.dataTransfer.items.length > 1) {\n event.preventDefault();\n event.stopPropagation();\n event.dataTransfer.effectAllowed = 'none';\n event.dataTransfer.dropEffect = 'none';\n } else {\n this.isFileOver = true;\n }\n }\n\n private fileLeave() {\n this.isFileOver = false;\n }\n\n private fileChangeEvent(event: any) {\n if (this.disabled) {\n return;\n }\n this.filesToUpload = this.convertToFileArray(event.target.files);\n\n this.filesChanged.emit(this.filesToUpload);\n\n // Workaround for bug in native input element, that prevents the user from uploading\n // a file with the same name as the most recent one, but with changed content.\n this.inputElement.type = '';\n this.inputElement.type = 'file';\n }\n\n private convertToFileArray(filesFromEvent: FileList | File): File[] {\n let files = [];\n if (filesFromEvent instanceof FileList) {\n files = Array.from(filesFromEvent);\n } else {\n files = [filesFromEvent];\n }\n return files;\n }\n\n private renderUploadState() {\n if (this.disabled) {\n return (\n <span class=\"state\">\n <span class=\"upload-text\">{this.i18nUploadDisabled}</span>\n </span>\n );\n }\n\n switch (this.state) {\n case UploadFileState.SELECT_FILE:\n return (\n <span class=\"state\">\n <span class=\"upload-text\">{this.selectFileText}</span>\n </span>\n );\n case UploadFileState.LOADING:\n return (\n <span class=\"state\">\n <ix-spinner variant=\"primary\"></ix-spinner>\n <span class=\"upload-text\">{this.loadingText}</span>\n </span>\n );\n case UploadFileState.UPLOAD_FAILED:\n return (\n <span class=\"state\">\n <ix-icon name=\"error\" class=\"icon-error\"></ix-icon>\n <span class=\"upload-text\">{this.uploadFailedText}</span>\n </span>\n );\n case UploadFileState.UPLOAD_SUCCESSED:\n return (\n <span class=\"state\">\n <ix-icon name=\"success\" class=\"icon-success\"></ix-icon>\n <span class=\"upload-text\">{this.uploadSuccessText}</span>\n </span>\n );\n default:\n return '';\n }\n }\n\n /**\n * Set files\n * @param obj\n */\n @Method()\n async setFilesToUpload(obj: any) {\n this.filesToUpload = obj;\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'file-upload-area': true,\n 'file-over':\n this.state !== UploadFileState.LOADING && this.isFileOver,\n checking: this.state === UploadFileState.LOADING,\n disabled: this.disabled,\n multiline: this.multiline,\n }}\n onDrop={(e) => {\n if (this.state !== UploadFileState.LOADING) {\n this.fileDropped(e);\n }\n }}\n onDragOver={(e) => this.fileOver(e)}\n onDragLeave={() => this.fileLeave()}\n draggable={!this.disabled}\n >\n {this.renderUploadState()}\n <div>\n <input\n multiple={this.multiple}\n type=\"file\"\n class=\"upload-browser\"\n id=\"upload-browser\"\n onChange={(e) => {\n this.fileChangeEvent(e);\n }}\n accept={this.accept}\n />\n <ix-button\n tabindex=\"-1\"\n outline\n onClick={() => this.inputElement.click()}\n disabled={this.disabled || this.state === UploadFileState.LOADING}\n >\n {this.i18nUploadFile}\n </ix-button>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-d3f26126.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,a as e,h as o,F as i,H as r,g as s}from"./p-26e9d40e.js";import{s as a}from"./p-0ca3528f.js";import{a as n}from"./p-702f9349.js";import{a as l,A as h}from"./p-7c36d3fa.js";import{m as d}from"./p-c146af8e.js";import{h as c}from"./p-712e0ee0.js";import"./p-46a6cd9d.js";import"./p-6e6efb4c.js";import"./p-c4749812.js";import"./p-68a274e7.js";const m=":host{display:flex;align-items:center;position:relative;width:100%;height:2.75rem;min-height:2.75rem;padding:0 1rem 0 0.625rem;color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}:host ,:host ::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}: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 .app-switch{margin-right:1rem}:host .name{overflow:hidden;overflow-wrap:anywhere;text-overflow:ellipsis;text-wrap:nowrap;max-width:50%;margin-left:1.5rem;margin-right:2.5rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color);margin-left:0.375rem}:host .content{display:flex;position:relative;flex-direction:row;margin-left:auto;margin-right:0px}:host .dropdown{overflow:visible}:host .dropdown-content{padding:1rem}:host .context-menu{display:none}:host .context-menu.context-menu-visible{display:block}@media only screen and (max-width: 48em){:host .logo{display:none}}:host ::slotted(ix-avatar){margin-left:1rem}:host(.breakpoint-sm){padding-left:0.625rem}:host(.breakpoint-sm) .logo{margin-left:0.5rem}";const p=m;const b=class{constructor(e){t(this,e);this.name=undefined;this.breakpoint="lg";this.menuExpanded=false;this.suppressResponsive=false;this.hasSlottedElements=false;this.applicationLayoutContext=undefined}componentWillLoad(){l(this.hostElement,h,(t=>{if((t===null\|\|t===void 0?void 0:t.host)==="map-navigation"){this.suppressResponsive=true;this.breakpoint="md";return}this.breakpoint=n.breakpoint;this.applicationLayoutContext=t;this.tryUpdateAppSwitch()}),true);this.menuDisposable=d.expandChange.on((t=>{this.menuExpanded=t}));this.modeDisposable=n.onChange.on((t=>{if(this.suppressResponsive){this.breakpoint="md";return}this.breakpoint=t}));this.updateIsSlottedContent()}componentDidLoad(){this.attachSiemensLogoIfLoaded()}disconnectedCallback(){var t,e;(t=this.menuDisposable)===null\|\|t===void 0?void 0:t.dispose();(e=this.modeDisposable)===null\|\|e===void 0?void 0:e.dispose()}isLogoSlotted(){const t=this.hostElement.shadowRoot.querySelector('slot[name="logo"]');const e=t.assignedNodes({flatten:true});return e.length!==0}async attachSiemensLogoIfLoaded(){await window.customElements.whenDefined("ix-siemens-logo");const t=document.createElement("ix-siemens-logo");if(!this.isLogoSlotted()){this.hostElement.shadowRoot.querySelector(".logo").appendChild(t)}}async onMenuClick(){d.toggle()}resolveContextMenuButton(){return new Promise((t=>e((()=>t(this.hostElement.shadowRoot.querySelector("[data-context-menu]"))))))}tryUpdateAppSwitch(){var t;if(!this.callbackUpdateAppSwitchModal){return}this.callbackUpdateAppSwitchModal((t=this.applicationLayoutContext)===null\|\|t===void 0?void 0:t.appSwitchConfig)}async showAppSwitch(){var t;this.callbackUpdateAppSwitchModal=await a((t=this.applicationLayoutContext)===null\|\|t===void 0?void 0:t.appSwitchConfig)}updateIsSlottedContent(){const t=this.hostElement.shadowRoot.querySelector(".content slot");this.hasSlottedElements=c(t)}render(){var t;return o(r,{key:"97751facd6b45ecabb12a96d2cf6a797ca248a30",class:{[`breakpoint-${this.breakpoint}`]:true},slot:"application-header"},this.breakpoint==="sm"&&this.suppressResponsive===false&&o("ix-menu-expand-icon",{onClick:()=>this.onMenuClick(),expanded:this.menuExpanded}),((t=this.applicationLayoutContext)===null\|\|t===void 0?void 0:t.appSwitchConfig)&&this.breakpoint!=="sm"&&this.suppressResponsive===false&&o("ix-icon-button",{onClick:()=>this.showAppSwitch(),icon:"apps",ghost:true,class:"app-switch"}),o("div",{key:"032c58c087c2bac31f9574c8e02bc0ae1b41ba44",class:"logo"},o("slot",{key:"893d83b805ba36788817fc3b2edc73e43cf05696",name:"logo"})),o("div",{key:"fede4cb969c940293fa56adb956d743124b9c8e1",class:"name"},this.name),o("div",{key:"7d10423ca58debb3f8d7a5b05cd337ed579caa27",class:"content"},this.breakpoint==="sm"?o(i,null,o("ix-icon-button",{class:{["context-menu"]:true,["context-menu-visible"]:this.hasSlottedElements},"data-context-menu":true,icon:"more-menu",ghost:true}),o("ix-dropdown",{"data-overflow-dropdown":true,class:"dropdown",discoverAllSubmenus:true,trigger:this.resolveContextMenuButton()},o("div",{class:"dropdown-content"},o("slot",{onSlotchange:()=>this.updateIsSlottedContent()})))):o("slot",{onSlotchange:()=>this.updateIsSlottedContent()}),o("slot",{key:"1d24e28eb8832666ec7615dc25126c3f7b461e81",name:"ix-application-header-avatar"})))}get hostElement(){return s(this)}};b.style=p;export{b as ix_application_header};
2	+ //# sourceMappingURL=p-d3f26126.entry.js.map

package/dist/siemens-ix/p-d3f26126.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["applicationHeaderCss","IxApplicationHeaderStyle0","ApplicationHeader","componentWillLoad","useContextConsumer","this","hostElement","ApplicationLayoutContext","ctx","host","suppressResponsive","breakpoint","applicationLayoutService","applicationLayoutContext","tryUpdateAppSwitch","menuDisposable","menuController","expandChange","on","show","menuExpanded","modeDisposable","onChange","mode","updateIsSlottedContent","componentDidLoad","attachSiemensLogoIfLoaded","disconnectedCallback","_a","dispose","_b","isLogoSlotted","slotElement","shadowRoot","querySelector","nodes","assignedNodes","flatten","length","window","customElements","whenDefined","logoElement","document","createElement","appendChild","onMenuClick","toggle","resolveContextMenuButton","Promise","resolve","readTask","callbackUpdateAppSwitchModal","appSwitchConfig","showAppSwitch","hasSlottedElements","render","h","Host","key","class","slot","onClick","expanded","icon","ghost","name","Fragment","discoverAllSubmenus","trigger","onSlotchange"],"sources":["src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","src/components/application-header/application-header.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 @import 'mixins/break-points';\n\n:host {\n @include ix-component;\n\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n height: 2.75rem;\n min-height: 2.75rem;\n padding: 0 1rem 0 0.625rem;\n\n color: var(--theme-app-header--color);\n background-color: var(--theme-app-header--background);\n\n border-bottom: var(--theme-app-header--border-width) solid\n var(--theme-app-header--border-color);\n\n z-index: var(--theme-z-index-fixed);\n\n .app-switch {\n margin-right: 1rem;\n }\n\n .name {\n overflow: hidden;\n overflow-wrap: anywhere;\n text-overflow: ellipsis;\n text-wrap: nowrap;\n max-width: 50%;\n margin-left: 1.5rem;\n margin-right: 2.5rem;\n color: var(--theme-app-header--color);\n }\n\n .logo {\n display: inline-flex;\n align-items: center;\n position: relative;\n height: 32px;\n overflow: hidden;\n line-height: 0rem;\n color: var(--theme-app-header-logo--color);\n margin-left: 0.375rem;\n }\n\n .content {\n display: flex;\n position: relative;\n flex-direction: row;\n margin-left: auto;\n margin-right: 0px;\n }\n\n .dropdown {\n overflow: visible;\n }\n\n .dropdown-content {\n padding: 1rem;\n }\n\n .context-menu {\n display: none;\n }\n\n .context-menu.context-menu-visible {\n display: block;\n }\n\n @include media-breakpoint-match('sm') {\n .logo {\n display: none;\n }\n }\n\n ::slotted(ix-avatar) {\n margin-left: 1rem;\n }\n}\n\n:host(.breakpoint-sm) {\n padding-left: 0.625rem;\n\n .logo {\n margin-left: 0.5rem;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { showAppSwitch } from '../utils/app-switch';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport {\n ApplicationLayoutContext,\n AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { Disposable } from '../utils/typed-event';\n\n/**\n * @slot logo - Location of the logo\n */\n@Component({\n tag: 'ix-application-header',\n styleUrl: 'application-header.scss',\n shadow: true,\n})\nexport class ApplicationHeader {\n @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n /**\n * Application name\n */\n @Prop() name: string;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() menuExpanded = false;\n @State() suppressResponsive = false;\n\n @State() hasSlottedElements = false;\n\n private menuDisposable?: Disposable;\n private modeDisposable?: Disposable;\n private callbackUpdateAppSwitchModal?: (\n config: AppSwitchConfiguration\n ) => void;\n\n @State() applicationLayoutContext: ContextType<\n typeof ApplicationLayoutContext\n >;\n\n componentWillLoad() {\n useContextConsumer(\n this.hostElement,\n ApplicationLayoutContext,\n (ctx) => {\n if (ctx?.host === 'map-navigation') {\n this.suppressResponsive = true;\n this.breakpoint = 'md';\n return;\n }\n\n this.breakpoint = applicationLayoutService.breakpoint;\n this.applicationLayoutContext = ctx;\n\n this.tryUpdateAppSwitch();\n },\n true\n );\n\n this.menuDisposable = menuController.expandChange.on((show) => {\n this.menuExpanded = show;\n });\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n if (this.suppressResponsive) {\n this.breakpoint = 'md';\n return;\n }\n\n this.breakpoint = mode;\n });\n\n this.updateIsSlottedContent();\n }\n\n componentDidLoad() {\n this.attachSiemensLogoIfLoaded();\n }\n\n disconnectedCallback() {\n this.menuDisposable?.dispose();\n this.modeDisposable?.dispose();\n }\n\n private isLogoSlotted() {\n const slotElement = this.hostElement.shadowRoot.querySelector(\n 'slot[name=\"logo\"]'\n ) as HTMLSlotElement;\n const nodes = slotElement.assignedNodes({\n flatten: true,\n });\n\n return nodes.length !== 0;\n }\n\n private async attachSiemensLogoIfLoaded() {\n await window.customElements.whenDefined('ix-siemens-logo');\n const logoElement = document.createElement('ix-siemens-logo');\n if (!this.isLogoSlotted()) {\n this.hostElement.shadowRoot\n .querySelector('.logo')\n .appendChild(logoElement);\n }\n }\n\n private async onMenuClick() {\n menuController.toggle();\n }\n\n private resolveContextMenuButton() {\n return new Promise<HTMLElement>((resolve) =>\n readTask(() =>\n resolve(\n this.hostElement.shadowRoot.querySelector(\n '[data-context-menu]'\n ) as HTMLElement\n )\n )\n );\n }\n\n private tryUpdateAppSwitch() {\n if (!this.callbackUpdateAppSwitchModal) {\n return;\n }\n\n this.callbackUpdateAppSwitchModal(\n this.applicationLayoutContext?.appSwitchConfig\n );\n }\n\n private async showAppSwitch() {\n this.callbackUpdateAppSwitchModal = await showAppSwitch(\n this.applicationLayoutContext?.appSwitchConfig\n );\n }\n\n private updateIsSlottedContent() {\n const slotElement =\n this.hostElement.shadowRoot.querySelector('.content slot');\n\n this.hasSlottedElements = hasSlottedElements(slotElement);\n }\n\n render() {\n return (\n <Host\n class={{ [`breakpoint-${this.breakpoint}`]: true }}\n slot=\"application-header\"\n >\n {this.breakpoint === 'sm' && this.suppressResponsive === false && (\n <ix-menu-expand-icon\n onClick={() => this.onMenuClick()}\n expanded={this.menuExpanded}\n ></ix-menu-expand-icon>\n )}\n {this.applicationLayoutContext?.appSwitchConfig &&\n this.breakpoint !== 'sm' &&\n this.suppressResponsive === false && (\n <ix-icon-button\n onClick={() => this.showAppSwitch()}\n icon=\"apps\"\n ghost\n class=\"app-switch\"\n ></ix-icon-button>\n )}\n <div class=\"logo\">\n <slot name=\"logo\"></slot>\n </div>\n <div class=\"name\">{this.name}</div>\n <div class=\"content\">\n {this.breakpoint === 'sm' ? (\n <Fragment>\n <ix-icon-button\n class={{\n ['context-menu']: true,\n ['context-menu-visible']: this.hasSlottedElements,\n }}\n data-context-menu\n icon=\"more-menu\"\n ghost\n ></ix-icon-button>\n <ix-dropdown\n data-overflow-dropdown\n class=\"dropdown\"\n discoverAllSubmenus\n trigger={this.resolveContextMenuButton()}\n >\n <div class=\"dropdown-content\">\n <slot\n onSlotchange={() => this.updateIsSlottedContent()}\n ></slot>\n </div>\n </ix-dropdown>\n </Fragment>\n ) : (\n <slot onSlotchange={() => this.updateIsSlottedContent()}></slot>\n )}\n <slot name=\"ix-application-header-avatar\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-d48a746d.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as s,h as e,H as r,g as o}from"./p-26e9d40e.js";import{c as i}from"./p-e898862b.js";const a=":host{}:host ,:host ::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .steps{display:flex}:host .steps.vertical{display:block}";const c=a;const h=class{constructor(e){t(this,e);this.stepSelected=s(this,"stepSelected",7);this.vertical=false;this.clickable=false;this.selectedIndex=0}getSteps(){return Array.from(this.hostElement.querySelectorAll("ix-workflow-step"))}updateSteps(){let t=this.getSteps();t.forEach(((s,e)=>{s.vertical=this.vertical;s.clickable=this.clickable;s.selected=this.selectedIndex===e;if(t.length===1){s.position="single";return}if(e===0){s.position="first"}else if(e===t.length-1){s.position="last"}else{s.position="undefined"}}))}onStepSelectionChanged(t){const s=t.detail;const e=this.getSteps();const r=e.findIndex((t=>t===s));const o=this.stepSelected.emit(r);if(o.defaultPrevented){return}e.forEach(((t,s)=>{t.selected=s===r}))}componentWillLoad(){this.updateSteps()}componentDidLoad(){this.observer=i((t=>{for(let s of t){if(s.type==="childList"){this.updateSteps()}}}));this.observer.observe(this.hostElement,{childList:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}componentDidRender(){this.updateSteps()}render(){return e(r,{key:"fadad485a71a3366872450c53c089d6f4b79702d"},e("div",{key:"eda4300c1de1abe221e2051e2d38f3509e682fbe",class:{steps:true,vertical:this.vertical}},e("slot",{key:"c79f023401cc03cc5de9117d00de66885987085a"})))}get hostElement(){return o(this)}};h.style=c;export{h as ix_workflow_steps};
2	+ //# sourceMappingURL=p-d48a746d.entry.js.map

package/dist/siemens-ix/p-d48a746d.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["workflowStepsCss","IxWorkflowStepsStyle0","WorkflowSteps","getSteps","Array","from","this","hostElement","querySelectorAll","updateSteps","steps","forEach","element","index","vertical","clickable","selected","selectedIndex","length","position","onStepSelectionChanged","event","eventTarget","detail","clickIndex","findIndex","step","clientEvent","stepSelected","emit","defaultPrevented","componentWillLoad","componentDidLoad","observer","createMutationObserver","mutations","mutation","type","observe","childList","disconnectedCallback","disconnect","componentDidRender","render","h","Host","key","class"],"sources":["src/components/workflow-steps/workflow-steps.scss?tag=ix-workflow-steps&encapsulation=shadow","src/components/workflow-steps/workflow-steps.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\n .steps {\n display: flex;\n\n &.vertical {\n display: block;\n }\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 h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n tag: 'ix-workflow-steps',\n styleUrl: 'workflow-steps.scss',\n shadow: true,\n})\nexport class WorkflowSteps {\n @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n /**\n * Select orientation\n */\n @Prop() vertical: boolean = false;\n\n /**\n * Activate navigation click\n */\n @Prop() clickable: boolean = false;\n\n /**\n * Activate navigation click\n */\n @Prop() selectedIndex: number = 0;\n\n /**\n * On step selected event\n */\n @Event() stepSelected: EventEmitter<number>;\n\n private getSteps() {\n return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n }\n\n updateSteps() {\n let steps = this.getSteps();\n steps.forEach((element, index) => {\n element.vertical = this.vertical;\n element.clickable = this.clickable;\n element.selected = this.selectedIndex === index;\n\n if (steps.length === 1) {\n element.position = 'single';\n return;\n }\n\n if (index === 0) {\n element.position = 'first';\n } else if (index === steps.length - 1) {\n element.position = 'last';\n } else {\n element.position = 'undefined';\n }\n });\n }\n\n private observer: MutationObserver;\n\n @Listen('selectedChanged')\n onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>) {\n const eventTarget = event.detail;\n\n const steps = this.getSteps();\n const clickIndex = steps.findIndex((step) => step === eventTarget);\n const clientEvent = this.stepSelected.emit(clickIndex);\n\n if (clientEvent.defaultPrevented) {\n return;\n }\n\n steps.forEach((step, index) => {\n step.selected = index === clickIndex;\n });\n }\n\n componentWillLoad() {\n this.updateSteps();\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver((mutations) => {\n for (let mutation of mutations) {\n if (mutation.type === 'childList') {\n this.updateSteps();\n }\n }\n });\n\n this.observer.observe(this.hostElement, { childList: true });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n componentDidRender() {\n this.updateSteps();\n }\n\n render() {\n return (\n <Host>\n <div class={{ steps: true, vertical: this.vertical }}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAmB,oqBACzB,MAAAC,EAAeD,E,MCyBFE,EAAa,M,kFAMI,M,eAKC,M,mBAKG,C,CAOxB,QAAAC,GACN,OAAOC,MAAMC,KAAKC,KAAKC,YAAYC,iBAAiB,oB,CAGtD,WAAAC,GACE,IAAIC,EAAQJ,KAAKH,WACjBO,EAAMC,SAAQ,CAACC,EAASC,KACtBD,EAAQE,SAAWR,KAAKQ,SACxBF,EAAQG,UAAYT,KAAKS,UACzBH,EAAQI,SAAWV,KAAKW,gBAAkBJ,EAE1C,GAAIH,EAAMQ,SAAW,EAAG,CACtBN,EAAQO,SAAW,SACnB,M,CAGF,GAAIN,IAAU,EAAG,CACfD,EAAQO,SAAW,O,MACd,GAAIN,IAAUH,EAAMQ,OAAS,EAAG,CACrCN,EAAQO,SAAW,M,KACd,CACLP,EAAQO,SAAW,W,KAQzB,sBAAAC,CAAuBC,GACrB,MAAMC,EAAcD,EAAME,OAE1B,MAAMb,EAAQJ,KAAKH,WACnB,MAAMqB,EAAad,EAAMe,WAAWC,GAASA,IAASJ,IACtD,MAAMK,EAAcrB,KAAKsB,aAAaC,KAAKL,GAE3C,GAAIG,EAAYG,iBAAkB,CAChC,M,CAGFpB,EAAMC,SAAQ,CAACe,EAAMb,KACnBa,EAAKV,SAAWH,IAAUW,CAAU,G,CAIxC,iBAAAO,GACEzB,KAAKG,a,CAGP,gBAAAuB,GACE1B,KAAK2B,SAAWC,GAAwBC,IACtC,IAAK,IAAIC,KAAYD,EAAW,CAC9B,GAAIC,EAASC,OAAS,YAAa,CACjC/B,KAAKG,a,MAKXH,KAAK2B,SAASK,QAAQhC,KAAKC,YAAa,CAAEgC,UAAW,M,CAGvD,oBAAAC,GACE,GAAIlC,KAAK2B,SAAU,CACjB3B,KAAK2B,SAASQ,Y,EAIlB,kBAAAC,GACEpC,KAAKG,a,CAGP,MAAAkC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAErC,MAAO,KAAMI,SAAUR,KAAKQ,WACxC8B,EAAA,QAAAE,IAAA,8C"}