@siemens/ix 1.0.0-beta.2

package/dist/components/toast.js

@@ -0,0 +1,119 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './icon-button.js';
+
+const toastCss = ".sc-ix-toast-h{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}.sc-ix-toast-h .toast-body.sc-ix-toast{display:flex;position:relative;width:100%;flex-grow:1}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-icon.sc-ix-toast{display:flex;align-items:flex-start;margin:1rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%;max-width:10.25rem;margin-top:calc(\n        1rem + var(--theme-toast--border-thickness)\n      );margin-bottom:0.75rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast .toast-message.sc-ix-toast{min-width:0}.sc-ix-toast-h .toast-close.sc-ix-toast{display:flex;position:relative;margin:0.75rem;pointer-events:all}.sc-ix-toast-h .toast-progress-bar.sc-ix-toast{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}.sc-ix-toast-h .toast-progress-bar--animated.sc-ix-toast{animation:trackProgress linear 1 forwards}.sc-ix-toast-h .toast-progress-bar--touched.sc-ix-toast{transition:transform 1s}.sc-ix-toast-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toast-h:not(.disabled):not(:disabled):hover .toast-progress-bar.sc-ix-toast{visibility:hidden;transition:none}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
+
+const Toast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.closeToast = createEvent(this, "closeToast", 7);
+    /**
+     * Autoclose title after delay
+     */
+    this.autoCloseDelay = 5000;
+    /**
+     * Autoclose behavior
+     */
+    this.autoClose = true;
+    this.progress = 0;
+    this.isRunning = true;
+    this.touched = false;
+  }
+  getIcon() {
+    if (this.icon) {
+      return h("ix-icon", { name: this.icon, color: this.iconColor, size: "24" });
+    }
+    switch (this.type) {
+      case 'info':
+        return h("ix-icon", { name: 'info', size: "24", color: "color-std-text" });
+      case 'error':
+        return h("ix-icon", { name: 'error', size: "24", color: "color-alarm" });
+      case 'success':
+        return h("ix-icon", { name: 'success', size: "24", color: "color-success" });
+      case 'warning':
+        return h("ix-icon", { name: 'warning', size: "24", color: "color-warning" });
+      default:
+        return '';
+    }
+  }
+  close() {
+    if (this.host) {
+      this.host.classList.add('animate__fadeOut');
+    }
+    setTimeout(() => {
+      this.closeToast.emit();
+    }, 250);
+  }
+  render() {
+    let progressBarElement;
+    let progressBarStyle = {};
+    const progressBarClass = [`toast-progress-bar`];
+    if (!this.touched) {
+      progressBarStyle = {
+        animationDuration: `${this.autoCloseDelay}ms`,
+        animationPlayState: this.isRunning ? 'running' : 'paused',
+      };
+      progressBarClass.push('toast-progress-bar--animated');
+    }
+    else {
+      progressBarClass.push('toast-progress-bar--touched');
+    }
+    const updateProgress = () => {
+      if (progressBarElement) {
+        progressBarElement.style.transform = `scaleX(${this.progress})`;
+      }
+    };
+    return (h(Host, { class: "animate__animated animate__fadeIn" }, h("div", { class: "toast-body", onPointerLeave: () => {
+        this.progress = 0;
+        updateProgress();
+      }, onPointerEnter: () => {
+        this.isRunning = false;
+        this.touched = true;
+        this.progress = 1;
+        updateProgress();
+      } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title text-default-title-single" }, this.toastTitle)) : null, h("div", { class: "toast-message text-default" }, h("slot", null))), h("div", { class: "toast-close" }, h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, ref: (r) => (progressBarElement = r), onAnimationEnd: () => this.close(), onTransitionEnd: () => {
+        if (this.progress === 0) {
+          this.close();
+        }
+      } })) : null));
+  }
+  get host() { return this; }
+  static get style() { return toastCss; }
+}, [6, "ix-toast", {
+    "type": [1],
+    "toastTitle": [1, "toast-title"],
+    "autoCloseDelay": [2, "auto-close-delay"],
+    "autoClose": [4, "auto-close"],
+    "icon": [1],
+    "iconColor": [1, "icon-color"],
+    "progress": [32],
+    "isRunning": [32],
+    "touched": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-toast", "ix-icon", "ix-icon-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-toast":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Toast);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { Toast as T, defineCustomElement as d };

package/dist/components/tree-item.js

@@ -0,0 +1,52 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const treeItemCss = ".sc-ix-tree-item-h{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected).hover,.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected):hover{background-color:var(--theme-ghost-hover)}.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected).active,.sc-ix-tree-item-h:not(.disabled):not(:disabled):not(.selected):active{background-color:var(--theme-ghost-pressed)}.selected.sc-ix-tree-item-h{background-color:var(--theme-ghost-selected)}.sc-ix-tree-item-h .tree-node-container.sc-ix-tree-item{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}.sc-ix-tree-item-h .icon-toggle-container.sc-ix-tree-item{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}.sc-ix-tree-item-h .icon-toggle-container.sc-ix-tree-item ix-icon.sc-ix-tree-item{transition:transform 150ms ease-in-out}.sc-ix-tree-item-h .icon-toggle-container.sc-ix-tree-item ix-icon.icon-toggle-down.sc-ix-tree-item{transform:rotate(90deg)}";
+
+const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.toggle = createEvent(this, "toggle", 7);
+    this.itemClick = createEvent(this, "itemClick", 7);
+  }
+  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 style() { return treeItemCss; }
+}, [6, "ix-tree-item", {
+    "text": [1],
+    "hasChildren": [4, "has-children"],
+    "context": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-tree-item", "ix-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-tree-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TreeItem);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { TreeItem as T, defineCustomElement as d };

package/dist/components/typed-event.js

@@ -0,0 +1,44 @@
+/*
+ * 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.
+ */
+class TypedEvent {
+  constructor() {
+    this.listeners = [];
+    this.listenersOncer = [];
+    this.on = (listener) => {
+      this.listeners.push(listener);
+      return {
+        dispose: () => this.off(listener),
+      };
+    };
+    this.once = (listener) => {
+      this.listenersOncer.push(listener);
+    };
+    this.off = (listener) => {
+      const callbackIndex = this.listeners.indexOf(listener);
+      if (callbackIndex > -1) {
+        this.listeners.splice(callbackIndex, 1);
+      }
+    };
+    this.emit = (event) => {
+      /** Update any general listeners */
+      this.listeners.forEach(listener => listener(event));
+      /** Clear the `once` queue */
+      if (this.listenersOncer.length > 0) {
+        const toCall = this.listenersOncer;
+        this.listenersOncer = [];
+        toCall.forEach(listener => listener(event));
+      }
+    };
+    this.pipe = (te) => {
+      return this.on(e => te.emit(e));
+    };
+  }
+}
+
+export { TypedEvent as T };

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

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

package/dist/esm/_commonjsHelpers-4bc7200a.js

@@ -0,0 +1,19 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+export { commonjsRequire as a, createCommonjsModule as c, getDefaultExportFromCjs as g };

package/dist/esm/animation-b667a4c4.js

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