npm - @siemens/ix - Versions diffs - 2.0.0-beta.0 → 2.0.0-beta.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1215) hide show

package/dist/esm/ix-breadcrumb_2.entry.js CHANGED Viewed

@@ -1,148 +1,156 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7334ee80.js';
-import { a as anime } from './anime.es-185e9087.js';
+import { r as registerInstance, c as createEvent, h, f as forceUpdate, H as Host, g as getElement, F as Fragment } from './index-eb0be730.js';
+import { b as a11yHostAttributes, a as a11yBoolean } from './a11y-aa83c2d1.js';
 import { c as createMutationObserver } from './mutation-observer-7d01bbea.js';
+import { c as chevronRightSmall } from './index-7b24b7fa.js';
+import { a as anime } from './anime.es-185e9087.js';
+import { B as BaseButton } from './base-button-87048318.js';
-const breadcrumbCss = ".sc-ix-breadcrumb-h{display:flex;height:2.5rem;justify-content:flex-start;align-items:center;background-color:transparent;overflow:hidden}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb{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}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-width:0;font-weight:700}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb ix-icon.sc-ix-breadcrumb{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{-webkit-margin-start:0.25rem;margin-inline-start:0.25rem;-webkit-margin-end:0;margin-inline-end:0}.sc-ix-breadcrumb-h .crumb.last.sc-ix-breadcrumb{background-color:transparent !important;cursor:default;-webkit-padding-end:0.25rem;padding-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(:last-of-type){flex-shrink:0;max-width:14rem}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb{overflow:visible}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .remove-anchor.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb{display:flex}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .more-text-ellipsis.sc-ix-breadcrumb{width:1rem;display:inline-block;font-weight:700}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{line-height:unset}.sc-ix-breadcrumb-h .crumb-items.sc-ix-breadcrumb{display:contents}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-btn--background);border:var(--theme-btn--btn-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color)}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color)}.sc-ix-breadcrumb-h .crumb.btn.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-last--color)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-ghost--background);border:var(--theme-btn--ghost-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color)}.sc-ix-breadcrumb-h .crumb.ghost.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-last--color)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-ghost--background--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-ghost--background--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--active)}";
+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 = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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 = 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) {
-    anime({
-      targets: ref,
-      translateX: '-100%',
-      duration: 150,
-      opacity: [1, 0],
-      easing: 'linear',
-      complete: () => complete(),
-    });
-  }
-  animationFadeIn(ref) {
-    anime({
-      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() }))))));
   }
   get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "nextItems": ["onNextItemsChange"]
+  }; }
 };
 Breadcrumb.style = breadcrumbCss;
-const breadcrumbItemCss = ".sc-ix-breadcrumb-item-h{display:block}";
+const breadcrumbItemCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}: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 button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{min-width:5rem}:host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}: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 button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;align-items:center;margin-right:0.25rem;max-width:15rem;min-width:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host li{display:contents}:host .btn{pointer-events:all;width:-moz-fit-content;width:fit-content;padding-right:0;padding-left:0.25rem}:host .chevron{pointer-events:none;margin-left:0.5rem;margin-right:0rem;--theme-color-std-text:var(--theme-color-soft-text)}:host ::slotted(a[href]){text-decoration:none !important}:host ::slotted(a[href]:active){text-decoration:none !important}:host(:last-child) .btn:not(.dropdown-trigger){color:var(--theme-color-soft-text)}:host(.hide-chevron){cursor:default}:host(.hide-chevron) .btn{padding-right:0.5rem;pointer-events:none}:host(.invisible){display:none}:host(:focus-visible){outline:none}";
 const BreadcrumbItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.itemClick = createEvent(this, "itemClick", 7);
     this.label = undefined;
     this.icon = undefined;
+    this.ghost = true;
+    this.visible = true;
+    this.showChevron = true;
+    this.isDropdownTrigger = false;
+  }
+  componentDidLoad() {
+    this.animationFadeIn();
+  }
+  animationFadeIn() {
+    anime({
+      targets: this.hostElement,
+      duration: 150,
+      opacity: [0, 1],
+      translateX: ['-100%', '0%'],
+      easing: 'linear',
+    });
   }
   render() {
-    return (h(Host, null, h("slot", null)));
+    const a11y = a11yHostAttributes(this.hostElement);
+    const props = {
+      variant: this.ghost ? 'primary' : 'secondary',
+      outline: false,
+      ghost: this.ghost,
+      iconOnly: false,
+      iconOval: false,
+      disabled: false,
+      icon: this.icon,
+      iconSize: '16',
+      loading: false,
+      selected: false,
+      type: 'button',
+      tabIndex: this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,
+      extraClasses: {
+        'dropdown-trigger': this.isDropdownTrigger,
+      },
+      ariaAttributes: a11y,
+    };
+    if (!this.visible) {
+      return h(Host, { class: 'invisible' });
+    }
+    return (h(Host, { class: {
+        'hide-chevron': !this.showChevron,
+      }, onClick: () => this.itemClick.emit(this.label) }, h("li", null, h(BaseButton, Object.assign({}, props, { afterContent: h(Fragment, null, this.showChevron ? (h("ix-icon", { name: chevronRightSmall, size: "16", class: 'chevron' })) : null) }), this.label, h("slot", null)))));
   }
+  get hostElement() { return getElement(this); }
 };
 BreadcrumbItem.style = breadcrumbItemCss;

package/dist/esm/ix-breadcrumb_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-breadcrumb.ix-breadcrumb-item.entry.js","mappings":"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","names":["animejs"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=scoped","./src/components/breadcrumb/breadcrumb.tsx","./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=scoped","./src/components/breadcrumb-item/breadcrumb-item.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\n@mixin crumb-hover($variant) {\n @include hover {\n background-color: var(--theme-breadcrumb-#{$variant}--background--hover);\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--hover);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-breadcrumb-#{$variant}--background--active);\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--active);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n }\n }\n}\n\n@mixin breadcrumb($variant) {\n .crumb.#{$variant} {\n background-color: var(--theme-breadcrumb-#{$variant}--background);\n border: var(--theme-btn--#{$variant}-thickness) solid transparent;\n transition: $default-time;\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color);\n }\n\n &.last .crumb-text {\n color: var(--theme-breadcrumb-#{$variant}-last--color);\n }\n\n &.clickable:not(.remove-hover) {\n @include hover {\n background-color: var(\n --theme-breadcrumb-#{$variant}--background--hover\n );\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--hover);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n }\n }\n\n @include active {\n background-color: var(\n --theme-breadcrumb-#{$variant}--background--active\n );\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--active);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n }\n }\n }\n }\n}\n\n:host {\n display: flex;\n height: $large-control-height;\n justify-content: flex-start;\n align-items: center;\n background-color: transparent;\n overflow: hidden;\n\n .crumb {\n position: relative;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n white-space: nowrap;\n border-radius: var(--theme-breadcrumb--border-radius);\n height: $default-control-height;\n max-height: $default-control-height;\n min-width: 0;\n margin-inline-end: $tiny-space;\n padding: $small-space 0 $small-space $tiny-space;\n outline: none;\n cursor: pointer;\n\n @include crumb-hover('btn');\n\n .crumb-text {\n @include ellipsis;\n display: flex;\n align-items: center;\n min-width: 0;\n font-weight: $font-weight-bold;\n\n ix-icon {\n margin-inline-end: $tiny-space;\n }\n }\n\n .crumb-text + .glyph-chevron-right-small {\n margin-inline-start: $tiny-space;\n margin-inline-end: 0; // Overwrite global selector: .btn .glyph\n }\n\n &.last {\n background-color: transparent !important;\n cursor: default;\n padding-inline-end: $tiny-space;\n }\n\n &.clickable:not(.remove-hover) {\n @include focus-visible {\n border-color: var(--theme-focus--border-color);\n }\n }\n\n &:not(:last-of-type) {\n flex-shrink: 0;\n max-width: 14rem;\n }\n }\n\n .crumb-dropdown {\n overflow: visible;\n\n .glyph::after {\n display: none;\n }\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 .glyph {\n line-height: unset;\n }\n }\n\n .crumb-items {\n display: contents;\n }\n\n @include breadcrumb('btn');\n @include breadcrumb('ghost');\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 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","/\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:host {\n display: block;\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 { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n scoped: true,\n})\nexport class BreadcrumbItem {\n /\n Breadcrumb label\n /\n @Prop() label: string;\n\n /\n Icon to be displayed next ot the label\n */\n @Prop() icon: string;\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-breadcrumb.ix-breadcrumb-item.entry.js","mappings":"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","names":["animejs"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx","./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=shadow","./src/components/breadcrumb-item/breadcrumb-item.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","/\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 'mixins/shadow-dom/component';\n@import '../button/button-mixin';\n@import '../button/button';\n\n@include all-btn-variants;\n\n:host {\n @include ix-component;\n display: flex;\n position: relative;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n margin-right: 0.25rem;\n max-width: 15rem;\n min-width: 0;\n\n li {\n display: contents;\n }\n\n .btn {\n pointer-events: all;\n width: fit-content;\n padding-right: 0;\n padding-left: 0.25rem;\n }\n\n .chevron {\n pointer-events: none;\n margin-left: 0.5rem;\n margin-right: 0rem;\n --theme-color-std-text: var(--theme-color-soft-text);\n }\n\n ::slotted(a[href]) {\n text-decoration: none !important;\n }\n\n ::slotted(a[href]:active) {\n text-decoration: none !important;\n }\n}\n\n:host(:last-child) {\n .btn:not(.dropdown-trigger) {\n color: var(--theme-color-soft-text);\n }\n}\n\n:host(.hide-chevron) {\n cursor: default;\n\n .btn {\n padding-right: 0.5rem;\n pointer-events: none;\n }\n}\n\n:host(.invisible) {\n display: none;\n}\n\n:host(:focus-visible) {\n outline: none;\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 { chevronRightSmall } from '@siemens/ix-icons/icons';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Fragment,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\n\nexport type BreadcrumbItemLinkTarget =\n \| '_self'\n \| '_blank'\n \| '_parent'\n \| '_top'\n \| string;\n\n@Component({\n tag: 'ix-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n /\n Breadcrumb label\n /\n @Prop() label: string;\n\n /\n Icon to be displayed next ot the label\n /\n @Prop() icon: string;\n\n /@internal /\n @Prop() ghost: boolean = true;\n\n /*@internal /\n @Prop() visible = true;\n\n /*@internal /\n @Prop() showChevron = true;\n\n /** @internal /\n @Prop() isDropdownTrigger = false;\n\n /@internal /\n @Event() itemClick: EventEmitter<string>;\n\n componentDidLoad() {\n this.animationFadeIn();\n }\n\n animationFadeIn() {\n animejs({\n targets: this.hostElement,\n duration: 150,\n opacity: [0, 1],\n translateX: ['-100%', '0%'],\n easing: 'linear',\n });\n }\n\n render() {\n const a11y = a11yHostAttributes(this.hostElement);\n const props: BaseButtonProps = {\n variant: this.ghost ? 'primary' : 'secondary',\n outline: false,\n ghost: this.ghost,\n iconOnly: false,\n iconOval: false,\n disabled: false,\n icon: this.icon,\n iconSize: '16',\n loading: false,\n selected: false,\n type: 'button',\n tabIndex:\n this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n extraClasses: {\n 'dropdown-trigger': this.isDropdownTrigger,\n },\n ariaAttributes: a11y,\n };\n\n if (!this.visible) {\n return <Host class={'invisible'}></Host>;\n }\n\n return (\n <Host\n class={{\n 'hide-chevron': !this.showChevron,\n }}\n onClick={() => this.itemClick.emit(this.label)}\n >\n <li>\n <BaseButton\n {...props}\n afterContent={\n <Fragment>\n {this.showChevron ? (\n <ix-icon\n name={chevronRightSmall}\n size=\"16\"\n class={'chevron'}\n ></ix-icon>\n ) : null}\n </Fragment>\n }\n >\n {this.label}\n <slot></slot>\n </BaseButton>\n </li>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ix-burger-menu.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
-import { g as getButtonClasses } from './base-button-5bfeb71c.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
+import { g as getButtonClasses } from './base-button-87048318.js';
 import { a as a11yBoolean } from './a11y-aa83c2d1.js';
-const burgerMenuCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-btn-primary--background--selected)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover) !important;background-color:var(--theme-btn-primary--background--hover) !important;color:var(--theme-btn-primary--color--hover) !important}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-btn-primary--background--selected-hover);color:var(--theme-btn-primary--color--selected-hover)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active) !important;background-color:var(--theme-btn-primary--background--active) !important;color:var(--theme-btn-primary--color--active) !important}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-btn-primary--background--selected-active);color:var(--theme-btn-primary--color--selected-active)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-btn-outline-primary--background--selected)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover) !important;background-color:var(--theme-btn-outline-primary--background--hover) !important;color:var(--theme-btn-outline-primary--color--hover) !important}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-btn-outline-primary--background--selected-hover);color:var(--theme-btn-outline-primary--color--selected-hover)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active) !important;background-color:var(--theme-btn-outline-primary--background--active) !important;color:var(--theme-btn-outline-primary--color--active) !important}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-primary--background--selected-active);color:var(--theme-btn-outline-primary--color--selected-active)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-btn-invisible-primary--background--selected)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover) !important;color:var(--theme-btn-invisible-primary--color--hover) !important}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-btn-invisible-primary--background--selected-hover);color:var(--theme-btn-invisible-primary--color--selected-hover)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active) !important;color:var(--theme-btn-invisible-primary--color--active) !important}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--selected-active);color:var(--theme-btn-invisible-primary--color--selected-active)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-btn-secondary--background--selected)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover) !important;background-color:var(--theme-btn-secondary--background--hover) !important;color:var(--theme-btn-secondary--color--hover) !important}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-btn-secondary--background--selected-hover);color:var(--theme-btn-secondary--color--selected-hover)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active) !important;background-color:var(--theme-btn-secondary--background--active) !important;color:var(--theme-btn-secondary--color--active) !important}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-secondary--background--selected-active);color:var(--theme-btn-secondary--color--selected-active)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-btn-outline-secondary--background--selected)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover) !important;background-color:var(--theme-btn-outline-secondary--background--hover) !important;color:var(--theme-btn-outline-secondary--color--hover) !important}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-btn-outline-secondary--background--selected-hover);color:var(--theme-btn-outline-secondary--color--selected-hover)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active) !important;background-color:var(--theme-btn-outline-secondary--background--active) !important;color:var(--theme-btn-outline-secondary--color--active) !important}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-secondary--background--selected-active);color:var(--theme-btn-outline-secondary--color--selected-active)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-btn-invisible-secondary--background--selected)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover) !important;color:var(--theme-btn-invisible-secondary--color--hover) !important}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-btn-invisible-secondary--background--selected-hover);color:var(--theme-btn-invisible-secondary--color--selected-hover)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active) !important;color:var(--theme-btn-invisible-secondary--color--active) !important}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--selected-active);color:var(--theme-btn-invisible-secondary--color--selected-active)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:flex;justify-content:center;align-items:center;height:2rem;width:2.5rem;border-radius:var(--theme-btn--border-radius);pointer-events:all}:host *,:host *::after,:host *::before{box-sizing:border-box}:host svg{display:inline-block;vertical-align:middle}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)) .burger-menu-button{background-color:var(--theme-menu-btn--background--hover)}.burger-menu-button{width:40px;padding:0}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)) .burger-menu-button{background-color:var(--theme-menu-btn--background--active)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}:host(.expanded) ix-icon-button{transform:rotate(180deg)}";
+const burgerMenuCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:flex;justify-content:center;align-items:center;height:2rem;width:2.5rem;border-radius:var(--theme-btn--border-radius);pointer-events:all}: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 svg{display:inline-block;vertical-align:middle}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)) .burger-menu-button{background-color:var(--theme-menu-btn--background--hover)}.burger-menu-button{width:40px;padding:0}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)) .burger-menu-button{background-color:var(--theme-menu-btn--background--active)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}:host(.expanded) ix-icon-button{transform:rotate(180deg)}";
 const BurgerMenu = class {
   constructor(hostRef) {

package/dist/esm/ix-burger-menu.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-burger-menu.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,~~o4cAAo4c~~;;~~MC8B74c~~,UAAU;;;uBAIS,QAAQ;oBAKF,KAAK;kBAKxB,KAAK;;EAEtB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,MAAM,IACV,sBAAgB,IAAI,EAAC,sBAAsB,EAAC,KAAK,SAAkB,KAEnE,cACE,KAAK,kCACA,gBAAgB,CACjB,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,CACN,KACD,oBAAoB,EAAE,IAAI,KAE5B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,kBACxC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAExC,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,IAEX,YACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACR,YACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACR,YACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,CACJ,CACC,CACV,CACI,EACP;GACH;;;;;;","names":[],"sources":["./src/components/menu/burger-menu.scss?tag=ix-burger-menu&encapsulation=shadow","./src/components/menu/burger-menu.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@import 'common-variables';\n@import 'components/buttons';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n$focus-bdr-width: 0.0625rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n justify-content: center;\n align-items: center;\n height: 2rem;\n width: 2.5rem;\n border-radius: var(--theme-btn--border-radius);\n pointer-events: all;\n\n svg {\n display: inline-block;\n vertical-align: middle;\n }\n\n .line {\n fill: var(--theme-menu-btn--color);\n opacity: 1;\n x: 2px;\n transition: x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s,\n y 0.075s ease-in-out, opacity 0.075s linear 0.075s;\n transform-origin: center;\n }\n}\n\n@include host-hover {\n .burger-menu-button {\n background-color: var(--theme-menu-btn--background--hover);\n }\n}\n\n.burger-menu-button {\n width: 40px;\n padding: 0;\n}\n\n@include host-active {\n .burger-menu-button {\n background-color: var(--theme-menu-btn--background--active);\n }\n}\n\n:host(.expanded) {\n svg .line-1 {\n opacity: 1;\n transform: rotate(-45deg);\n y: 11px;\n }\n\n svg .line-2 {\n opacity: 0;\n x: 9;\n }\n\n svg .line-3 {\n opacity: 1;\n transform: rotate(45deg);\n y: 11px;\n }\n\n ix-icon-button {\n transform: rotate(180deg);\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/\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, h, Host, Prop } from '@stencil/core';\n\nimport { getButtonClasses } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @internal\n /\n@Component({\n tag: 'ix-burger-menu',\n styleUrl: './burger-menu.scss',\n shadow: true,\n})\nexport class BurgerMenu {\n /\n Accessibility label for the burger menu button (MANDATORY)\n /\n @Prop() ixAriaLabel: string = 'Expand';\n\n /\n Does burger menu button display the expanded or the not expanded state\n /\n @Prop({ reflect: true }) expanded = false;\n\n /\n Display as pinned\n */\n @Prop() pinned = false;\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expanded,\n }}\n >\n {this.pinned ? (\n <ix-icon-button icon=\"double-chevron-right\" ghost></ix-icon-button>\n ) : (\n <button\n class={{\n ...getButtonClasses(\n 'secondary',\n false,\n true,\n true,\n false,\n false,\n false\n ),\n 'burger-menu-button': true,\n }}\n type=\"button\"\n aria-label={this.ixAriaLabel ? this.ixAriaLabel : null}\n aria-pressed={a11yBoolean(this.expanded)}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n >\n <rect\n class=\"line line-1\"\n x=\"2\"\n y=\"5\"\n width=\"20\"\n height=\"2\"\n ></rect>\n <rect\n class=\"line line-2\"\n x=\"2\"\n y=\"11\"\n width=\"13\"\n height=\"2\"\n ></rect>\n <rect\n class=\"line line-3\"\n x=\"2\"\n y=\"17\"\n width=\"20\"\n height=\"2\"\n ></rect>\n </svg>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-burger-menu.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,6lcAA6lc;;MC8Btmc,UAAU;;;uBAIS,QAAQ;oBAKF,KAAK;kBAKxB,KAAK;;EAEtB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,MAAM,IACV,sBAAgB,IAAI,EAAC,sBAAsB,EAAC,KAAK,SAAkB,KAEnE,cACE,KAAK,kCACA,gBAAgB,CACjB,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,CACN,KACD,oBAAoB,EAAE,IAAI,KAE5B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,kBACxC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,IAExC,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,IAEX,YACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACR,YACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,EACR,YACE,KAAK,EAAC,aAAa,EACnB,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,IAAI,EACN,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,GAAG,GACJ,CACJ,CACC,CACV,CACI,EACP;GACH;;;;;;","names":[],"sources":["./src/components/menu/burger-menu.scss?tag=ix-burger-menu&encapsulation=shadow","./src/components/menu/burger-menu.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@import 'common-variables';\n@import 'legacy/components/buttons';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n$focus-bdr-width: 0.0625rem;\n\n:host {\n @include ix-component;\n\n display: flex;\n justify-content: center;\n align-items: center;\n height: 2rem;\n width: 2.5rem;\n border-radius: var(--theme-btn--border-radius);\n pointer-events: all;\n\n svg {\n display: inline-block;\n vertical-align: middle;\n }\n\n .line {\n fill: var(--theme-menu-btn--color);\n opacity: 1;\n x: 2px;\n transition: x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s,\n y 0.075s ease-in-out, opacity 0.075s linear 0.075s;\n transform-origin: center;\n }\n}\n\n@include host-hover {\n .burger-menu-button {\n background-color: var(--theme-menu-btn--background--hover);\n }\n}\n\n.burger-menu-button {\n width: 40px;\n padding: 0;\n}\n\n@include host-active {\n .burger-menu-button {\n background-color: var(--theme-menu-btn--background--active);\n }\n}\n\n:host(.expanded) {\n svg .line-1 {\n opacity: 1;\n transform: rotate(-45deg);\n y: 11px;\n }\n\n svg .line-2 {\n opacity: 0;\n x: 9;\n }\n\n svg .line-3 {\n opacity: 1;\n transform: rotate(45deg);\n y: 11px;\n }\n\n ix-icon-button {\n transform: rotate(180deg);\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/\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, h, Host, Prop } from '@stencil/core';\n\nimport { getButtonClasses } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/\n @internal\n /\n@Component({\n tag: 'ix-burger-menu',\n styleUrl: './burger-menu.scss',\n shadow: true,\n})\nexport class BurgerMenu {\n /\n Accessibility label for the burger menu button (MANDATORY)\n /\n @Prop() ixAriaLabel: string = 'Expand';\n\n /\n Does burger menu button display the expanded or the not expanded state\n /\n @Prop({ reflect: true }) expanded = false;\n\n /\n Display as pinned\n */\n @Prop() pinned = false;\n\n render() {\n return (\n <Host\n class={{\n expanded: this.expanded,\n }}\n >\n {this.pinned ? (\n <ix-icon-button icon=\"double-chevron-right\" ghost></ix-icon-button>\n ) : (\n <button\n class={{\n ...getButtonClasses(\n 'secondary',\n false,\n true,\n true,\n false,\n false,\n false\n ),\n 'burger-menu-button': true,\n }}\n type=\"button\"\n aria-label={this.ixAriaLabel ? this.ixAriaLabel : null}\n aria-pressed={a11yBoolean(this.expanded)}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n >\n <rect\n class=\"line line-1\"\n x=\"2\"\n y=\"5\"\n width=\"20\"\n height=\"2\"\n ></rect>\n <rect\n class=\"line line-2\"\n x=\"2\"\n y=\"11\"\n width=\"13\"\n height=\"2\"\n ></rect>\n <rect\n class=\"line line-3\"\n x=\"2\"\n y=\"17\"\n width=\"20\"\n height=\"2\"\n ></rect>\n </svg>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"version":3}