@siemens/ix 2.0.0-beta.1 → 2.0.1

package/components/ix-blind.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxBlind extends Components.IxBlind, HTMLElement {}
+export const IxBlind: {
+  prototype: IxBlind;
+  new (): IxBlind;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-blind.js

@@ -0,0 +1,128 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { a as a11yBoolean } from './a11y.js';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const blindCss = ":host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-height:3rem;height:3rem;border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;padding-right:0.5rem;cursor:pointer;z-index:1}:host .blind-header .collapse-icon{padding:0.25rem 0.5rem}:host .blind-header .blind-header-title-col{flex-grow:1;flex-basis:0;display:inline-flex;align-items:center;min-width:0}:host .blind-header ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host .blind-header .blind-header-title-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .blind-header .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:0.5rem}:host .blind-header .blind-header-title,:host .blind-header .blind-header-title-basic{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header .blind-header-title-basic ix-icon{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:150ms;transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header .blind-header-title-label,:host(.blind-alarm) .blind-header .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header .blind-header-title-label,:host(.blind-critical) .blind-header .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header .blind-header-title-label,:host(.blind-info) .blind-header .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-insight){background-color:var(--theme-blind-base--background)}:host(.blind-insight) .blind-header{background-color:var(--theme-color-insight)}:host(.blind-insight) .blind-header .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-insight) .blind-header .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header .blind-header-title-label,:host(.blind-neutral) .blind-header .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-notification){background-color:var(--theme-blind-base--background)}:host(.blind-notification) .blind-header{background-color:var(--theme-color-notification)}:host(.blind-notification) .blind-header .blind-header-title-label,:host(.blind-notification) .blind-header .blind-header-title-sublabel{color:var(--theme-color-notification--contrast)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-notification--hover)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-notification--active)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header .blind-header-title-label,:host(.blind-success) .blind-header .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header .blind-header-title-label,:host(.blind-warning) .blind-header .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header .blind-header-title-label,:host(.blind-primary) .blind-header .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}";
+
+let sequentialInstanceId = 0;
+const Blind = /*@__PURE__*/ proxyCustomElement(class Blind extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.collapsedChange = createEvent(this, "collapsedChange", 7);
+    this.blindId = ++sequentialInstanceId;
+    this.collapsed = false;
+    this.label = undefined;
+    this.sublabel = undefined;
+    this.icon = undefined;
+    this.variant = 'insight';
+  }
+  onHeaderClick(e) {
+    if (e.target.closest('.header-actions')) {
+      return;
+    }
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    this.collapsed = !this.collapsed;
+    this.collapsedChange.emit(this.collapsed);
+  }
+  componentDidLoad() {
+    this.animateCollapse(this.collapsed);
+  }
+  get content() {
+    return this.hostElement.shadowRoot.querySelector('.blind-content');
+  }
+  animation(isCollapsed) {
+    this.animateCollapse(isCollapsed);
+  }
+  animateCollapse(isCollapsed) {
+    if (isCollapsed) {
+      this.rotateChevronRight();
+    }
+    else {
+      this.rotateChevronDown();
+    }
+  }
+  rotateChevronDown() {
+    anime({
+      targets: this.chevronRef,
+      duration: 150,
+      easing: 'easeInOutSine',
+      rotateZ: 90,
+    });
+    anime({
+      targets: this.content,
+      duration: 150,
+      easing: 'easeInOutSine',
+      opacity: 1,
+    });
+  }
+  rotateChevronRight() {
+    anime({
+      targets: this.chevronRef,
+      duration: 150,
+      easing: 'easeInOutSine',
+      rotateZ: 0,
+    });
+    anime({
+      targets: this.content,
+      duration: 150,
+      easing: 'easeInOutSine',
+      opacity: 0,
+    });
+  }
+  render() {
+    return (h(Host, { class: {
+        [`blind-${this.variant}`]: true,
+      } }, h("button", { class: {
+        'blind-header': true,
+        [`blind-${this.variant}`]: true,
+        closed: this.collapsed,
+      }, type: "button", "aria-labelledby": `ix-blind-header-title-${this.blindId}`, "aria-controls": `ix-blind-content-section-${this.blindId}`, "aria-expanded": a11yBoolean(!this.collapsed), onClick: (e) => this.onHeaderClick(e) }, h("ix-icon", { class: "collapse-icon", name: 'chevron-right-small', color: this.variant === 'insight' || this.variant === 'outline'
+        ? 'color-primary'
+        : `color-${this.variant}--contrast`, ref: (ref) => (this.chevronRef = ref) }), h("div", { class: "blind-header-title", id: `ix-blind-header-title-${this.blindId}` }, this.label !== undefined ? (h("span", { class: "blind-header-title-basic" }, h("div", { class: "blind-header-title-col" }, this.icon !== undefined ? (h("ix-icon", { name: this.icon, color: this.variant === 'insight' || this.variant === 'outline'
+        ? 'color-std-text'
+        : `color-${this.variant}--contrast` })) : (''), h("ix-typography", { title: this.label, format: "label-lg", bold: true }, h("div", { class: "blind-header-title-label", title: this.label }, this.label))), h("div", { class: "blind-header-title-col" }, this.sublabel !== undefined ? (h("ix-typography", { title: this.sublabel }, h("div", { class: "blind-header-title-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.blindId}`, "aria-labelledby": `ix-blind-header-title-${this.blindId}` }, h("div", { class: {
+        'blind-content': true,
+        hide: this.collapsed,
+      } }, !this.collapsed ? h("slot", null) : null))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "collapsed": ["animation"]
+  }; }
+  static get style() { return blindCss; }
+}, [1, "ix-blind", {
+    "collapsed": [1540],
+    "label": [1],
+    "sublabel": [1],
+    "icon": [1],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-blind", "ix-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-blind":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Blind);
+      }
+      break;
+    case "ix-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxBlind = Blind;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxBlind, defineCustomElement };
+
+//# sourceMappingURL=ix-blind.js.map

package/components/ix-blind.js.map

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

package/components/ix-breadcrumb-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxBreadcrumbItem extends Components.IxBreadcrumbItem, HTMLElement {}
+export const IxBreadcrumbItem: {
+  prototype: IxBreadcrumbItem;
+  new (): IxBreadcrumbItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxBreadcrumb extends Components.IxBreadcrumb, HTMLElement {}
+export const IxBreadcrumb: {
+  prototype: IxBreadcrumb;
+  new (): IxBreadcrumb;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-breadcrumb.js

@@ -0,0 +1,151 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, forceUpdate } from '@stencil/core/internal/client';
+import { b as a11yHostAttributes, a as a11yBoolean } from './a11y.js';
+import { c as createMutationObserver } from './mutation-observer.js';
+import { d as defineCustomElement$5 } from './breadcrumb-item.js';
+import { d as defineCustomElement$4 } from './dropdown.js';
+import { d as defineCustomElement$3 } from './dropdown-item.js';
+import { d as defineCustomElement$2 } from './spinner.js';
+
+const breadcrumbCss = ":host{display:flex;justify-content:flex-start;height:2.5rem;align-items:center;background-color:transparent;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .previous-button{width:3rem;min-width:0px}:host .crumb-dropdown{overflow:visible}:host .remove-anchor::after{display:none}:host .more-text{display:flex}:host .more-text .more-text-ellipsis{width:1rem;display:inline-block;font-weight:700}:host .more-text ix-icon{padding-top:2px}:host nav,:host ol,:host .crumb-items{display:contents}";
+
+let sequenceId = 0;
+const createId = (prefix = 'breadcrumb-') => {
+  return `${prefix}-${sequenceId++}`;
+};
+const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.itemClick = createEvent(this, "itemClick", 7);
+    this.nextClick = createEvent(this, "nextClick", 7);
+    this.previousButtonId = createId();
+    this.previousDropdownId = createId();
+    this.visibleItemCount = 9;
+    this.nextItems = [];
+    this.ghost = true;
+    this.ariaLabelPreviousButton = 'previous';
+    this.previousButtonRef = undefined;
+    this.nextButtonRef = undefined;
+    this.items = [];
+    this.isPreviousDropdownExpanded = false;
+  }
+  onNextItemsChange() {
+    this.onChildMutation();
+  }
+  onItemClick(item) {
+    this.itemClick.emit(item);
+  }
+  componentDidLoad() {
+    this.mutationObserver = createMutationObserver(() => this.onChildMutation());
+    this.mutationObserver.observe(this.hostElement, {
+      subtree: true,
+      childList: true,
+    });
+  }
+  componentWillLoad() {
+    this.onChildMutation();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  async onChildMutation() {
+    const updatedItems = this.getItems();
+    updatedItems.forEach((bc, index) => {
+      const shouldShowDropdown = this.nextItems.length !== 0 && updatedItems.length - 1 === index;
+      bc.ghost = this.ghost;
+      bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;
+      bc.isDropdownTrigger = shouldShowDropdown;
+      if (shouldShowDropdown) {
+        this.nextButtonRef = bc;
+      }
+      if (updatedItems.length < this.visibleItemCount) {
+        return;
+      }
+      bc.visible = index >= updatedItems.length - this.visibleItemCount;
+    });
+    this.items = updatedItems;
+  }
+  getItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
+  }
+  render() {
+    var _a, _b, _c, _d;
+    const a11y = a11yHostAttributes(this.hostElement);
+    return (h(Host, null, h("ix-dropdown", { id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        ? this.previousButtonRef
+        : null, onShowChanged: ({ detail }) => {
+        this.isPreviousDropdownExpanded = detail;
+        // Need to force update previous button to change `aria-expanded`
+        forceUpdate(this.hostElement.shadowRoot.getElementById(this.previousButtonId));
+      } }, this.items
+      .slice(0, this.items.length - this.visibleItemCount)
+      .map((item) => {
+      var _a;
+      const label = (_a = item.label) !== null && _a !== void 0 ? _a : item.innerText;
+      return (h("ix-dropdown-item", { label: label, onClick: () => {
+          this.onItemClick(label);
+        }, onItemClick: (event) => event.stopPropagation() }));
+    })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: (ref) => (this.previousButtonRef = ref), label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", null, h("slot", null))), h("ix-dropdown", { trigger: this.nextButtonRef }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
+        this.nextClick.emit({
+          event: e,
+          item,
+        });
+      }, onItemClick: (event) => event.stopPropagation() }))))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "nextItems": ["onNextItemsChange"]
+  }; }
+  static get style() { return breadcrumbCss; }
+}, [1, "ix-breadcrumb", {
+    "visibleItemCount": [2, "visible-item-count"],
+    "nextItems": [16],
+    "ghost": [4],
+    "ariaLabelPreviousButton": [1, "aria-label-previous-button"],
+    "previousButtonRef": [32],
+    "nextButtonRef": [32],
+    "items": [32],
+    "isPreviousDropdownExpanded": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-breadcrumb", "ix-breadcrumb-item", "ix-dropdown", "ix-dropdown-item", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-breadcrumb":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Breadcrumb);
+      }
+      break;
+    case "ix-breadcrumb-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxBreadcrumb = Breadcrumb;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxBreadcrumb, defineCustomElement };
+
+//# sourceMappingURL=ix-breadcrumb.js.map

package/components/ix-breadcrumb.js.map

@@ -0,0 +1 @@
+{"file":"ix-breadcrumb.js","mappings":"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","names":[],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  justify-content: flex-start;\n  height: 2.5rem;\n  align-items: center;\n  background-color: transparent;\n  overflow: hidden;\n\n  .previous-button {\n    width: 3rem;\n    min-width: 0px;\n  }\n\n  .crumb-dropdown {\n    overflow: visible;\n  }\n\n  .remove-anchor::after {\n    display: none;\n  }\n\n  .more-text {\n    display: flex;\n\n    .more-text-ellipsis {\n      width: 1rem;\n      display: inline-block;\n      font-weight: $font-weight-bold;\n    }\n\n    ix-icon {\n      // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon\n      // using padding-top to achieve same position as before\n      padding-top: 2px;\n    }\n  }\n\n  nav,\n  ol,\n  .crumb-items {\n    display: contents;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n  return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n  @Watch('nextItems')\n  onNextItemsChange() {\n    this.onChildMutation();\n  }\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() ghost = true;\n\n  /**\n   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n   * with conditionally hidden previous items\n   *\n   * @since 2.0.0\n   */\n  @Prop() ariaLabelPreviousButton = 'previous';\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n  @State() previousButtonRef: HTMLElement;\n  @State() nextButtonRef: HTMLElement;\n  @State() items: HTMLIxBreadcrumbItemElement[] = [];\n  @State() isPreviousDropdownExpanded = false;\n\n  private mutationObserver: MutationObserver;\n\n  private previousButtonId = createId();\n  private previousDropdownId = createId();\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() =>\n      this.onChildMutation()\n    );\n\n    this.mutationObserver.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.onChildMutation();\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async onChildMutation() {\n    const updatedItems = this.getItems();\n\n    updatedItems.forEach((bc, index) => {\n      const shouldShowDropdown =\n        this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n      bc.ghost = this.ghost;\n      bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;\n      bc.isDropdownTrigger = shouldShowDropdown;\n\n      if (shouldShowDropdown) {\n        this.nextButtonRef = bc;\n      }\n\n      if (updatedItems.length < this.visibleItemCount) {\n        return;\n      }\n\n      bc.visible = index >= updatedItems.length - this.visibleItemCount;\n    });\n\n    this.items = updatedItems;\n  }\n\n  private getItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    return (\n      <Host>\n        <ix-dropdown\n          id={this.previousDropdownId}\n          aria-label={this.ariaLabelPreviousButton}\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef\n              : null\n          }\n          onShowChanged={({ detail }) => {\n            this.isPreviousDropdownExpanded = detail;\n\n            // Need to force update previous button to change `aria-expanded`\n            forceUpdate(\n              this.hostElement.shadowRoot.getElementById(this.previousButtonId)\n            );\n          }}\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => {\n              const label = item.label ?? item.innerText;\n\n              return (\n                <ix-dropdown-item\n                  label={label}\n                  onClick={() => {\n                    this.onItemClick(label);\n                  }}\n                  onItemClick={(event) => event.stopPropagation()}\n                ></ix-dropdown-item>\n              );\n            })}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <ix-breadcrumb-item\n            id={this.previousButtonId}\n            ref={(ref) => (this.previousButtonRef = ref)}\n            label=\"...\"\n            tabIndex={1}\n            onItemClick={(event) => event.stopPropagation()}\n            aria-describedby={this.previousDropdownId}\n            aria-controls={this.previousDropdownId}\n            aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n            class={'previous-button'}\n          ></ix-breadcrumb-item>\n        ) : null}\n        <nav\n          class=\"crumb-items\"\n          aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n        >\n          <ol>\n            <slot></slot>\n          </ol>\n        </nav>\n        <ix-dropdown trigger={this.nextButtonRef}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n              onItemClick={(event) => event.stopPropagation()}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-burger-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxBurgerMenu extends Components.IxBurgerMenu, HTMLElement {}
+export const IxBurgerMenu: {
+  prototype: IxBurgerMenu;
+  new (): IxBurgerMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxButton extends Components.IxButton, HTMLElement {}
+export const IxButton: {
+  prototype: IxButton;
+  new (): IxButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-card-accordion.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxCardAccordion extends Components.IxCardAccordion, HTMLElement {}
+export const IxCardAccordion: {
+  prototype: IxCardAccordion;
+  new (): IxCardAccordion;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-card-content.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxCardContent extends Components.IxCardContent, HTMLElement {}
+export const IxCardContent: {
+  prototype: IxCardContent;
+  new (): IxCardContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-card-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxCardList extends Components.IxCardList, HTMLElement {}
+export const IxCardList: {
+  prototype: IxCardList;
+  new (): IxCardList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;