@siemens/ix 1.2.1 → 1.3.0-beta.0

package/dist/collection/components/chip/chip.css

@@ -36,6 +36,8 @@
  */
 :host {
   display: inline-flex;
+  width: -moz-fit-content;
+  width: fit-content;
   position: relative;
   align-items: center;
   border-radius: 100px;
@@ -48,6 +50,10 @@
 :host .with-icon {
   margin-right: 0.25rem;
 }
+:host .hidden {
+  width: 0px;
+  margin-right: 0px;
+}
 :host .close-button-container {
   display: inline-flex;
   flex-grow: 1;
@@ -468,8 +474,22 @@
   outline: 1px solid #199fff;
   outline-offset: var(--theme-btn--focus--outline-offset);
 }
+:host[variant=custom].outline {
+  border: solid 1px transparent;
+  background-color: transparent;
+}
+:host[variant=custom].outline:hover {
+  background-color: rgba(0, 0, 0, var(--theme-l-hover));
+}
+:host[variant=custom].outline:active {
+  background-color: rgba(0, 0, 0, var(--theme-l-active));
+}
 :host .slot-container {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+
+:host(.inactive) {
+  pointer-events: none;
 }

package/dist/collection/components/chip/chip.js

@@ -10,7 +10,7 @@ import { h, Host, } from '@stencil/core';
 export class Chip {
   constructor() {
     this.variant = 'primary';
-    this.active = false;
+    this.active = true;
     this.closable = false;
     this.icon = undefined;
     this.background = undefined;
@@ -21,14 +21,27 @@ export class Chip {
     return (h("div", { class: "close-button-container" }, h("button", { type: "button", class: "btn btn-invisible-secondary btn-icon btn-oval close-button", onClick: (event) => this.close.emit(event) }, this.variant === 'custom' ? (h("i", { class: "glyph glyph-16 glyph-close-small", style: { color: this.color } })) : (h("ix-icon", { name: 'close-small', size: '16' })))));
   }
   render() {
+    const isInactive = this.active === false;
+    let customStyle = {};
+    if (this.variant === 'custom' && this.outline === false) {
+      customStyle = {
+        color: this.color,
+        backgroundColor: this.background,
+      };
+    }
+    if (this.variant === 'custom' && this.outline === true) {
+      customStyle = {
+        color: this.color,
+        borderColor: this.background,
+      };
+    }
     return (h(Host, { class: {
         outline: this.outline,
-      }, tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
-        ? {
-          color: this.color,
-          backgroundColor: this.background,
-        }
-        : {} }, this.icon ? (h("ix-icon", { class: 'with-icon', name: this.icon, size: '24' })) : null, h("span", { class: "slot-container" }, h("slot", null)), this.closable ? this.getCloseButton() : null));
+        inactive: isInactive,
+      }, tabIndex: "-1", title: this.el.textContent, style: Object.assign({}, customStyle) }, h("ix-icon", { class: {
+        'with-icon': true,
+        hidden: this.icon === undefined || this.icon === '',
+      }, name: this.icon, size: '24' }), h("span", { class: "slot-container" }, h("slot", null)), isInactive === false && this.closable ? this.getCloseButton() : null));
   }
   static get is() { return "ix-chip"; }
   static get encapsulation() { return "scoped"; }
@@ -74,11 +87,11 @@ export class Chip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Display chip in active state. Only works with `variant=\"primary\"`"
+          "text": "Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\nwill be possible and also the close button will not be present."
         },
         "attribute": "active",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "true"
       },
       "closable": {
         "type": "boolean",

package/dist/collection/components/counter-pill/counter-pill.css

@@ -44,6 +44,8 @@
  */
 :host {
   display: inline-flex;
+  width: -moz-fit-content;
+  width: fit-content;
   position: relative;
   align-items: center;
   justify-content: center;
@@ -270,11 +272,19 @@
 :host[variant=success].outline.active, :host[variant=success].outline:active {
   background-color: var(--theme-chip-outline--background--active);
 }
+:host[variant=custom].outline {
+  border: solid 1px transparent;
+  background-color: transparent;
+}
 :host .slot {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+:host .hidden {
+  width: 0px;
+  margin-right: 0px;
+}
 
 /*
  * SPDX-FileCopyrightText: 2022 Siemens AG

package/dist/collection/components/dropdown/alignment.js

@@ -0,0 +1,9 @@
+export function getAlignment(placement) {
+  if (placement.includes('-end')) {
+    return 'end';
+  }
+  else if (placement.includes('-start')) {
+    return 'start';
+  }
+  return undefined;
+}

package/dist/collection/components/dropdown/dropdown.css

@@ -419,6 +419,7 @@
 }
 
 .dropdown-menu {
+  position: absolute;
   max-height: 50vh;
   overflow-y: auto;
   background-color: var(--theme-menu--background);

package/dist/collection/components/dropdown/dropdown.js

@@ -6,67 +6,65 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { createPopper, } from '@popperjs/core';
+import { autoPlacement, autoUpdate, computePosition, inline, offset, shift, } from '@floating-ui/dom';
 import { h, Host, } from '@stencil/core';
+import { getAlignment } from './alignment';
 export class Dropdown {
   constructor() {
+    this.autoUpdateCleanup = null;
     this.show = false;
     this.trigger = undefined;
     this.anchor = undefined;
     this.closeBehavior = 'both';
-    this.placement = 'bottom-end';
+    this.placement = 'bottom-start';
     this.positioningStrategy = 'fixed';
     this.adjustDropdownWidthToReferenceWith = false;
     this.adjustDropdownWidthToReferenceWidth = false;
     this.header = undefined;
+    this.offset = undefined;
     this.openBind = this.open.bind(this);
   }
   get dropdownItems() {
     return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));
   }
-  resolveElement(prop) {
-    if (typeof prop === 'string') {
-      return document.querySelector('#' + prop);
+  async registerListener(element) {
+    this.triggerElement = await this.resolveElement(element);
+    if (this.triggerElement) {
+      this.triggerElement.addEventListener('click', this.openBind);
     }
-    return prop;
   }
-  async componentDidLoad() {
-    if (this.trigger) {
-      this.registerListener(this.trigger);
-    }
-  }
-  registerListener(element) {
-    this.triggerElement = this.resolveElement(element);
-    this.triggerElement.addEventListener('click', this.openBind);
-  }
-  unregisterListener(element) {
-    const trigger = this.resolveElement(element);
+  async unregisterListener(element) {
+    const trigger = await this.resolveElement(element);
     trigger.removeEventListener('click', this.openBind);
   }
-  componentDidRender() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+  resolveElement(element) {
+    if (typeof element !== 'string') {
+      return Promise.resolve(element);
+    }
+    const selector = `#${element}`;
+    return new Promise((resolve) => {
+      if (document.querySelector(selector)) {
+        return resolve(document.querySelector(selector));
+      }
+      const observer = new MutationObserver(() => {
+        if (document.querySelector(selector)) {
+          resolve(document.querySelector(selector));
+          observer.disconnect();
+        }
+      });
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    });
   }
   async changedShow(newShow) {
-    var _a;
     if (newShow) {
-      this.anchorElement = this.anchor
+      this.anchorElement = await (this.anchor
         ? this.resolveElement(this.anchor)
-        : this.resolveElement(this.trigger);
+        : this.resolveElement(this.trigger));
       if (this.anchorElement) {
-        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-        this.popperInstance = createPopper(this.anchorElement, this.dropdownRef, {
-          placement: this.placement,
-          strategy: this.positioningStrategy,
-          onFirstUpdate: ({ elements }) => {
-            if (this.adjustDropdownWidthToReferenceWith ||
-              this.adjustDropdownWidthToReferenceWidth) {
-              const { popper, reference } = elements;
-              const width = reference.getBoundingClientRect().width;
-              popper.style.width = `${width}px`;
-            }
-          },
-        });
+        this.applyDropdownPosition();
       }
     }
   }
@@ -111,16 +109,64 @@ export class Dropdown {
     this.show = false;
     this.showChanged.emit(this.show);
   }
+  async applyDropdownPosition() {
+    if (this.anchorElement && this.dropdownRef) {
+      let positionConfig = {
+        strategy: this.positioningStrategy,
+        middleware: [],
+      };
+      if (this.placement.includes('auto')) {
+        positionConfig.middleware.push(autoPlacement({
+          alignment: getAlignment(this.placement),
+        }));
+      }
+      else {
+        positionConfig.placement = this.placement;
+      }
+      positionConfig.middleware = [
+        ...positionConfig.middleware,
+        inline(),
+        shift(),
+      ];
+      if (this.offset) {
+        positionConfig.middleware.push(offset(this.offset));
+      }
+      if (this.autoUpdateCleanup) {
+        this.autoUpdateCleanup();
+        this.autoUpdateCleanup = null;
+      }
+      this.autoUpdateCleanup = autoUpdate(this.anchorElement, this.dropdownRef, async () => {
+        const computeResponse = await computePosition(this.anchorElement, this.dropdownRef, positionConfig);
+        Object.assign(this.dropdownRef.style, {
+          top: '0',
+          left: '0',
+          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(computeResponse.y)}px)`,
+        });
+      }, {
+        ancestorResize: true,
+        ancestorScroll: true,
+        elementResize: true,
+      });
+    }
+  }
+  async componentDidLoad() {
+    if (this.trigger) {
+      this.registerListener(this.trigger);
+    }
+  }
+  async componentDidRender() {
+    await this.applyDropdownPosition();
+  }
   disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+    }
   }
   /**
    * Update position of dropdown
    */
   async updatePosition() {
-    var _a;
-    await ((_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update());
+    this.applyDropdownPosition();
   }
   render() {
     return (h(Host, { ref: (ref) => (this.dropdownRef = ref), class: {
@@ -129,6 +175,7 @@ export class Dropdown {
       }, style: {
         margin: '0',
         minWidth: '0px',
+        position: this.positioningStrategy,
       } }, h("div", { style: { display: 'contents' } }, this.header ? h("div", { class: "dropdown-header" }, this.header) : '', h("slot", null))));
   }
   static get is() { return "ix-dropdown"; }
@@ -232,7 +279,7 @@ export class Dropdown {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "./placement"
             }
           }
         },
@@ -244,20 +291,15 @@ export class Dropdown {
         },
         "attribute": "placement",
         "reflect": false,
-        "defaultValue": "'bottom-end'"
+        "defaultValue": "'bottom-start'"
       },
       "positioningStrategy": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "PositioningStrategy",
+          "original": "'absolute' | 'fixed'",
           "resolved": "\"absolute\" | \"fixed\"",
-          "references": {
-            "PositioningStrategy": {
-              "location": "import",
-              "path": "@popperjs/core"
-            }
-          }
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -301,7 +343,10 @@ export class Dropdown {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Will be removed. Not used anymore"
+            }],
           "text": "Adjust dropdown width to the parent width"
         },
         "attribute": "adjust-dropdown-width-to-reference-width",
@@ -324,6 +369,24 @@ export class Dropdown {
         },
         "attribute": "header",
         "reflect": false
+      },
+      "offset": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  }",
+          "resolved": "{ mainAxis?: number; crossAxis?: number; alignmentAxis?: number; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Move dropdown along main axis of alignment"
+        }
       }
     };
   }

package/dist/collection/components/dropdown/placement.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/dropdown-button/dropdown-button.css

@@ -0,0 +1,81 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+:host {
+  display: inline-block;
+  position: relative;
+  height: 2rem;
+}
+:host .dropdown-button {
+  position: relative;
+}
+:host .hide {
+  display: none;
+}
+:host .triangle {
+  position: absolute;
+  -webkit-margin-start: 1.5625rem;
+          margin-inline-start: 1.5625rem;
+  -webkit-margin-before: -0.4375rem;
+          margin-block-start: -0.4375rem;
+  border-right: 0 solid transparent;
+  border-left: 4px solid transparent;
+  border-top: 0 solid transparent;
+  border-bottom: 4px solid;
+  color: var(--theme-btn-primary--color);
+}
+:host .triangle.primary.ghost {
+  color: var(--theme-btn-invisible-primary--color);
+}
+:host .triangle.primary.outline {
+  color: var(--theme-btn-outline-primary--color);
+}
+:host .triangle.primary.ghost.disabled {
+  color: var(--theme-btn-invisible-primary--color--disabled);
+}
+:host .triangle.primary.outline.disabled {
+  color: var(--theme-btn-outline-primary--color--disabled);
+}
+:host .triangle.primary.disabled {
+  color: var(--theme-btn-primary--color--disabled);
+}
+:host .triangle.secondary.ghost {
+  color: var(--theme-btn-invisible-secondary--color);
+}
+:host .triangle.secondary.outline {
+  color: var(--theme-btn-outline-secondary--color);
+}
+:host .triangle.secondary.ghost.disabled {
+  color: var(--theme-btn-invisible-secondary--color--disabled);
+}
+:host .triangle.secondary.outline.disabled {
+  color: var(--theme-btn-outline-secondary--color--disabled);
+}
+:host .triangle.secondary.disabled {
+  color: var(--theme-btn-secondary--color--disabled);
+}
+:host .hide {
+  display: none;
+}
+:host .dropdown {
+  width: auto !important;
+  inset: auto !important;
+  transform: unset !important;
+}

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

@@ -0,0 +1,191 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host } from '@stencil/core';
+/**
+ * @since 1.3.0
+ */
+export class DropdownButton {
+  constructor() {
+    this.variant = 'Primary';
+    this.outline = false;
+    this.ghost = false;
+    this.active = false;
+    this.disabled = false;
+    this.label = '';
+    this.icon = undefined;
+    this.dropdownAnchor = undefined;
+  }
+  getTriangle() {
+    return (h("div", { class: {
+        triangle: true,
+        hide: this.label !== '',
+        primary: this.variant === 'Primary',
+        secondary: this.variant === 'Secondary',
+        ghost: this.ghost,
+        outline: this.outline,
+        disabled: this.disabled,
+      } }));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "dropdown-button", ref: (ref) => {
+        this.dropdownAnchor = ref;
+      } }, h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, class: { hide: this.label === '' } }, h("ix-icon", { name: this.icon, size: "24", class: { hide: this.icon === '' || this.icon === undefined } }), this.label, h("ix-icon", { name: "chevron-down-small", size: "24" })), h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, class: { hide: this.label !== '' } }), this.getTriangle()), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownAnchor, placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, h("slot", null))));
+  }
+  static get is() { return "ix-dropdown-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Buttons",
+          "resolved": "\"Primary\" | \"Secondary\"",
+          "references": {
+            "Buttons": {
+              "location": "import",
+              "path": "../utils/button-variants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button varaint"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'Primary'"
+      },
+      "outline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Outline button"
+        },
+        "attribute": "outline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "ghost": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button with no background or outline"
+        },
+        "attribute": "ghost",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active button"
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disable button"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set label"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button icon"
+        },
+        "attribute": "icon",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dropdownAnchor": {}
+    };
+  }
+}

package/dist/collection/components/expanding-search/expanding-search.css

@@ -114,6 +114,7 @@
   position: absolute;
   border-radius: var(--theme-input--border-radius);
   right: 0px;
+  margin-right: 0.25rem;
 }
 :host .input {
   padding-left: 2rem !important;

package/dist/collection/components/expanding-search/expanding-search.js

@@ -74,7 +74,7 @@ export class ExpandingSearch {
       }, ref: (el) => (this.textInput = el), "data-testid": "input", placeholder: this.placeholder, type: "text", value: this.value, onBlur: () => {
         this.collapseInput();
         this.hasFocus = false;
-      }, onFocus: () => (this.hasFocus = true), onInput: (e) => this.onChange(e), tabindex: this.expanded ? 0 : -1 }), this.isFieldChanged ? (h("ix-icon-button", { class: "btn-clear", icon: "clear", ghost: true, size: "24", "data-testid": "clear-button", onClick: () => this.clearClicked() })) : null)));
+      }, onFocus: () => (this.hasFocus = true), onInput: (e) => this.onChange(e), tabindex: this.expanded ? 0 : -1 }), this.isFieldChanged ? (h("ix-icon-button", { class: "btn-clear", icon: "clear", ghost: true, size: "16", "data-testid": "clear-button", onClick: () => this.clearClicked() })) : null)));
   }
   static get is() { return "ix-expanding-search"; }
   static get encapsulation() { return "scoped"; }