npm - @siemens/ix - Versions diffs - 0.0.0-20240522074328 → 0.0.0-pr-1373-20240705054533 - Mend

@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1373-20240705054533

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

package/dist/esm/ix-application-header.entry.js.map CHANGED Viewed

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

package/dist/esm/ix-application-sidebar.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f18c5ad1.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5429f20b.js';
 import { a as anime } from './anime.es-a5520566.js';
 import { A as Animation } from './animation-4a73b1c3.js';
-const applicationSidebarCss = ":host{display:block;position:relative;width:22rem;height:100%;padding:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.visible){border-right:2px solid var(--theme-color-soft-bdr);padding:1.5rem 0.5rem 0}";
+const applicationSidebarCss = ":host{display:block;position:relative;width:22rem;height:100%;padding:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.visible){border-right:2px solid var(--theme-color-soft-bdr);padding:1.5rem 0.5rem 0}";
 const IxApplicationSidebarStyle0 = applicationSidebarCss;
 const ApplicationSidebar = class {
@@ -31,7 +31,7 @@ const ApplicationSidebar = class {
         anime(animation);
     }
     render() {
-        return (h(Host, { key: 'e05ab4ea0d3e6f05f115616bae74208fef0c701d', slot: "application-sidebar", class: {
+        return (h(Host, { key: 'fe0f54c79115877bac6d0032320550ad2e3fe089', slot: "application-sidebar", class: {
                 visible: this.visible,
             } }, this.visible ? h("slot", null) : null));
     }

package/dist/esm/ix-application-sidebar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-application-sidebar.entry.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,~~iwBAAiwB~~,CAAC;~~AAChyB~~,mCAAe,qBAAqB;;MCkBvB,kBAAkB;;;uBAGV,IAAI;;IAKvB,iBAAiB;QACf,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QACjC,MAAM,SAAS,GAAsB;YACnC,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,KAAK,EAAE,UAAU,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC;YACnD,OAAO,EAAE,UAAU,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;YACrC,MAAM,EAAE,YAAY;YACpB,QAAQ,EAAE,SAAS,CAAC,WAAW;SAChC,CAAC;QAEF,MAAM,gBAAgB,GAAG;YACvB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;SAC3B,CAAC;QAEF,IAAI,UAAU,EAAE;YACd,SAAS,CAAC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC/C;aAAM;YACL,SAAS,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAClD;QAED,KAAK,CAAC,SAAS,CAAC,CAAC;KAClB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAEA,IAAI,CAAC,OAAO,GAAG,eAAa,GAAG,IAAI,CAC/B,EACP;KACH;;;;;;;","names":[],"sources":["src/components/application-sidebar/application-sidebar.scss?tag=ix-application-sidebar&encapsulation=shadow","src/components/application-sidebar/application-sidebar.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n\n width: 22rem;\n height: 100%;\n\n padding: 0;\n}\n\n:host(.visible) {\n border-right: 2px solid var(--theme-color-soft-bdr);\n padding: 1.5rem 0.5rem 0;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Listen, State } from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\n\n/* @internal */\n@Component({\n tag: 'ix-application-sidebar',\n styleUrl: 'application-sidebar.scss',\n shadow: true,\n})\nexport class ApplicationSidebar {\n @Element() hostElement!: HTMLIxApplicationSidebarElement;\n\n @State() visible = true;\n\n @Listen('application-sidebar-toggle', {\n target: 'window',\n })\n listenToggleEvent() {\n const visibility = !this.visible;\n const animation: anime.AnimeParams = {\n targets: this.hostElement,\n width: visibility ? ['0', '22rem'] : ['22rem', '0'],\n opacity: visibility ? [0, 1] : [1, 0],\n easing: 'easeInSine',\n duration: Animation.defaultTime,\n };\n\n const changeVisibility = () => {\n this.visible = visibility;\n };\n\n if (visibility) {\n animation.begin = changeVisibility.bind(this);\n } else {\n animation.complete = changeVisibility.bind(this);\n }\n\n anime(animation);\n }\n\n render() {\n return (\n <Host\n slot=\"application-sidebar\"\n class={{\n visible: this.visible,\n }}\n >\n {this.visible ? <slot></slot> : null}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-application-sidebar.entry.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,65BAA65B,CAAC;AAC57B,mCAAe,qBAAqB;;MCkBvB,kBAAkB;;;uBAGV,IAAI;;IAKvB,iBAAiB;QACf,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QACjC,MAAM,SAAS,GAAsB;YACnC,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,KAAK,EAAE,UAAU,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC;YACnD,OAAO,EAAE,UAAU,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;YACrC,MAAM,EAAE,YAAY;YACpB,QAAQ,EAAE,SAAS,CAAC,WAAW;SAChC,CAAC;QAEF,MAAM,gBAAgB,GAAG;YACvB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;SAC3B,CAAC;QAEF,IAAI,UAAU,EAAE;YACd,SAAS,CAAC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC/C;aAAM;YACL,SAAS,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAClD;QAED,KAAK,CAAC,SAAS,CAAC,CAAC;KAClB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,IAEA,IAAI,CAAC,OAAO,GAAG,eAAa,GAAG,IAAI,CAC/B,EACP;KACH;;;;;;;","names":[],"sources":["src/components/application-sidebar/application-sidebar.scss?tag=ix-application-sidebar&encapsulation=shadow","src/components/application-sidebar/application-sidebar.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n\n width: 22rem;\n height: 100%;\n\n padding: 0;\n}\n\n:host(.visible) {\n border-right: 2px solid var(--theme-color-soft-bdr);\n padding: 1.5rem 0.5rem 0;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Listen, State } from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\n\n/* @internal */\n@Component({\n tag: 'ix-application-sidebar',\n styleUrl: 'application-sidebar.scss',\n shadow: true,\n})\nexport class ApplicationSidebar {\n @Element() hostElement!: HTMLIxApplicationSidebarElement;\n\n @State() visible = true;\n\n @Listen('application-sidebar-toggle', {\n target: 'window',\n })\n listenToggleEvent() {\n const visibility = !this.visible;\n const animation: anime.AnimeParams = {\n targets: this.hostElement,\n width: visibility ? ['0', '22rem'] : ['22rem', '0'],\n opacity: visibility ? [0, 1] : [1, 0],\n easing: 'easeInSine',\n duration: Animation.defaultTime,\n };\n\n const changeVisibility = () => {\n this.visible = visibility;\n };\n\n if (visibility) {\n animation.begin = changeVisibility.bind(this);\n } else {\n animation.complete = changeVisibility.bind(this);\n }\n\n anime(animation);\n }\n\n render() {\n return (\n <Host\n slot=\"application-sidebar\"\n class={{\n visible: this.visible,\n }}\n >\n {this.visible ? <slot></slot> : null}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-application-switch-modal.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f18c5ad1.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5429f20b.js';
 import './animation-4a73b1c3.js';
 import { d as dismissModal } from './modal-54740f80.js';
 import './typed-event-ad6484c5.js';
-const applicationSwitchModalCss = ":host{display:block}: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 .content{padding:2rem;padding-right:0}:host .content-apps{display:flex;position:relative;flex-wrap:wrap;justify-content:space-evenly;max-height:50vh;margin-right:0.25rem;gap:1.5rem}:host .loading{display:flex;flex-direction:row;align-items:center}:host .loading ix-spinner{margin-right:1rem}:host .AppEntry{all:unset;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0.5rem;flex:1 1 45%;cursor:pointer;border:0.0625rem solid transparent}:host .AppEntry.Selected{background-color:var(--theme-color-ghost--selected);border:var(--theme-dynamic-bdr-1)}:host .AppEntry:not(.disabled):not(:disabled).hover,:host .AppEntry:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .AppEntry:not(.disabled):not(:disabled).active,:host .AppEntry:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .AppEntry:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host .AppName{display:flex;flex-direction:column}:host .AppName ix-icon{margin-left:1rem}:host .AppIcon{width:3rem;height:3rem;border-radius:0.25rem}";
+const applicationSwitchModalCss = ":host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{padding:2rem;padding-right:0}:host .content-apps{display:flex;position:relative;flex-wrap:wrap;justify-content:space-evenly;max-height:50vh;margin-right:0.25rem;gap:1.5rem}:host .loading{display:flex;flex-direction:row;align-items:center}:host .loading ix-spinner{margin-right:1rem}:host .AppEntry{all:unset;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0.5rem;flex:1 1 45%;cursor:pointer;border:0.0625rem solid transparent}:host .AppEntry.Selected{background-color:var(--theme-color-ghost--selected);border:var(--theme-dynamic-bdr-1)}:host .AppEntry:not(.disabled):not(:disabled).hover,:host .AppEntry:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .AppEntry:not(.disabled):not(:disabled).active,:host .AppEntry:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .AppEntry:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host .AppName{display:flex;flex-direction:column}:host .AppName ix-icon{margin-left:1rem}:host .AppIcon{width:3rem;height:3rem;border-radius:0.25rem}";
 const IxApplicationSwitchModalStyle0 = applicationSwitchModalCss;
 function ApplicationItem(props) {
@@ -41,7 +41,7 @@ const ApplicationSwitchModal = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'b92498225544ccc8c436d0395eccd230d2783d49' }, h("ix-modal-header", { key: 'dc41803dc7d4f0b208f7a0da8cf63b105cef723a', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: 'a20d2a49fd3566188df365eed13aae97d84a0c26', class: "content" }, h("div", { key: '560a0c0f9303be6a67fa71937f42aff945c9a0b5', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { class: "loading" }, h("ix-spinner", { size: "medium", variant: "primary" }), h("span", null, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
+        return (h(Host, { key: '2c9a4d11f697563924effefae0ca86ca826fa9c1' }, h("ix-modal-header", { key: '09586fc6d884b175ea95e8f4f42e9017c2874ef4', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: '44be3f676830e44c4450ac9a85280829d2570004', class: "content" }, h("div", { key: 'd15e8b91de03f40013cfe94cde3159619b8ee8cc', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { key: '5d8cc548c1c7adaa83c89ac329d04be5e6f7a59c', class: "loading" }, h("ix-spinner", { key: '80c9c4adb4546028848d2b47929527b613152651', size: "medium", variant: "primary" }), h("span", { key: 'c06fc0f909d940df03402e360e2a3d64bd9decc4' }, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
             'Loading available applications...'))), (_d = this.config) === null || _d === void 0 ? void 0 :
             _d.apps.map((appEntry) => {
                 var _a;

package/dist/esm/ix-application-switch-modal.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-application-switch-modal.entry.js","mappings":";;;;;AAAA,MAAM,yBAAyB,GAAG,~~itDAAitD~~,CAAC;~~AACpvD~~,uCAAe,yBAAyB;;ACexC,SAAS,eAAe,CAAC,KAQxB;IACC,SAAS,UAAU,CAAC,MAAoC;QACtD,IACE,MAAM,KAAK,QAAQ;YACnB,MAAM,KAAK,SAAS;YACpB,MAAM,KAAK,OAAO;YAClB,MAAM,KAAK,MAAM,EACjB;;;YAGA,OAAO,IAAI,CAAC;SACb;QAED,IAAI,MAAM,KAAK,QAAQ,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,KAAK,CAAC;KACd;IAED,QACE,cACE,KAAK,EAAE;YACL,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK,CAAC,QAAQ;SACzB,EACD,OAAO,EAAE;YACP,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACzB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;SACtC,IAED,eACE,WAAK,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,KAAK,CAAC,OAAO,GAAQ,CAC3C,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,qBAAe,MAAM,EAAC,IAAI,IACvB,KAAK,CAAC,IAAI,EACV,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KACvB,eACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,iBAAiB,GACd,CACZ,CACa,EAChB,qBAAe,MAAM,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,IAC1C,KAAK,CAAC,WAAW,CACJ,CACZ,CACC,EACT;AACJ,CAAC;MAQY,sBAAsB;;;;;IAMjC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,MAAM,KAAK,CAAC,gCAAgC,CAAC,CAAC;SAC/C;KACF;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,wEAAiB,IAAI,EAAC,MAAM,IACzB,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,KAAI,uBAAuB,CACtC,EAClB,yEAAkB,KAAK,EAAC,SAAS,IAC/B,4DAAK,KAAK,EAAC,cAAc,IACtB,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,MAAM,MAAK,CAAC,MAC9C,~~WAAK~~,KAAK,EAAC,SAAS,IAClB,~~kBAAY~~,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,GAAc,EACzD,~~gBACG,~~CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,eAAe;YAC3B,mCAAmC,CAChC,CACH,CACP,EACA,MAAA,IAAI,CAAC,MAAM;eAAE,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ;;gBAAK,QACnC,EAAC,eAAe,IACd,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,WAAW,EAAE,QAAQ,CAAC,WAAW,EACjC,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,GAAG,EAAE,QAAQ,CAAC,GAAG,EACjB,QAAQ,EAAE,QAAQ,CAAC,EAAE,MAAK,MAAA,IAAI,CAAC,MAAM,0CAAE,YAAY,CAAA,GAClC,EACpB;aAAA,CAAC,CACE,CACW,CACd,EACP;KACH;;;;;;;","names":[],"sources":["src/components/application-header/application-switch-modal/application-switch-modal.scss?tag=ix-application-switch-modal&encapsulation=shadow","src/components/application-header/application-switch-modal/application-switch-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@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n\n:host {\n @include ix-component;\n display: block;\n\n .content {\n padding: 2rem;\n padding-right: 0;\n }\n\n .content-apps {\n display: flex;\n position: relative;\n flex-wrap: wrap;\n justify-content: space-evenly;\n max-height: 50vh;\n margin-right: 0.25rem;\n gap: 1.5rem;\n }\n\n .loading {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ix-spinner {\n margin-right: 1rem;\n }\n }\n}\n\n:host {\n .AppEntry {\n all: unset;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 1rem;\n padding: 0.5rem;\n flex: 1 1 calc(45%);\n cursor: pointer;\n border: 0.0625rem solid transparent;\n }\n\n .AppEntry.Selected {\n background-color: var(--theme-color-ghost--selected);\n border: var(--theme-dynamic-bdr-1);\n }\n\n .AppEntry {\n @include ghost-hover-pressed;\n }\n\n .AppEntry:focus-visible {\n border: 1px solid var(--theme-color-focus-bdr);\n }\n\n .AppName {\n display: flex;\n flex-direction: column;\n }\n\n .AppName ix-icon {\n margin-left: 1rem;\n }\n\n .AppIcon {\n width: 3rem;\n height: 3rem;\n border-radius: 0.25rem;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport {\n AppSwitchConfiguration,\n AppSwitchConfigurationTarget,\n} from '../../utils/application-layout/context';\nimport { dismissModal } from '../../utils/modal';\n\nfunction ApplicationItem(props: {\n host: HTMLIxApplicationSwitchModalElement;\n name: string;\n description: string;\n iconSrc: string;\n url: string;\n target: AppSwitchConfigurationTarget;\n selected: boolean;\n}) {\n function isExternal(target: AppSwitchConfigurationTarget) {\n if (\n target !== '_blank' &&\n target !== '_parent' &&\n target !== '_self' &&\n target !== '_top'\n ) {\n // Check if its one of the target keywords\n // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?retiredLocale=de#target\n return true;\n }\n\n if (target === '_blank') {\n return true;\n }\n\n return false;\n }\n\n return (\n <button\n class={{\n AppEntry: true,\n Selected: props.selected,\n }}\n onClick={() => {\n dismissModal(props.host);\n window.open(props.url, props.target);\n }}\n >\n <div>\n <img class=\"AppIcon\" src={props.iconSrc}></img>\n </div>\n <div class=\"AppName\">\n <ix-typography format=\"h4\">\n {props.name}\n {isExternal(props.target) && (\n <ix-icon\n size=\"12\"\n name=\"open-external\"\n color=\"color-soft-text\"\n ></ix-icon>\n )}\n </ix-typography>\n <ix-typography format=\"label-sm\" color=\"soft\">\n {props.description}\n </ix-typography>\n </div>\n </button>\n );\n}\n\n/* @internal /\n@Component({\n tag: 'ix-application-switch-modal',\n styleUrl: 'application-switch-modal.scss',\n shadow: true,\n})\nexport class ApplicationSwitchModal {\n @Element() hostElement!: HTMLIxApplicationSwitchModalElement;\n\n /* @internal */\n @Prop() config: AppSwitchConfiguration;\n\n componentWillLoad() {\n if (!this.config) {\n throw Error('ApplicationConfig not provided');\n }\n }\n\n render() {\n return (\n <Host>\n <ix-modal-header icon=\"apps\">\n {this.config?.i18nAppSwitch \|\| 'Switch to application'}\n </ix-modal-header>\n <ix-modal-content class=\"content\">\n <div class=\"content-apps\">\n {(!this.config \|\| this.config?.apps.length === 0) && (\n <div class=\"loading\">\n <ix-spinner size=\"medium\" variant=\"primary\"></ix-spinner>\n <span>\n {this.config?.i18nLoadingApps \|\|\n 'Loading available applications...'}\n </span>\n </div>\n )}\n {this.config?.apps.map((appEntry) => (\n <ApplicationItem\n host={this.hostElement}\n name={appEntry.name}\n description={appEntry.description}\n iconSrc={appEntry.iconSrc}\n target={appEntry.target}\n url={appEntry.url}\n selected={appEntry.id === this.config?.currentAppId}\n ></ApplicationItem>\n ))}\n </div>\n </ix-modal-content>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-application-switch-modal.entry.js","mappings":";;;;;AAAA,MAAM,yBAAyB,GAAG,62DAA62D,CAAC;AACh5D,uCAAe,yBAAyB;;ACexC,SAAS,eAAe,CAAC,KAQxB;IACC,SAAS,UAAU,CAAC,MAAoC;QACtD,IACE,MAAM,KAAK,QAAQ;YACnB,MAAM,KAAK,SAAS;YACpB,MAAM,KAAK,OAAO;YAClB,MAAM,KAAK,MAAM,EACjB;;;YAGA,OAAO,IAAI,CAAC;SACb;QAED,IAAI,MAAM,KAAK,QAAQ,EAAE;YACvB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,KAAK,CAAC;KACd;IAED,QACE,cACE,KAAK,EAAE;YACL,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK,CAAC,QAAQ;SACzB,EACD,OAAO,EAAE;YACP,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;YACzB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;SACtC,IAED,eACE,WAAK,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,KAAK,CAAC,OAAO,GAAQ,CAC3C,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,qBAAe,MAAM,EAAC,IAAI,IACvB,KAAK,CAAC,IAAI,EACV,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KACvB,eACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,eAAe,EACpB,KAAK,EAAC,iBAAiB,GACd,CACZ,CACa,EAChB,qBAAe,MAAM,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,IAC1C,KAAK,CAAC,WAAW,CACJ,CACZ,CACC,EACT;AACJ,CAAC;MAQY,sBAAsB;;;;;IAMjC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,MAAM,KAAK,CAAC,gCAAgC,CAAC,CAAC;SAC/C;KACF;IAED,MAAM;;QACJ,QACE,EAAC,IAAI,uDACH,wEAAiB,IAAI,EAAC,MAAM,IACzB,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,aAAa,KAAI,uBAAuB,CACtC,EAClB,yEAAkB,KAAK,EAAC,SAAS,IAC/B,4DAAK,KAAK,EAAC,cAAc,IACtB,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,MAAM,MAAK,CAAC,MAC9C,4DAAK,KAAK,EAAC,SAAS,IAClB,mEAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,GAAc,EACzD,+DACG,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,eAAe;YAC3B,mCAAmC,CAChC,CACH,CACP,EACA,MAAA,IAAI,CAAC,MAAM;eAAE,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ;;gBAAK,QACnC,EAAC,eAAe,IACd,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,WAAW,EAAE,QAAQ,CAAC,WAAW,EACjC,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,MAAM,EAAE,QAAQ,CAAC,MAAM,EACvB,GAAG,EAAE,QAAQ,CAAC,GAAG,EACjB,QAAQ,EAAE,QAAQ,CAAC,EAAE,MAAK,MAAA,IAAI,CAAC,MAAM,0CAAE,YAAY,CAAA,GAClC,EACpB;aAAA,CAAC,CACE,CACW,CACd,EACP;KACH;;;;;;;","names":[],"sources":["src/components/application-header/application-switch-modal/application-switch-modal.scss?tag=ix-application-switch-modal&encapsulation=shadow","src/components/application-header/application-switch-modal/application-switch-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@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n\n:host {\n @include ix-component;\n display: block;\n\n .content {\n padding: 2rem;\n padding-right: 0;\n }\n\n .content-apps {\n display: flex;\n position: relative;\n flex-wrap: wrap;\n justify-content: space-evenly;\n max-height: 50vh;\n margin-right: 0.25rem;\n gap: 1.5rem;\n }\n\n .loading {\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ix-spinner {\n margin-right: 1rem;\n }\n }\n}\n\n:host {\n .AppEntry {\n all: unset;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 1rem;\n padding: 0.5rem;\n flex: 1 1 calc(45%);\n cursor: pointer;\n border: 0.0625rem solid transparent;\n }\n\n .AppEntry.Selected {\n background-color: var(--theme-color-ghost--selected);\n border: var(--theme-dynamic-bdr-1);\n }\n\n .AppEntry {\n @include ghost-hover-pressed;\n }\n\n .AppEntry:focus-visible {\n border: 1px solid var(--theme-color-focus-bdr);\n }\n\n .AppName {\n display: flex;\n flex-direction: column;\n }\n\n .AppName ix-icon {\n margin-left: 1rem;\n }\n\n .AppIcon {\n width: 3rem;\n height: 3rem;\n border-radius: 0.25rem;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport {\n AppSwitchConfiguration,\n AppSwitchConfigurationTarget,\n} from '../../utils/application-layout/context';\nimport { dismissModal } from '../../utils/modal';\n\nfunction ApplicationItem(props: {\n host: HTMLIxApplicationSwitchModalElement;\n name: string;\n description: string;\n iconSrc: string;\n url: string;\n target: AppSwitchConfigurationTarget;\n selected: boolean;\n}) {\n function isExternal(target: AppSwitchConfigurationTarget) {\n if (\n target !== '_blank' &&\n target !== '_parent' &&\n target !== '_self' &&\n target !== '_top'\n ) {\n // Check if its one of the target keywords\n // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?retiredLocale=de#target\n return true;\n }\n\n if (target === '_blank') {\n return true;\n }\n\n return false;\n }\n\n return (\n <button\n class={{\n AppEntry: true,\n Selected: props.selected,\n }}\n onClick={() => {\n dismissModal(props.host);\n window.open(props.url, props.target);\n }}\n >\n <div>\n <img class=\"AppIcon\" src={props.iconSrc}></img>\n </div>\n <div class=\"AppName\">\n <ix-typography format=\"h4\">\n {props.name}\n {isExternal(props.target) && (\n <ix-icon\n size=\"12\"\n name=\"open-external\"\n color=\"color-soft-text\"\n ></ix-icon>\n )}\n </ix-typography>\n <ix-typography format=\"label-sm\" color=\"soft\">\n {props.description}\n </ix-typography>\n </div>\n </button>\n );\n}\n\n/* @internal /\n@Component({\n tag: 'ix-application-switch-modal',\n styleUrl: 'application-switch-modal.scss',\n shadow: true,\n})\nexport class ApplicationSwitchModal {\n @Element() hostElement!: HTMLIxApplicationSwitchModalElement;\n\n /* @internal */\n @Prop() config: AppSwitchConfiguration;\n\n componentWillLoad() {\n if (!this.config) {\n throw Error('ApplicationConfig not provided');\n }\n }\n\n render() {\n return (\n <Host>\n <ix-modal-header icon=\"apps\">\n {this.config?.i18nAppSwitch \|\| 'Switch to application'}\n </ix-modal-header>\n <ix-modal-content class=\"content\">\n <div class=\"content-apps\">\n {(!this.config \|\| this.config?.apps.length === 0) && (\n <div class=\"loading\">\n <ix-spinner size=\"medium\" variant=\"primary\"></ix-spinner>\n <span>\n {this.config?.i18nLoadingApps \|\|\n 'Loading available applications...'}\n </span>\n </div>\n )}\n {this.config?.apps.map((appEntry) => (\n <ApplicationItem\n host={this.hostElement}\n name={appEntry.name}\n description={appEntry.description}\n iconSrc={appEntry.iconSrc}\n target={appEntry.target}\n url={appEntry.url}\n selected={appEntry.id === this.config?.currentAppId}\n ></ApplicationItem>\n ))}\n </div>\n </ix-modal-content>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-application.entry.js CHANGED Viewed

@@ -1,13 +1,13 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f18c5ad1.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5429f20b.js';
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context-c9078420.js';
-import { a as applicationLayoutService } from './service-02cc9011.js';
+import { a as applicationLayoutService } from './service-c7fc628b.js';
 import { m as menuController } from './menu-service-f974814b.js';
 import { h as hasSlottedElements } from './shadow-dom-60e9243d.js';
 import { t as themeSwitcher } from './theme-switcher-b10fb4da.js';
 import './typed-event-ad6484c5.js';
 import './breakpoints-d5c2f627.js';
-const applicationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .application{display:flex;position:relative;flex-direction:row;height:100%;width:100%;overflow:hidden}:host main{display:block;position:relative;height:100%;width:100%;overflow:hidden}:host(.breakpoint-md){--ix-application-menu-margin-left:3.25rem}:host(.breakpoint-md) aside.slotted{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-md) aside.slotted+main{margin-left:0}:host(.breakpoint-md) aside:not(.slotted)+main{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-lg){--ix-application-menu-margin-left:0}:host(.breakpoint-sm){--ix-application-menu-margin-left:0}";
+const applicationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .application{display:flex;position:relative;flex-direction:row;height:100%;width:100%;overflow:hidden}:host main{display:block;position:relative;height:100%;width:100%;overflow:hidden}:host(.breakpoint-md){--ix-application-menu-margin-left:3.25rem}:host(.breakpoint-md) aside.slotted{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-md) aside.slotted+main{margin-left:0}:host(.breakpoint-md) aside:not(.slotted)+main{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-lg){--ix-application-menu-margin-left:0}:host(.breakpoint-sm){--ix-application-menu-margin-left:0}";
 const IxApplicationStyle0 = applicationCss;
 const Application = class {
@@ -88,12 +88,12 @@ const Application = class {
         });
     }
     render() {
-        return (h(Host, { key: 'bd797967a3e5a578fc1686817aa899c87ef27213', "data-role": "", class: {
+        return (h(Host, { key: '4e8314dec7968a3b9b2e00a7852dc53c924d0c53', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: 'ed10b1e05b826dcc5c44af641a10da168ef96756', name: "application-header" }), h("div", { key: '35a64b761c91a52dfbbf7e4dec5e92d427fa207a', class: "application" }, h("slot", { key: '06620e695f06ab2f29edde4b9bac0fd144c3984b', name: "menu" }), h("aside", { key: 'f5e99f9ac341d4ba7a72fda5ed4e47ac951cf259', class: {
+            } }, h("slot", { key: '2f4a52a13679af639648164eff165d5dd37ec951', name: "application-header" }), h("div", { key: 'b316ff04f23e4606d54ddcc5531ed884b988e360', class: "application" }, h("slot", { key: '40f4800917fa9f24cdc50c72543e2c7181878775', name: "menu" }), h("aside", { key: '62e0120b64ad942e7dd991b6fe9912b60e36e04f', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: '57c20e1184fbc0294aad5d96f1cbafa72bbb8cf5', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { key: 'b38951ba5e1544913439ff3de08edebca6421de1', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '07b9c1db601fdb867a9e5cc1890eb5f20dfaecdb' })))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: '211f35df78de174484e914fa646227ba290fb9ae', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { key: 'f58973392fbff54f0aef27ae95560cfb36dbd568', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'ac63821ff0fde080c1dd284dcb7df10113cb6477' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ix-application.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-application.entry.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,~~i4CAAi4C~~,CAAC;~~AACz5C~~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","names":[],"sources":["src/components/application/application.scss?tag=ix-application&encapsulation=shadow","src/components/application/application.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 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n flex-direction: column;\n\n ix-application-header {\n z-index: calc(var(--theme-z-index-sticky) + 1);\n }\n\n .logo-wrapper {\n display: contents;\n }\n\n .application {\n display: flex;\n position: relative;\n flex-direction: row;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n\n main {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n}\n\n:host(.breakpoint-md) {\n --ix-application-menu-margin-left: 3.25rem;\n\n aside.slotted {\n margin-left: var(--ix-application-menu-margin-left);\n }\n\n aside.slotted + main {\n margin-left: 0;\n }\n\n aside:not(.slotted) + main {\n margin-left: var(--ix-application-menu-margin-left);\n }\n}\n\n:host(.breakpoint-lg) {\n --ix-application-menu-margin-left: 0;\n}\n\n:host(.breakpoint-sm) {\n --ix-application-menu-margin-left: 0;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport {\n ApplicationLayoutContext,\n AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { IxTheme, themeSwitcher } from '../utils/theme-switcher';\nimport { Disposable } from '../utils/typed-event';\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-application',\n styleUrl: 'application.scss',\n shadow: true,\n})\nexport class Application {\n @Element() hostElement: HTMLIxApplicationElement;\n\n /\n Application theme\n /\n @Prop() theme: IxTheme;\n\n /\n Use the system appearance dark or light\n /\n @Prop() themeSystemAppearance = false;\n\n /\n Change the responsive layout of the menu structure\n /\n @Prop() forceBreakpoint: Breakpoint \| undefined;\n forceLayoutChange(newMode: Breakpoint \| undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /\n Supported layouts\n /\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n /\n Define application switch configuration\n */\n @Prop() appSwitchConfig: AppSwitchConfiguration;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() applicationSidebarSlotted = false;\n\n private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n get applicationSidebarSlot() {\n return this.hostElement.shadowRoot.querySelector(\n '.application-sidebar slot'\n ) as HTMLSlotElement;\n }\n\n private modeDisposable: Disposable;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n\n this.changeTheme();\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n @Watch('theme')\n @Watch('themeSystemAppearance')\n private changeTheme() {\n if (!this.theme) {\n if (this.themeSystemAppearance) {\n themeSwitcher.setVariant();\n }\n\n return;\n }\n\n if (themeSwitcher.hasVariantSuffix(this.theme)) {\n themeSwitcher.setTheme(`theme-${this.theme}`);\n return;\n }\n\n themeSwitcher.setTheme(\n `theme-${this.theme}-dark`,\n this.themeSystemAppearance\n );\n }\n\n @Watch('appSwitchConfig')\n @Watch('applicationSidebarSlotted')\n onApplicationSidebarChange() {\n this.contextProvider.emit({\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n });\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n <slot name=\"application-header\"></slot>\n <div class=\"application\">\n <slot name=\"menu\"></slot>\n <aside\n class={{\n 'application-sidebar': true,\n slotted: this.applicationSidebarSlotted,\n }}\n onClick={() => this.onContentClick()}\n >\n <slot\n name=\"application-sidebar\"\n onSlotchange={() =>\n (this.applicationSidebarSlotted = hasSlottedElements(\n this.applicationSidebarSlot\n ))\n }\n ></slot>\n </aside>\n <main class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </main>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-application.entry.js","mappings":"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","names":[],"sources":["src/components/application/application.scss?tag=ix-application&encapsulation=shadow","src/components/application/application.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 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n flex-direction: column;\n\n ix-application-header {\n z-index: calc(var(--theme-z-index-sticky) + 1);\n }\n\n .logo-wrapper {\n display: contents;\n }\n\n .application {\n display: flex;\n position: relative;\n flex-direction: row;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n\n main {\n display: block;\n position: relative;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n}\n\n:host(.breakpoint-md) {\n --ix-application-menu-margin-left: 3.25rem;\n\n aside.slotted {\n margin-left: var(--ix-application-menu-margin-left);\n }\n\n aside.slotted + main {\n margin-left: 0;\n }\n\n aside:not(.slotted) + main {\n margin-left: var(--ix-application-menu-margin-left);\n }\n}\n\n:host(.breakpoint-lg) {\n --ix-application-menu-margin-left: 0;\n}\n\n:host(.breakpoint-sm) {\n --ix-application-menu-margin-left: 0;\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport {\n ApplicationLayoutContext,\n AppSwitchConfiguration,\n} from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { hasSlottedElements } from '../utils/shadow-dom';\nimport { IxTheme, themeSwitcher } from '../utils/theme-switcher';\nimport { Disposable } from '../utils/typed-event';\n\n/\n @since 2.1.0\n /\n@Component({\n tag: 'ix-application',\n styleUrl: 'application.scss',\n shadow: true,\n})\nexport class Application {\n @Element() hostElement: HTMLIxApplicationElement;\n\n /\n Application theme\n /\n @Prop() theme: IxTheme;\n\n /\n Use the system appearance dark or light\n /\n @Prop() themeSystemAppearance = false;\n\n /\n Change the responsive layout of the menu structure\n /\n @Prop() forceBreakpoint: Breakpoint \| undefined;\n forceLayoutChange(newMode: Breakpoint \| undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /\n Supported layouts\n /\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n /\n Define application switch configuration\n */\n @Prop() appSwitchConfig: AppSwitchConfiguration;\n\n @State() breakpoint: Breakpoint = 'lg';\n @State() applicationSidebarSlotted = false;\n\n private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n get applicationSidebarSlot() {\n return this.hostElement.shadowRoot.querySelector(\n '.application-sidebar slot'\n ) as HTMLSlotElement;\n }\n\n private modeDisposable: Disposable;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n\n this.changeTheme();\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n @Watch('theme')\n @Watch('themeSystemAppearance')\n private changeTheme() {\n if (!this.theme) {\n if (this.themeSystemAppearance) {\n themeSwitcher.setVariant();\n }\n\n return;\n }\n\n if (themeSwitcher.hasVariantSuffix(this.theme)) {\n themeSwitcher.setTheme(`theme-${this.theme}`);\n return;\n }\n\n themeSwitcher.setTheme(\n `theme-${this.theme}-dark`,\n this.themeSystemAppearance\n );\n }\n\n @Watch('appSwitchConfig')\n @Watch('applicationSidebarSlotted')\n onApplicationSidebarChange() {\n this.contextProvider.emit({\n hideHeader: false,\n host: 'basic-navigation',\n sidebar: this.applicationSidebarSlotted,\n appSwitchConfig: this.appSwitchConfig,\n });\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n <slot name=\"application-header\"></slot>\n <div class=\"application\">\n <slot name=\"menu\"></slot>\n <aside\n class={{\n 'application-sidebar': true,\n slotted: this.applicationSidebarSlotted,\n }}\n onClick={() => this.onContentClick()}\n >\n <slot\n name=\"application-sidebar\"\n onSlotchange={() =>\n (this.applicationSidebarSlotted = hasSlottedElements(\n this.applicationSidebarSlot\n ))\n }\n ></slot>\n </aside>\n <main class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </main>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-avatar_2.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { r as registerInstance, a as readTask, h, F as Fragment, H as Host, g as getElement, c as createEvent } from './index-f18c5ad1.js';
-import { B as BaseButton } from './base-button-3ac703a7.js';
+import { r as registerInstance, a as readTask, h, F as Fragment, H as Host, g as getElement, c as createEvent } from './index-5429f20b.js';
+import { B as BaseButton } from './base-button-1b40b11d.js';
 import { c as closestElement, h as hasSlottedElements } from './shadow-dom-60e9243d.js';
 import { m as makeRef } from './make-ref-c80046bf.js';
@@ -41,9 +41,14 @@ const Avatar = class {
             readTask(() => resolve(this.hostElement.shadowRoot.querySelector('button')));
         });
     }
+    onDropdownClick(event) {
+        if (event.target === this.dropdownElement) {
+            event.preventDefault();
+        }
+    }
     render() {
         if (this.isClosestApplicationHeader) {
-            return (h(Host, { slot: "ix-application-header-avatar", class: 'avatar-button' }, h(BaseButton, { disabled: false, ghost: true, iconOval: false, icon: undefined, iconOnly: false, loading: false, outline: false, selected: false, type: "button", variant: "primary" }, h(AvatarImage, { image: this.image, initials: this.initials })), h("ix-dropdown", { trigger: this.resolveAvatarTrigger(), class: "avatar-dropdown" }, this.username && (h(Fragment, null, h(UserInfo, { extra: this.extra, image: this.image, initials: this.initials, userName: this.username }), this.hasSlottedElements && h("ix-divider", null))), h("slot", { onSlotchange: () => this.slottedChanged(), ref: (ref) => (this.slotElement = ref) }))));
+            return (h(Host, { slot: "ix-application-header-avatar", class: 'avatar-button' }, h(BaseButton, { disabled: false, ghost: true, iconOval: false, icon: undefined, iconOnly: false, loading: false, outline: false, selected: false, type: "button", variant: "primary" }, h(AvatarImage, { image: this.image, initials: this.initials })), h("ix-dropdown", { ref: (ref) => (this.dropdownElement = ref), trigger: this.resolveAvatarTrigger(), class: "avatar-dropdown", onClick: (e) => this.onDropdownClick(e) }, this.username && (h(Fragment, null, h(UserInfo, { extra: this.extra, image: this.image, initials: this.initials, userName: this.username }), this.hasSlottedElements && (h("ix-divider", { onClick: (e) => e.preventDefault() })))), h("slot", { onSlotchange: () => this.slottedChanged(), ref: (ref) => (this.slotElement = ref) }))));
         }
         return (h(Host, null, h(AvatarImage, { image: this.image, initials: this.initials })));
     }
@@ -51,7 +56,7 @@ const Avatar = class {
 };
 Avatar.style = IxAvatarStyle0;
-const menuAvatarItemCss = ":host{display:block;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
+const menuAvatarItemCss = ":host{display:block;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";
 const IxMenuAvatarItemStyle0 = menuAvatarItemCss;
 const MenuAvatarItem = class {
@@ -67,7 +72,7 @@ const MenuAvatarItem = class {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (h("ix-dropdown-item", { key: 'daf1c8be62496e8c4240eea2394857abb98497d0', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (h("ix-dropdown-item", { key: 'fe1c225ee8b21aade4ca0e679a5ca389721520a4', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-avatar_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-avatar.ix-menu-avatar-item.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,q9GAAq9G,CAAC;AACx+G,uBAAe,SAAS;;ACqBxB,SAAS,aAAa,CAAC,KAA4B;IACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,IAAI,QAAQ,EAAE;QACZ,OAAO,WAAK,KAAK,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAC;KACxD;IAED,QACE,WACE,KAAK,EAAE,cAAc,EACrB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,IAEnB,SAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChC,YACE,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,kIACiE,GACnE,EACF,YACE,EAAE,EAAC,oBAAoB,EACvB,CAAC,EAAC,2TAGgE,GAClE,CACA,CACA,EACN;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,KAA0C;IAC7D,QACE,UAAI,KAAK,EAAC,QAAQ,IACf,KAAK,CAAC,KAAK,IACV,WAAK,GAAG,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,GAAO,KAElD,EAAC,aAAa,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,CAC5C,CACE,EACL;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,KAKjB;IACC,QACE,EAAC,QAAQ,QACP,WAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,cAAc,EAAE,IAC/D,EAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAAI,EAC7D,WAAK,KAAK,EAAC,MAAM,IACf,WAAK,KAAK,EAAC,UAAU,IAAE,KAAK,CAAC,QAAQ,CAAO,EAC3C,KAAK,CAAC,KAAK,KACV,qBAAe,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,MAAM,IACvC,KAAK,CAAC,KAAK,CACE,CACjB,CACG,CACF,CACG,EACX;AACJ,CAAC;MAUY,MAAM;;;;;;;0CA+BqB,KAAK;kCACb,KAAK;;IAInC,iBAAiB;QACf,MAAM,OAAO,GAAG,cAAc,CAAC,uBAAuB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1E,IAAI,CAAC,0BAA0B,GAAG,OAAO,KAAK,IAAI,CAAC;KACpD;IAEO,cAAc;QACpB,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAChE;IAEO,oBAAoB;QAC1B,OAAO,IAAI,OAAO,CAAc,CAAC,OAAO;YACtC,QAAQ,CAAC,MACP,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAC7D,CAAC;SACH,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,0BAA0B,EAAE;YACnC,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,8BAA8B,EAAC,KAAK,EAAE,eAAe,IAC9D,EAAC,UAAU,IACT,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,KAAK,EACf,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,KAAK,EACf,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,SAAS,IAEjB,EAAC,WAAW,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAChD,EACb,mBACE,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACpC,KAAK,EAAC,iBAAiB,IAEtB,IAAI,CAAC,QAAQ,KACZ,EAAC,QAAQ,QACP,EAAC,QAAQ,IACP,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,EACD,IAAI,CAAC,kBAAkB,IAAI,qBAAyB,CAC5C,CACZ,EACD,YACE,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EACzC,GAAG,EAAE,CAAC,GAAoB,MAAM,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,GACjD,CACI,CACT,EACP;SACH;QAED,QACE,EAAC,IAAI,QACH,EAAC,WAAW,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CACtD,EACP;KACH;;;;;ACtMH,MAAM,iBAAiB,GAAG,opBAAopB,CAAC;AAC/qB,+BAAe,iBAAiB;;MCyBnB,cAAc;;;;QAkBjB,oBAAe,GAAG,OAAO,EAA6B,CAAC;;;;;IAI/D,MAAM,sBAAsB;QAC1B,OAAO,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,CAAC;KAC9C;IAED,MAAM;QACJ,QACE,yEACE,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;KACH;;;;;;;","names":[],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n\n:host {\n display: flex;\n position: relative;\n width: fit-content;\n\n .avatar {\n display: flex;\n align-items: center;\n\n > .avatar-image {\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n }\n\n > .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n background-color: var(--theme-avatar--background);\n color: var(--theme-avatar--color);\n }\n\n #avatar-path-background {\n fill: var(--theme-avatar--background);\n }\n\n #avatar-path-person {\n fill:var(--theme-avatar--color);\n }\n }\n}\n\n:host {\n .user-info {\n display: flex;\n flex-direction: row;\n position: relative;\n height: 2.5rem;\n padding: 1rem;\n width: 12.75rem;\n min-width: 12.75rem;\n max-width: 12.75rem;\n\n gap: 1rem;\n\n .avatar {\n width: 2rem;\n pointer-events: none;\n }\n\n .user {\n display: flex;\n position: relative;\n flex-direction: column;\n justify-content: center;\n max-width: 10rem;\n width: 100%;\n overflow: hidden;\n }\n\n .username {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .extra {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n:host(.avatar-button) {\n button {\n @include btn-base;\n padding: 0px;\n\n border-radius: 100px !important;\n }\n\n @include btn-base-variant('invisible-primary', false);\n\n li {\n transform: scale(0.8);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n const { initials } = props;\n\n if (initials) {\n return <div class={'avatar-initials'}>{initials}</div>;\n }\n\n return (\n <svg\n class={'avatar-image'}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n id=\"avatar-path-background\"\n d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n 16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n />\n <path\n id=\"avatar-path-person\"\n d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n 6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n 9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n 6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n />\n </g>\n </svg>\n );\n}\n\nfunction AvatarImage(props: { image: string; initials: string }) {\n return (\n <li class=\"avatar\">\n {props.image ? (\n <img src={props.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={props.initials} />\n )}\n </li>\n );\n}\n\nfunction UserInfo(props: {\n image: string;\n initials: string;\n userName: string;\n extra: string;\n}) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage image={props.image} initials={props.initials} />\n <div class=\"user\">\n <div class=\"username\">{props.userName}</div>\n {props.extra && (\n <ix-typography class=\"extra\" color={'soft'}>\n {props.extra}\n </ix-typography>\n )}\n </div>\n </div>\n </Fragment>\n );\n}\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-avatar',\n styleUrl: 'avatar.scss',\n shadow: true,\n})\nexport class Avatar {\n @Element() hostElement: HTMLIxAvatarElement;\n\n /\n Display an avatar image\n \n /\n @Prop() image: string;\n\n /*\n Display the initials of the user. Will be overwritten by image\n \n /\n @Prop() initials: string;\n\n /*\n If set an info card displaying the username will be placed inside the dropdown.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() username: string;\n\n /\n Optional description text that will be displayed underneath the username.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() extra: string;\n\n @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement: HTMLSlotElement;\n\n componentWillLoad() {\n const closest = closestElement('ix-application-header', this.hostElement);\n this.isClosestApplicationHeader = closest !== null;\n }\n\n private slottedChanged() {\n this.hasSlottedElements = hasSlottedElements(this.slotElement);\n }\n\n private resolveAvatarTrigger() {\n return new Promise<HTMLElement>((resolve) => {\n readTask(() =>\n resolve(this.hostElement.shadowRoot.querySelector('button'))\n );\n });\n }\n\n render() {\n if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n ghost={true}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n outline={false}\n selected={false}\n type=\"button\"\n variant=\"primary\"\n >\n <AvatarImage image={this.image} initials={this.initials} />\n </BaseButton>\n <ix-dropdown\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\n />\n {this.hasSlottedElements && <ix-divider></ix-divider>}\n </Fragment>\n )}\n <slot\n onSlotchange={() => this.slottedChanged()}\n ref={(ref: HTMLSlotElement) => (this.slotElement = ref)}\n ></slot>\n </ix-dropdown>\n </Host>\n );\n }\n\n return (\n <Host>\n <AvatarImage image={this.image} initials={this.initials} />\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n color: var(--theme-color-std-text);\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 Method,\n Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.scss',\n shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n /\n Avatar dropdown icon\n /\n @Prop() icon: string;\n\n /\n Avatar dropdown label\n /\n @Prop() label: string;\n\n /\n Avatar dropdown item clicked\n /\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n /* @internal */\n @Method()\n async getDropdownItemElement() {\n return this.dropdownItemRef.waitForCurrent();\n }\n\n render() {\n return (\n <ix-dropdown-item\n ref={this.dropdownItemRef}\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-avatar.ix-menu-avatar-item.entry.js","mappings":"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","names":[],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-item.tsx"],"sourcesContent":["/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n\n:host {\n display: flex;\n position: relative;\n width: fit-content;\n\n .avatar {\n display: flex;\n align-items: center;\n\n > .avatar-image {\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n }\n\n > .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n min-height: 2rem;\n min-width: 2rem;\n border-radius: 100px;\n background-color: var(--theme-avatar--background);\n color: var(--theme-avatar--color);\n }\n\n #avatar-path-background {\n fill: var(--theme-avatar--background);\n }\n\n #avatar-path-person {\n fill:var(--theme-avatar--color);\n }\n }\n}\n\n:host {\n .user-info {\n display: flex;\n flex-direction: row;\n position: relative;\n height: 2.5rem;\n padding: 1rem;\n width: 12.75rem;\n min-width: 12.75rem;\n max-width: 12.75rem;\n\n gap: 1rem;\n\n .avatar {\n width: 2rem;\n pointer-events: none;\n }\n\n .user {\n display: flex;\n position: relative;\n flex-direction: column;\n justify-content: center;\n max-width: 10rem;\n width: 100%;\n overflow: hidden;\n }\n\n .username {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .extra {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n:host(.avatar-button) {\n button {\n @include btn-base;\n padding: 0px;\n\n border-radius: 100px !important;\n }\n\n @include btn-base-variant('invisible-primary', false);\n\n li {\n transform: scale(0.8);\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n readTask,\n State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n const { initials } = props;\n\n if (initials) {\n return <div class={'avatar-initials'}>{initials}</div>;\n }\n\n return (\n <svg\n class={'avatar-image'}\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n >\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path\n id=\"avatar-path-background\"\n d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n 16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n />\n <path\n id=\"avatar-path-person\"\n d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n 6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n 9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n 6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n />\n </g>\n </svg>\n );\n}\n\nfunction AvatarImage(props: { image: string; initials: string }) {\n return (\n <li class=\"avatar\">\n {props.image ? (\n <img src={props.image} class=\"avatar-image\"></img>\n ) : (\n <DefaultAvatar initials={props.initials} />\n )}\n </li>\n );\n}\n\nfunction UserInfo(props: {\n image: string;\n initials: string;\n userName: string;\n extra: string;\n}) {\n return (\n <Fragment>\n <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n <AvatarImage image={props.image} initials={props.initials} />\n <div class=\"user\">\n <div class=\"username\">{props.userName}</div>\n {props.extra && (\n <ix-typography class=\"extra\" color={'soft'}>\n {props.extra}\n </ix-typography>\n )}\n </div>\n </div>\n </Fragment>\n );\n}\n\n/\n @since 2.0.0\n /\n@Component({\n tag: 'ix-avatar',\n styleUrl: 'avatar.scss',\n shadow: true,\n})\nexport class Avatar {\n @Element() hostElement: HTMLIxAvatarElement;\n\n /\n Display an avatar image\n \n /\n @Prop() image: string;\n\n /*\n Display the initials of the user. Will be overwritten by image\n \n /\n @Prop() initials: string;\n\n /*\n If set an info card displaying the username will be placed inside the dropdown.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() username: string;\n\n /\n Optional description text that will be displayed underneath the username.\n * Note: Only working if avatar is part of the ix-application-header\n \n @since 2.1.0\n /\n @Prop() extra: string;\n\n @State() isClosestApplicationHeader = false;\n @State() hasSlottedElements = false;\n\n private slotElement: HTMLSlotElement;\n private dropdownElement: HTMLIxDropdownElement;\n\n componentWillLoad() {\n const closest = closestElement('ix-application-header', this.hostElement);\n this.isClosestApplicationHeader = closest !== null;\n }\n\n private slottedChanged() {\n this.hasSlottedElements = hasSlottedElements(this.slotElement);\n }\n\n private resolveAvatarTrigger() {\n return new Promise<HTMLElement>((resolve) => {\n readTask(() =>\n resolve(this.hostElement.shadowRoot.querySelector('button'))\n );\n });\n }\n\n private onDropdownClick(event: MouseEvent) {\n if (event.target === this.dropdownElement) {\n event.preventDefault();\n }\n }\n\n render() {\n if (this.isClosestApplicationHeader) {\n return (\n <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n <BaseButton\n disabled={false}\n ghost={true}\n iconOval={false}\n icon={undefined}\n iconOnly={false}\n loading={false}\n outline={false}\n selected={false}\n type=\"button\"\n variant=\"primary\"\n >\n <AvatarImage image={this.image} initials={this.initials} />\n </BaseButton>\n <ix-dropdown\n ref={(ref: HTMLIxDropdownElement) => (this.dropdownElement = ref)}\n trigger={this.resolveAvatarTrigger()}\n class=\"avatar-dropdown\"\n onClick={(e) => this.onDropdownClick(e)}\n >\n {this.username && (\n <Fragment>\n <UserInfo\n extra={this.extra}\n image={this.image}\n initials={this.initials}\n userName={this.username}\n />\n {this.hasSlottedElements && (\n <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n )}\n </Fragment>\n )}\n <slot\n onSlotchange={() => this.slottedChanged()}\n ref={(ref: HTMLSlotElement) => (this.slotElement = ref)}\n ></slot>\n </ix-dropdown>\n </Host>\n );\n }\n\n return (\n <Host>\n <AvatarImage image={this.image} initials={this.initials} />\n </Host>\n );\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: block;\n color: var(--theme-color-std-text);\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 Method,\n Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n tag: 'ix-menu-avatar-item',\n styleUrl: 'menu-avatar-item.scss',\n shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n /\n Avatar dropdown icon\n /\n @Prop() icon: string;\n\n /\n Avatar dropdown label\n /\n @Prop() label: string;\n\n /\n Avatar dropdown item clicked\n /\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n /* @internal */\n @Method()\n async getDropdownItemElement() {\n return this.dropdownItemRef.waitForCurrent();\n }\n\n render() {\n return (\n <ix-dropdown-item\n ref={this.dropdownItemRef}\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-basic-navigation.entry.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f18c5ad1.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5429f20b.js';
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context-c9078420.js';
-import { a as applicationLayoutService } from './service-02cc9011.js';
+import { a as applicationLayoutService } from './service-c7fc628b.js';
 import { m as menuController } from './menu-service-f974814b.js';
 import './typed-event-ad6484c5.js';
 import './breakpoints-d5c2f627.js';
-const basicNavigationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .navigation-content,:host(.hide-header) .content{height:100%}:host(.breakpoint-lg) .content{margin-left:0rem}:host(.breakpoint-sm) .content{margin-left:0px;width:100%}";
+const basicNavigationCss = ":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .navigation-content,:host(.hide-header) .content{height:100%}:host(.breakpoint-lg) .content{margin-left:0rem}:host(.breakpoint-sm) .content{margin-left:0px;width:100%}";
 const IxBasicNavigationStyle0 = basicNavigationCss;
 const BasicNavigation = class {
@@ -70,10 +70,10 @@ const BasicNavigation = class {
         (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
     }
     render() {
-        return (h(Host, { key: '2cf2956b483d753bb1966c9f4546c261add88f2f', "data-role": "", class: {
+        return (h(Host, { key: 'f7c1e352f7b85360afaa4aa7302394fbcefaa33a', "data-role": "", class: {
                 'hide-header': this.hideHeader,
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: '779599a5b282004c8facd68d15ba5eea32390632', class: "navigation-content" }, h("slot", { key: 'ec656284ec6266b8d620c26723d002839614a016', name: "menu" }), h("div", { key: 'f3bc4ea5a2afc2e67a0abff808659043468baf7b', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'a690de1ab1bfc9bacc6828b405772a25280a4be0' })))));
+            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: 'bbd969c401308a804a6b8973a038daca551fc8c4', class: "navigation-content" }, h("slot", { key: '3b09f85c77fda585b91786049d590e94c6bc3717', name: "menu" }), h("div", { key: '05b1eb22f097cf421f0ed0c747364c5b33418190', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'e46d1d8ddc56270570e28ea814087506202e7217' })))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"ix-basic-navigation.entry.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,~~orCAAorC~~,CAAC;~~AAChtC~~,gCAAe,kBAAkB;;MCqBpB,eAAe;;;;0BAWL,KAAK;;2BA4BU,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;0BAMpB,IAAI;;IAhCtC,kBAAkB;;QAChB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC;YACzB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;KACvD;IAMD,iBAAiB,CAAC,OAA+B;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,wBAAwB,CAAC,yBAAyB,EAAE,CAAC;YACrD,OAAO;SACR;QAED,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;QACtD,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KACjD;IAOD,mBAAmB,CAAC,WAAyB;QAC3C,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;KACtD;IAID,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;KAClD;IAKO,cAAc;;QACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;YAC3B,OAAO;SACR;QACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE1D,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;YACE,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CACF,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;YAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;QAEtD,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC9C;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;SAClD;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;KAChC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,kEACO,EAAE,EACZ,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI,CAAC,UAAU;gBAC9B,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;aACxC,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,IACtB,IAAI,EACR,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,4DAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACvD,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;;;;;;","names":[],"sources":["src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","src/components/basic-navigation/basic-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 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n flex-direction: column;\n\n ix-application-header {\n z-index: calc(var(--theme-z-index-sticky) + 1);\n }\n\n .logo-wrapper {\n display: contents;\n }\n\n .content {\n display: flex;\n height: 100%;\n width: 100%;\n position: relative;\n margin-left: 3.25rem;\n overflow: auto;\n }\n\n .navigation-content {\n display: flex;\n position: relative;\n\n flex-direction: row;\n\n height: calc(100% - 2.75rem);\n width: 100%;\n }\n}\n\n:host(.hide-header) {\n .navigation-content,\n .content {\n height: 100%;\n }\n}\n\n:host(.breakpoint-lg) {\n .content {\n margin-left: 0rem;\n }\n}\n\n:host(.breakpoint-sm) {\n .content {\n margin-left: 0px;\n width: 100%;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n tag: 'ix-basic-navigation',\n styleUrl: 'basic-navigation.scss',\n shadow: true,\n})\nexport class BasicNavigation {\n @Element() hostElement: HTMLIxBasicNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName: string;\n\n /\n Hide application header. Will disable responsive feature of basic navigation.\n /\n @Prop() hideHeader = false;\n @Watch('hideHeader')\n onHideHeaderChange() {\n this.contextProvider?.emit({\n hideHeader: this.hideHeader,\n host: 'basic-navigation',\n });\n\n this.breakpoint = applicationLayoutService.breakpoint;\n }\n\n /\n Change the responsive layout of the menu structure\n /\n @Prop() forceBreakpoint: Breakpoint \| undefined;\n forceLayoutChange(newMode: Breakpoint \| undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /\n Supported layouts e.g ['sm', 'md']\n */\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n @State() breakpoint: Breakpoint = 'lg';\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n private modeDisposable: Disposable;\n private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: this.hideHeader,\n host: 'basic-navigation',\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n }\n\n componentDidRender() {\n if (this.menu) {\n this.menu.applicationName = this.applicationName;\n }\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n 'hide-header': this.hideHeader,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n {!this.hideHeader ? (\n <ix-application-header name={this.applicationName}>\n <slot name=\"logo\" slot=\"logo\"></slot>\n </ix-application-header>\n ) : null}\n <div class=\"navigation-content\">\n <slot name=\"menu\"></slot>\n <div class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-basic-navigation.entry.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,g1CAAg1C,CAAC;AAC52C,gCAAe,kBAAkB;;MCqBpB,eAAe;;;;0BAWL,KAAK;;2BA4BU,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;0BAMpB,IAAI;;IAhCtC,kBAAkB;;QAChB,MAAA,IAAI,CAAC,eAAe,0CAAE,IAAI,CAAC;YACzB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CAAC,CAAC;QAEH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;KACvD;IAMD,iBAAiB,CAAC,OAA+B;QAC/C,IAAI,CAAC,OAAO,EAAE;YACZ,wBAAwB,CAAC,yBAAyB,EAAE,CAAC;YACrD,OAAO;SACR;QAED,wBAAwB,CAAC,0BAA0B,EAAE,CAAC;QACtD,wBAAwB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;KACjD;IAOD,mBAAmB,CAAC,WAAyB;QAC3C,wBAAwB,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;KACtD;IAID,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;KAClD;IAKO,cAAc;;QACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;YAC3B,OAAO;SACR;QACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9B;IAED,iBAAiB;QACf,wBAAwB,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAE1D,IAAI,CAAC,eAAe,GAAG,kBAAkB,CACvC,IAAI,CAAC,WAAW,EAChB,wBAAwB,EACxB;YACE,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,kBAAkB;SACzB,CACF,CAAC;QAEF,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI;YAC9D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB,CAAC,CAAC;QACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;QAEtD,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC9C;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;SAClD;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;KAChC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,kEACO,EAAE,EACZ,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI,CAAC,UAAU;gBAC9B,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,GAAG,IAAI;aACxC,IAEA,CAAC,IAAI,CAAC,UAAU,IACf,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe,IAC/C,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,IACtB,IAAI,EACR,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,4DAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,IACvD,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;;;;;;","names":[],"sources":["src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","src/components/basic-navigation/basic-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 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n width: 100%;\n height: 100%;\n\n flex-direction: column;\n\n ix-application-header {\n z-index: calc(var(--theme-z-index-sticky) + 1);\n }\n\n .logo-wrapper {\n display: contents;\n }\n\n .content {\n display: flex;\n height: 100%;\n width: 100%;\n position: relative;\n margin-left: 3.25rem;\n overflow: auto;\n }\n\n .navigation-content {\n display: flex;\n position: relative;\n\n flex-direction: row;\n\n height: calc(100% - 2.75rem);\n width: 100%;\n }\n}\n\n:host(.hide-header) {\n .navigation-content,\n .content {\n height: 100%;\n }\n}\n\n:host(.breakpoint-lg) {\n .content {\n margin-left: 0rem;\n }\n}\n\n:host(.breakpoint-sm) {\n .content {\n margin-left: 0px;\n width: 100%;\n }\n}\n","/\n * SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n tag: 'ix-basic-navigation',\n styleUrl: 'basic-navigation.scss',\n shadow: true,\n})\nexport class BasicNavigation {\n @Element() hostElement: HTMLIxBasicNavigationElement;\n\n /\n Application name\n /\n @Prop() applicationName: string;\n\n /\n Hide application header. Will disable responsive feature of basic navigation.\n /\n @Prop() hideHeader = false;\n @Watch('hideHeader')\n onHideHeaderChange() {\n this.contextProvider?.emit({\n hideHeader: this.hideHeader,\n host: 'basic-navigation',\n });\n\n this.breakpoint = applicationLayoutService.breakpoint;\n }\n\n /\n Change the responsive layout of the menu structure\n /\n @Prop() forceBreakpoint: Breakpoint \| undefined;\n forceLayoutChange(newMode: Breakpoint \| undefined) {\n if (!newMode) {\n applicationLayoutService.enableBreakpointDetection();\n return;\n }\n\n applicationLayoutService.disableBreakpointDetection();\n applicationLayoutService.setBreakpoint(newMode);\n }\n\n /\n Supported layouts e.g ['sm', 'md']\n */\n @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n @Watch('breakpoints')\n onBreakpointsChange(breakpoints: Breakpoint[]) {\n applicationLayoutService.setBreakpoints(breakpoints);\n }\n\n @State() breakpoint: Breakpoint = 'lg';\n\n get menu(): HTMLIxMenuElement \| null {\n return this.hostElement.querySelector('ix-menu');\n }\n\n private modeDisposable: Disposable;\n private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n private onContentClick() {\n if (menuController.isPinned) {\n return;\n }\n this.menu?.toggleMenu(false);\n }\n\n componentWillLoad() {\n applicationLayoutService.setBreakpoints(this.breakpoints);\n\n this.contextProvider = useContextProvider(\n this.hostElement,\n ApplicationLayoutContext,\n {\n hideHeader: this.hideHeader,\n host: 'basic-navigation',\n }\n );\n\n this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n this.breakpoint = mode;\n });\n this.breakpoint = applicationLayoutService.breakpoint;\n\n if (this.forceBreakpoint) {\n this.forceLayoutChange(this.forceBreakpoint);\n }\n }\n\n componentDidRender() {\n if (this.menu) {\n this.menu.applicationName = this.applicationName;\n }\n }\n\n disconnectedCallback() {\n this.modeDisposable?.dispose();\n }\n\n render() {\n return (\n <Host\n data-role=\"\"\n class={{\n 'hide-header': this.hideHeader,\n [`breakpoint-${this.breakpoint}`]: true,\n }}\n >\n {!this.hideHeader ? (\n <ix-application-header name={this.applicationName}>\n <slot name=\"logo\" slot=\"logo\"></slot>\n </ix-application-header>\n ) : null}\n <div class=\"navigation-content\">\n <slot name=\"menu\"></slot>\n <div class=\"content\" onClick={() => this.onContentClick()}>\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-blind.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-f18c5ad1.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-5429f20b.js';
 import { a as anime } from './anime.es-a5520566.js';
 import { a as a11yBoolean } from './a11y-d5444a76.js';
-const blindCss = ":host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}: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 .blind-header-wrapper{position:relative;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;margin-right:0.5rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1;overflow:hidden}:host .blind-header-title-col{display:inline-flex;align-items:center;width:calc(100% - 1rem);overflow:hidden}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:0.5rem}:host .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:0.5rem}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:var(--theme-default-time);transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all;margin-left:auto}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-insight){background-color:var(--theme-blind-base--background)}:host(.blind-insight) .blind-header{background-color:var(--theme-color-insight)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-insight) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-insight) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-notification){background-color:var(--theme-blind-base--background)}:host(.blind-notification) .blind-header{background-color:var(--theme-color-notification)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-notification--hover)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-notification--active)}:host(.blind-notification) .blind-header-title-label,:host(.blind-notification) .blind-header-title-sublabel{color:var(--theme-color-notification--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}";
+const blindCss = ":host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .blind-header-wrapper{position:relative;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;margin-right:0.5rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1;overflow:hidden}:host .blind-header-title-col{display:inline-flex;align-items:center;width:calc(100% - 1rem);overflow:hidden}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:0.5rem}:host .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:0.5rem}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:var(--theme-default-time);transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all;margin-left:auto}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-insight){background-color:var(--theme-blind-base--background)}:host(.blind-insight) .blind-header{background-color:var(--theme-color-insight)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-insight) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-insight) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-notification){background-color:var(--theme-blind-base--background)}:host(.blind-notification) .blind-header{background-color:var(--theme-color-notification)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-notification--hover)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-notification--active)}:host(.blind-notification) .blind-header-title-label,:host(.blind-notification) .blind-header-title-sublabel{color:var(--theme-color-notification--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}";
 const IxBlindStyle0 = blindCss;
 let sequentialInstanceId = 0;

package/dist/esm/ix-blind.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-blind.entry.js","mappings":"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","names":[],"sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.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/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n@mixin blind($variant: 'insight') {\n :host(.blind-#{$variant}) {\n @if $variant == 'outline' {\n border: solid\n var(--theme-blind--border-thickness)\n var(--theme-blind-base--border-color);\n }\n\n .blind-header {\n @if $variant == 'outline' {\n background-color: var(--theme-color-ghost);\n } @else {\n background-color: var(--theme-color-#{$variant});\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n @include ghost-hover-pressed;\n } @else {\n @include hover {\n background-color: var(--theme-color-#{$variant}--hover);\n }\n\n @include active {\n background-color: var(--theme-color-#{$variant}--active);\n }\n }\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n .blind-header-title-label {\n color: var(--theme-color-std-text);\n }\n .blind-header-title-sublabel {\n color: var(--theme-color-soft-text);\n }\n } @else {\n .blind-header-title-label,\n .blind-header-title-sublabel {\n color: var(--theme-color-#{$variant}--contrast);\n }\n }\n\n @if $variant == 'outline' {\n border-color: var(--theme-color-soft-bdr);\n } @else {\n background-color: var(--theme-blind-base--background);\n }\n }\n}\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n border-radius: var(--theme-blind--border-radius);\n overflow: hidden;\n\n .blind-header-wrapper {\n position: relative;\n min-height: 3rem;\n height: 3rem;\n overflow: hidden;\n }\n\n .blind-header-content {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-start;\n\n width: 100%;\n height: 100%;\n\n pointer-events: none;\n padding-left: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n position: relative;\n align-items: center;\n flex-grow: 1;\n margin-right: 0.5rem;\n }\n\n .blind-header {\n all: unset;\n @include ellipsis;\n\n display: block;\n position: absolute;\n\n top: 0px;\n left: 0px;\n\n pointer-events: all;\n\n padding-left: 2.5rem;\n min-height: 3rem;\n height: 3rem;\n width: calc(100% - 2 var(--theme-blind--border-thickness));\n border: solid var(--theme-blind--border-thickness) transparent;\n border-radius: var(--theme-blind--border-radius)\n var(--theme-blind--border-radius) 0 0;\n cursor: pointer;\n\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n outline: none;\n }\n }\n\n .blind-header-title-icon,\n .collapse-icon {\n margin-right: $small-space;\n }\n\n .blind-header-title-row {\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n }\n\n .blind-header-title-col {\n display: inline-flex;\n align-items: center;\n width: calc(100% - 1rem);\n overflow: hidden;\n }\n\n .blind-header-title-col:not(:first-of-type) {\n justify-content: flex-end;\n }\n ix-typography {\n flex-grow: 1;\n @include ellipsis;\n }\n\n .blind-header-title-label {\n @include ellipsis;\n padding-inline-end: 0.5rem;\n }\n\n .blind-header-title-sublabel {\n @include ellipsis;\n padding-inline: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n min-width: 0;\n }\n\n .blind-header-labels {\n display: inline-flex;\n flex-grow: 1;\n min-width: 0;\n }\n\n .blind-content {\n display: block;\n padding: 1rem;\n transition-property: padding;\n transition-duration: var(--theme-default-time);\n transition-timing-function: ease-in;\n\n &.hide {\n max-height: 0;\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n\n .header-actions {\n pointer-events: all;\n margin-left: auto;\n }\n}\n\n$blind-variants: (\n alarm,\n critical,\n info,\n insight,\n neutral,\n notification,\n success,\n warning,\n primary,\n outline\n);\n\n@each $variant in $blind-variants {\n @include blind($variant);\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant \| 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Secondary label inside blind header\n * @since 2.0.0\n /\n @Prop() sublabel: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Blind variant\n * @since 2.0.0\n /\n @Prop() variant: BlindVariant = 'insight';\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private blindId = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick() {\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host\n class={{\n [`blind-${this.variant}`]: true,\n }}\n >\n <div class={'blind-header-wrapper'}>\n <button\n class={{\n 'blind-header': true,\n [`blind-${this.variant}`]: true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n aria-controls={`ix-blind-content-section-${this.blindId}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={() => this.onHeaderClick()}\n >\n <slot name=\"custom-header\"></slot>\n </button>\n\n <div class={'blind-header-content'}>\n <ix-icon\n class=\"collapse-icon\"\n name={'chevron-right-small'}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-primary'\n : `color-${this.variant}--contrast`\n }\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.blindId}`}\n >\n {this.label !== undefined ? (\n <Fragment>\n {this.icon && (\n <ix-icon\n class=\"blind-header-title-icon\"\n name={this.icon}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-std-text'\n : `color-${this.variant}--contrast`\n }\n ></ix-icon>\n )}\n <div class={'blind-header-title-row'}>\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.label} format=\"label-lg\" bold>\n <div\n class=\"blind-header-title-label\"\n title={this.label}\n >\n {this.label}\n </div>\n </ix-typography>\n </div>\n\n {this.sublabel && (\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.sublabel}>\n <div class=\"blind-header-title-sublabel\">\n {this.sublabel}\n </div>\n </ix-typography>\n </div>\n )}\n </div>\n <div class=\"header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n </Fragment>\n ) : null}\n </div>\n </div>\n </div>\n <section\n id={`ix-blind-content-section-${this.blindId}`}\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n {!this.collapsed ? <slot></slot> : null}\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-blind.entry.js","mappings":"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","names":[],"sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.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/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n@mixin blind($variant: 'insight') {\n :host(.blind-#{$variant}) {\n @if $variant == 'outline' {\n border: solid\n var(--theme-blind--border-thickness)\n var(--theme-blind-base--border-color);\n }\n\n .blind-header {\n @if $variant == 'outline' {\n background-color: var(--theme-color-ghost);\n } @else {\n background-color: var(--theme-color-#{$variant});\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n @include ghost-hover-pressed;\n } @else {\n @include hover {\n background-color: var(--theme-color-#{$variant}--hover);\n }\n\n @include active {\n background-color: var(--theme-color-#{$variant}--active);\n }\n }\n }\n\n @if $variant == 'insight' or $variant == 'outline' {\n .blind-header-title-label {\n color: var(--theme-color-std-text);\n }\n .blind-header-title-sublabel {\n color: var(--theme-color-soft-text);\n }\n } @else {\n .blind-header-title-label,\n .blind-header-title-sublabel {\n color: var(--theme-color-#{$variant}--contrast);\n }\n }\n\n @if $variant == 'outline' {\n border-color: var(--theme-color-soft-bdr);\n } @else {\n background-color: var(--theme-blind-base--background);\n }\n }\n}\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n border-radius: var(--theme-blind--border-radius);\n overflow: hidden;\n\n .blind-header-wrapper {\n position: relative;\n min-height: 3rem;\n height: 3rem;\n overflow: hidden;\n }\n\n .blind-header-content {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-start;\n\n width: 100%;\n height: 100%;\n\n pointer-events: none;\n padding-left: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n position: relative;\n align-items: center;\n flex-grow: 1;\n margin-right: 0.5rem;\n }\n\n .blind-header {\n all: unset;\n @include ellipsis;\n\n display: block;\n position: absolute;\n\n top: 0px;\n left: 0px;\n\n pointer-events: all;\n\n padding-left: 2.5rem;\n min-height: 3rem;\n height: 3rem;\n width: calc(100% - 2 var(--theme-blind--border-thickness));\n border: solid var(--theme-blind--border-thickness) transparent;\n border-radius: var(--theme-blind--border-radius)\n var(--theme-blind--border-radius) 0 0;\n cursor: pointer;\n\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n outline: none;\n }\n }\n\n .blind-header-title-icon,\n .collapse-icon {\n margin-right: $small-space;\n }\n\n .blind-header-title-row {\n display: flex;\n flex-grow: 1;\n overflow: hidden;\n }\n\n .blind-header-title-col {\n display: inline-flex;\n align-items: center;\n width: calc(100% - 1rem);\n overflow: hidden;\n }\n\n .blind-header-title-col:not(:first-of-type) {\n justify-content: flex-end;\n }\n ix-typography {\n flex-grow: 1;\n @include ellipsis;\n }\n\n .blind-header-title-label {\n @include ellipsis;\n padding-inline-end: 0.5rem;\n }\n\n .blind-header-title-sublabel {\n @include ellipsis;\n padding-inline: 0.5rem;\n }\n\n .blind-header-title {\n display: flex;\n align-items: center;\n flex-grow: 1;\n height: 100%;\n min-width: 0;\n }\n\n .blind-header-labels {\n display: inline-flex;\n flex-grow: 1;\n min-width: 0;\n }\n\n .blind-content {\n display: block;\n padding: 1rem;\n transition-property: padding;\n transition-duration: var(--theme-default-time);\n transition-timing-function: ease-in;\n\n &.hide {\n max-height: 0;\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n\n .header-actions {\n pointer-events: all;\n margin-left: auto;\n }\n}\n\n$blind-variants: (\n alarm,\n critical,\n info,\n insight,\n neutral,\n notification,\n success,\n warning,\n primary,\n outline\n);\n\n@each $variant in $blind-variants {\n @include blind($variant);\n}\n","/\n SPDX-FileCopyrightText: 2023 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant \| 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n tag: 'ix-blind',\n styleUrl: 'blind.scss',\n shadow: true,\n})\nexport class Blind {\n /\n Collapsed state\n /\n @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n /\n Label of blind\n /\n @Prop() label: string;\n\n /\n Secondary label inside blind header\n * @since 2.0.0\n /\n @Prop() sublabel: string;\n\n /\n Optional icon to be displayed next to the header label\n * @since 1.5.0\n /\n @Prop() icon: string;\n\n /\n Blind variant\n * @since 2.0.0\n /\n @Prop() variant: BlindVariant = 'insight';\n\n /\n Collapsed state changed\n */\n @Event() collapsedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxBlindElement;\n\n private chevronRef: HTMLElement;\n private blindId = ++sequentialInstanceId;\n\n constructor() {}\n\n private onHeaderClick() {\n this.collapsed = !this.collapsed;\n this.collapsedChange.emit(this.collapsed);\n }\n\n componentDidLoad() {\n this.animateCollapse(this.collapsed);\n }\n\n get content() {\n return this.hostElement.shadowRoot.querySelector('.blind-content');\n }\n\n @Watch('collapsed')\n animation(isCollapsed: boolean) {\n this.animateCollapse(isCollapsed);\n }\n\n private animateCollapse(isCollapsed: boolean) {\n if (isCollapsed) {\n this.rotateChevronRight();\n } else {\n this.rotateChevronDown();\n }\n }\n\n private rotateChevronDown() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 90,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 1,\n });\n }\n\n private rotateChevronRight() {\n anime({\n targets: this.chevronRef,\n duration: 150,\n easing: 'easeInOutSine',\n rotateZ: 0,\n });\n anime({\n targets: this.content,\n duration: 150,\n easing: 'easeInOutSine',\n opacity: 0,\n });\n }\n\n render() {\n return (\n <Host\n class={{\n [`blind-${this.variant}`]: true,\n }}\n >\n <div class={'blind-header-wrapper'}>\n <button\n class={{\n 'blind-header': true,\n [`blind-${this.variant}`]: true,\n closed: this.collapsed,\n }}\n type=\"button\"\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n aria-controls={`ix-blind-content-section-${this.blindId}`}\n aria-expanded={a11yBoolean(!this.collapsed)}\n onClick={() => this.onHeaderClick()}\n >\n <slot name=\"custom-header\"></slot>\n </button>\n\n <div class={'blind-header-content'}>\n <ix-icon\n class=\"collapse-icon\"\n name={'chevron-right-small'}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-primary'\n : `color-${this.variant}--contrast`\n }\n ref={(ref) => (this.chevronRef = ref)}\n ></ix-icon>\n <div\n class=\"blind-header-title\"\n id={`ix-blind-header-title-${this.blindId}`}\n >\n {this.label !== undefined ? (\n <Fragment>\n {this.icon && (\n <ix-icon\n class=\"blind-header-title-icon\"\n name={this.icon}\n color={\n this.variant === 'insight' \|\| this.variant === 'outline'\n ? 'color-std-text'\n : `color-${this.variant}--contrast`\n }\n ></ix-icon>\n )}\n <div class={'blind-header-title-row'}>\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.label} format=\"label-lg\" bold>\n <div\n class=\"blind-header-title-label\"\n title={this.label}\n >\n {this.label}\n </div>\n </ix-typography>\n </div>\n\n {this.sublabel && (\n <div class=\"blind-header-title-col\">\n <ix-typography title={this.sublabel}>\n <div class=\"blind-header-title-sublabel\">\n {this.sublabel}\n </div>\n </ix-typography>\n </div>\n )}\n </div>\n <div class=\"header-actions\">\n <slot name=\"header-actions\"></slot>\n </div>\n </Fragment>\n ) : null}\n </div>\n </div>\n </div>\n <section\n id={`ix-blind-content-section-${this.blindId}`}\n aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n >\n <div\n class={{\n 'blind-content': true,\n hide: this.collapsed,\n }}\n >\n {!this.collapsed ? <slot></slot> : null}\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"version":3}