@siemens/ix 2.0.0-beta.0 → 2.0.0-beta.1

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

@@ -7,13 +7,36 @@
  * 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 { screenMode } from '../utils/screen/service';
 export class BasicNavigation {
   constructor() {
     this.applicationName = undefined;
     this.hideHeader = false;
-    this.mode = 'large';
+    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');
@@ -26,9 +49,17 @@ export class BasicNavigation {
     (_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() {
@@ -43,8 +74,8 @@ export class BasicNavigation {
   render() {
     return (h(Host, { "data-role": "", class: {
         'hide-header': this.hideHeader,
-        [`mode-${this.mode}`]: true,
-      } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName, mode: this.mode }, 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)))));
+        [`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 "shadow"; }
@@ -94,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;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAQrD,MAAM,OAAO,eAAe;;;sBAWL,KAAK;gBAEJ,OAAO;;EAE7B,IAAI,IAAI;IACN,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;EACnD,CAAC;EAIO,cAAc;;IACpB,IAAI,cAAc,CAAC,QAAQ,EAAE;MAC3B,OAAO;KACR;IACD,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;EAC/B,CAAC;EAED,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,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;KAClD;EACH,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;EACjC,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,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;QAChE,YAAM,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAQ,CACf,CACzB,CAAC,CAAC,CAAC,IAAI;MACR,WAAK,KAAK,EAAC,oBAAoB;QAC7B,YAAM,IAAI,EAAC,MAAM,GAAQ;QACzB,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;UACvD,eAAa,CACT,CACF,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 { menuController } from '../utils/menu-service/menu-service';\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  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\n  @State() mode: Mode = 'large';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\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    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.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          [`mode-${this.mode}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName} mode={this.mode}>\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,"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"]}

package/dist/collection/components/breadcrumb/breadcrumb.css

@@ -18,6 +18,22 @@
 /* Font sizes */
 /* Line heights */
 /* Animation timings */
+/*
+ * 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
  *
@@ -35,93 +51,53 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
   display: flex;
-  height: 2.5rem;
   justify-content: flex-start;
+  height: 2.5rem;
   align-items: center;
   background-color: transparent;
   overflow: hidden;
 }
-:host .crumb {
-  position: relative;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  white-space: nowrap;
-  border-radius: var(--theme-breadcrumb--border-radius);
-  height: 2rem;
-  max-height: 2rem;
-  min-width: 0;
-  -webkit-margin-end: 0.25rem;
-          margin-inline-end: 0.25rem;
-  padding: 0.5rem 0 0.5rem 0.25rem;
-  outline: none;
-  cursor: pointer;
-}
-:host .crumb:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .crumb:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-breadcrumb-btn--background--hover);
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
 }
-:host .crumb:not(.disabled):not(:disabled):hover .crumb-text,
-:host .crumb:not(.disabled):not(:disabled):hover .glyph {
-  color: var(--theme-breadcrumb-btn--color--hover);
-}
-:host .crumb:not(.disabled):not(:disabled):hover .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-btn-arrow--color--hover);
-}
-:host .crumb:not(.disabled):not(:disabled) {
-  cursor: pointer;
+:host ::-webkit-scrollbar-button {
+  display: none;
 }
-:host .crumb:not(.disabled):not(:disabled):active {
-  background-color: var(--theme-breadcrumb-btn--background--active);
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
 }
-:host .crumb:not(.disabled):not(:disabled):active .crumb-text,
-:host .crumb:not(.disabled):not(:disabled):active .glyph {
-  color: var(--theme-breadcrumb-btn--color--active);
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
 }
-:host .crumb:not(.disabled):not(:disabled):active .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-btn-arrow--color--active);
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
 }
-:host .crumb .crumb-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  font-weight: 700;
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
 }
-:host .crumb .crumb-text ix-icon {
-  -webkit-margin-end: 0.25rem;
-          margin-inline-end: 0.25rem;
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
 }
-:host .crumb .crumb-text + .glyph-chevron-right-small {
-  -webkit-margin-start: 0.25rem;
-          margin-inline-start: 0.25rem;
-  -webkit-margin-end: 0;
-          margin-inline-end: 0;
-}
-:host .crumb.last {
-  background-color: transparent !important;
-  cursor: default;
-  -webkit-padding-end: 0.25rem;
-          padding-inline-end: 0.25rem;
-}
-:host .crumb.clickable:not(.remove-hover):not(.disabled):not(:disabled):focus-visible {
-  border-color: var(--theme-focus--border-color);
+:host ::-webkit-scrollbar-corner {
+  display: none;
 }
-:host .crumb:not(:last-of-type) {
-  flex-shrink: 0;
-  max-width: 14rem;
+:host .previous-button {
+  width: 3rem;
+  min-width: 0px;
 }
 :host .crumb-dropdown {
   overflow: visible;
 }
-:host .crumb-dropdown .glyph::after {
-  display: none;
-}
 :host .remove-anchor::after {
   display: none;
 }
@@ -133,91 +109,11 @@
   display: inline-block;
   font-weight: 700;
 }
-:host .more-text .glyph {
-  line-height: unset;
+:host .more-text ix-icon {
+  padding-top: 2px;
 }
+:host nav,
+:host ol,
 :host .crumb-items {
   display: contents;
-}
-:host .crumb.btn {
-  background-color: var(--theme-breadcrumb-btn--background);
-  border: var(--theme-btn--btn-thickness) solid transparent;
-  transition: 150ms;
-}
-:host .crumb.btn .crumb-text,
-:host .crumb.btn .glyph {
-  color: var(--theme-breadcrumb-btn--color);
-}
-:host .crumb.btn .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-btn-arrow--color);
-}
-:host .crumb.btn.last .crumb-text {
-  color: var(--theme-breadcrumb-btn-last--color);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-breadcrumb-btn--background--hover);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text,
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph {
-  color: var(--theme-breadcrumb-btn--color--hover);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-btn-arrow--color--hover);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):active {
-  background-color: var(--theme-breadcrumb-btn--background--active);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text,
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .glyph {
-  color: var(--theme-breadcrumb-btn--color--active);
-}
-:host .crumb.btn.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-btn-arrow--color--active);
-}
-:host .crumb.ghost {
-  background-color: var(--theme-breadcrumb-ghost--background);
-  border: var(--theme-btn--ghost-thickness) solid transparent;
-  transition: 150ms;
-}
-:host .crumb.ghost .crumb-text,
-:host .crumb.ghost .glyph {
-  color: var(--theme-breadcrumb-ghost--color);
-}
-:host .crumb.ghost .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-ghost-arrow--color);
-}
-:host .crumb.ghost.last .crumb-text {
-  color: var(--theme-breadcrumb-ghost-last--color);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-breadcrumb-ghost--background--hover);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text,
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph {
-  color: var(--theme-breadcrumb-ghost--color--hover);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-ghost-arrow--color--hover);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):active {
-  background-color: var(--theme-breadcrumb-ghost--background--active);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text,
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .glyph {
-  color: var(--theme-breadcrumb-ghost--color--active);
-}
-:host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text + .glyph-chevron-right-small {
-  color: var(--theme-breadcrumb-ghost-arrow--color--active);
 }