@siemens/ix 1.6.3 → 2.0.0-beta.1

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);
 }

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -6,132 +6,92 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, } from '@stencil/core';
-import animejs from 'animejs';
+import { forceUpdate, h, Host, } from '@stencil/core';
+import { a11yBoolean, a11yHostAttributes } from '../utils/a11y';
 import { createMutationObserver } from '../utils/mutation-observer';
+let sequenceId = 0;
+const createId = (prefix = 'breadcrumb-') => {
+  return `${prefix}-${sequenceId++}`;
+};
 export class Breadcrumb {
   constructor() {
+    this.previousButtonId = createId();
+    this.previousDropdownId = createId();
     this.visibleItemCount = 9;
     this.nextItems = [];
-    this.ghost = false;
+    this.ghost = true;
+    this.ariaLabelPreviousButton = 'previous';
     this.previousButtonRef = undefined;
     this.nextButtonRef = undefined;
     this.items = [];
+    this.isPreviousDropdownExpanded = false;
   }
-  get breadcrumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
-  }
-  get crumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));
+  onNextItemsChange() {
+    this.onChildMutation();
   }
   onItemClick(item) {
     this.itemClick.emit(item);
   }
   componentDidLoad() {
-    this.mutationObserver = createMutationObserver(() => {
-      const updatedItems = this.getItems();
-      const update = () => {
-        this.items = updatedItems;
-      };
-      if (updatedItems.length >= this.items.length) {
-        update();
-      }
-      else if (updatedItems.length < this.items.length) {
-        const last = this.crumbItems[this.crumbItems.length - 1];
-        this.animationFadeOut(last, () => update());
-      }
-    });
-    this.mutationObserver.observe(this.hostElement.querySelector('.crumb-items'), {
+    this.mutationObserver = createMutationObserver(() => this.onChildMutation());
+    this.mutationObserver.observe(this.hostElement, {
       subtree: true,
       childList: true,
     });
   }
   componentWillLoad() {
-    this.items = this.getItems();
-  }
-  getItems() {
-    return this.breadcrumbItems.map((item) => {
-      return { label: item.label, icon: item.icon };
-    });
+    this.onChildMutation();
   }
   disconnectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
-  animationFadeOut(ref, complete) {
-    animejs({
-      targets: ref,
-      translateX: '-100%',
-      duration: 150,
-      opacity: [1, 0],
-      easing: 'linear',
-      complete: () => complete(),
-    });
-  }
-  animationFadeIn(ref) {
-    animejs({
-      targets: ref,
-      duration: 150,
-      opacity: [0, 1],
-      translateX: ['-100%', '0%'],
-      easing: 'linear',
+  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;
   }
-  handleLastButtonRef(ref, last) {
-    var _a;
-    if (last) {
-      this.animationFadeIn(ref);
-    }
-    if (last && ((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length)) {
-      this.nextButtonRef = ref;
-    }
-  }
-  sliceHiddenItems() {
-    let sliceIndex = 0;
-    if (this.items.length > this.visibleItemCount) {
-      sliceIndex = this.items.length - this.visibleItemCount;
-    }
-    return this.items.slice(sliceIndex);
-  }
-  clickItem(item, last) {
-    if (!last) {
-      this.onItemClick(item);
-    }
-  }
-  renderBreadcrumbItems() {
-    return this.sliceHiddenItems().map((item, index, array) => {
-      var _a;
-      const last = index === array.length - 1;
-      const isLastItem = last && !((_a = this.nextItems) === null || _a === void 0 ? void 0 : _a.length);
-      return (h("div", { ref: (ref) => this.handleLastButtonRef(ref, last), "data-breadcrumb": index, class: {
-          crumb: true,
-          clickable: true,
-          ghost: this.ghost,
-          btn: !this.ghost,
-          last: isLastItem,
-          'remove-hover': isLastItem,
-        }, onClick: () => this.clickItem(item.label, last), "data-testid": "item" }, h("span", { class: "crumb-text remove-anchor" }, item.icon ? h("ix-icon", { name: item.icon, size: "16" }) : '', h("span", { style: {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        } }, item.label)), !isLastItem ? (h("span", { class: "glyph glyph-18 glyph-chevron-right-small text-default-text" })) : null));
-    });
+  getItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
   }
   render() {
-    var _a, _b, _c;
-    return (h(Host, null, h("ix-dropdown", { trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+    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 }, this.items
+        : 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) => (h("ix-dropdown-item", { label: item.label, onClick: () => this.onItemClick(item.label) })))), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("div", { class: "crumb crumb-dropdown", ref: (ref) => (this.previousButtonRef = ref) }, h("span", { class: "remove-anchor more-text" }, h("span", { class: "more-text-ellipsis" }, "..."), h("span", { class: "glyph glyph-16 glyph-chevron-right" })))) : null, h("div", { class: "crumb-items" }, this.renderBreadcrumbItems(), h("slot", null)), h("ix-dropdown", { trigger: this.nextButtonRef }, (_c = this.nextItems) === null || _c === void 0 ? void 0 : _c.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
+      .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() }))))));
   }
   static get is() { return "ix-breadcrumb"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["breadcrumb.scss"]
@@ -194,7 +154,28 @@ export class Breadcrumb {
         },
         "attribute": "ghost",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "true"
+      },
+      "ariaLabelPreviousButton": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\nwith conditionally hidden previous items"
+        },
+        "attribute": "aria-label-previous-button",
+        "reflect": false,
+        "defaultValue": "'previous'"
       }
     };
   }
@@ -202,7 +183,8 @@ export class Breadcrumb {
     return {
       "previousButtonRef": {},
       "nextButtonRef": {},
-      "items": {}
+      "items": {},
+      "isPreviousDropdownExpanded": {}
     };
   }
   static get events() {
@@ -243,5 +225,11 @@ export class Breadcrumb {
       }];
   }
   static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "nextItems",
+        "methodName": "onNextItemsChange"
+      }];
+  }
 }
 //# sourceMappingURL=breadcrumb.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.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  State,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  scoped: true,\n})\nexport class Breadcrumb {\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\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 = false;\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\n  @State() nextButtonRef: HTMLElement;\n\n  @Element() hostElement: HTMLIxBreadcrumbElement;\n\n  get breadcrumbItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  get crumbItems() {\n    return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));\n  }\n\n  @State() items: { label: string; icon?: string }[] = [];\n\n  private mutationObserver: MutationObserver;\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() => {\n      const updatedItems = this.getItems();\n      const update = () => {\n        this.items = updatedItems;\n      };\n\n      if (updatedItems.length >= this.items.length) {\n        update();\n      } else if (updatedItems.length < this.items.length) {\n        const last = this.crumbItems[this.crumbItems.length - 1] as HTMLElement;\n        this.animationFadeOut(last, () => update());\n      }\n    });\n\n    this.mutationObserver.observe(\n      this.hostElement.querySelector('.crumb-items'),\n      {\n        subtree: true,\n        childList: true,\n      }\n    );\n  }\n\n  componentWillLoad() {\n    this.items = this.getItems();\n  }\n\n  private getItems() {\n    return this.breadcrumbItems.map((item) => {\n      return { label: item.label, icon: item.icon };\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private animationFadeOut(ref: HTMLElement, complete: () => void) {\n    animejs({\n      targets: ref,\n      translateX: '-100%',\n      duration: 150,\n      opacity: [1, 0],\n      easing: 'linear',\n      complete: () => complete(),\n    });\n  }\n\n  private animationFadeIn(ref: HTMLElement) {\n    animejs({\n      targets: ref,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  private handleLastButtonRef(ref: HTMLDivElement, last: boolean) {\n    if (last) {\n      this.animationFadeIn(ref);\n    }\n    if (last && this.nextItems?.length) {\n      this.nextButtonRef = ref;\n    }\n  }\n\n  private sliceHiddenItems() {\n    let sliceIndex = 0;\n\n    if (this.items.length > this.visibleItemCount) {\n      sliceIndex = this.items.length - this.visibleItemCount;\n    }\n\n    return this.items.slice(sliceIndex);\n  }\n\n  private clickItem(item: string, last: boolean) {\n    if (!last) {\n      this.onItemClick(item);\n    }\n  }\n\n  private renderBreadcrumbItems() {\n    return this.sliceHiddenItems().map((item, index, array) => {\n      const last = index === array.length - 1;\n\n      const isLastItem = last && !this.nextItems?.length;\n      return (\n        <div\n          ref={(ref) => this.handleLastButtonRef(ref, last)}\n          data-breadcrumb={index}\n          class={{\n            crumb: true,\n            clickable: true,\n            ghost: this.ghost,\n            btn: !this.ghost,\n            last: isLastItem,\n            'remove-hover': isLastItem,\n          }}\n          onClick={() => this.clickItem(item.label, last)}\n          data-testid=\"item\"\n        >\n          <span class=\"crumb-text remove-anchor\">\n            {item.icon ? <ix-icon name={item.icon} size=\"16\"></ix-icon> : ''}\n            <span\n              style={{\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n              }}\n            >\n              {item.label}\n            </span>\n          </span>\n          {!isLastItem ? (\n            <span class=\"glyph glyph-18 glyph-chevron-right-small text-default-text\"></span>\n          ) : null}\n        </div>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef\n              : null\n          }\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => (\n              <ix-dropdown-item\n                label={item.label}\n                onClick={() => this.onItemClick(item.label)}\n              ></ix-dropdown-item>\n            ))}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <div\n            class=\"crumb crumb-dropdown\"\n            ref={(ref) => (this.previousButtonRef = ref)}\n          >\n            <span class=\"remove-anchor more-text\">\n              <span class=\"more-text-ellipsis\">...</span>\n              <span class=\"glyph glyph-16 glyph-chevron-right\"></span>\n            </span>\n          </div>\n        ) : null}\n        <div class=\"crumb-items\">\n          {this.renderBreadcrumbItems()}\n          <slot></slot>\n        </div>\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            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.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  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"]}

package/dist/collection/components/breadcrumb/test/breadcrumb.ct.js

@@ -0,0 +1,97 @@
+/*
+ * 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.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+test('renders', async ({ mount, page }) => {
+  await mount(`
+  <ix-breadcrumb>
+    <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item>
+    <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item>
+    <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item>
+  </ix-breadcrumb>`);
+  const breadcrumb = page.locator('ix-breadcrumb');
+  const breadcrumbItem1 = page.locator('ix-breadcrumb-item').nth(0);
+  const breadcrumbItem2 = page.locator('ix-breadcrumb-item').nth(1);
+  const breadcrumbItem3 = page.locator('ix-breadcrumb-item').nth(2);
+  await expect(breadcrumb).toHaveClass(/hydrated/);
+  await expect(breadcrumbItem1).toBeVisible();
+  await expect(breadcrumbItem2).toBeVisible();
+  await expect(breadcrumbItem3).toBeVisible();
+});
+test('should show hidden items', async ({ mount, page }) => {
+  await mount(`
+  <ix-breadcrumb visible-item-count="2">
+    <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item>
+    <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item>
+    <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item>
+  </ix-breadcrumb>`);
+  const breadcrumb = page.locator('ix-breadcrumb');
+  await breadcrumb.evaluate((breadcrumbElement) => {
+    const item = document.createElement('ix-breadcrumb-item');
+    item.label = 'NewItem';
+    breadcrumbElement.appendChild(item);
+  });
+  const breadcrumbItem1 = page.locator('ix-breadcrumb-item').nth(0);
+  const breadcrumbItemNewItem = page.locator('ix-breadcrumb-item').nth(3);
+  const showHiddenButton = breadcrumb.getByRole('button', { name: '...' });
+  await page.waitForTimeout(1000);
+  await expect(breadcrumbItem1).not.toBeVisible();
+  await expect(breadcrumbItemNewItem).toBeVisible();
+  await showHiddenButton.click();
+  const dropdownElement = breadcrumb.locator('ix-dropdown').nth(0);
+  const dropdownItem1 = dropdownElement.getByRole('button', { name: 'Item 1' });
+  const dropdownItem2 = dropdownElement.getByRole('button', { name: 'Item 2' });
+  await expect(dropdownElement).toBeVisible();
+  await expect(dropdownItem1).toBeVisible();
+  await expect(dropdownItem2).toBeVisible();
+});
+test('should change label', async ({ mount, page }) => {
+  await mount(`
+  <ix-breadcrumb>
+    <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item>
+    <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item>
+    <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item>
+  </ix-breadcrumb>`);
+  const breadcrumbItem = page.locator('ix-breadcrumb-item').nth(2);
+  await expect(breadcrumbItem).toHaveText('Item 3');
+  await breadcrumbItem.evaluate((item) => {
+    item.label = 'UPDATED';
+  });
+  await expect(breadcrumbItem).toHaveText('UPDATED');
+});
+test('should show next items', async ({ mount, page }) => {
+  await mount(`
+  <ix-breadcrumb>
+    <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item>
+    <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item>
+    <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item>
+  </ix-breadcrumb>`);
+  const breadcrumb = page.locator('ix-breadcrumb');
+  await breadcrumb.evaluate((bc) => {
+    bc.nextItems = ['Next Item 1', 'Next Item 2'];
+  });
+  await page.waitForTimeout(1000);
+  const lastItem = breadcrumb.locator('ix-breadcrumb-item').nth(2);
+  await lastItem.click();
+  const dropdownElement = breadcrumb.locator('ix-dropdown').nth(1);
+  const item1 = dropdownElement.locator('ix-dropdown-item').nth(0);
+  const item2 = dropdownElement.locator('ix-dropdown-item').nth(1);
+  await expect(dropdownElement).toBeVisible();
+  await expect(item1).toHaveText('Next Item 1');
+  await expect(item2).toHaveText('Next Item 2');
+});
+//# sourceMappingURL=breadcrumb.ct.js.map

package/dist/collection/components/breadcrumb/test/breadcrumb.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.ct.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/test/breadcrumb.ct.ts"],"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/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`\n  <ix-breadcrumb>\n    <ix-breadcrumb-item label=\"Item 1\"></ix-breadcrumb-item>\n    <ix-breadcrumb-item label=\"Item 2\"></ix-breadcrumb-item>\n    <ix-breadcrumb-item label=\"Item 3\"></ix-breadcrumb-item>\n  </ix-breadcrumb>`);\n  const breadcrumb = page.locator('ix-breadcrumb');\n  const breadcrumbItem1 = page.locator('ix-breadcrumb-item').nth(0);\n  const breadcrumbItem2 = page.locator('ix-breadcrumb-item').nth(1);\n  const breadcrumbItem3 = page.locator('ix-breadcrumb-item').nth(2);\n  await expect(breadcrumb).toHaveClass(/hydrated/);\n  await expect(breadcrumbItem1).toBeVisible();\n  await expect(breadcrumbItem2).toBeVisible();\n  await expect(breadcrumbItem3).toBeVisible();\n});\n\ntest('should show hidden items', async ({ mount, page }) => {\n  await mount(`\n  <ix-breadcrumb visible-item-count=\"2\">\n    <ix-breadcrumb-item label=\"Item 1\"></ix-breadcrumb-item>\n    <ix-breadcrumb-item label=\"Item 2\"></ix-breadcrumb-item>\n    <ix-breadcrumb-item label=\"Item 3\"></ix-breadcrumb-item>\n  </ix-breadcrumb>`);\n  const breadcrumb = page.locator('ix-breadcrumb');\n  await breadcrumb.evaluate((breadcrumbElement: HTMLIxBreadcrumbElement) => {\n    const item = document.createElement('ix-breadcrumb-item');\n    item.label = 'NewItem';\n\n    breadcrumbElement.appendChild(item);\n  });\n\n  const breadcrumbItem1 = page.locator('ix-breadcrumb-item').nth(0);\n  const breadcrumbItemNewItem = page.locator('ix-breadcrumb-item').nth(3);\n\n  const showHiddenButton = breadcrumb.getByRole('button', { name: '...' });\n\n  await page.waitForTimeout(1000);\n  await expect(breadcrumbItem1).not.toBeVisible();\n  await expect(breadcrumbItemNewItem).toBeVisible();\n\n  await showHiddenButton.click();\n\n  const dropdownElement = breadcrumb.locator('ix-dropdown').nth(0);\n  const dropdownItem1 = dropdownElement.getByRole('button', { name: 'Item 1' });\n  const dropdownItem2 = dropdownElement.getByRole('button', { name: 'Item 2' });\n  await expect(dropdownElement).toBeVisible();\n  await expect(dropdownItem1).toBeVisible();\n  await expect(dropdownItem2).toBeVisible();\n});\n\ntest('should change label', async ({ mount, page }) => {\n  await mount(`\n  <ix-breadcrumb>\n    <ix-breadcrumb-item label=\"Item 1\"></ix-breadcrumb-item>\n    <ix-breadcrumb-item label=\"Item 2\"></ix-breadcrumb-item>\n    <ix-breadcrumb-item label=\"Item 3\"></ix-breadcrumb-item>\n  </ix-breadcrumb>`);\n  const breadcrumbItem = page.locator('ix-breadcrumb-item').nth(2);\n\n  await expect(breadcrumbItem).toHaveText('Item 3');\n\n  await breadcrumbItem.evaluate((item: HTMLIxBreadcrumbItemElement) => {\n    item.label = 'UPDATED';\n  });\n  await expect(breadcrumbItem).toHaveText('UPDATED');\n});\n\ntest('should show next items', async ({ mount, page }) => {\n  await mount(`\n  <ix-breadcrumb>\n    <ix-breadcrumb-item label=\"Item 1\"></ix-breadcrumb-item>\n    <ix-breadcrumb-item label=\"Item 2\"></ix-breadcrumb-item>\n    <ix-breadcrumb-item label=\"Item 3\"></ix-breadcrumb-item>\n  </ix-breadcrumb>`);\n  const breadcrumb = page.locator('ix-breadcrumb');\n  await breadcrumb.evaluate((bc: HTMLIxBreadcrumbElement) => {\n    bc.nextItems = ['Next Item 1', 'Next Item 2'];\n  });\n\n  await page.waitForTimeout(1000);\n\n  const lastItem = breadcrumb.locator('ix-breadcrumb-item').nth(2);\n  await lastItem.click();\n\n  const dropdownElement = breadcrumb.locator('ix-dropdown').nth(1);\n\n  const item1 = dropdownElement.locator('ix-dropdown-item').nth(0);\n  const item2 = dropdownElement.locator('ix-dropdown-item').nth(1);\n  await expect(dropdownElement).toBeVisible();\n\n  await expect(item1).toHaveText('Next Item 1');\n  await expect(item2).toHaveText('Next Item 2');\n});\n"]}