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

package/dist/collection/components/toggle/toggle.js

@@ -1,263 +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 } from '@stencil/core';
-export class CuiToggle {
-  constructor() {
-    /**
-     * Whether the slide-toggle element is checked or not.
-     */
-    this.checked = false;
-    /**
-     * Whether the slide-toggle element is disabled or not.
-     */
-    this.disabled = false;
-    /**
-     * If true the control is in indeterminate state
-     */
-    this.indeterminate = false;
-    /**
-     * Basic and status colors from color palette
-     * @deprecated - Has no effect on the rendered control
-     */
-    this.color = 'accent';
-    /**
-     * Text for on state
-     */
-    this.textOn = 'On';
-    /**
-     * Text for off state
-     */
-    this.textOff = 'Off';
-    /**
-     * Text for indeterminate state
-     */
-    this.textIndeterminate = 'Mixed';
-    /**
-     * Hide `on` and `off` text
-     */
-    this.hideText = false;
-  }
-  async onKeyDown(event) {
-    const targetElement = event.target;
-    if (!this.hostElement.contains(targetElement)) {
-      return;
-    }
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-      this.emitChange(event);
-    }
-  }
-  emitChange(event) {
-    if (this.disabled || this.indeterminate) {
-      return;
-    }
-    event.stopPropagation();
-    event.preventDefault();
-    this.checked = !this.checked;
-    this.checkedChange.emit(this.checked);
-  }
-  getText() {
-    if (this.indeterminate || this.checked === undefined) {
-      return this.textIndeterminate;
-    }
-    return this.checked ? this.textOn : this.textOff;
-  }
-  render() {
-    return (h(Host, { class: {
-        disabled: this.disabled,
-        checked: this.checked,
-        indeterminate: this.indeterminate || this.checked === undefined,
-      } },
-      h("label", { class: "switch", tabindex: this.disabled ? -1 : 0 },
-        h("input", { tabindex: "-1", type: "checkbox", checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate || this.checked === undefined, id: this.hostElement.id, onChange: (e) => this.emitChange(e) }),
-        h("span", { class: "slider" },
-          h("span", { class: "slider-track" }))),
-      !this.hideText ? (h("span", { title: this.getText(), class: "text", onClick: (e) => this.emitChange(e) }, this.getText())) : null));
-  }
-  static get is() { return "ix-toggle"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["toggle.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["toggle.css"]
-  }; }
-  static get properties() { return {
-    "checked": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the slide-toggle element is checked or not."
-      },
-      "attribute": "checked",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the slide-toggle element is disabled or not."
-      },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "indeterminate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If true the control is in indeterminate state"
-      },
-      "attribute": "indeterminate",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "- Has no effect on the rendered control"
-          }],
-        "text": "Basic and status colors from color palette"
-      },
-      "attribute": "color",
-      "reflect": false,
-      "defaultValue": "'accent'"
-    },
-    "textOn": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Text for on state"
-      },
-      "attribute": "text-on",
-      "reflect": false,
-      "defaultValue": "'On'"
-    },
-    "textOff": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Text for off state"
-      },
-      "attribute": "text-off",
-      "reflect": false,
-      "defaultValue": "'Off'"
-    },
-    "textIndeterminate": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Text for indeterminate state"
-      },
-      "attribute": "text-indeterminate",
-      "reflect": false,
-      "defaultValue": "'Mixed'"
-    },
-    "hideText": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Hide `on` and `off` text"
-      },
-      "attribute": "hide-text",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "checkedChange",
-      "name": "checkedChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "An event will be dispatched each time the slide-toggle changes its value."
-      },
-      "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/tree/tree-model.js

@@ -1,9 +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.
- */
-export {};

package/dist/collection/components/tree/tree.css

@@ -1,12 +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: block;
-}

package/dist/collection/components/tree/tree.js

@@ -1,296 +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, Prop, Watch } from '@stencil/core';
-import Hyperlist from 'hyperlist';
-import { renderDefaultItem } from '../tree-item/default-tree-item';
-export class Tree {
-  constructor() {
-    /**
-     * Selection and collapsed state management
-     */
-    this.context = {};
-    this.toggleListener = new Map();
-    this.itemClickListener = new Map();
-    this.updates = new Map();
-  }
-  getVirtualizerOptions() {
-    const list = this.buildTreeList(this.model[this.root]);
-    return {
-      itemHeight: 32,
-      total: list.length,
-      generate: (index) => {
-        const item = list[index];
-        const renderedTreeItem = this.host.querySelector(`[data-tree-node-id="${item.id}"]`);
-        const context = this.getContext(item.id);
-        if (renderedTreeItem) {
-          renderedTreeItem.hasChildren = item.hasChildren;
-          renderedTreeItem.context = Object.assign({}, context);
-          if (this.updates.has(item.id)) {
-            const doUpdate = this.updates.get(item.id);
-            doUpdate(item, Object.assign({}, this.context));
-          }
-          return renderedTreeItem;
-        }
-        const update = (callback) => {
-          this.updates.set(item.id, callback);
-        };
-        let innerElement = null;
-        if (this.renderItem) {
-          innerElement = this.renderItem(index, item, list, Object.assign({}, this.context), update);
-        }
-        if (innerElement === null) {
-          innerElement = renderDefaultItem(item, context, update);
-        }
-        const el = innerElement;
-        el.setAttribute('data-tree-node-id', item.id);
-        el.style.paddingLeft = item.level + 'rem';
-        el.style.paddingRight = '1rem';
-        if (!this.itemClickListener.has(el)) {
-          const itemClickCallback = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            Object.values(this.context).forEach((c) => (c.isSelected = false));
-            const context = this.getContext(item.id);
-            context.isSelected = true;
-            this.setContext(item.id, context);
-          };
-          el.addEventListener('itemClick', itemClickCallback);
-          this.itemClickListener.set(el, itemClickCallback);
-        }
-        if (item.hasChildren && !this.toggleListener.has(el)) {
-          const toggleCallback = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            const context = this.getContext(list[index].id);
-            context.isExpanded = !context.isExpanded;
-            this.setContext(item.id, context);
-          };
-          el.addEventListener('toggle', toggleCallback);
-          this.toggleListener.set(el, toggleCallback);
-        }
-        return el;
-      },
-    };
-  }
-  setContext(id, context) {
-    this.context = Object.assign(Object.assign({}, this.context), { [id]: context });
-    this.contextChange.emit(this.context);
-  }
-  getContext(id) {
-    if (!this.context) {
-      return {
-        isExpanded: false,
-        isSelected: false,
-      };
-    }
-    if (!this.context[id]) {
-      this.context[id] = {
-        isExpanded: false,
-        isSelected: false,
-      };
-    }
-    return this.context[id];
-  }
-  buildTreeList(root, level = 0) {
-    const itemList = [];
-    if (root === null || root === void 0 ? void 0 : root.hasChildren) {
-      const newLevel = level + 1;
-      root.children.forEach((id) => {
-        const item = this.model[id];
-        const context = this.getContext(id);
-        itemList.push(Object.assign(Object.assign({}, item), { level }));
-        if (item.hasChildren && context.isExpanded) {
-          itemList.push(...this.buildTreeList(item, newLevel));
-        }
-      });
-    }
-    return itemList;
-  }
-  componentDidLoad() {
-    const config = this.getVirtualizerOptions();
-    this.hyperlist = new Hyperlist(this.host, config);
-    this.observer = new MutationObserver((records) => {
-      let removed = [];
-      records.forEach((record) => {
-        removed = [...removed, ...Array.from(record.removedNodes)];
-        record.addedNodes.forEach((an) => {
-          const index = removed.indexOf(an);
-          if (index >= 0) {
-            removed.splice(index, 1);
-          }
-        });
-      });
-      this.nodeRemoved.emit(removed);
-    });
-    this.observer.observe(this.host, {
-      childList: true,
-    });
-  }
-  componentWillRender() {
-    this.refreshList();
-  }
-  disconnectedCallback() {
-    this.hyperlist.destroy();
-    this.observer.disconnect();
-  }
-  modelChange() {
-    this.refreshList();
-  }
-  refreshList() {
-    if (this.hyperlist) {
-      this.hyperlist.refresh(this.host, this.getVirtualizerOptions());
-    }
-  }
-  render() {
-    return (h(Host, null,
-      h("slot", null)));
-  }
-  static get is() { return "ix-tree"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["tree.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tree.css"]
-  }; }
-  static get properties() { return {
-    "root": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Initial root element will not be rendered"
-      },
-      "attribute": "root",
-      "reflect": false
-    },
-    "model": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "TreeModel<any>",
-        "resolved": "{ [x: string]: TreeItem<any>; }",
-        "references": {
-          "TreeModel": {
-            "location": "import",
-            "path": "./tree-model"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tree modal"
-      }
-    },
-    "renderItem": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "<T = any>(\n    index: number,\n    data: T,\n    dataList: Array<T>,\n    context: TreeContext,\n    update: (callback: UpdateCallback) => void\n  ) => HTMLElement",
-        "resolved": "<T = any>(index: number, data: T, dataList: T[], context: TreeContext, update: (callback: UpdateCallback) => void) => HTMLElement",
-        "references": {
-          "T": {
-            "location": "global"
-          },
-          "Array": {
-            "location": "global"
-          },
-          "TreeContext": {
-            "location": "import",
-            "path": "./tree-model"
-          },
-          "UpdateCallback": {
-            "location": "import",
-            "path": "./tree-model"
-          },
-          "HTMLElement": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Render function of tree items"
-      }
-    },
-    "context": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "TreeContext",
-        "resolved": "{ [x: string]: TreeItemContext; }",
-        "references": {
-          "TreeContext": {
-            "location": "import",
-            "path": "./tree-model"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Selection and collapsed state management"
-      },
-      "defaultValue": "{}"
-    }
-  }; }
-  static get events() { return [{
-      "method": "contextChange",
-      "name": "contextChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Context changed"
-      },
-      "complexType": {
-        "original": "TreeContext",
-        "resolved": "{ [x: string]: TreeItemContext; }",
-        "references": {
-          "TreeContext": {
-            "location": "import",
-            "path": "./tree-model"
-          }
-        }
-      }
-    }, {
-      "method": "nodeRemoved",
-      "name": "nodeRemoved",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emits removed nodes"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "model",
-      "methodName": "modelChange"
-    }]; }
-}

package/dist/collection/components/tree-item/default-tree-item.js

@@ -1,18 +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.
- */
-export function renderDefaultItem(item, context, update) {
-  const el = document.createElement('ix-tree-item');
-  el.hasChildren = item.hasChildren;
-  el.context = context;
-  el.text = item.data.name;
-  update((updateTreeItem) => {
-    el.text = updateTreeItem.data.name;
-  });
-  return el;
-}

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

@@ -1,86 +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.
- */
-/*
- * 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.
- */
-:host {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  width: 100%;
-  cursor: pointer;
-}
-:host:not(.disabled):not(:disabled):not(.selected).hover, :host:not(.disabled):not(:disabled):not(.selected):hover {
-  background-color: var(--theme-tree-item--background--hover);
-}
-:host:not(.disabled):not(:disabled):not(.selected).active, :host:not(.disabled):not(:disabled):not(.selected):active {
-  background-color: var(--theme-tree-item--background--active);
-}
-:host.selected {
-  background-color: var(--theme-tree-item--background--selected);
-}
-:host.selected.hover, :host.selected:hover {
-  background-color: var(--theme-tree-item--background--selected-hover);
-}
-:host.selected.active, :host.selected:active {
-  background-color: var(--theme-tree-item--background--selected-active);
-}
-:host .tree-node-container {
-  display: flex;
-  align-items: center;
-  height: 2rem;
-  flex-grow: 1;
-  align-items: center;
-}
-:host .icon-toggle-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-}
-:host .icon-toggle-container ix-icon {
-  transition: transform 150ms ease-in-out;
-}
-:host .icon-toggle-container ix-icon.icon-toggle-down {
-  transform: rotate(90deg);
-}