@siemens/ix 1.0.0-beta.2

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

@@ -0,0 +1,124 @@
+/*
+ * 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, Event, h, Host, Prop } from '@stencil/core';
+export class TreeItem {
+  render() {
+    var _a, _b, _c;
+    return (h(Host, { class: {
+        selected: (_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected,
+      } },
+      h("div", { class: "icon-toggle-container", onClick: (e) => {
+          e.preventDefault();
+          this.toggle.emit();
+        } }, this.hasChildren ? (h("ix-icon", { name: "chevron-right", size: "16", class: {
+          ['icon-toggle-down']: (_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded,
+        }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null),
+      h("div", { class: "tree-node-container", onClick: (e) => {
+          e.preventDefault();
+          this.itemClick.emit();
+        } },
+        this.text,
+        h("slot", null))));
+  }
+  static get is() { return "ix-tree-item"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["tree-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["tree-item.css"]
+  }; }
+  static get properties() { return {
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text"
+      },
+      "attribute": "text",
+      "reflect": false
+    },
+    "hasChildren": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Has tree item children"
+      },
+      "attribute": "has-children",
+      "reflect": false
+    },
+    "context": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "TreeItemContext",
+        "resolved": "TreeItemContext",
+        "references": {
+          "TreeItemContext": {
+            "location": "import",
+            "path": "../tree/tree-model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Context"
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "toggle",
+      "name": "toggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Expand/Collapsed toggled"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "itemClick",
+      "name": "itemClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Clicked"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/upload/upload-file-state.js

@@ -0,0 +1,15 @@
+/*
+ * 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 var UploadFileState;
+(function (UploadFileState) {
+  UploadFileState["SELECT_FILE"] = "SELECT_FILE";
+  UploadFileState["LOADING"] = "LOADING";
+  UploadFileState["UPLOAD_FAILED"] = "UPLOAD_FAILED";
+  UploadFileState["UPLOAD_SUCCESSED"] = "UPLOAD_SUCCESSED";
+})(UploadFileState || (UploadFileState = {}));

package/dist/collection/components/upload/upload.css

@@ -0,0 +1,120 @@
+/*
+ * 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.
+ */
+:host {
+  display: block;
+  min-height: 4rem;
+  height: 4rem;
+}
+:host .file-upload-area {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  padding: 1rem;
+  border: 1px dashed var(--theme-upload--border-color);
+  border-radius: var(--theme-upload--border-radius);
+  color: var(--theme-upload-text--color);
+}
+:host .file-upload-area.multiline {
+  max-height: unset;
+  height: auto;
+}
+:host .file-upload-area.multiline .glyph {
+  align-self: flex-start;
+  -webkit-margin-before: 3px;
+          margin-block-start: 3px;
+}
+:host .file-upload-area.multiline > div {
+  align-self: flex-start;
+}
+:host .file-upload-area:not(.multiline) .state,
+:host .file-upload-area:not(.multiline) .upload-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:host .file-upload-area.file-over {
+  border-color: var(--theme-upload--border-color--dragover);
+  border-style: solid;
+}
+:host .file-upload-area.checking {
+  color: var(--theme-upload-text--color--checking);
+  border-style: solid;
+}
+:host .file-upload-area.disabled {
+  border-style: solid;
+  color: var(--theme-upload-text--color--disabled);
+}
+:host .file-upload-area ix-button {
+  -webkit-margin-start: 1rem;
+          margin-inline-start: 1rem;
+}
+:host .file-upload-area .upload-browser {
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+:host .file-upload-area .loader {
+  margin: 2.187rem auto;
+  font-size: 0.937rem;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  position: relative;
+  text-indent: -9999em;
+  animation: optimise-loading 1.1s infinite ease;
+  transform: translateZ(0);
+}
+:host .file-upload-area .upload-filename {
+  margin-bottom: 1rem;
+}
+:host .file-upload-area .state {
+  display: flex;
+  align-items: center;
+}
+:host .file-upload-area .state > ix-spinner {
+  -webkit-margin-end: 0.5rem;
+          margin-inline-end: 0.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+:host .file-upload-area .state > i {
+  -webkit-margin-end: 0.5rem;
+          margin-inline-end: 0.5rem;
+}
+:host .file-upload-area .state > i.glyph-error {
+  color: var(--theme-color-alarm);
+}
+:host .file-upload-area .state > i.glyph-success {
+  color: var(--theme-color-success);
+}

package/dist/collection/components/upload/upload.js

@@ -0,0 +1,413 @@
+/*
+ * 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, Method, Prop, State } from '@stencil/core';
+import { UploadFileState } from './upload-file-state';
+export class Upload {
+  constructor() {
+    /**
+     * If multiple is true the user can drop or select multiple files
+     */
+    this.multiple = false;
+    /**
+     * Whether the text should wrap to more than one line
+     */
+    this.multiline = false;
+    /**
+     * Disable all input events
+     */
+    this.disabled = false;
+    /**
+     * After a file is uploaded you can set the upload component to a defined state
+     */
+    this.state = UploadFileState.SELECT_FILE;
+    /**
+     * Will be used by state = UploadFileState.SELECT_FILE
+     */
+    this.selectFileText = '+ Drag files here or…';
+    /**
+     * Will be used by state = UploadFileState.LOADING
+     */
+    this.loadingText = 'Checking files…';
+    /**
+     * Will be used by state = UploadFileState.UPLOAD_FAILED
+     */
+    this.uploadFailedText = 'Upload failed. Please try again.';
+    /**
+     * Will be used by state = UploadFileState.UPLOAD_SUCCESSED
+     */
+    this.uploadSuccessText = 'Upload successful';
+    /**
+     * Label for upload file button
+     */
+    this.i18nUploadFile = 'Upload file…';
+    /**
+     * Text for disabled state
+     */
+    this.i18nUploadDisabled = 'File upload currently not possible.';
+    this.isFileOver = false;
+  }
+  get inputElement() {
+    return this.hostElement.querySelector('#upload-browser');
+  }
+  fileDropped(evt) {
+    evt.preventDefault();
+    const file = evt.dataTransfer.files;
+    this.isFileOver = false;
+    this.filesToUpload = this.convertToFileArray(file);
+    this.filesChanged.emit(this.filesToUpload);
+  }
+  fileOver(event) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    if (!this.multiple && event.dataTransfer.items.length > 1) {
+      event.preventDefault();
+      event.stopPropagation();
+      event.dataTransfer.effectAllowed = 'none';
+      event.dataTransfer.dropEffect = 'none';
+    }
+    else {
+      this.isFileOver = true;
+    }
+  }
+  fileLeave() {
+    this.isFileOver = false;
+  }
+  fileChangeEvent(event) {
+    this.filesToUpload = this.convertToFileArray(event.target.files);
+    this.filesChanged.emit(this.filesToUpload);
+    // Workaround for bug in native input element, that prevents the user from uploading
+    // a file with the same name as the most recent one, but with changed content.
+    this.inputElement.type = '';
+    this.inputElement.type = 'file';
+  }
+  convertToFileArray(filesFromEvent) {
+    let files = [];
+    if (filesFromEvent instanceof FileList) {
+      files = Array.from(filesFromEvent);
+    }
+    else {
+      files = [filesFromEvent];
+    }
+    return files;
+  }
+  renderUploadState() {
+    if (this.disabled) {
+      return (h("span", { class: "state" },
+        h("span", { class: "upload-text" }, this.i18nUploadDisabled)));
+    }
+    switch (this.state) {
+      case UploadFileState.SELECT_FILE:
+        return (h("span", { class: "state" },
+          h("span", { class: "upload-text" }, this.selectFileText)));
+      case UploadFileState.LOADING:
+        return (h("span", { class: "state" },
+          h("ix-spinner", { variant: "primary" }),
+          h("span", { class: "upload-text" }, this.loadingText)));
+      case UploadFileState.UPLOAD_FAILED:
+        return (h("span", { class: "state" },
+          h("i", { class: "glyph glyph-error" }),
+          h("span", { class: "upload-text" }, this.uploadFailedText)));
+      case UploadFileState.UPLOAD_SUCCESSED:
+        return (h("span", { class: "state" },
+          h("i", { class: "glyph glyph-success" }),
+          h("span", { class: "upload-text" }, this.uploadSuccessText)));
+      default:
+        return '';
+    }
+  }
+  /**
+   * Set files
+   * @param obj
+   */
+  async setFilesToUpload(obj) {
+    this.filesToUpload = obj;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: {
+          'file-upload-area': true,
+          'file-over': this.isFileOver,
+          checking: this.state === UploadFileState.LOADING,
+          disabled: this.disabled,
+          multiline: this.multiline,
+        }, onDrop: (e) => this.fileDropped(e), onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled },
+        this.renderUploadState(),
+        h("div", null,
+          h("input", { multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
+              this.fileChangeEvent(e);
+            }, accept: this.accept }),
+          h("ix-button", { tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === UploadFileState.LOADING }, this.i18nUploadFile)))));
+  }
+  static get is() { return "ix-upload"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["upload.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["upload.css"]
+  }; }
+  static get properties() { return {
+    "accept": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload).\n[accept]{@link https ://www.w3schools.com/tags/att_input_accept.asp}"
+      },
+      "attribute": "accept",
+      "reflect": false
+    },
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If multiple is true the user can drop or select multiple files"
+      },
+      "attribute": "multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "multiline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the text should wrap to more than one line"
+      },
+      "attribute": "multiline",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable all input events"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "state": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "UploadFileState",
+        "resolved": "UploadFileState.LOADING | UploadFileState.SELECT_FILE | UploadFileState.UPLOAD_FAILED | UploadFileState.UPLOAD_SUCCESSED",
+        "references": {
+          "UploadFileState": {
+            "location": "import",
+            "path": "./upload-file-state"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "After a file is uploaded you can set the upload component to a defined state"
+      },
+      "attribute": "state",
+      "reflect": false,
+      "defaultValue": "UploadFileState.SELECT_FILE"
+    },
+    "selectFileText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Will be used by state = UploadFileState.SELECT_FILE"
+      },
+      "attribute": "select-file-text",
+      "reflect": false,
+      "defaultValue": "'+ Drag files here or\u2026'"
+    },
+    "loadingText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Will be used by state = UploadFileState.LOADING"
+      },
+      "attribute": "loading-text",
+      "reflect": false,
+      "defaultValue": "'Checking files\u2026'"
+    },
+    "uploadFailedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Will be used by state = UploadFileState.UPLOAD_FAILED"
+      },
+      "attribute": "upload-failed-text",
+      "reflect": false,
+      "defaultValue": "'Upload failed. Please try again.'"
+    },
+    "uploadSuccessText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Will be used by state = UploadFileState.UPLOAD_SUCCESSED"
+      },
+      "attribute": "upload-success-text",
+      "reflect": false,
+      "defaultValue": "'Upload successful'"
+    },
+    "i18nUploadFile": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label for upload file button"
+      },
+      "attribute": "i-1-8n-upload-file",
+      "reflect": false,
+      "defaultValue": "'Upload file\u2026'"
+    },
+    "i18nUploadDisabled": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text for disabled state"
+      },
+      "attribute": "i-1-8n-upload-disabled",
+      "reflect": false,
+      "defaultValue": "'File upload currently not possible.'"
+    }
+  }; }
+  static get states() { return {
+    "isFileOver": {}
+  }; }
+  static get events() { return [{
+      "method": "filesChanged",
+      "name": "filesChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "You get an array of Files after drop-action or browse action is finished"
+      },
+      "complexType": {
+        "original": "Array<File>",
+        "resolved": "File[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "File": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "setFilesToUpload": {
+      "complexType": {
+        "signature": "(obj: any) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "obj"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Set files",
+        "tags": [{
+            "name": "param",
+            "text": "obj"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/utils/animation.js

@@ -0,0 +1,15 @@
+/*
+ * 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 default class Animation {
+}
+Animation.shortTime = 0;
+Animation.defaultTime = 150;
+Animation.mediumTime = 300;
+Animation.slowTime = 500;
+Animation.xSlowTime = 1000;

package/dist/collection/components/utils/button-variants.js

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