@siemens/ix 1.1.0-beta.0 → 1.1.0-beta.2

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

@@ -1,170 +0,0 @@
-/*
- * 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

@@ -1,329 +0,0 @@
-/*
- * 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

@@ -1,11 +0,0 @@
-/*
- * 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

@@ -1,60 +0,0 @@
-/*
- * 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

@@ -1,116 +0,0 @@
-/*
- * 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;
-}