@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/collection/components/application/application.css

@@ -0,0 +1,106 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  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;
+}

package/dist/collection/components/application/application.js

@@ -0,0 +1,220 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host } from '@stencil/core';
+import { ApplicationLayoutContext } from '../utils/application-layout/context';
+import { applicationLayoutService } from '../utils/application-layout/service';
+import { useContextProvider } from '../utils/context';
+import { menuController } from '../utils/menu-service/menu-service';
+import { hasSlottedElements } from '../utils/shadow-dom';
+import { themeSwitcher } from '../utils/theme-switcher';
+/** @internal */
+export class Application {
+  constructor() {
+    this.theme = undefined;
+    this.themeSystemAppearance = false;
+    this.forceBreakpoint = undefined;
+    this.breakpoints = ['sm', 'md', 'lg'];
+    this.breakpoint = 'lg';
+    this.applicationSidebarSlotted = false;
+  }
+  forceLayoutChange(newMode) {
+    if (!newMode) {
+      applicationLayoutService.enableBreakpointDetection();
+      return;
+    }
+    applicationLayoutService.disableBreakpointDetection();
+    applicationLayoutService.setBreakpoint(newMode);
+  }
+  onBreakpointsChange(breakpoints) {
+    applicationLayoutService.setBreakpoints(breakpoints);
+  }
+  get menu() {
+    return this.hostElement.querySelector('ix-menu');
+  }
+  get applicationSidebarSlot() {
+    return this.hostElement.shadowRoot.querySelector('.application-sidebar slot');
+  }
+  onContentClick() {
+    var _a;
+    if (menuController.isPinned) {
+      return;
+    }
+    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+  }
+  componentWillLoad() {
+    applicationLayoutService.setBreakpoints(this.breakpoints);
+    this.contextProvider = useContextProvider(this.hostElement, ApplicationLayoutContext, {
+      hideHeader: false,
+      host: 'basic-navigation',
+      sidebar: this.applicationSidebarSlotted,
+    });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      this.breakpoint = mode;
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+    if (this.forceBreakpoint) {
+      this.forceLayoutChange(this.forceBreakpoint);
+    }
+    this.changeTheme();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
+  }
+  changeTheme() {
+    if (!this.theme) {
+      if (this.themeSystemAppearance) {
+        themeSwitcher.setVariant();
+      }
+      return;
+    }
+    if (themeSwitcher.hasVariantSuffix(this.theme)) {
+      themeSwitcher.setTheme(`theme-${this.theme}`);
+      return;
+    }
+    themeSwitcher.setTheme(`theme-${this.theme}-dark`, this.themeSystemAppearance);
+  }
+  onApplicationSidebarChange() {
+    this.contextProvider.emit({
+      hideHeader: false,
+      host: 'basic-navigation',
+      sidebar: this.applicationSidebarSlotted,
+    });
+  }
+  render() {
+    return (h(Host, { "data-role": "", class: {
+        [`breakpoint-${this.breakpoint}`]: true,
+      } }, h("slot", { name: "application-header" }), h("div", { class: "application" }, h("slot", { name: "menu" }), h("aside", { class: {
+        'application-sidebar': true,
+        slotted: this.applicationSidebarSlotted,
+      }, onClick: () => this.onContentClick() }, h("slot", { name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { class: "content", onClick: () => this.onContentClick() }, h("slot", null)))));
+  }
+  static get is() { return "ix-application"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["application.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["application.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IxTheme",
+          "resolved": "\"classic\" | \"classic-dark\" | \"classic-light\" | string & {}",
+          "references": {
+            "IxTheme": {
+              "location": "import",
+              "path": "../utils/theme-switcher"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Application theme"
+        },
+        "attribute": "theme",
+        "reflect": false
+      },
+      "themeSystemAppearance": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use the system appearance dark or light"
+        },
+        "attribute": "theme-system-appearance",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "forceBreakpoint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Breakpoint | undefined",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {
+            "Breakpoint": {
+              "location": "import",
+              "path": "../utils/breakpoints"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Change the responsive layout of the menu structure"
+        },
+        "attribute": "force-breakpoint",
+        "reflect": false
+      },
+      "breakpoints": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Breakpoint[]",
+          "resolved": "(\"sm\" | \"md\" | \"lg\")[]",
+          "references": {
+            "Breakpoint": {
+              "location": "import",
+              "path": "../utils/breakpoints"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Supported layouts"
+        },
+        "defaultValue": "['sm', 'md', 'lg']"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "breakpoint": {},
+      "applicationSidebarSlotted": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "breakpoints",
+        "methodName": "onBreakpointsChange"
+      }, {
+        "propName": "theme",
+        "methodName": "changeTheme"
+      }, {
+        "propName": "themeSystemAppearance",
+        "methodName": "changeTheme"
+      }, {
+        "propName": "applicationSidebarSlotted",
+        "methodName": "onApplicationSidebarChange"
+      }];
+  }
+}
+//# sourceMappingURL=application.js.map

package/dist/collection/components/application/application.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"application.js","sourceRoot":"","sources":["../../../src/components/application/application.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, 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 { hasSlottedElements } from '../utils/shadow-dom';\nimport { IxTheme, themeSwitcher } from '../utils/theme-switcher';\nimport { Disposable } from '../utils/typed-event';\n\n/** @internal */\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  @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      }\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('applicationSidebarSlotted')\n  onApplicationSidebarChange() {\n    this.contextProvider.emit({\n      hideHeader: false,\n      host: 'basic-navigation',\n      sidebar: this.applicationSidebarSlotted,\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"]}

package/dist/collection/components/application-header/application-header.css

@@ -12,10 +12,12 @@
   position: relative;
   width: 100%;
   height: 2.75rem;
+  min-height: 2.75rem;
   padding-left: 1rem;
   color: var(--theme-app-header--color);
   background-color: var(--theme-app-header--background);
   border-bottom: var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);
+  z-index: var(--theme-z-index-fixed);
 }
 :host .name {
   margin-left: 2.5rem;
@@ -32,9 +34,9 @@
   color: var(--theme-app-header-logo--color);
 }
 
-:host(.mode-small) {
+:host(.breakpoint-sm) {
   padding-left: 0.5rem;
 }
-:host(.mode-small) .logo {
+:host(.breakpoint-sm) .logo {
   margin-left: 0.5rem;
 }

package/dist/collection/components/application-header/application-header.js

@@ -7,17 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from '@stencil/core';
+import { applicationLayoutService } from '../utils/application-layout';
 import { menuController } from '../utils/menu-service/menu-service';
 export class ApplicationHeader {
   constructor() {
     this.name = undefined;
-    this.mode = 'large';
+    this.breakpoint = 'lg';
     this.menuExpanded = false;
   }
   componentWillLoad() {
     this.menuDisposable = menuController.expandChange.on((show) => {
       this.menuExpanded = show;
     });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      this.breakpoint = mode;
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
   }
   componentDidLoad() {
     this.attachSiemensLogoIfLoaded();
@@ -47,7 +52,7 @@ export class ApplicationHeader {
     menuController.toggle();
   }
   render() {
-    return (h(Host, { class: { [`mode-${this.mode}`]: true } }, this.mode === 'small' ? (h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })) : null, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "name" }, this.name), h("slot", null)));
+    return (h(Host, { class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' ? (h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })) : null, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "name" }, this.name), h("slot", null)));
   }
   static get is() { return "ix-application-header"; }
   static get encapsulation() { return "shadow"; }
@@ -79,37 +84,12 @@ export class ApplicationHeader {
         },
         "attribute": "name",
         "reflect": false
-      },
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Mode",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {
-            "Mode": {
-              "location": "import",
-              "path": "../utils/screen/mode"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
-        },
-        "attribute": "mode",
-        "reflect": false,
-        "defaultValue": "'large'"
       }
     };
   }
   static get states() {
     return {
+      "breakpoint": {},
       "menuExpanded": {}
     };
   }

package/dist/collection/components/application-header/application-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"application-header.js","sourceRoot":"","sources":["../../../src/components/application-header/application-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AASpE,MAAM,OAAO,iBAAiB;;;gBAWP,OAAO;wBAEJ,KAAK;;EAK7B,iBAAiB;IACf,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE;MAC5D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC,CAAC,CAAC;EACL,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,yBAAyB,EAAE,CAAC;EACnC,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;IAC/B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;EACjC,CAAC;EAEO,aAAa;IACnB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC3D,mBAAmB,CACD,CAAC;IACrB,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC;MACtC,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;EAC5B,CAAC;EAEO,KAAK,CAAC,yBAAyB;IACrC,MAAM,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC9D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;MACzB,IAAI,CAAC,WAAW,CAAC,UAAU;SACxB,aAAa,CAAC,OAAO,CAAC;SACtB,WAAW,CAAC,WAAW,CAAC,CAAC;KAC7B;EACH,CAAC;EAEO,KAAK,CAAC,WAAW;IACvB,cAAc,CAAC,MAAM,EAAE,CAAC;EAC1B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE;MACzC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CACvB,sBACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,GACX,CACnB,CAAC,CAAC,CAAC,IAAI;MACR,WAAK,KAAK,EAAC,MAAM;QACf,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;MACN,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO;MACnC,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Mode } from '../utils/screen/mode';\nimport { Disposable } from '../utils/typed-event';\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  /**\n   * @internal\n   */\n  @Prop() mode: Mode = 'large';\n\n  @State() menuExpanded = false;\n\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n\n  componentWillLoad() {\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\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  render() {\n    return (\n      <Host class={{ [`mode-${this.mode}`]: true }}>\n        {this.mode === 'small' ? (\n          <ix-burger-menu\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-burger-menu>\n        ) : null}\n        <div class=\"logo\">\n          <slot name=\"logo\"></slot>\n        </div>\n        <div class=\"name\">{this.name}</div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"application-header.js","sourceRoot":"","sources":["../../../src/components/application-header/application-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAEvE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAQpE,MAAM,OAAO,iBAAiB;;;sBAQM,IAAI;wBACd,KAAK;;EAK7B,iBAAiB;IACf,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE;MAC5D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,cAAc,GAAG,wBAAwB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,EAAE;MAClE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACzB,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,UAAU,GAAG,wBAAwB,CAAC,UAAU,CAAC;EACxD,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,yBAAyB,EAAE,CAAC;EACnC,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;IAC/B,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;EACjC,CAAC;EAEO,aAAa;IACnB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC3D,mBAAmB,CACD,CAAC;IACrB,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC;MACtC,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC;EAC5B,CAAC;EAEO,KAAK,CAAC,yBAAyB;IACrC,MAAM,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC9D,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE;MACzB,IAAI,CAAC,WAAW,CAAC,UAAU;SACxB,aAAa,CAAC,OAAO,CAAC;SACtB,WAAW,CAAC,WAAW,CAAC,CAAC;KAC7B;EACH,CAAC;EAEO,KAAK,CAAC,WAAW;IACvB,cAAc,CAAC,MAAM,EAAE,CAAC;EAC1B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI,EAAE,EAClD,IAAI,EAAC,oBAAoB;MAExB,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CAC1B,sBACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,YAAY,GACX,CACnB,CAAC,CAAC,CAAC,IAAI;MACR,WAAK,KAAK,EAAC,MAAM;QACf,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB;MACN,WAAK,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO;MACnC,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\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\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n\n  componentWillLoad() {\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\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  render() {\n    return (\n      <Host\n        class={{ [`breakpoint-${this.breakpoint}`]: true }}\n        slot=\"application-header\"\n      >\n        {this.breakpoint === 'sm' ? (\n          <ix-burger-menu\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-burger-menu>\n        ) : null}\n        <div class=\"logo\">\n          <slot name=\"logo\"></slot>\n        </div>\n        <div class=\"name\">{this.name}</div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/application-header/test/application-headet.ct.js

@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  page.setViewportSize({
+    height: 500,
+    width: 1400,
+  });
+  await mount(`
+      <ix-basic-navigation application-name="test">
+      </ix-basic-navigation>
+    `);
+  const header = page.locator('ix-basic-navigation ix-application-header');
+  await expect(header).toBeVisible();
+  await expect(header).toHaveClass(/breakpoint-lg/);
+});
+//# sourceMappingURL=application-headet.ct.js.map

package/dist/collection/components/application-header/test/application-headet.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"application-headet.ct.js","sourceRoot":"","sources":["../../../../src/components/application-header/test/application-headet.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;EACxC,IAAI,CAAC,eAAe,CAAC;IACnB,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,IAAI;GACZ,CAAC,CAAC;EACH,MAAM,KAAK,CACT;;;KAGC,CACF,CAAC;EAEF,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,2CAA2C,CAAC,CAAC;EAEzE,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;EACnC,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;AACpD,CAAC,CAAC,CAAC","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 */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  page.setViewportSize({\n    height: 500,\n    width: 1400,\n  });\n  await mount(\n    `\n      <ix-basic-navigation application-name=\"test\">\n      </ix-basic-navigation>\n    `\n  );\n\n  const header = page.locator('ix-basic-navigation ix-application-header');\n\n  await expect(header).toBeVisible();\n  await expect(header).toHaveClass(/breakpoint-lg/);\n});\n"]}

package/dist/collection/components/application-sidebar/application-sidebar.css

@@ -0,0 +1,69 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  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;
+}

package/dist/collection/components/application-sidebar/application-sidebar.js

@@ -0,0 +1,70 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host } from '@stencil/core';
+import anime from 'animejs';
+import Animation from '../utils/animation';
+/** @internal */
+export class ApplicationSidebar {
+  constructor() {
+    this.visible = true;
+  }
+  listenToggleEvent() {
+    const visibility = !this.visible;
+    const animation = {
+      targets: this.hostElement,
+      width: visibility ? ['0', '22rem'] : ['22rem', '0'],
+      opacity: visibility ? [0, 1] : [1, 0],
+      easing: 'easeInSine',
+      duration: Animation.defaultTime,
+    };
+    const changeVisibility = () => {
+      this.visible = visibility;
+    };
+    if (visibility) {
+      animation.begin = changeVisibility.bind(this);
+    }
+    else {
+      animation.complete = changeVisibility.bind(this);
+    }
+    anime(animation);
+  }
+  render() {
+    return (h(Host, { slot: "application-sidebar", class: {
+        visible: this.visible,
+      } }, this.visible ? h("slot", null) : null));
+  }
+  static get is() { return "ix-application-sidebar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["application-sidebar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["application-sidebar.css"]
+    };
+  }
+  static get states() {
+    return {
+      "visible": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "application-sidebar-toggle",
+        "method": "listenToggleEvent",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=application-sidebar.js.map

package/dist/collection/components/application-sidebar/application-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"application-sidebar.js","sourceRoot":"","sources":["../../../src/components/application-sidebar/application-sidebar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAE3C,gBAAgB;AAMhB,MAAM,OAAO,kBAAkB;;mBAGV,IAAI;;EAKvB,iBAAiB;IACf,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IACjC,MAAM,SAAS,GAAsB;MACnC,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC;MACnD,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;MACrC,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE,SAAS,CAAC,WAAW;KAChC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;MAC5B,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;IAC5B,CAAC,CAAC;IAEF,IAAI,UAAU,EAAE;MACd,SAAS,CAAC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/C;SAAM;MACL,SAAS,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClD;IAED,KAAK,CAAC,SAAS,CAAC,CAAC;EACnB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,IAEA,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,eAAa,CAAC,CAAC,CAAC,IAAI,CAC/B,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, 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"]}

package/dist/collection/components/application-sidebar/events.js

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export class ApplicationSidebarToggleEvent extends Event {
+  constructor(force) {
+    super('application-sidebar-toggle', { bubbles: true, composed: true });
+    this.force = force;
+  }
+}
+//# sourceMappingURL=events.js.map

package/dist/collection/components/application-sidebar/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/components/application-sidebar/events.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,OAAO,6BAA8B,SAAQ,KAAK;EACtD,YAAmC,KAAe;IAChD,KAAK,CAAC,4BAA4B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IADtC,UAAK,GAAL,KAAK,CAAU;EAElD,CAAC;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport class ApplicationSidebarToggleEvent extends Event {\n  public constructor(public readonly force?: boolean) {\n    super('application-sidebar-toggle', { bubbles: true, composed: true });\n  }\n}\n"]}