@siemens/ix 1.0.0-beta.2

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

@@ -0,0 +1,166 @@
+/*
+ * 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, h, Host, Prop, State } from '@stencil/core';
+export class MenuItem {
+  constructor() {
+    /**
+     * Move the Tab to a top position.
+     */
+    this.home = false;
+    /**
+     * Place tab on bottom
+     */
+    this.bottom = false;
+    /**
+     * Icon name from @siemens/ix-icons
+     */
+    this.tabIcon = 'document';
+  }
+  get tabLabel() {
+    return this.hostElement.querySelector('.tab-text');
+  }
+  componentDidRender() {
+    const spanElement = this.tabLabel;
+    const newTitle = spanElement.innerHTML.replace('&', '&');
+    if (this.title !== newTitle) {
+      this.title = newTitle;
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        disabled: this.disabled,
+        'home-tab': this.home,
+        'bottom-tab': this.bottom,
+        active: this.active,
+      } },
+      h("li", { class: "tab", title: this.title },
+        h("i", { class: `glyph glyph-${this.tabIcon}` },
+          h("div", { class: "notification" }, this.notifications ? (h("div", { class: "pill" }, this.notifications)) : null)),
+        h("span", { class: "tab-text text-default" },
+          h("slot", null)))));
+  }
+  static get is() { return "ix-menu-item"; }
+  static get originalStyleUrls() { return {
+    "$": ["menu-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["menu-item.css"]
+  }; }
+  static get properties() { return {
+    "home": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Move the Tab to a top position."
+      },
+      "attribute": "home",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "bottom": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Place tab on bottom"
+      },
+      "attribute": "bottom",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "tabIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon name from @siemens/ix-icons"
+      },
+      "attribute": "tab-icon",
+      "reflect": false,
+      "defaultValue": "'document'"
+    },
+    "notifications": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show notification cound on tab"
+      },
+      "attribute": "notifications",
+      "reflect": false
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "State to display active"
+      },
+      "attribute": "active",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable tab and remove event handlers"
+      },
+      "attribute": "disabled",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "title": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/components/menu-settings/menu-settings.css

@@ -0,0 +1,204 @@
+/*
+ * 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.
+ */
+.text-xs {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.625rem;
+  font-weight: 400;
+  line-height: 1.4em;
+  color: var(--theme-color-std-text);
+}
+
+.text-s {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-caption {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-caption-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.143em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-title {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.429em;
+  color: var(--theme-color-std-text);
+}
+
+.text-default-title-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.143em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.25em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l-title {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5em;
+  color: var(--theme-color-std-text);
+}
+
+.text-l-title-single {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25em;
+  color: var(--theme-color-std-text);
+}
+
+.text-h2 {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.455em;
+  color: var(--theme-color-std-text);
+}
+
+.text-xl {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smooting: grayscale;
+  font-family: Siemens Sans, sans-serif;
+  font-size: 1.375rem;
+  font-weight: 400;
+  line-height: 1.091em;
+  color: var(--theme-color-std-text);
+}
+
+a {
+  color: var(--theme-color-primary);
+}
+
+:host {
+  display: block;
+  background-color: var(--theme-nav-overlay--background);
+  padding: 0.75rem 1rem 1rem 2rem;
+  flex-grow: 1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+:host .settings-header {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  height: 2rem;
+  margin-bottom: 0.5rem;
+}
+:host .settings-header h2 {
+  color: var(--theme-nav-overlay-header--color);
+  margin-bottom: 0;
+}
+:host .settings-tabs {
+  margin-bottom: 1.5rem;
+}

package/dist/collection/components/menu-settings/menu-settings.js

@@ -0,0 +1,151 @@
+/*
+ * 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, forceUpdate, h, Host, Prop, Watch } from '@stencil/core';
+export class MenuAbout {
+  constructor() {
+    /**
+     * Label
+     */
+    this.label = 'Settings';
+    /**
+     * Internal
+     */
+    this.show = false;
+  }
+  get settingsItems() {
+    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));
+  }
+  setTab(label) {
+    this.activeTabLabel = label;
+    this.settingsItems.forEach((i) => {
+      i.style.display = 'none';
+      if (i.label === this.activeTabLabel) {
+        i.style.display = 'block';
+      }
+    });
+  }
+  componentWillLoad() {
+    if (this.settingsItems.length) {
+      this.setTab(this.activeTabLabel || this.settingsItems[0].label);
+    }
+  }
+  componentDidLoad() {
+    forceUpdate(this.el);
+  }
+  watchActiveTabLabel(value) {
+    this.setTab(value);
+  }
+  getTabItems() {
+    return this.settingsItems.map(({ label }) => {
+      return (h("ix-tab-item", { class: {
+          active: label === this.activeTabLabel,
+        }, onClick: () => this.setTab(label) }, label));
+    });
+  }
+  render() {
+    return (h(Host, { class: {
+        animate__animated: true,
+        animate__fadeInLeft: this.show,
+        animate__fadeOutLeft: !this.show,
+      } },
+      h("div", { class: "settings-header" },
+        h("h2", { class: "text-h2" }, this.label),
+        h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit(e) })),
+      h("ix-tabs", null, this.getTabItems()),
+      h("slot", null)));
+  }
+  static get is() { return "ix-menu-settings"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["menu-settings.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["menu-settings.css"]
+  }; }
+  static get properties() { return {
+    "activeTabLabel": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "active tab"
+      },
+      "attribute": "active-tab-label",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "'Settings'"
+    },
+    "show": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Internal"
+      },
+      "attribute": "show",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Popover closed"
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "activeTabLabel",
+      "methodName": "watchActiveTabLabel"
+    }]; }
+}

package/dist/collection/components/menu-settings-item/menu-settings-item.css

@@ -0,0 +1,13 @@
+/*
+ * 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/menu-settings-item/menu-settings-item.js

@@ -0,0 +1,42 @@
+/*
+ * 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 MenuSettingsItem {
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "ix-menu-settings-item"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["menu-settings-item.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["menu-settings-item.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label"
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/message-bar/message-bar.css

@@ -0,0 +1,68 @@
+/*
+ * 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.
+ */
+.message-container {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  min-height: 3.375rem;
+  margin: 0.5rem 0.5rem 0rem 0.5rem;
+  padding: calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;
+  border-radius: var(--theme-message-bar--border-radius);
+  background-color: var(--theme-messagebar--background);
+}
+
+.danger {
+  border: solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm);
+}
+
+.warning {
+  border: solid var(--theme-message-bar--border-thickness) var(--theme-color-warning);
+}
+
+.info {
+  border: solid var(--theme-message-bar--border-thickness) var(--theme-color-info);
+}
+
+.message-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+  align-self: center;
+  min-height: 1.25rem;
+  padding: 0 1rem;
+  font-weight: bold;
+  white-space: normal;
+}
+
+ix-icon {
+  margin-top: 0.25rem;
+}