npm - @siemens/ix - Versions diffs - 2.0.2 → 2.0.4-beta.0 - Mend

@siemens/ix 2.0.2 → 2.0.4-beta.0

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

Files changed (430) hide show

package/dist/cjs/ix-map-navigation.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-map-navigation.entry.cjs.js","mappings":"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","names":["useContextProvider","ApplicationLayoutContext","anime","h","Host"],"sources":["./src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","./src/components/map-navigation/map-navigation.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n $appHeaderHeight: 3.5rem;\n $appHeaderGradientHeight: 4rem;\n $navHeaderHeight: 11.5rem;\n $sidebarWidth: 29.75rem;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n .map-nav {\n display: flex;\n margin-left: 3.25rem;\n position: relative;\n height: 100%;\n flex-grow: 1;\n overflow: hidden;\n }\n\n .map-nav-sidebar {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: $sidebarWidth;\n max-width: $sidebarWidth;\n min-width: $sidebarWidth;\n height: 100%;\n left: 4rem;\n background-color: var(--theme-map-navigation--background);\n border-inline-end: 0.125rem solid\n var(--theme-map-navigation-separator--background);\n z-index: 99;\n }\n\n .map-nav-sidebar-content {\n align-items: center;\n position: relative;\n overflow: auto;\n height: 100%;\n width: 100%;\n\n .map-nav-sidebar-static-content {\n @include text-h2;\n display: flex;\n justify-content: space-between;\n margin-top: 0.437rem;\n margin-bottom: 0.812rem;\n margin-left: $default-space;\n margin-right: $default-space;\n }\n }\n\n .map-nav-header {\n display: flex;\n position: relative;\n align-items: center;\n height: $appHeaderHeight;\n min-height: $appHeaderHeight;\n width: 100%;\n\n .map-nav-header-brand {\n background-color: var(--theme-map-navigation-background);\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n padding: 0 $default-space;\n\n --theme-app-header--color: var(--theme-map-navigation-header--color);\n --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n button {\n margin-left: $default-space;\n }\n }\n }\n\n .map-nav-header-content {\n display: flex;\n height: $appHeaderHeight;\n align-items: center;\n overflow: hidden;\n padding: 0 $default-space;\n\n &.empty {\n height: 0;\n }\n }\n\n .map-nav-title {\n @include text-h2();\n\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n .content {\n display: block;\n flex-grow: 1;\n position: relative;\n height: 100%;\n overflow: hidden;\n z-index: calc(var(--theme-z-index-sticky) - 1);\n }\n\n ::slotted(ix-menu) {\n position: absolute;\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 Method,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\n\n@Component({\n tag: 'ix-map-navigation',\n styleUrl: 'map-navigation.scss',\n shadow: true,\n})\nexport class MapNavigation {\n private static readonly defaultTime = 150;\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName: string;\n\n /\n Navigation title\n /\n @Prop() navigationTitle: string;\n\n /\n Hide the sidebar context menu button when set to true\n /\n @Prop() hideContextMenu = true;\n\n /\n Navigation toggled\n /\n @Event() navigationToggled: EventEmitter<boolean>;\n\n /\n Context menu clicked\n /\n @Event() contextMenuClick: EventEmitter<void>;\n\n @State() isSidebarOpen = true;\n @State() hasContentHeader = false;\n\n get menu() {\n return this.hostElement.querySelector('ix-menu');\n }\n\n get menuOverlay() {\n return this.hostElement.querySelector('ix-menu-overlay');\n }\n\n get mapNavMenu() {\n return this.hostElement.shadowRoot.querySelector('.map-nav-menu');\n }\n\n get sidebar() {\n return this.hostElement.shadowRoot.querySelector('.map-nav-sidebar');\n }\n\n get overlay() {\n return this.hostElement.shadowRoot.querySelector('#overlay');\n }\n\n componentDidRender() {\n this.appendMenu();\n this.closeOverlay();\n }\n\n componentWillLoad() {\n useContextProvider(this.hostElement, ApplicationLayoutContext, {\n hideHeader: false,\n host: 'map-navigation',\n });\n }\n\n private appendMenu() {\n this.menu.addEventListener(\n 'mapExpandChange',\n (event: CustomEvent<boolean>) => {\n const state = !event.detail;\n this.toggleSidebar(state);\n }\n );\n this.menu.enableMapExpand = true;\n }\n\n /\n Change the visibility of the sidebar\n \n @param show new visibility state\n * @since 1.6.0\n /\n @Method()\n async toggleSidebar(show?: boolean) {\n if (show !== undefined) {\n this.isSidebarOpen = show;\n } else {\n this.isSidebarOpen = !this.isSidebarOpen;\n }\n\n if (this.isSidebarOpen) {\n this.openSidebar();\n } else {\n this.closeSidebar();\n }\n\n this.navigationToggled.emit(this.isSidebarOpen);\n this.menu.toggleMapExpand(this.isSidebarOpen);\n }\n\n private closeSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: [0, '-29.75rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.sidebar.classList.add('d-none');\n },\n });\n }\n\n private openSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: ['-29.75rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.sidebar.classList.remove('d-none');\n },\n });\n }\n\n /\n Open a overlay inside content area\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n \n @param name\n * @param component\n * @param icon\n * @param color\n /\n @Method()\n async openOverlay(\n name: string,\n component: HTMLElement,\n icon?: string,\n color?: string\n ) {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.overlay.classList.remove('d-none');\n },\n });\n\n const overlayInstance = document.createElement('ix-map-navigation-overlay');\n overlayInstance.setAttribute('color', color);\n overlayInstance.setAttribute('name', name);\n overlayInstance.setAttribute('icon', icon);\n overlayInstance.setAttribute('slot', 'overlay');\n overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n overlayInstance.appendChild(component);\n this.hostElement.appendChild(overlayInstance);\n }\n\n /\n Close current shown overlay\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n */\n @Method()\n async closeOverlay() {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n if (!this.overlay) {\n return;\n }\n this.overlay.firstChild?.remove();\n this.overlay.classList.add('d-none');\n },\n });\n }\n\n private checkHasContentHeader(e: Event) {\n const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n flatten: true,\n });\n\n this.hasContentHeader = nodes?.length !== 0;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"menu\"></slot>\n <div class=\"map-nav\">\n <div class=\"map-nav-sidebar\">\n <div class=\"map-nav-header\">\n <ix-application-header\n name={this.applicationName}\n class=\"map-nav-header-brand\"\n >\n <slot slot=\"logo\" name=\"logo\"></slot>\n </ix-application-header>\n </div>\n <div class=\"map-nav-sidebar-content\">\n <div class=\"map-nav-sidebar-static-content\">\n <div class=\"map-nav-title\">{this.navigationTitle}</div>\n {this.hideContextMenu ? (\n ''\n ) : (\n <ix-icon-button\n icon={'context-menu'}\n ghost\n size=\"24\"\n variant=\"secondary\"\n onClick={(_) => this.contextMenuClick.emit()}\n ></ix-icon-button>\n )}\n </div>\n <div class=\"map-nav-sidebar-user-content\">\n <slot name=\"sidebar-content\"></slot>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <div\n class={{\n 'map-nav-header-content': true,\n 'bg-2': true,\n empty: !this.hasContentHeader,\n }}\n >\n <slot\n name=\"content-header\"\n onSlotchange={(e) => this.checkHasContentHeader(e)}\n ></slot>\n </div>\n <main>\n <slot></slot>\n <slot name=\"overlay\"></slot>\n </main>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-map-navigation.entry.cjs.js","mappings":"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","names":["useContextProvider","ApplicationLayoutContext","anime","h","Host"],"sources":["./src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","./src/components/map-navigation/map-navigation.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n $appHeaderHeight: 3.5rem;\n $appHeaderGradientHeight: 4rem;\n $navHeaderHeight: 11.5rem;\n $sidebarWidth: 29.75rem;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n .map-nav {\n display: flex;\n margin-left: 3.25rem;\n position: relative;\n height: 100%;\n flex-grow: 1;\n overflow: hidden;\n }\n\n .map-nav-sidebar {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: $sidebarWidth;\n max-width: $sidebarWidth;\n min-width: $sidebarWidth;\n height: 100%;\n left: 4rem;\n background-color: var(--theme-map-navigation--background);\n border-inline-end: 0.125rem solid\n var(--theme-map-navigation-separator--background);\n z-index: 99;\n }\n\n .map-nav-sidebar-content {\n align-items: center;\n position: relative;\n overflow: auto;\n height: 100%;\n width: 100%;\n\n .map-nav-sidebar-static-content {\n @include text-h2;\n display: flex;\n justify-content: space-between;\n margin-top: 0.437rem;\n margin-bottom: 0.812rem;\n margin-left: $default-space;\n margin-right: $default-space;\n }\n }\n\n .map-nav-header {\n display: flex;\n position: relative;\n align-items: center;\n height: $appHeaderHeight;\n min-height: $appHeaderHeight;\n width: 100%;\n\n .map-nav-header-brand {\n background-color: var(--theme-map-navigation-background);\n display: flex;\n align-items: center;\n height: 100%;\n width: 100%;\n padding: 0 $default-space;\n\n --theme-app-header--color: var(--theme-map-navigation-header--color);\n --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n button {\n margin-left: $default-space;\n }\n }\n }\n\n .map-nav-header-content {\n display: flex;\n height: $appHeaderHeight;\n align-items: center;\n overflow: hidden;\n padding: 0 $default-space;\n\n &.empty {\n height: 0;\n }\n }\n\n .map-nav-title {\n @include text-h2();\n\n display: flex;\n align-items: center;\n flex-grow: 1;\n }\n\n .content {\n display: block;\n flex-grow: 1;\n position: relative;\n height: 100%;\n overflow: hidden;\n z-index: calc(var(--theme-z-index-sticky) - 1);\n }\n\n ::slotted(ix-menu) {\n position: absolute;\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 Method,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\n\n@Component({\n tag: 'ix-map-navigation',\n styleUrl: 'map-navigation.scss',\n shadow: true,\n})\nexport class MapNavigation {\n private static readonly defaultTime = 150;\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName: string;\n\n /\n Navigation title\n /\n @Prop() navigationTitle: string;\n\n /\n Hide the sidebar context menu button when set to true\n /\n @Prop() hideContextMenu = true;\n\n /\n Navigation toggled\n /\n @Event() navigationToggled: EventEmitter<boolean>;\n\n /\n Context menu clicked\n /\n @Event() contextMenuClick: EventEmitter<void>;\n\n @State() isSidebarOpen = true;\n @State() hasContentHeader = false;\n\n get menu() {\n return this.hostElement.querySelector('ix-menu');\n }\n\n get menuOverlay() {\n return this.hostElement.querySelector('ix-menu-overlay');\n }\n\n get mapNavMenu() {\n return this.hostElement.shadowRoot.querySelector('.map-nav-menu');\n }\n\n get sidebar() {\n return this.hostElement.shadowRoot.querySelector('.map-nav-sidebar');\n }\n\n get overlay() {\n return this.hostElement.shadowRoot.querySelector('#overlay');\n }\n\n componentDidRender() {\n this.appendMenu();\n this.closeOverlay();\n }\n\n componentWillLoad() {\n useContextProvider(this.hostElement, ApplicationLayoutContext, {\n hideHeader: false,\n host: 'map-navigation',\n });\n }\n\n private appendMenu() {\n this.menu.addEventListener(\n 'mapExpandChange',\n (event: CustomEvent<boolean>) => {\n const state = !event.detail;\n this.toggleSidebar(state);\n }\n );\n this.menu.enableMapExpand = true;\n }\n\n /\n Change the visibility of the sidebar\n \n @param show new visibility state\n * @since 1.6.0\n /\n @Method()\n async toggleSidebar(show?: boolean) {\n if (show !== undefined) {\n this.isSidebarOpen = show;\n } else {\n this.isSidebarOpen = !this.isSidebarOpen;\n }\n\n if (this.isSidebarOpen) {\n this.openSidebar();\n } else {\n this.closeSidebar();\n }\n\n this.navigationToggled.emit(this.isSidebarOpen);\n this.menu.toggleMapExpand(this.isSidebarOpen);\n }\n\n private closeSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: [0, '-29.75rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.sidebar.classList.add('d-none');\n },\n });\n }\n\n private openSidebar() {\n anime({\n targets: this.sidebar,\n duration: MapNavigation.defaultTime,\n marginLeft: ['-29.75rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.sidebar.classList.remove('d-none');\n },\n });\n }\n\n /\n Open a overlay inside content area\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n \n @param name\n * @param component\n * @param icon\n * @param color\n /\n @Method()\n async openOverlay(\n name: string,\n component: HTMLElement,\n icon?: string,\n color?: string\n ) {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.overlay.classList.remove('d-none');\n },\n });\n\n const overlayInstance = document.createElement('ix-map-navigation-overlay');\n overlayInstance.setAttribute('color', color);\n overlayInstance.setAttribute('name', name);\n overlayInstance.setAttribute('icon', icon);\n overlayInstance.setAttribute('slot', 'overlay');\n overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n overlayInstance.appendChild(component);\n this.hostElement.appendChild(overlayInstance);\n }\n\n /\n Close current shown overlay\n * @deprecated Will be removed in 2.0.0. Use slot based approach\n */\n @Method()\n async closeOverlay() {\n anime({\n targets: this.overlay,\n duration: MapNavigation.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n if (!this.overlay) {\n return;\n }\n this.overlay.firstChild?.remove();\n this.overlay.classList.add('d-none');\n },\n });\n }\n\n private checkHasContentHeader(e: Event) {\n const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n flatten: true,\n });\n\n this.hasContentHeader = nodes?.length !== 0;\n }\n\n render() {\n return (\n <Host>\n <slot name=\"menu\"></slot>\n <div class=\"map-nav\">\n <div class=\"map-nav-sidebar\">\n <div class=\"map-nav-header\">\n <ix-application-header\n name={this.applicationName}\n class=\"map-nav-header-brand\"\n >\n <slot slot=\"logo\" name=\"logo\"></slot>\n </ix-application-header>\n </div>\n <div class=\"map-nav-sidebar-content\">\n <div class=\"map-nav-sidebar-static-content\">\n <div class=\"map-nav-title\">{this.navigationTitle}</div>\n {this.hideContextMenu ? (\n ''\n ) : (\n <ix-icon-button\n icon={'context-menu'}\n ghost\n size=\"24\"\n variant=\"secondary\"\n onClick={(_) => this.contextMenuClick.emit()}\n ></ix-icon-button>\n )}\n </div>\n <div class=\"map-nav-sidebar-user-content\">\n <slot name=\"sidebar-content\"></slot>\n </div>\n </div>\n </div>\n <div class=\"content\">\n <div\n class={{\n 'map-nav-header-content': true,\n 'bg-2': true,\n empty: !this.hasContentHeader,\n }}\n >\n <slot\n name=\"content-header\"\n onSlotchange={(e) => this.checkHasContentHeader(e)}\n ></slot>\n </div>\n <main>\n <slot></slot>\n <slot name=\"overlay\"></slot>\n </main>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-menu.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-be499a74.js');
 const anime_es = require('./anime.es-8822f296.js');
 const context = require('./context-0fdf2fa1.js');
-const menuService = require('./menu-service-000df68d.js');
+const menuService = require('./menu-service-777bf5ce.js');
 const rwd_util = require('./rwd.util-9480f0b5.js');
 const themeSwitcher = require('./theme-switcher-d0386ac9.js');
 require('./typed-event-f0f051da.js');
@@ -26,7 +26,7 @@ class ApplicationSidebarToggleEvent extends Event {
   }
 }
-const menuCss = "/*!\n* animate.css - https://animate.style/\n* Version - 4.1.1\n* Licensed under the MIT license - http://opensource.org/licenses/MIT\n*\n* Copyright (c) 2020 Animate.css\n*/:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{animation-duration:1s;animation-duration:var(--animate-duration);animation-fill-mode:both}.animate__animated.animate__infinite{animation-iteration-count:infinite}.animate__animated.animate__repeat-1{animation-iteration-count:1;animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{animation-iteration-count:2;animation-iteration-count:calc(var(--animate-repeat) * 2)}.animate__animated.animate__repeat-3{animation-iteration-count:3;animation-iteration-count:calc(var(--animate-repeat) * 3)}.animate__animated.animate__delay-1s{animation-delay:1s;animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{animation-delay:2s;animation-delay:calc(var(--animate-delay) * 2)}.animate__animated.animate__delay-3s{animation-delay:3s;animation-delay:calc(var(--animate-delay) * 3)}.animate__animated.animate__delay-4s{animation-delay:4s;animation-delay:calc(var(--animate-delay) * 4)}.animate__animated.animate__delay-5s{animation-delay:5s;animation-delay:calc(var(--animate-delay) * 5)}.animate__animated.animate__faster{animation-duration:0.5s;animation-duration:calc(var(--animate-duration) / 2)}.animate__animated.animate__fast{animation-duration:0.8s;animation-duration:calc(var(--animate-duration) * 0.8)}.animate__animated.animate__slow{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2)}.animate__animated.animate__slower{animation-duration:3s;animation-duration:calc(var(--animate-duration) * 3)}@media (prefers-reduced-motion: reduce), print{.animate__animated{animation-duration:1ms !important;transition-duration:1ms !important;animation-iteration-count:1 !important}.animate__animated[class*=Out]{opacity:0}}@keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}.animate__bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scaleX(1)}}.animate__pulse{animation-name:pulse;animation-timing-function:ease-in-out}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}to{transform:scaleX(1)}}.animate__rubberBand{animation-name:rubberBand}@keyframes shakeX{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{transform:translate3d(10px, 0, 0)}}.animate__shakeX{animation-name:shakeX}@keyframes shakeY{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(0, -10px, 0)}20%,40%,60%,80%{transform:translate3d(0, 10px, 0)}}.animate__shakeY{animation-name:shakeY}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.animate__headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.animate__swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)}to{transform:scaleX(1)}}.animate__tada{animation-name:tada}@keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%, 0, 0) rotate(-5deg)}30%{transform:translate3d(20%, 0, 0) rotate(3deg)}45%{transform:translate3d(-15%, 0, 0) rotate(-3deg)}60%{transform:translate3d(10%, 0, 0) rotate(2deg)}75%{transform:translate3d(-5%, 0, 0) rotate(-1deg)}to{transform:translateZ(0)}}.animate__wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}.animate__jello{animation-name:jello;transform-origin:center}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.animate__heartBeat{animation-name:heartBeat;animation-duration:1.3s;animation-duration:calc(var(--animate-duration) * 1.3);animation-timing-function:ease-in-out}@keyframes backInDown{0%{transform:translateY(-1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInDown{animation-name:backInDown}@keyframes backInLeft{0%{transform:translateX(-2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInLeft{animation-name:backInLeft}@keyframes backInRight{0%{transform:translateX(2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInRight{animation-name:backInRight}@keyframes backInUp{0%{transform:translateY(1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInUp{animation-name:backInUp}@keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(700px) scale(0.7);opacity:0.7}}.animate__backOutDown{animation-name:backOutDown}@keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(-2000px) scale(0.7);opacity:0.7}}.animate__backOutLeft{animation-name:backOutLeft}@keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(2000px) scale(0.7);opacity:0.7}}.animate__backOutRight{animation-name:backOutRight}@keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(-700px) scale(0.7);opacity:0.7}}.animate__backOutUp{animation-name:backOutUp}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scaleX(1)}}.animate__bounceIn{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, -3000px, 0) scaleY(3)}60%{opacity:1;transform:translate3d(0, 25px, 0) scaleY(0.9)}75%{transform:translate3d(0, -10px, 0) scaleY(0.95)}90%{transform:translate3d(0, 5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(-3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(25px, 0, 0) scaleX(1)}75%{transform:translate3d(-10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(-25px, 0, 0) scaleX(1)}75%{transform:translate3d(10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(-5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, 3000px, 0) scaleY(5)}60%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}75%{transform:translate3d(0, 10px, 0) scaleY(0.95)}90%{transform:translate3d(0, -5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%,55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}to{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}.animate__bounceOut{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0, 10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, 2000px, 0) scaleY(3)}}.animate__bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(-2000px, 0, 0) scaleX(2)}}.animate__bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(2000px, 0, 0) scaleX(2)}}.animate__bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0, -10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, 20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, -2000px, 0) scaleY(3)}}.animate__bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0, -2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0, 2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeInTopLeft{0%{opacity:0;transform:translate3d(-100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopLeft{animation-name:fadeInTopLeft}@keyframes fadeInTopRight{0%{opacity:0;transform:translate3d(100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopRight{animation-name:fadeInTopRight}@keyframes fadeInBottomLeft{0%{opacity:0;transform:translate3d(-100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomLeft{animation-name:fadeInBottomLeft}@keyframes fadeInBottomRight{0%{opacity:0;transform:translate3d(100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomRight{animation-name:fadeInBottomRight}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0, 100%, 0)}}.animate__fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, 2000px, 0)}}.animate__fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%, 0, 0)}}.animate__fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px, 0, 0)}}.animate__fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0)}}.animate__fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px, 0, 0)}}.animate__fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0, -100%, 0)}}.animate__fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, -2000px, 0)}}.animate__fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes fadeOutTopLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, -100%, 0)}}.animate__fadeOutTopLeft{animation-name:fadeOutTopLeft}@keyframes fadeOutTopRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, -100%, 0)}}.animate__fadeOutTopRight{animation-name:fadeOutTopRight}@keyframes fadeOutBottomRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, 100%, 0)}}.animate__fadeOutBottomRight{animation-name:fadeOutBottomRight}@keyframes fadeOutBottomLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, 100%, 0)}}.animate__fadeOutBottomLeft{animation-name:fadeOutBottomLeft}@keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}to{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}}.animate__animated.animate__flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.animate__flipInX{-webkit-backface-visibility:visible !important;backface-visibility:visible !important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.animate__flipInY{-webkit-backface-visibility:visible !important;backface-visibility:visible !important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:flipOutX;-webkit-backface-visibility:visible !important;backface-visibility:visible !important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);-webkit-backface-visibility:visible !important;backface-visibility:visible !important;animation-name:flipOutY}@keyframes lightSpeedInRight{0%{transform:translate3d(100%, 0, 0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInRight{animation-name:lightSpeedInRight;animation-timing-function:ease-out}@keyframes lightSpeedInLeft{0%{transform:translate3d(-100%, 0, 0) skewX(30deg);opacity:0}60%{transform:skewX(-20deg);opacity:1}80%{transform:skewX(5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInLeft{animation-name:lightSpeedInLeft;animation-timing-function:ease-out}@keyframes lightSpeedOutRight{0%{opacity:1}to{transform:translate3d(100%, 0, 0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{animation-name:lightSpeedOutRight;animation-timing-function:ease-in}@keyframes lightSpeedOutLeft{0%{opacity:1}to{transform:translate3d(-100%, 0, 0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{animation-name:lightSpeedOutLeft;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform:rotate(-200deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateIn{animation-name:rotateIn;transform-origin:center}@keyframes rotateInDownLeft{0%{transform:rotate(-45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{animation-name:rotateInDownLeft;transform-origin:left bottom}@keyframes rotateInDownRight{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{animation-name:rotateInDownRight;transform-origin:right bottom}@keyframes rotateInUpLeft{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{animation-name:rotateInUpLeft;transform-origin:left bottom}@keyframes rotateInUpRight{0%{transform:rotate(-90deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{animation-name:rotateInUpRight;transform-origin:right bottom}@keyframes rotateOut{0%{opacity:1}to{transform:rotate(200deg);opacity:0}}.animate__rotateOut{animation-name:rotateOut;transform-origin:center}@keyframes rotateOutDownLeft{0%{opacity:1}to{transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{animation-name:rotateOutDownLeft;transform-origin:left bottom}@keyframes rotateOutDownRight{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{animation-name:rotateOutDownRight;transform-origin:right bottom}@keyframes rotateOutUpLeft{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{animation-name:rotateOutUpLeft;transform-origin:left bottom}@keyframes rotateOutUpRight{0%{opacity:1}to{transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{animation-name:rotateOutUpRight;transform-origin:right bottom}@keyframes hinge{0%{animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0, 700px, 0);opacity:0}}.animate__hinge{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2);animation-name:hinge;transform-origin:top left}@keyframes jackInTheBox{0%{opacity:0;transform:scale(0.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.animate__jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%, 0, 0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}.animate__rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0) rotate(120deg)}}.animate__rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}.animate__zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}to{opacity:0}}.animate__zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutDown{animation-name:zoomOutDown;transform-origin:center bottom}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px, 0, 0)}}.animate__zoomOutLeft{animation-name:zoomOutLeft;transform-origin:left center}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(2000px, 0, 0)}}.animate__zoomOutRight{animation-name:zoomOutRight;transform-origin:right center}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutUp{animation-name:zoomOutUp;transform-origin:center bottom}@keyframes slideInDown{0%{transform:translate3d(0, -100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0, 100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, 100%, 0)}}.animate__slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%, 0, 0)}}.animate__slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%, 0, 0)}}.animate__slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, -100%, 0)}}.animate__slideOutUp{animation-name:slideOutUp}:host{display:flex;flex-direction:row;position:absolute;height:100%;min-height:22.75rem;z-index:var(--theme-z-index-sticky);width:auto;bottom:0px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tabs{height:100%;position:relative;overflow-y:auto;pointer-events:all;-ms-overflow-style:none;scrollbar-width:none}:host .tabs::-webkit-scrollbar{display:none}:host .tabs-shadow-container{overflow:hidden;display:block;position:relative;margin-bottom:2rem}:host .tabs--shadow{opacity:0;position:absolute;width:100%;height:0.625rem;background:linear-gradient(var(--theme-color-shadow-1), transparent);pointer-events:none;z-index:var(--theme-z-index-sticky);transition:opacity var(--theme-default-time)}:host .tabs--shadow-top{top:0px;background:linear-gradient(var(--theme-color-shadow-1), transparent)}:host .tabs--shadow-bottom{bottom:0px;background:linear-gradient(transparent, var(--theme-color-shadow-1))}:host .tabs--shadow--show{opacity:1}:host .menu{display:flex;flex-direction:column;position:relative;width:3.25rem;height:100%;-webkit-padding-after:1rem;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--animate-duration) ease-in-out}:host .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}:host .menu .burger-menu{margin:0.75rem 0 1rem 0.35rem}:host .menu-overlay{display:none;position:absolute;width:calc(100vw - 3.25rem);height:100%;left:3.25rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:left var(--animate-duration) ease-in-out}:host .menu-overlay.visible{display:block}:host .menu.expanded{width:16rem}:host .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}:host .menu-overlay-container{display:contents}:host .menu-avatar{max-height:3rem}:host .avatar{margin-bottom:2rem}:host #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}:host #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}:host #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}:host .bottom-tab-divider{margin-top:auto}:host(.breakpoint-sm) .menu:not(.expanded){width:0}:host(.breakpoint-sm) .menu{padding-top:2rem}:host(.breakpoint-sm) .menu .burger-menu{display:none}:host(.breakpoint-sm) .menu-overlay{left:0px;width:100vw}:host(.breakpoint-lg){position:relative}:host(.breakpoint-lg) .menu.expanded{box-shadow:none}:host ::slotted(a[href]){all:unset}";
+const menuCss = "/*!\n* animate.css - https://animate.style/\n* Version - 4.1.1\n* Licensed under the MIT license - http://opensource.org/licenses/MIT\n*\n* Copyright (c) 2020 Animate.css\n*/:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{animation-duration:1s;animation-duration:var(--animate-duration);animation-fill-mode:both}.animate__animated.animate__infinite{animation-iteration-count:infinite}.animate__animated.animate__repeat-1{animation-iteration-count:1;animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{animation-iteration-count:2;animation-iteration-count:calc(var(--animate-repeat) * 2)}.animate__animated.animate__repeat-3{animation-iteration-count:3;animation-iteration-count:calc(var(--animate-repeat) * 3)}.animate__animated.animate__delay-1s{animation-delay:1s;animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{animation-delay:2s;animation-delay:calc(var(--animate-delay) * 2)}.animate__animated.animate__delay-3s{animation-delay:3s;animation-delay:calc(var(--animate-delay) * 3)}.animate__animated.animate__delay-4s{animation-delay:4s;animation-delay:calc(var(--animate-delay) * 4)}.animate__animated.animate__delay-5s{animation-delay:5s;animation-delay:calc(var(--animate-delay) * 5)}.animate__animated.animate__faster{animation-duration:0.5s;animation-duration:calc(var(--animate-duration) / 2)}.animate__animated.animate__fast{animation-duration:0.8s;animation-duration:calc(var(--animate-duration) * 0.8)}.animate__animated.animate__slow{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2)}.animate__animated.animate__slower{animation-duration:3s;animation-duration:calc(var(--animate-duration) * 3)}@media (prefers-reduced-motion: reduce), print{.animate__animated{animation-duration:1ms !important;transition-duration:1ms !important;animation-iteration-count:1 !important}.animate__animated[class*=Out]{opacity:0}}@keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}.animate__bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scaleX(1)}}.animate__pulse{animation-name:pulse;animation-timing-function:ease-in-out}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}to{transform:scaleX(1)}}.animate__rubberBand{animation-name:rubberBand}@keyframes shakeX{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{transform:translate3d(10px, 0, 0)}}.animate__shakeX{animation-name:shakeX}@keyframes shakeY{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(0, -10px, 0)}20%,40%,60%,80%{transform:translate3d(0, 10px, 0)}}.animate__shakeY{animation-name:shakeY}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.animate__headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.animate__swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)}to{transform:scaleX(1)}}.animate__tada{animation-name:tada}@keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%, 0, 0) rotate(-5deg)}30%{transform:translate3d(20%, 0, 0) rotate(3deg)}45%{transform:translate3d(-15%, 0, 0) rotate(-3deg)}60%{transform:translate3d(10%, 0, 0) rotate(2deg)}75%{transform:translate3d(-5%, 0, 0) rotate(-1deg)}to{transform:translateZ(0)}}.animate__wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}.animate__jello{animation-name:jello;transform-origin:center}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.animate__heartBeat{animation-name:heartBeat;animation-duration:1.3s;animation-duration:calc(var(--animate-duration) * 1.3);animation-timing-function:ease-in-out}@keyframes backInDown{0%{transform:translateY(-1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInDown{animation-name:backInDown}@keyframes backInLeft{0%{transform:translateX(-2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInLeft{animation-name:backInLeft}@keyframes backInRight{0%{transform:translateX(2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInRight{animation-name:backInRight}@keyframes backInUp{0%{transform:translateY(1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInUp{animation-name:backInUp}@keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(700px) scale(0.7);opacity:0.7}}.animate__backOutDown{animation-name:backOutDown}@keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(-2000px) scale(0.7);opacity:0.7}}.animate__backOutLeft{animation-name:backOutLeft}@keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(2000px) scale(0.7);opacity:0.7}}.animate__backOutRight{animation-name:backOutRight}@keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(-700px) scale(0.7);opacity:0.7}}.animate__backOutUp{animation-name:backOutUp}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scaleX(1)}}.animate__bounceIn{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, -3000px, 0) scaleY(3)}60%{opacity:1;transform:translate3d(0, 25px, 0) scaleY(0.9)}75%{transform:translate3d(0, -10px, 0) scaleY(0.95)}90%{transform:translate3d(0, 5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(-3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(25px, 0, 0) scaleX(1)}75%{transform:translate3d(-10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(-25px, 0, 0) scaleX(1)}75%{transform:translate3d(10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(-5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, 3000px, 0) scaleY(5)}60%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}75%{transform:translate3d(0, 10px, 0) scaleY(0.95)}90%{transform:translate3d(0, -5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%,55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}to{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}.animate__bounceOut{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0, 10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, 2000px, 0) scaleY(3)}}.animate__bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(-2000px, 0, 0) scaleX(2)}}.animate__bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(2000px, 0, 0) scaleX(2)}}.animate__bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0, -10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, 20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, -2000px, 0) scaleY(3)}}.animate__bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0, -2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0, 2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeInTopLeft{0%{opacity:0;transform:translate3d(-100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopLeft{animation-name:fadeInTopLeft}@keyframes fadeInTopRight{0%{opacity:0;transform:translate3d(100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopRight{animation-name:fadeInTopRight}@keyframes fadeInBottomLeft{0%{opacity:0;transform:translate3d(-100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomLeft{animation-name:fadeInBottomLeft}@keyframes fadeInBottomRight{0%{opacity:0;transform:translate3d(100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomRight{animation-name:fadeInBottomRight}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0, 100%, 0)}}.animate__fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, 2000px, 0)}}.animate__fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%, 0, 0)}}.animate__fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px, 0, 0)}}.animate__fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0)}}.animate__fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px, 0, 0)}}.animate__fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0, -100%, 0)}}.animate__fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, -2000px, 0)}}.animate__fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes fadeOutTopLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, -100%, 0)}}.animate__fadeOutTopLeft{animation-name:fadeOutTopLeft}@keyframes fadeOutTopRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, -100%, 0)}}.animate__fadeOutTopRight{animation-name:fadeOutTopRight}@keyframes fadeOutBottomRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, 100%, 0)}}.animate__fadeOutBottomRight{animation-name:fadeOutBottomRight}@keyframes fadeOutBottomLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, 100%, 0)}}.animate__fadeOutBottomLeft{animation-name:fadeOutBottomLeft}@keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}to{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}}.animate__animated.animate__flip{backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.animate__flipInX{backface-visibility:visible !important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.animate__flipInY{backface-visibility:visible !important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:flipOutX;backface-visibility:visible !important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);backface-visibility:visible !important;animation-name:flipOutY}@keyframes lightSpeedInRight{0%{transform:translate3d(100%, 0, 0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInRight{animation-name:lightSpeedInRight;animation-timing-function:ease-out}@keyframes lightSpeedInLeft{0%{transform:translate3d(-100%, 0, 0) skewX(30deg);opacity:0}60%{transform:skewX(-20deg);opacity:1}80%{transform:skewX(5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInLeft{animation-name:lightSpeedInLeft;animation-timing-function:ease-out}@keyframes lightSpeedOutRight{0%{opacity:1}to{transform:translate3d(100%, 0, 0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{animation-name:lightSpeedOutRight;animation-timing-function:ease-in}@keyframes lightSpeedOutLeft{0%{opacity:1}to{transform:translate3d(-100%, 0, 0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{animation-name:lightSpeedOutLeft;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform:rotate(-200deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateIn{animation-name:rotateIn;transform-origin:center}@keyframes rotateInDownLeft{0%{transform:rotate(-45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{animation-name:rotateInDownLeft;transform-origin:left bottom}@keyframes rotateInDownRight{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{animation-name:rotateInDownRight;transform-origin:right bottom}@keyframes rotateInUpLeft{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{animation-name:rotateInUpLeft;transform-origin:left bottom}@keyframes rotateInUpRight{0%{transform:rotate(-90deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{animation-name:rotateInUpRight;transform-origin:right bottom}@keyframes rotateOut{0%{opacity:1}to{transform:rotate(200deg);opacity:0}}.animate__rotateOut{animation-name:rotateOut;transform-origin:center}@keyframes rotateOutDownLeft{0%{opacity:1}to{transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{animation-name:rotateOutDownLeft;transform-origin:left bottom}@keyframes rotateOutDownRight{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{animation-name:rotateOutDownRight;transform-origin:right bottom}@keyframes rotateOutUpLeft{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{animation-name:rotateOutUpLeft;transform-origin:left bottom}@keyframes rotateOutUpRight{0%{opacity:1}to{transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{animation-name:rotateOutUpRight;transform-origin:right bottom}@keyframes hinge{0%{animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0, 700px, 0);opacity:0}}.animate__hinge{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2);animation-name:hinge;transform-origin:top left}@keyframes jackInTheBox{0%{opacity:0;transform:scale(0.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.animate__jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%, 0, 0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}.animate__rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0) rotate(120deg)}}.animate__rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}.animate__zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}to{opacity:0}}.animate__zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutDown{animation-name:zoomOutDown;transform-origin:center bottom}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px, 0, 0)}}.animate__zoomOutLeft{animation-name:zoomOutLeft;transform-origin:left center}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(2000px, 0, 0)}}.animate__zoomOutRight{animation-name:zoomOutRight;transform-origin:right center}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutUp{animation-name:zoomOutUp;transform-origin:center bottom}@keyframes slideInDown{0%{transform:translate3d(0, -100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0, 100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, 100%, 0)}}.animate__slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%, 0, 0)}}.animate__slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%, 0, 0)}}.animate__slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, -100%, 0)}}.animate__slideOutUp{animation-name:slideOutUp}:host{display:flex;flex-direction:row;position:absolute;height:100%;min-height:22.75rem;z-index:var(--theme-z-index-sticky);width:auto;bottom:0px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tabs{height:100%;position:relative;overflow-y:auto;pointer-events:all;-ms-overflow-style:none;scrollbar-width:none}:host .tabs::-webkit-scrollbar{display:none}:host .tabs-shadow-container{overflow:hidden;display:block;position:relative;margin-bottom:2rem}:host .tabs--shadow{opacity:0;position:absolute;width:100%;height:0.625rem;background:linear-gradient(var(--theme-color-shadow-1), transparent);pointer-events:none;z-index:var(--theme-z-index-sticky);transition:opacity var(--theme-default-time)}:host .tabs--shadow-top{top:0px;background:linear-gradient(var(--theme-color-shadow-1), transparent)}:host .tabs--shadow-bottom{bottom:0px;background:linear-gradient(transparent, var(--theme-color-shadow-1))}:host .tabs--shadow--show{opacity:1}:host .menu{display:flex;flex-direction:column;position:relative;width:3.25rem;height:100%;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--animate-duration) ease-in-out}:host .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}:host .menu .burger-menu{margin:0.75rem 0 1rem 0.35rem}:host .menu-overlay{display:none;position:absolute;width:calc(100vw - 3.25rem);height:100%;left:3.25rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:left var(--animate-duration) ease-in-out}:host .menu-overlay.visible{display:block}:host .menu.expanded{width:16rem}:host .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}:host .menu-overlay-container{display:contents}:host .menu-avatar{max-height:3rem}:host .avatar{margin-bottom:2rem}:host #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}:host #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}:host #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}:host .bottom-tab-divider{margin-top:auto}:host(.breakpoint-sm) .menu:not(.expanded){width:0}:host(.breakpoint-sm) .menu{padding-top:2rem}:host(.breakpoint-sm) .menu .burger-menu{display:none}:host(.breakpoint-sm) .menu-overlay{left:0px;width:100vw}:host(.breakpoint-lg){position:relative}:host(.breakpoint-lg) .menu.expanded{box-shadow:none}:host ::slotted(a[href]){all:unset}";
 const Menu = class {
   constructor(hostRef) {

package/dist/cjs/ix-menu.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-menu.entry.cjs.js","mappings":"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","names":["applicationLayoutService","useContextConsumer","ApplicationLayoutContext","menuController","convertToRemString","anime","h","Host","themeSwitcher"],"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}
1	+ {"file":"ix-menu.entry.cjs.js","mappings":"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","names":["applicationLayoutService","useContextConsumer","ApplicationLayoutContext","menuController","convertToRemString","anime","h","Host","themeSwitcher"],"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/dist/cjs/ix-modal-header.cjs.entry.js CHANGED Viewed

@@ -15,11 +15,13 @@ const ModalHeader = class {
     this.iconColor = undefined;
   }
   onIconChange(icon) {
-    if (icon) {
-      this.parentDialog.classList.add('with-icon');
-    }
-    else {
-      this.parentDialog.classList.remove('with-icon');
+    if (this.parentDialog) {
+      if (icon) {
+        this.parentDialog.classList.add('with-icon');
+      }
+      else {
+        this.parentDialog.classList.remove('with-icon');
+      }
     }
   }
   componentDidLoad() {

package/dist/cjs/ix-modal-header.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-modal-header.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,6wBAA6wB;;MC4BvxB,WAAW;;;;qBAMF,KAAK;;;;EAOzB,YAAY,CAAC,IAAY;IACvB,IAAI,IAAI,EAAE;~~MACR~~,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;~~KAC9C~~;~~SAAM~~;~~MACL~~,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;~~KACjD~~;GACF;EAcD,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACzD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC9B;EAEO,YAAY,CAAC,KAAiB;IACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE;MACjD,OAAO;KACR;IAED,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;GAClC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACF,IAAI,CAAC,IAAI,IACRD,qBACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,SAAS,GACZ,IACT,IAAI,EACRA,2BAAe,OAAO,EAAE,eAAe,IACrCA,qBAAa,CACC,EACf,CAAC,IAAI,CAAC,SAAS,IACdA,4BACE,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,aAAa,GACJ,IAChB,IAAI,CACH,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/modal-header/modal-header.scss?tag=ix-modal-header&encapsulation=shadow","./src/components/modal-header/modal-header.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n padding: 2px 16px 16px 10px;\n align-items: center;\n align-self: stretch;\n\n .modal-close {\n margin-left: auto;\n margin-right: -20px;\n }\n\n .modal-icon {\n margin-right: 1rem;\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 Prop,\n Watch,\n} from '@stencil/core';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-modal-header',\n styleUrl: 'modal-header.scss',\n shadow: true,\n})\nexport class ModalHeader {\n @Element() hostElement!: HTMLIxModalHeaderElement;\n\n /\n Hide the close button\n /\n @Prop() hideClose = false;\n\n /\n Icon of the Header\n /\n @Prop() icon: string;\n @Watch('icon')\n onIconChange(icon: string) {\n if (icon) {\n this.parentDialog.classList.add('with-icon');\n } else {\n this.parentDialog.classList.remove('with-icon');\n }\n }\n\n /\n Icon color\n /\n @Prop() iconColor: string;\n\n /\n Close icon is clicked\n */\n @Event() closeClick: EventEmitter<MouseEvent>;\n\n private parentDialog: HTMLIxModalElement;\n\n componentDidLoad() {\n this.parentDialog = this.hostElement.closest('ix-modal');\n this.onIconChange(this.icon);\n }\n\n private onCloseClick(event: MouseEvent) {\n const ce = this.closeClick.emit(event);\n if (ce.defaultPrevented \|\| event.defaultPrevented) {\n return;\n }\n\n this.parentDialog.dismissModal();\n }\n\n render() {\n return (\n <Host>\n {this.icon ? (\n <ix-icon\n class={'modal-icon'}\n name={this.icon}\n color={this.iconColor}\n ></ix-icon>\n ) : null}\n <ix-typography variant={'default-title'}>\n <slot></slot>\n </ix-typography>\n {!this.hideClose ? (\n <ix-icon-button\n onClick={(event) => this.onCloseClick(event)}\n ghost\n icon=\"close\"\n class={'modal-close'}\n ></ix-icon-button>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-modal-header.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,6wBAA6wB;;MC4BvxB,WAAW;;;;qBAMF,KAAK;;;;EAOzB,YAAY,CAAC,IAAY;IACvB,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,IAAI,EAAE;QACR,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;OAC9C;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OACjD;KACF;GACF;EAcD,gBAAgB;IACd,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACzD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC9B;EAEO,YAAY,CAAC,KAAiB;IACpC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,IAAI,EAAE,CAAC,gBAAgB,IAAI,KAAK,CAAC,gBAAgB,EAAE;MACjD,OAAO;KACR;IAED,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;GAClC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACF,IAAI,CAAC,IAAI,IACRD,qBACE,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,SAAS,GACZ,IACT,IAAI,EACRA,2BAAe,OAAO,EAAE,eAAe,IACrCA,qBAAa,CACC,EACf,CAAC,IAAI,CAAC,SAAS,IACdA,4BACE,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,KAAK,QACL,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,aAAa,GACJ,IAChB,IAAI,CACH,EACP;GACH;;;;;;;;;;","names":["h","Host"],"sources":["./src/components/modal-header/modal-header.scss?tag=ix-modal-header&encapsulation=shadow","./src/components/modal-header/modal-header.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n padding: 2px 16px 16px 10px;\n align-items: center;\n align-self: stretch;\n\n .modal-close {\n margin-left: auto;\n margin-right: -20px;\n }\n\n .modal-icon {\n margin-right: 1rem;\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 Prop,\n Watch,\n} from '@stencil/core';\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-modal-header',\n styleUrl: 'modal-header.scss',\n shadow: true,\n})\nexport class ModalHeader {\n @Element() hostElement!: HTMLIxModalHeaderElement;\n\n /\n Hide the close button\n /\n @Prop() hideClose = false;\n\n /\n Icon of the Header\n /\n @Prop() icon: string;\n @Watch('icon')\n onIconChange(icon: string) {\n if (this.parentDialog) {\n if (icon) {\n this.parentDialog.classList.add('with-icon');\n } else {\n this.parentDialog.classList.remove('with-icon');\n }\n }\n }\n\n /\n Icon color\n /\n @Prop() iconColor: string;\n\n /\n Close icon is clicked\n */\n @Event() closeClick: EventEmitter<MouseEvent>;\n\n private parentDialog: HTMLIxModalElement;\n\n componentDidLoad() {\n this.parentDialog = this.hostElement.closest('ix-modal');\n this.onIconChange(this.icon);\n }\n\n private onCloseClick(event: MouseEvent) {\n const ce = this.closeClick.emit(event);\n if (ce.defaultPrevented \|\| event.defaultPrevented) {\n return;\n }\n\n this.parentDialog.dismissModal();\n }\n\n render() {\n return (\n <Host>\n {this.icon ? (\n <ix-icon\n class={'modal-icon'}\n name={this.icon}\n color={this.iconColor}\n ></ix-icon>\n ) : null}\n <ix-typography variant={'default-title'}>\n <slot></slot>\n </ix-typography>\n {!this.hideClose ? (\n <ix-icon-button\n onClick={(event) => this.onCloseClick(event)}\n ghost\n icon=\"close\"\n class={'modal-close'}\n ></ix-icon-button>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-modal.cjs.entry.js CHANGED Viewed

@@ -28,7 +28,7 @@ const Modal = class {
   }
   slideInModal() {
     const duration = this.animation ? animation.Animation.mediumTime : 0;
-    let transformY = this.centered ? '-50' : 40;
+    let transformY = this.centered ? '-50%' : 40;
     anime_es.anime({
       targets: this.dialog,
       duration,
@@ -40,7 +40,7 @@ const Modal = class {
   }
   slideOutModal(completeCallback) {
     const duration = this.animation ? animation.Animation.mediumTime : 0;
-    let transformY = this.centered ? '-50' : 40;
+    let transformY = this.centered ? '-50%' : 40;
     anime_es.anime({
       targets: this.dialog,
       duration,
@@ -112,7 +112,10 @@ const Modal = class {
     return (index.h(index.Host, { class: {
         'no-backdrop': this.backdrop === false,
         'align-center': this.centered,
-      } }, index.h("div", { class: "dialog-backdrop" }, index.h("dialog", { "aria-modal": a11y.a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: `modal modal-size-${this.size}`, onKeyDown: (e) => {
+      } }, index.h("div", { class: "dialog-backdrop" }, index.h("dialog", { "aria-modal": a11y.a11yBoolean(true), "aria-describedby": this.ariaAttributes['aria-describedby'], "aria-labelledby": this.ariaAttributes['aria-labelledby'], class: {
+        modal: true,
+        [`modal-size-${this.size}`]: true,
+      }, onKeyDown: (e) => {
         if (e.key === 'Escape' && this.keyboard === false) {
           e.preventDefault();
         }

package/dist/cjs/ix-modal.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-modal.entry.cjs.js","mappings":"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","names":["Animation","anime","a11yHostAttributes","h","Host","a11yBoolean"],"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}
1	+ {"file":"ix-modal.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,68CAA68C;;MC+Bj9C,KAAK;;;;;IACR,mBAAc,GAAmB,EAAE,CAAC;gBAShB,KAAK;qBAKb,IAAI;oBAKL,IAAI;gCAOQ,KAAK;;oBAajB,KAAK;oBAKL,IAAI;;EAYvB,IAAI,MAAM;IACR,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;GAC5D;EAEO,YAAY;IAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAGA,mBAAS,CAAC,UAAU,GAAG,CAAC,CAAC;IAE3D,IAAI,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,EAAE,CAAC;IAE7CC,cAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,MAAM;MACpB,QAAQ;MACR,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC;MAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;MAC5B,MAAM,EAAE,aAAa;KACtB,CAAC,CAAC;GACJ;EAEO,aAAa,CAAC,gBAA0B;IAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAGD,mBAAS,CAAC,UAAU,GAAG,CAAC,CAAC;IAE3D,IAAI,UAAU,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,EAAE,CAAC;IAE7CC,cAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,MAAM;MACpB,QAAQ;MACR,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC;MAC3B,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;MAC5B,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE;QACR,IAAI,gBAAgB,EAAE;UACpB,gBAAgB,EAAE,CAAC;SACpB;OACF;KACF,CAAC,CAAC;GACJ;EAEO,YAAY,CAAC,KAAiB;IACpC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC;IACjD,MAAM,cAAc,GAClB,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO;MACzB,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM;MACvC,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO;MAC1B,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;IAC1C,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,oBAAoB,EAAE;MAChD,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;GACF;;;;EAMD,MAAM,SAAS;IACb,UAAU,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC;GAC3C;;;;EAMD,MAAM,YAAY,CAAU,MAAU;IACpC,IAAI,YAAY,GAAG,IAAI,CAAC;IAExB,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;MACpC,YAAY,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;KACjD;IACD,IAAI,CAAC,YAAY,EAAE;MACjB,OAAO;KACR;IAED,IAAI,CAAC,aAAa,CAAC;MACjB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,IAAI,CAAC,SAAS,CACZ;QACE,IAAI,EAAE,SAAS;QACf,MAAM;OACP,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;MAEF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACjC,CAAC,CAAC;GACJ;;;;EAMD,MAAM,UAAU,CAAU,MAAS;IACjC,IAAI,CAAC,aAAa,CAAC;MACjB,IAAI,CAAC,MAAM,CAAC,KAAK,CACf,IAAI,CAAC,SAAS,CACZ;QACE,IAAI,EAAE,OAAO;QACb,MAAM;OACP,EACD,IAAI,EACJ,CAAC,CACF,CACF,CAAC;MAEF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC/B,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EAED,iBAAiB;IACf,IAAI,CAAC,cAAc,GAAGC,uBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC5D;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,IACH,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,QAAQ,KAAK,KAAK;QACtC,cAAc,EAAE,IAAI,CAAC,QAAQ;OAC9B,IAEDD,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,kCACcE,gBAAW,CAAC,IAAI,CAAC,sBACX,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,qBACxC,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvD,KAAK,EAAE;QACL,KAAK,EAAE,IAAI;QACX,CAAC,cAAc,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;OAClC,EACD,SAAS,EAAE,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;UACjD,CAAC,CAAC,cAAc,EAAE,CAAC;SACpB;OACF,EACD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAE,CAAC,CAAC;QACV,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB,IAEDF,qBAAa,CACN,CACL,CACD,EACP;GACH;;;;;;;","names":["Animation","anime","a11yHostAttributes","h","Host","a11yBoolean"],"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={{\n modal: true,\n [`modal-size-${this.size}`]: true,\n }}\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}