npm - @siemens/ix - Versions diffs - 2.0.1 → 2.0.3 - Mend

@siemens/ix 2.0.1 → 2.0.3

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 (203) hide show

package/components/ix-drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-drawer.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,~~4wCAA4wC~~;;~~MC0BjxC~~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","names":[],"sources":["./src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","./src/components/drawer/drawer.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/shadows';\n@import 'common-variables';\n\n:host {\n @include ix-component;\n\n top: 0;\n right: 0;\n @include box-shadow(3);\n\n visibility: hidden;\n\n display: flex;\n position: absolute;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: center;\n\n max-height: 100vh;\n min-height: $large-space;\n background-color: var(--theme-color-1);\n border-radius: $default-border-radius;\n\n transition: all $medium-time ease-out;\n\n .toggle {\n z-index: 100;\n visibility: visible;\n }\n\n .drawer-container.full-height {\n min-height: 100%;\n }\n\n .header {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-end;\n padding: 0.5rem;\n width: 100%;\n order: 1;\n\n .header-content {\n flex-grow: 1;\n margin-right: $default-space;\n }\n }\n\n .content {\n position: relative;\n flex: 1;\n flex-grow: 1;\n order: 2;\n height: 100%;\n width: 100%;\n overflow-y: auto;\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 Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-drawer',\n styleUrl: 'drawer.scss',\n shadow: true,\n})\nexport class Drawer {\n /\n Show or hide the drawer\n /\n @Prop({ mutable: true }) show = false;\n\n /\n Fired in case of an outside click during drawer showed state\n /\n @Prop() closeOnClickOutside = true;\n\n /\n Render the drawer with maximum height\n /\n @Prop() fullHeight = false;\n\n /\n Min width interpreted as REM\n /\n @Prop() minWidth = 16;\n\n /\n Max width interpreted as REM\n /\n @Prop() maxWidth = 28;\n\n /\n Width interpreted as REM if not set to 'auto'\n /\n @Prop() width: number \| 'auto' = this.minWidth;\n\n /\n Fire event after drawer is open\n /\n @Event() open: EventEmitter;\n\n /\n Fire event after drawer is close\n /\n @Event() drawerClose: EventEmitter;\n\n private static duration = 300;\n private callback = this.clickedOutside.bind(this);\n private divElement?: HTMLElement;\n\n @Watch('show')\n onShowChanged(newValue: boolean) {\n this.show = newValue !== undefined ? newValue : !this.show;\n this.toggleDrawer(this.show);\n }\n\n /\n Toggle or define show state of drawer\n * @param show Overwrite toggle state with boolean\n */\n @Method()\n async toggleDrawer(show?: boolean): Promise<void> {\n this.show = show !== undefined ? show : !this.show;\n\n if (show) {\n this.open.emit();\n this.slideInRight(this.divElement);\n setTimeout(() => {\n window.addEventListener('mousedown', this.callback);\n }, 300);\n } else {\n this.drawerClose.emit();\n this.slideOutRight(this.divElement);\n window.removeEventListener('mousedown', this.callback);\n }\n\n return Promise.resolve();\n }\n\n private onCloseClicked() {\n this.show = false;\n }\n\n private clickedOutside(evt: any) {\n if (!this.closeOnClickOutside) {\n return;\n }\n\n const target = evt.target;\n const closestElement = target.closest('#div-container');\n const btn = target.closest('#drawer-btn');\n\n if (\n evt.target.type !== 'button' &&\n closestElement !== this.divElement &&\n target !== btn\n ) {\n this.show = false;\n }\n }\n\n private slideOutRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: [0, '16rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n el.classList.add('d-none');\n },\n });\n }\n\n private slideInRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: ['16rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n el.classList.remove('d-none');\n },\n });\n }\n\n componentDidLoad() {\n this.onShowChanged(this.show);\n }\n\n render() {\n return (\n <Host\n class={{\n 'drawer-container': true,\n toggle: this.show,\n 'full-height': this.fullHeight,\n 'd-none': true,\n }}\n style={{\n width: this.width === 'auto' ? this.width : `${this.width}rem`,\n 'min-width': `${this.minWidth}rem`,\n 'max-width': `${this.maxWidth}rem`,\n }}\n ref={(el) => (this.divElement = el as HTMLElement)}\n data-testid=\"container\"\n id=\"div-container\"\n >\n <div class=\"header\">\n <div class=\"header-content\">\n <slot name=\"header\"></slot>\n </div>\n <ix-icon-button\n class=\"close-button\"\n icon={'close'}\n size=\"24\"\n ghost\n onClick={() => this.onCloseClicked()}\n data-testid=\"close-button\"\n ></ix-icon-button>\n </div>\n <div class=\"content\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-drawer.js","mappings":"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","names":[],"sources":["./src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","./src/components/drawer/drawer.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/shadows';\n@import 'common-variables';\n\n:host {\n @include ix-component;\n\n top: 0;\n right: 0;\n @include box-shadow(3);\n\n visibility: hidden;\n\n display: flex;\n position: absolute;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: center;\n\n max-height: 100vh;\n min-height: $large-space;\n background-color: var(--theme-color-1);\n border-radius: $default-border-radius;\n\n transition: all $medium-time ease-out;\n\n .toggle {\n z-index: 100;\n visibility: visible;\n }\n\n .drawer-container.full-height {\n min-height: 100%;\n }\n\n .header {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-end;\n padding: 0.5rem;\n width: 100%;\n order: 1;\n\n .header-content {\n flex-grow: 1;\n margin-right: $default-space;\n }\n }\n\n .content {\n position: relative;\n flex: 1;\n flex-grow: 1;\n order: 2;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n }\n}\n\n:host(.toggle) {\n visibility: visible;\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 Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-drawer',\n styleUrl: 'drawer.scss',\n shadow: true,\n})\nexport class Drawer {\n /\n Show or hide the drawer\n /\n @Prop({ mutable: true }) show = false;\n\n /\n Fired in case of an outside click during drawer showed state\n /\n @Prop() closeOnClickOutside = true;\n\n /\n Render the drawer with maximum height\n /\n @Prop() fullHeight = false;\n\n /\n Min width interpreted as REM\n /\n @Prop() minWidth = 16;\n\n /\n Max width interpreted as REM\n /\n @Prop() maxWidth = 28;\n\n /\n Width interpreted as REM if not set to 'auto'\n /\n @Prop() width: number \| 'auto' = this.minWidth;\n\n /\n Fire event after drawer is open\n /\n @Event() open: EventEmitter;\n\n /\n Fire event after drawer is close\n /\n @Event() drawerClose: EventEmitter;\n\n private static duration = 300;\n private callback = this.clickedOutside.bind(this);\n private divElement?: HTMLElement;\n\n @Watch('show')\n onShowChanged(newValue: boolean) {\n this.show = newValue !== undefined ? newValue : !this.show;\n this.toggleDrawer(this.show);\n }\n\n /\n Toggle or define show state of drawer\n * @param show Overwrite toggle state with boolean\n */\n @Method()\n async toggleDrawer(show?: boolean): Promise<void> {\n this.show = show !== undefined ? show : !this.show;\n\n if (show) {\n this.open.emit();\n this.slideInRight(this.divElement);\n setTimeout(() => {\n window.addEventListener('mousedown', this.callback);\n }, 300);\n } else {\n this.drawerClose.emit();\n this.slideOutRight(this.divElement);\n window.removeEventListener('mousedown', this.callback);\n }\n\n return Promise.resolve();\n }\n\n private onCloseClicked() {\n this.show = false;\n }\n\n private clickedOutside(evt: any) {\n if (!this.closeOnClickOutside) {\n return;\n }\n\n const target = evt.target;\n const closestElement = target.closest('#div-container');\n const btn = target.closest('#drawer-btn');\n\n if (\n evt.target.type !== 'button' &&\n closestElement !== this.divElement &&\n target !== btn\n ) {\n this.show = false;\n }\n }\n\n private slideOutRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: [0, '16rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n el.classList.add('d-none');\n },\n });\n }\n\n private slideInRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: ['16rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n el.classList.remove('d-none');\n },\n });\n }\n\n componentDidLoad() {\n this.onShowChanged(this.show);\n }\n\n render() {\n return (\n <Host\n class={{\n 'drawer-container': true,\n toggle: this.show,\n 'full-height': this.fullHeight,\n 'd-none': true,\n }}\n style={{\n width: this.width === 'auto' ? this.width : `${this.width}rem`,\n 'min-width': `${this.minWidth}rem`,\n 'max-width': `${this.maxWidth}rem`,\n }}\n ref={(el) => (this.divElement = el as HTMLElement)}\n data-testid=\"container\"\n id=\"div-container\"\n >\n <div class=\"header\">\n <div class=\"header-content\">\n <slot name=\"header\"></slot>\n </div>\n <ix-icon-button\n class=\"close-button\"\n icon={'close'}\n size=\"24\"\n ghost\n onClick={() => this.onCloseClicked()}\n data-testid=\"close-button\"\n ></ix-icon-button>\n </div>\n <div class=\"content\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/ix-icon-toggle-button.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { B as BaseIconButton } from './base-icon-button.js';
 import { a as a11yBoolean } from './a11y.js';
 import { d as defineCustomElement$2 } from './spinner.js';
-const iconToggleButtonCss = ":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(.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) .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) .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) .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) .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) .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) .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 iconToggleButtonCss = ":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(.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 IconToggleButton = /*@__PURE__*/ proxyCustomElement(class IconToggleButton extends HTMLElement {
   constructor() {

package/components/ix-icon-toggle-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-icon-toggle-button.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,~~y5fAAy5f~~;;~~MCgCx6f~~,gBAAgB;;;;;;mBAKM,WAAW;mBAK1B,KAAK;iBAKP,KAAK;;mBAUH,KAAK;gBAKY,IAAI;oBAKH,KAAK;mBAKd,KAAK;;EASxB,2BAA2B;IACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;GACnE;EAEO,gBAAgB;IACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;GACH;EAGD,eAAe;IACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;MACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;GACF;EAGD,aAAa;IACX,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAGD,eAAe;IACb,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAEO,qBAAqB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACxC;EAEO,gBAAgB;IACtB,OAAO;MACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;KAClC,CAAC;GACH;EAED,MAAM;IACJ,MAAM,eAAe,GAAoB;MACvC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI;MACd,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,IAAI,CAAC,OAAO;MACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MACvC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,IAAI;MACnB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;MAC3C,IAAI,EAAE,QAAQ;MACd,cAAc,EAAE;QACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;OAC1C;MACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;KACF,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAE1D,QACE,EAAC,IAAI,IACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzC,EAAC,cAAc,oBAAK,eAAe,EAAmB,CACjD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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"],"version":3}
1	+ {"file":"ix-icon-toggle-button.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,ungBAAungB;;MCgCtogB,gBAAgB;;;;;;mBAKM,WAAW;mBAK1B,KAAK;iBAKP,KAAK;;mBAUH,KAAK;gBAKY,IAAI;oBAKH,KAAK;mBAKd,KAAK;;EASxB,2BAA2B;IACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;GACnE;EAEO,gBAAgB;IACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;GACH;EAGD,eAAe;IACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;MACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;GACF;EAGD,aAAa;IACX,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAGD,eAAe;IACb,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAEO,qBAAqB;IAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACxC;EAEO,gBAAgB;IACtB,OAAO;MACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;MACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;KAClC,CAAC;GACH;EAED,MAAM;IACJ,MAAM,eAAe,GAAoB;MACvC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,QAAQ,EAAE,IAAI;MACd,QAAQ,EAAE,KAAK;MACf,QAAQ,EAAE,IAAI,CAAC,OAAO;MACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;MACvC,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,QAAQ,EAAE,IAAI,CAAC,IAAI;MACnB,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;MAC3C,IAAI,EAAE,QAAQ;MACd,cAAc,EAAE;QACd,cAAc,EAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;OAC1C;MACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;KACF,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAE1D,QACE,EAAC,IAAI,IACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzC,EAAC,cAAc,oBAAK,eAAe,EAAmB,CACjD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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"],"version":3}

package/components/ix-input-group.js CHANGED Viewed

@@ -30,6 +30,16 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTM
       this.startSlotChanged();
     });
     valid ? this.onValidInput() : this.onInvalidInput();
+    this.observer = new MutationObserver(() => {
+      this.startSlotChanged();
+      this.endSlotChanged();
+    });
+    this.observer.observe(this.hostElement, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true,
+    });
   }
   componentDidRender() {
     this.prepareInputElement();
@@ -47,13 +57,13 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTM
         this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';
       }
       else {
-        this.inputElement.style.paddingRight = 'none';
+        this.inputElement.style.paddingRight = '0.5rem';
       }
       if (this.inputPaddingLeft !== 0) {
         this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';
       }
       else {
-        this.inputElement.style.paddingLeft = 'none';
+        this.inputElement.style.paddingLeft = '0.5rem';
       }
     }
     else {
@@ -68,6 +78,9 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTM
       if (startPadding !== 0) {
         this.inputPaddingLeft = 15 + startPadding;
       }
+      else {
+        this.inputPaddingLeft = 0;
+      }
       if (!this.inputElement) {
         return;
       }
@@ -100,7 +113,7 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTM
     return width;
   }
   render() {
-    return (h(Host, null, h("div", { class: "group group-start" }, h("slot", { name: "input-start", onSlotchange: () => this.startSlotChanged() })), h("slot", null), h("div", { class: "group group-end" }, h("slot", { name: "input-end", onSlotchange: () => this.endSlotChanged() }))));
+    return (h(Host, null, h("div", { class: "group group-start" }, h("slot", { name: "input-start" })), h("slot", null), h("div", { class: "group group-end" }, h("slot", { name: "input-end" }))));
   }
   get hostElement() { return this; }
   static get style() { return inputGroupCss; }

package/components/ix-input-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-input-group.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,49BAA49B;;MCiBr+B,UAAU;;;;;4BAGO,CAAC;6BACA,CAAC;;EAE9B,IAAY,YAAY;IACtB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;GACpE;~~EAED~~,iBAAiB;;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;IAC7C,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE;MAC1C,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE;MAC5C,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE;MAC1C,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB,CAAC,CAAC;IAEH,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,gBAAgB,CAAC,QAAQ,EAAE;MACjD,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB,CAAC,CAAC;IAEH,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;~~GACrD~~;EAED,kBAAkB;IAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAEO,YAAY;IAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAEO,cAAc;IACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAEO,mBAAmB;IACzB,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;MAEvC,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC,EAAE;QAChC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;OACtE;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,~~MAAM~~,CAAC;~~OAC/C~~;MAED,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,EAAE;QAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;OACpE;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,~~MAAM~~,CAAC;~~OAC9C~~;KACF;SAAM;MACL,OAAO,CAAC,IAAI,CACV,uFAAuF,CACxF,CAAC;KACH;GACF;EAEO,gBAAgB;IACtB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACpD,0BAA0B,CAC3B,CAAC;~~IACF~~,UAAU,CAAC;;MACT,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;MAEjD,IAAI,YAAY,KAAK,CAAC,EAAE;QACtB,IAAI,CAAC,gBAAgB,GAAG,EAAE,GAAG,YAAY,CAAC;OAC3C;MAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO;OACR;MAED,IACE,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC;QAC1D,CAAA,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,UAAU,MAAK,KAAK;QAC9C,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,EACjC;QACA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,mBAAmB,GAAG,GAAG,IAAI,CAAC,gBAAgB,IAAI,CAAC;QAC3E,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAC;OAC7B;KACF,CAAC,CAAC;GACJ;EAEO,cAAc;IACpB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACpD,wBAAwB,CACzB,CAAC;IAEF,UAAU,CAAC;MACT,IAAI,CAAC,iBAAiB,GAAG,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;KAC3D,CAAC,CAAC;GACJ;EAEO,gBAAgB,CAAC,WAAoB;IAC3C,IAAI,CAAC,WAAW,EAAE;MAChB,OAAO,CAAC,CAAC;KACV;IAED,MAAM,WAAW,GAAG,kBAAkB,CAAc,WAAW,CAAC,CAAC;IACjE,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;MAC5B,OAAO,CAAC,CAAC;KACV;IAED,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO;MAC1B,KAAK,IAAI,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;KAChD,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;GACd;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,mBAAmB,IAC5B,~~YACE~~,IAAI,EAAC,aAAa,~~EAClB~~,~~YAAY~~,~~EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GACrC,CACJ,~~EACN,eAAa,EACb,WAAK,KAAK,EAAC,iBAAiB,IAC1B,~~YACE~~,IAAI,EAAC,WAAW,~~EAChB~~,~~YAAY~~,~~EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,GACnC,CACJ,~~CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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\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.375rem;\n color: var(--theme-color-soft-text);\n }\n\n .group-end {\n right: 0px;\n height: 2rem;\n margin-right: 0.375rem;\n color: var(--theme-color-soft-text);\n }\n\n ::slotted() {\n display: flex;\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() inputPaddingLeft = 0;\n @State() inputPaddingRight = 0;\n\n private get inputElement() {\n return this.hostElement.querySelector('input') as HTMLInputElement;\n }\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\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 = '~~none~~';\n }\n\n if (this.inputPaddingLeft !== 0) {\n this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n } else {\n this.inputElement.style.paddingLeft = '~~none~~';\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 startSlotChanged() {\n const slot = this.hostElement.shadowRoot.querySelector(\n 'slot[name=\"input-start\"]'\n );\n setTimeout(() => {\n const startPadding = this.getChildrenWidth(slot);\n\n if (startPadding !== 0) {\n this.inputPaddingLeft = 15 + startPadding;\n }\n\n if (!this.inputElement) {\n return;\n }\n\n if (\n (this.inputElement.form?.classList.contains('was-validated') \|\|\n this.inputElement.form?.noValidate === false) &&\n !this.inputElement.validity.valid\n ) {\n this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`;\n this.inputPaddingLeft += 32;\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>\n <div class=\"group group-start\">\n <slot\n name=\"input-start\"~~\n onSlotchange={() => this.startSlotChanged()}\n~~ ></slot>\n </div>\n <slot></slot>\n <div class=\"group group-end\">\n <slot\n name=\"input-end\"~~\n onSlotchange={() => this.endSlotChanged()}\n~~ ></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-input-group.js","mappings":"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","names":[],"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\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.375rem;\n color: var(--theme-color-soft-text);\n }\n\n .group-end {\n right: 0px;\n height: 2rem;\n margin-right: 0.375rem;\n color: var(--theme-color-soft-text);\n }\n\n ::slotted() {\n display: flex;\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() 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.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 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 = 15 + startPadding;\n } else {\n this.inputPaddingLeft = 0;\n }\n\n if (!this.inputElement) {\n return;\n }\n\n if (\n (this.inputElement.form?.classList.contains('was-validated') \|\|\n this.inputElement.form?.noValidate === false) &&\n !this.inputElement.validity.valid\n ) {\n this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`;\n this.inputPaddingLeft += 32;\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>\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"],"version":3}

package/components/ix-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-menu.js","mappings":"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","names":[],"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: 22.75rem;\n z-index: var(--theme-z-index-sticky);\n width: auto;\n\n bottom: 0px;\n\n .tabs {\n height: 100%;\n position: relative;\n overflow-y: auto;\n pointer-events: all;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .tabs-shadow-container {\n overflow: hidden;\n display: block;\n position: relative;\n margin-bottom: 2rem;\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: 0px;\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n }\n\n .tabs--shadow-bottom {\n bottom: 0px;\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(--animate-duration) ease-in-out;\n\n .burger-menu {\n margin: 0.75rem 0 1rem 0.35rem;\n }\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(--animate-duration) 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\n:host(.breakpoint-sm) {\n .menu:not(.expanded) {\n width: 0;\n }\n\n .menu {\n padding-top: 2rem;\n }\n\n .menu .burger-menu {\n display: none;\n }\n\n .menu-overlay {\n left: 0px;\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 { 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 @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 /\n @Prop({ mutable: true, reflect: true }) expand = 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);\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) {\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.breakpoint = mode;\n\n if (this.breakpoint === 'lg') {\n this.setPinned(true);\n this.toggleMenu(true);\n return;\n }\n\n this.setPinned(false);\n this.toggleMenu(false);\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\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 <ix-burger-menu\n onClick={async () => this.toggleMenu()}\n expanded={this.expand}\n ixAriaLabel={this.i18nExpandSidebar}\n pinned={this.showPinned}\n class={{\n 'burger-menu': true,\n }}\n ></ix-burger-menu>\n <div class=\"menu-avatar\">\n <slot name=\"ix-menu-avatar\"></slot>\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-top\">\n <slot name=\"home\"></slot>\n </div>\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 class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\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={'bulb'}\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"],"version":3}
1	+ {"file":"ix-menu.js","mappings":"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","names":[],"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: 22.75rem;\n z-index: var(--theme-z-index-sticky);\n width: auto;\n\n bottom: 0px;\n\n .tabs {\n height: 100%;\n position: relative;\n overflow-y: auto;\n pointer-events: all;\n\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n .tabs-shadow-container {\n overflow: hidden;\n display: block;\n position: relative;\n margin-bottom: 2rem;\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: 0px;\n background: linear-gradient(var(--theme-color-shadow-1), transparent);\n }\n\n .tabs--shadow-bottom {\n bottom: 0px;\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(--animate-duration) ease-in-out;\n\n .burger-menu {\n margin: 0.75rem 0 1rem 0.35rem;\n }\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(--animate-duration) 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\n:host(.breakpoint-sm) {\n .menu:not(.expanded) {\n width: 0;\n }\n\n .menu {\n padding-top: 2rem;\n }\n\n .menu .burger-menu {\n display: none;\n }\n\n .menu-overlay {\n left: 0px;\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 { 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 /\n @Prop({ mutable: true, reflect: true }) expand = 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);\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) {\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.breakpoint = mode;\n\n if (this.breakpoint === 'lg') {\n this.setPinned(true);\n this.toggleMenu(true);\n return;\n }\n\n this.setPinned(false);\n this.toggleMenu(false);\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\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 <ix-burger-menu\n onClick={async () => this.toggleMenu()}\n expanded={this.expand}\n ixAriaLabel={this.i18nExpandSidebar}\n pinned={this.showPinned}\n class={{\n 'burger-menu': true,\n }}\n ></ix-burger-menu>\n <div class=\"menu-avatar\">\n <slot name=\"ix-menu-avatar\"></slot>\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-top\">\n <slot name=\"home\"></slot>\n </div>\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 class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\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={'bulb'}\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"],"version":3}

package/components/ix-modal.js CHANGED Viewed

@@ -67,8 +67,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement {
    * Show the dialog
    */
   async showModal() {
-    var _a;
-    (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.showModal();
+    setTimeout(() => this.dialog.showModal());
   }
   /**
    * Dismiss the dialog

package/components/ix-modal.js.map CHANGED Viewed

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