@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/collection/components/avatar/avatar.js

@@ -0,0 +1,80 @@
+/*
+ * 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.
+ */
+function DefaultAvatar(props) {
+  const { initials } = props;
+  if (initials) {
+    return h("div", { class: 'avatar-initials' }, initials);
+  }
+  return (h("svg", { class: 'avatar-image', xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { id: "avatar-path-background", 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" }), h("path", { id: "avatar-path-person", 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" }))));
+}
+import { h, Host } from '@stencil/core';
+/**
+ * @since 2.0.0
+ */
+export class Avatar {
+  constructor() {
+    this.image = undefined;
+    this.initials = undefined;
+  }
+  render() {
+    return (h(Host, null, h("li", { class: "avatar" }, this.image ? (h("img", { src: this.image, class: "avatar-image" })) : (h(DefaultAvatar, { initials: this.initials })))));
+  }
+  static get is() { return "ix-avatar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["avatar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["avatar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "image": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display a avatar image"
+        },
+        "attribute": "image",
+        "reflect": false
+      },
+      "initials": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display the initials of the user. Will be overwritten by image"
+        },
+        "attribute": "initials",
+        "reflect": false
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,SAAS,aAAa,CAAC,KAA4B;EACjD,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;EAE3B,IAAI,QAAQ,EAAE;IACZ,OAAO,WAAK,KAAK,EAAE,iBAAiB,IAAG,QAAQ,CAAO,CAAC;GACxD;EAED,OAAO,CACL,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;MAChC,YACE,EAAE,EAAC,wBAAwB,EAC3B,CAAC,EAAC,kIACiE,GACnE;MACF,YACE,EAAE,EAAC,oBAAoB,EACvB,CAAC,EAAC,2TAGgE,GAClE,CACA,CACA,CACP,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE;;GAEG;AAMH,MAAM,OAAO,MAAM;;;;;EAejB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,UAAI,KAAK,EAAC,QAAQ,IACf,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc,GAAO,CAClD,CAAC,CAAC,CAAC,CACF,EAAC,aAAa,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC3C,CACE,CACA,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\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\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\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 a 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  render() {\n    return (\n      <Host>\n        <li class=\"avatar\">\n          {this.image ? (\n            <img src={this.image} class=\"avatar-image\"></img>\n          ) : (\n            <DefaultAvatar initials={this.initials} />\n          )}\n        </li>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/basic-navigation/basic-navigation.css

@@ -1,3 +1,19 @@
+/*
+ * 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
  *
@@ -7,28 +23,77 @@
  * 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 .content {
   display: flex;
-  height: calc(100% - 2.75rem);
-  width: calc(100% - 3.25rem);
+  height: 100%;
+  width: 100%;
   position: relative;
   margin-left: 3.25rem;
   overflow: auto;
 }
-:host.hide-header .content {
+: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(.mode-mobile) .content {
+:host(.breakpoint-lg) .content {
+  margin-left: 0rem;
+}
+
+:host(.breakpoint-sm) .content {
   margin-left: 0px;
   width: 100%;
 }

package/dist/collection/components/basic-navigation/basic-navigation.js

@@ -7,26 +7,63 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { h, Host } from '@stencil/core';
-import { screenMode } from '../utils/screen/service';
+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';
 export class BasicNavigation {
   constructor() {
     this.applicationName = undefined;
     this.hideHeader = false;
-    this.mode = 'desktop';
+    this.forceBreakpoint = undefined;
+    this.breakpoints = ['sm', 'md', 'lg'];
+    this.breakpoint = 'lg';
+  }
+  onHideHeaderChange() {
+    var _a;
+    (_a = this.contextProvider) === null || _a === void 0 ? void 0 : _a.emit({
+      hideHeader: this.hideHeader,
+      host: 'basic-navigation',
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+  }
+  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');
   }
+  onContentClick() {
+    var _a;
+    if (menuController.isPinned) {
+      return;
+    }
+    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.toggleMenu(false);
+  }
   componentWillLoad() {
-    if (this.hideHeader === false) {
-      this.modeDisposable = screenMode.onChange.on((mode) => (this.mode = mode));
-      this.mode = screenMode.mode;
+    applicationLayoutService.setBreakpoints(this.breakpoints);
+    this.contextProvider = useContextProvider(this.hostElement, ApplicationLayoutContext, {
+      hideHeader: this.hideHeader,
+      host: 'basic-navigation',
+    });
+    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {
+      this.breakpoint = mode;
+    });
+    this.breakpoint = applicationLayoutService.breakpoint;
+    if (this.forceBreakpoint) {
+      this.forceLayoutChange(this.forceBreakpoint);
     }
   }
   componentDidRender() {
     if (this.menu) {
-      this.appendMenu();
-      this.adjustMenuHeight();
       this.menu.applicationName = this.applicationName;
     }
   }
@@ -34,22 +71,14 @@ export class BasicNavigation {
     var _a;
     (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
   }
-  appendMenu() {
-    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
-  }
-  adjustMenuHeight() {
-    if (!this.hideHeader) {
-      this.menu.style.height = 'calc(100% - 2.75rem)';
-    }
-  }
   render() {
     return (h(Host, { "data-role": "", class: {
         'hide-header': this.hideHeader,
-        [`mode-${this.mode}`]: true,
-      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo" }))) : null, h("div", { id: "menu-placeholder" }), h("div", { class: "content", onClick: () => this.menu.toggleMenu(false) }, h("slot", null))));
+        [`breakpoint-${this.breakpoint}`]: true,
+      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { class: "navigation-content" }, h("slot", { name: "menu" }), h("div", { class: "content", onClick: () => this.onContentClick() }, h("slot", null)))));
   }
   static get is() { return "ix-basic-navigation"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["basic-navigation.scss"]
@@ -96,14 +125,66 @@ export class BasicNavigation {
         "attribute": "hide-header",
         "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 {
-      "mode": {}
+      "breakpoint": {}
     };
   }
   static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "hideHeader",
+        "methodName": "onHideHeaderChange"
+      }, {
+        "propName": "breakpoints",
+        "methodName": "onBreakpointsChange"
+      }];
+  }
 }
 //# sourceMappingURL=basic-navigation.js.map

package/dist/collection/components/basic-navigation/basic-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic-navigation.js","sourceRoot":"","sources":["../../../src/components/basic-navigation/basic-navigation.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQrD,MAAM,OAAO,eAAe;;;sBAWL,KAAK;gBAEJ,SAAS;;EAE/B,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;EACnD,CAAC;EAID,iBAAiB;IACf,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE;MAC7B,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC,QAAQ,CAAC,EAAE,CAC1C,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAC7B,CAAC;MACF,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC;KAC7B;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;MACxB,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;KAClD;EACH,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;EACjC,CAAC;EAEO,UAAU;IAChB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7E,CAAC;EAEO,gBAAgB;IACtB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,sBAAsB,CAAC;KACjD;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,iBACO,EAAE,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI,CAAC,UAAU;QAC9B,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;OAC5B;MAEA,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAClB,6BAAuB,IAAI,EAAE,IAAI,CAAC,eAAe;QAC/C,YAAM,IAAI,EAAC,MAAM,GAAQ,CACH,CACzB,CAAC,CAAC,CAAC,IAAI;MACR,WAAK,EAAE,EAAC,kBAAkB,GAAO;MACjC,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QAC7D,eAAa,CACT,CACD,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 { Mode } from '../utils/screen/mode';\nimport { screenMode } from '../utils/screen/service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  scoped: 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\n  @State() mode: Mode = 'desktop';\n\n  get menu(): HTMLIxMenuElement {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable: Disposable;\n\n  componentWillLoad() {\n    if (this.hideHeader === false) {\n      this.modeDisposable = screenMode.onChange.on(\n        (mode) => (this.mode = mode)\n      );\n      this.mode = screenMode.mode;\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.appendMenu();\n      this.adjustMenuHeight();\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  private appendMenu() {\n    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);\n  }\n\n  private adjustMenuHeight() {\n    if (!this.hideHeader) {\n      this.menu.style.height = 'calc(100% - 2.75rem)';\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`mode-${this.mode}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div id=\"menu-placeholder\"></div>\n        <div class=\"content\" onClick={() => this.menu.toggleMenu(false)}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"basic-navigation.js","sourceRoot":"","sources":["../../../src/components/basic-navigation/basic-navigation.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 { 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\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"]}

package/dist/collection/components/blind/blind.css

@@ -72,6 +72,21 @@
   color: var(--theme-blind-header-icon-closed--color);
   padding: 0.25rem 0.5rem;
 }
+:host .blind-header ix-typography,
+:host .blind-header .blind-header-title-label,
+:host .blind-header .blind-header-title-sublabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+}
+:host .blind-header .blind-header-title-label {
+  -webkit-padding-end: 0.5rem;
+          padding-inline-end: 0.5rem;
+}
+:host .blind-header .blind-header-title-sublabel {
+  padding-inline: 0.5rem;
+}
 :host .blind-header .blind-header-title,
 :host .blind-header .blind-header-title-basic {
   overflow: hidden;
@@ -105,19 +120,19 @@
 :host .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header:not(.disabled):not(:disabled):hover {
+:host .blind-header:not(.disabled):not(:disabled):hover, :host .blind-header:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-blind-header-open--background--hover);
 }
-:host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon {
+:host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon, :host .blind-header:not(.disabled):not(:disabled):hover .collapse-icon {
   color: var(--theme-blind-header-icon-open--color--hover);
 }
 :host .blind-header:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header:not(.disabled):not(:disabled):active {
+:host .blind-header:not(.disabled):not(:disabled):active, :host .blind-header:not(.disabled):not(:disabled).active {
   background-color: var(--theme-blind-header-open--background--active);
 }
-:host .blind-header:not(.disabled):not(:disabled):active .collapse-icon {
+:host .blind-header:not(.disabled):not(:disabled):active .collapse-icon, :host .blind-header:not(.disabled):not(:disabled).active .collapse-icon {
   color: var(--theme-blind-header-icon-open--color--active);
 }
 :host .blind-header:not(.disabled):not(:disabled):focus-visible {
@@ -130,19 +145,19 @@
 :host .blind-header.closed:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):hover {
+:host .blind-header.closed:not(.disabled):not(:disabled):hover, :host .blind-header.closed:not(.disabled):not(:disabled):hover {
   background-color: var(--theme-blind-header-open--background--hover);
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon {
+:host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon, :host .blind-header.closed:not(.disabled):not(:disabled):hover .collapse-icon {
   color: var(--theme-blind-header-icon-closed--color--hover);
 }
 :host .blind-header.closed:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):active {
+:host .blind-header.closed:not(.disabled):not(:disabled):active, :host .blind-header.closed:not(.disabled):not(:disabled).active {
   background-color: var(--theme-blind-header-open--background--active);
 }
-:host .blind-header.closed:not(.disabled):not(:disabled):active .collapse-icon {
+:host .blind-header.closed:not(.disabled):not(:disabled):active .collapse-icon, :host .blind-header.closed:not(.disabled):not(:disabled).active .collapse-icon {
   color: var(--theme-blind-header-icon-closed--color--active);
 }
 :host .blind-content {

package/dist/collection/components/blind/blind.js

@@ -15,6 +15,7 @@ export class Blind {
     this.id = ++sequentialInstanceId;
     this.collapsed = false;
     this.label = undefined;
+    this.sublabel = undefined;
     this.icon = undefined;
   }
   onHeaderClick(e) {
@@ -75,10 +76,10 @@ export class Blind {
     return (h(Host, null, h("button", { class: {
         'blind-header': true,
         closed: this.collapsed,
-      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: 'collapse-icon', name: "chevron-right-small", ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("span", { class: "blind-header-title-default" }, this.label), h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, h("div", { class: {
+      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.id}`, "aria-controls": `ix-blind-content-section-${this.id}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: 'collapse-icon', name: "chevron-right-small", ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.id}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon })) : (''), h("ix-typography", { format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label)), this.sublabel !== undefined ? (h("ix-typography", { color: "soft" }, h("div", { class: "blind-header-title-sublabel", title: this.sublabel }, this.sublabel))) : (''), h("span", { class: "header-actions", onClick: (e) => e.stopImmediatePropagation() }, h("slot", { name: "header-actions" })))) : (h("slot", { name: "custom-header" })))), h("section", { id: `ix-blind-content-section-${this.id}`, "aria-labelledby": `ix-blind-header-title-${this.id}` }, h("div", { class: {
         'blind-content': true,
         hide: this.collapsed,
-      } }, h("slot", null)))));
+      } }, !this.collapsed ? h("slot", null) : null))));
   }
   static get is() { return "ix-blind"; }
   static get encapsulation() { return "shadow"; }
@@ -129,6 +130,26 @@ export class Blind {
         "attribute": "label",
         "reflect": false
       },
+      "sublabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Secondary label inside blind header"
+        },
+        "attribute": "sublabel",
+        "reflect": false
+      },
       "icon": {
         "type": "string",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\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   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private id = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\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        <button\n          class={{\n            'blind-header': true,\n            closed: this.collapsed,\n          }}\n          type=\"button\"\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n          aria-controls={`ix-blind-content-section-${this.id}`}\n          aria-expanded={a11yBoolean(!this.collapsed)}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <ix-icon\n            class={'collapse-icon'}\n            name=\"chevron-right-small\"\n            ref={(ref) => (this.chevronRef = ref)}\n          ></ix-icon>\n          <div\n            class=\"blind-header-title\"\n            id={`ix-blind-header-title-${this.id}`}\n          >\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                {this.icon !== undefined ? (\n                  <ix-icon name={this.icon}></ix-icon>\n                ) : (\n                  ''\n                )}\n                <span class=\"blind-header-title-default\">{this.label}</span>\n                <span\n                  class=\"header-actions\"\n                  onClick={(e) => e.stopImmediatePropagation()}\n                >\n                  <slot name=\"header-actions\"></slot>\n                </span>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </button>\n        <section\n          id={`ix-blind-content-section-${this.id}`}\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"blind.js","sourceRoot":"","sources":["../../../src/components/blind/blind.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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { a11yBoolean } from '../utils/a11y';\n\nlet sequentialInstanceId = 0;\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   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private id = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick(e: Event) {\n    if ((e.target as Element).closest('.header-actions')) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\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        <button\n          class={{\n            'blind-header': true,\n            closed: this.collapsed,\n          }}\n          type=\"button\"\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\n          aria-controls={`ix-blind-content-section-${this.id}`}\n          aria-expanded={a11yBoolean(!this.collapsed)}\n          onClick={(e) => this.onHeaderClick(e)}\n        >\n          <ix-icon\n            class={'collapse-icon'}\n            name=\"chevron-right-small\"\n            ref={(ref) => (this.chevronRef = ref)}\n          ></ix-icon>\n          <div\n            class=\"blind-header-title\"\n            id={`ix-blind-header-title-${this.id}`}\n          >\n            {this.label !== undefined ? (\n              <span class=\"blind-header-title-basic\">\n                {this.icon !== undefined ? (\n                  <ix-icon name={this.icon}></ix-icon>\n                ) : (\n                  ''\n                )}\n                <ix-typography format=\"label-lg\" bold>\n                  <div class=\"blind-header-title-label\" title={this.label}>\n                    {this.label}\n                  </div>\n                </ix-typography>\n                {this.sublabel !== undefined ? (\n                  <ix-typography color=\"soft\">\n                    <div\n                      class=\"blind-header-title-sublabel\"\n                      title={this.sublabel}\n                    >\n                      {this.sublabel}\n                    </div>\n                  </ix-typography>\n                ) : (\n                  ''\n                )}\n                <span\n                  class=\"header-actions\"\n                  onClick={(e) => e.stopImmediatePropagation()}\n                >\n                  <slot name=\"header-actions\"></slot>\n                </span>\n              </span>\n            ) : (\n              <slot name=\"custom-header\"></slot>\n            )}\n          </div>\n        </button>\n        <section\n          id={`ix-blind-content-section-${this.id}`}\n          aria-labelledby={`ix-blind-header-title-${this.id}`}\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"]}