@siemens/ix 1.0.0-beta.2

package/dist/collection/components/group/group.css

@@ -0,0 +1,170 @@
+/*
+ * 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 */
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+:host {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  max-width: 19.75rem;
+  border-color: var(--theme-group-item--border-color);
+}
+:host .group-header-context-button {
+  display: block;
+  position: relative;
+  margin-top: 5px;
+  margin-right: 5px;
+  margin-left: auto;
+}
+:host .group-header-context-button ix-icon-button::after {
+  display: none;
+}
+:host .group-header {
+  height: 4rem;
+  min-height: 4rem;
+  max-height: 4rem;
+  border-radius: 0.25rem;
+  border: var(--theme-std-bdr-1);
+  display: flex;
+  background-color: var(--theme-group-item--background);
+  border: 1px solid var(--theme-group-item--border-color);
+  color: var(--theme-group-header--color);
+  cursor: pointer;
+}
+:host .group-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .group-header:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-group-item--background--hover);
+  border-color: var(--theme-group-item--border-color--hover);
+}
+:host .group-header:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .group-header:not(.disabled):not(:disabled):active {
+  background-color: var(--theme-group-item--background--active);
+  border-color: var(--theme-group-item--border-color--active);
+}
+:host .group-header:not(.disabled):not(:disabled):focus-visible {
+  border-color: var(--focus--border-color);
+  border-radius: var(--theme-group--border-radius--focus);
+  outline: none;
+}
+:host .group-header-clickable {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+:host .group-header.expand {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+:host .group-header-selection-indicator {
+  width: 0.25rem;
+}
+:host .group-header-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  min-width: 0;
+  padding: 0.5rem;
+  padding-left: 0;
+  width: 100%;
+}
+:host .group-header-content .group-header-props-container {
+  width: 100%;
+}
+:host .group-header-content .group-header-title {
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  font-weight: 700;
+  height: 1.5rem;
+}
+:host .group-header-content .group-header-title > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+:host .group-header-content .group-subheader {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 1.25rem;
+  font-size: 0.875rem;
+  color: var(--theme-group-subheader--color);
+}
+:host .expand-icon {
+  padding: 0.125rem 0.437rem;
+  color: var(--theme-color-std-text);
+}
+:host .btn-expand-header {
+  margin: 0.5rem;
+  -webkit-margin-end: 0.25rem;
+          margin-inline-end: 0.25rem;
+}
+:host .group-content {
+  display: flex;
+  flex-direction: column;
+}
+:host .group-header.selected {
+  border: var(--theme-primary-bdr-2);
+  background-color: var(--theme-group-item--background--selected);
+}
+:host .group-header.selected .group-header-selection-indicator {
+  background-color: var(--theme-color-input-focus);
+}
+:host .footer {
+  height: auto;
+  min-height: 0;
+}

package/dist/collection/components/group/group.js

@@ -0,0 +1,329 @@
+/*
+ * 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 { Component, Element, Event, h, Host, Listen, Prop, State } from '@stencil/core';
+export class Group {
+  constructor() {
+    /**
+     * Prevent header from being selectable
+     */
+    this.suppressHeaderSelection = false;
+    /**
+     * Whether the group is collapsed or expanded. Defaults to true.
+     */
+    this.collapsed = true;
+    /**
+     * Expand the group if the header is clicked
+     */
+    this.expandOnHeaderClick = false;
+  }
+  get dropdownItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-group-dropdown-item'));
+  }
+  get groupItems() {
+    return Array.from(this.hostElement.querySelectorAll('ix-group-item:not(.footer)'));
+  }
+  get groupContent() {
+    return this.hostElement.querySelector('.group-content');
+  }
+  get footer() {
+    return this.hostElement.querySelector('.footer');
+  }
+  async onKeyDown(event) {
+    const targetElement = event.target;
+    if (!this.hostElement.contains(targetElement)) {
+      return;
+    }
+    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+      if (targetElement.classList.contains('group-header')) {
+        if (this.suppressHeaderSelection) {
+          this.collapsed = !this.collapsed;
+        }
+        else {
+          this.selected = !this.selected;
+        }
+      }
+      else if (targetElement.matches('ix-group-item')) {
+        const groupItem = targetElement;
+        groupItem.selected = !groupItem.selected;
+      }
+    }
+  }
+  onExpandClick(event) {
+    const wasCollapsed = this.collapsed;
+    this.collapsed = !this.collapsed;
+    if (!wasCollapsed && this.index !== undefined) {
+      this.index = undefined;
+      this.setGroupSelection(true);
+    }
+    this.collapsedChanged.emit(this.collapsed);
+    event.stopPropagation();
+  }
+  onHeaderClick(event) {
+    this.setGroupSelection(!this.selected);
+    if (this.suppressHeaderSelection) {
+      this.onExpandClick(event);
+    }
+  }
+  onItemClick(index) {
+    if (index === this.index) {
+      this.index = undefined;
+      this.selectItem.emit(undefined);
+    }
+    else {
+      this.index = index;
+      this.selectItem.emit(index);
+    }
+    this.setGroupSelection(false);
+  }
+  setGroupSelection(selection) {
+    if (!this.suppressHeaderSelection) {
+      this.selected = selection;
+      this.selectGroup.emit(this.selected);
+    }
+  }
+  componentWillRender() {
+    var _a;
+    this.groupItems.forEach((item, index) => {
+      var _a;
+      item.selected = index === this.index;
+      item.index = index;
+      item.classList.remove('last');
+      if (!((_a = this.footer) === null || _a === void 0 ? void 0 : _a.children.length) &&
+        index === this.groupItems.length - 1) {
+        item.classList.add('last');
+      }
+    });
+    if (((_a = this.footer) === null || _a === void 0 ? void 0 : _a.childElementCount) > 1) {
+      this.groupContent.appendChild(this.footer);
+    }
+  }
+  componentDidLoad() {
+    this.groupContent.addEventListener('selectedChanged', (evt) => {
+      this.onItemClick(evt.detail.index);
+    });
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: {
+          'group-header': true,
+          expand: !this.collapsed,
+          selected: this.selected,
+        }, tabindex: "0" },
+        h("div", { class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) },
+          h("div", { class: "group-header-selection-indicator" }),
+          h("ix-icon", { class: "btn-expand-header", name: `chevron-${this.collapsed ? 'right' : 'down'}-small`, onClick: (e) => this.onExpandClick(e) }),
+          h("div", { class: "group-header-content" },
+            this.header ? (h("div", { class: "group-header-props-container" },
+              h("div", { class: "group-header-title" },
+                h("span", { title: this.header }, this.header)),
+              h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null,
+            h("slot", { name: "header" }))),
+        h("div", { class: { 'group-header-context-button': true, 'd-none': false } },
+          h("ix-icon-button", { ref: (ref) => (this.dropdownTriggerRef = ref), size: "24", ghost: true, icon: "context-menu" }),
+          h("ix-dropdown", { trigger: this.dropdownTriggerRef },
+            h("slot", { name: "dropdown" })))),
+      h("div", { class: {
+          'group-content': true,
+          'd-none': this.collapsed,
+        } },
+        h("slot", null)),
+      h("div", { class: "d-none" },
+        h("ix-group-item", { class: "footer last", suppressSelection: true, focusable: false },
+          h("slot", { name: "footer" })))));
+  }
+  static get is() { return "ix-group"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["group.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["group.css"]
+  }; }
+  static get properties() { return {
+    "suppressHeaderSelection": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Prevent header from being selectable"
+      },
+      "attribute": "suppress-header-selection",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Group header"
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "subHeader": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Group header subtitle"
+      },
+      "attribute": "sub-header",
+      "reflect": false
+    },
+    "collapsed": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the group is collapsed or expanded. Defaults to true."
+      },
+      "attribute": "collapsed",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the group is selected."
+      },
+      "attribute": "selected",
+      "reflect": true
+    },
+    "index": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The index of the selected group entry.\nIf undefined no group item is selected."
+      },
+      "attribute": "index",
+      "reflect": true
+    },
+    "expandOnHeaderClick": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Expand the group if the header is clicked"
+      },
+      "attribute": "expand-on-header-click",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "dropdownTriggerRef": {}
+  }; }
+  static get events() { return [{
+      "method": "selectGroup",
+      "name": "selectGroup",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits when whole group gets selected."
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }, {
+      "method": "selectItem",
+      "name": "selectItem",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits when group item gets selected."
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "collapsedChanged",
+      "name": "collapsedChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Group collapsed"
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "onKeyDown",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/group-dropdown-item/group-dropdown-item.css

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+:host {
+  display: contents;
+}

package/dist/collection/components/group-dropdown-item/group-dropdown-item.js

@@ -0,0 +1,60 @@
+/*
+ * 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 { Component, h, Host, Prop } from '@stencil/core';
+export class GroupDropdownItem {
+  render() {
+    return (h(Host, null,
+      h("ix-dropdown-item", { label: this.label, icon: this.icon },
+        h("slot", null))));
+  }
+  static get is() { return "ix-group-dropdown-item"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["group-dropdown-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["group-dropdown-item.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Group dropdown label"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Group dropdown icon"
+      },
+      "attribute": "icon",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/group-item/group-item.css

@@ -0,0 +1,116 @@
+/*
+ * 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 */
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+:host {
+  display: flex;
+  min-height: 2.25rem;
+  height: 2.25rem;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1.5rem 0.5rem 2.5rem;
+  position: relative;
+  margin-top: 0.0625rem;
+  border: 1px solid var(--theme-group-item--border-color);
+  outline: none;
+  background-color: var(--theme-group-item--background);
+}
+:host.last {
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+:host ix-icon {
+  margin-right: 0.25rem;
+  margin-top: -0.125rem;
+}
+:host .group-entry-selection-indicator {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  width: 0.25rem;
+}
+:host .group-entry-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+}
+:host .group-entry-text-secondary {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+  white-space: nowrap;
+  color: var(--theme-color-soft-text);
+  font-size: 0.875rem;
+}
+:host .group-entry-text-secondary,
+:host .group-entry-text-secondary span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:host:not(.suppress-selection):not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host:not(.suppress-selection):not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-group-item--background--hover);
+  border-color: var(--theme-group-item--border-color--hover);
+}
+:host:not(.suppress-selection):not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host:not(.suppress-selection):not(.disabled):not(:disabled):active {
+  background-color: var(--theme-group-item--background--active);
+  border-color: var(--theme-group-item--border-color--active);
+}
+:host.selected {
+  border-top-width: 0.062rem !important;
+  border-color: var(--theme-group-item--border-color--selected);
+  background-color: var(--theme-group-item--background--selected);
+}
+:host.selected .group-entry-selection-indicator {
+  background-color: var(--theme-color-input-focus);
+}
+:host:not(.disabled):not(:disabled):focus-visible {
+  border-color: var(--focus--border-color) !important;
+}