@siemens/ix 1.1.0-beta.5 → 1.1.0-beta.6

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

@@ -98,8 +98,8 @@
           margin-inline-end: 0.25rem;
 }
 :host .crumb .crumb-text + .glyph-chevron-right-small {
-  -webkit-margin-start: 0.5rem;
-          margin-inline-start: 0.5rem;
+  -webkit-margin-start: 0.25rem;
+          margin-inline-start: 0.25rem;
   -webkit-margin-end: 0;
           margin-inline-end: 0;
 }
@@ -220,9 +220,4 @@
 }
 :host .crumb.ghost.clickable:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text + .glyph-chevron-right-small {
   color: var(--theme-breadcrumb-ghost-arrow--color--active);
-}
-
-.dropdown-overflow .dropdown-menu {
-  max-height: 25rem;
-  overflow-y: auto;
 }

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

@@ -6,23 +6,16 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import animejs from 'animejs';
 import { createMutationObserver } from '../utils/mutation-observer';
 export class Breadcrumb {
   constructor() {
-    /**
-     * Excess items will get hidden inside of dropdown
-     */
     this.visibleItemCount = 9;
-    /**
-     * Items will be accessible through a dropdown
-     */
     this.nextItems = [];
-    /**
-     * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
-     */
     this.ghost = false;
+    this.previousButtonRef = undefined;
+    this.nextButtonRef = undefined;
     this.items = [];
   }
   get breadcrumbItems() {
@@ -117,136 +110,133 @@ export class Breadcrumb {
           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" }) : '',
-          item.label),
-        !isLastItem ? (h("span", { class: "glyph glyph-18 glyph-chevron-right-small text-default-text" })) : null));
+        }, 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" }) : '', item.label), !isLastItem ? (h("span", { class: "glyph glyph-18 glyph-chevron-right-small text-default-text" })) : null));
     });
   }
   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
-          ? this.previousButtonRef
-          : null }, 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) => {
-          this.nextClick.emit({
-            event: e,
-            item,
-          });
-        } }))))));
+    return (h(Host, null, h("ix-dropdown", { trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        ? this.previousButtonRef
+        : null }, 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) => {
+        this.nextClick.emit({
+          event: e,
+          item,
+        });
+      } }))))));
   }
   static get is() { return "ix-breadcrumb"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["breadcrumb.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["breadcrumb.css"]
-  }; }
-  static get properties() { return {
-    "visibleItemCount": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Excess items will get hidden inside of dropdown"
-      },
-      "attribute": "visible-item-count",
-      "reflect": false,
-      "defaultValue": "9"
-    },
-    "nextItems": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Items will be accessible through a dropdown"
-      },
-      "defaultValue": "[]"
-    },
-    "ghost": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)"
+  static get originalStyleUrls() {
+    return {
+      "$": ["breadcrumb.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["breadcrumb.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "visibleItemCount": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Excess items will get hidden inside of dropdown"
+        },
+        "attribute": "visible-item-count",
+        "reflect": false,
+        "defaultValue": "9"
       },
-      "attribute": "ghost",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "previousButtonRef": {},
-    "nextButtonRef": {},
-    "items": {}
-  }; }
-  static get events() { return [{
-      "method": "itemClick",
-      "name": "itemClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Crumb item clicked event"
+      "nextItems": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Items will be accessible through a dropdown"
+        },
+        "defaultValue": "[]"
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "ghost": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)"
+        },
+        "attribute": "ghost",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }, {
-      "method": "nextClick",
-      "name": "nextClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Next item clicked event"
-      },
-      "complexType": {
-        "original": "{ event: UIEvent; item: string }",
-        "resolved": "{ event: UIEvent; item: string; }",
-        "references": {
-          "UIEvent": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "previousButtonRef": {},
+      "nextButtonRef": {},
+      "items": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "itemClick",
+        "name": "itemClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Crumb item clicked event"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "nextClick",
+        "name": "nextClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Next item clicked event"
+        },
+        "complexType": {
+          "original": "{ event: UIEvent; item: string }",
+          "resolved": "{ event: UIEvent; item: string; }",
+          "references": {
+            "UIEvent": {
+              "location": "global"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
 }

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

@@ -6,54 +6,63 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Component, h, Host, Prop } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class BreadcrumbItem {
+  constructor() {
+    this.label = undefined;
+    this.icon = undefined;
+  }
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return (h(Host, null, h("slot", null)));
   }
   static get is() { return "ix-breadcrumb-item"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["breadcrumb-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["breadcrumb-item.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Breadcrumb label"
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon to be displayed next ot the label"
+  static get originalStyleUrls() {
+    return {
+      "$": ["breadcrumb-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["breadcrumb-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Breadcrumb label"
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "attribute": "icon",
-      "reflect": false
-    }
-  }; }
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to be displayed next ot the label"
+        },
+        "attribute": "icon",
+        "reflect": false
+      }
+    };
+  }
 }

package/dist/collection/components/button/base-button.js

@@ -14,7 +14,7 @@ const isSecondary = (variant) => {
 };
 export const getButtonClasses = (variant, outline, ghost, iconOnly = false, iconOval = false, selected, disabled) => {
   return {
-    'btn': true,
+    btn: true,
     'btn-primary': isPrimary(variant) && !outline && !ghost,
     'btn-outline-primary': isPrimary(variant) && outline && !ghost,
     'btn-invisible-primary': isPrimary(variant) && !outline && ghost,
@@ -23,7 +23,7 @@ export const getButtonClasses = (variant, outline, ghost, iconOnly = false, icon
     'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,
     'btn-icon': iconOnly,
     'btn-oval': iconOval,
-    'selected': isSecondary(variant) && (outline || ghost) && selected,
-    'disabled': disabled,
+    selected: isSecondary(variant) && (outline || ghost) && selected,
+    disabled: disabled,
   };
 };