@siemens/ix 1.0.0-beta.2

package/dist/collection/components/menu-about-news/menu-about-news.js

@@ -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.
+ */
+import { Component, Event, h, Host, Prop } from '@stencil/core';
+export class MenuAboutNews {
+  constructor() {
+    /**
+     * Show about news
+     */
+    this.show = false;
+    /**
+     *
+     */
+    this.i18nShowMore = 'Show more';
+    /**
+     * Bottom offset
+     */
+    this.offsetBottom = 0;
+    /**
+     * Internal
+     */
+    this.expanded = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        expanded: this.expanded,
+        show: !this.show,
+      } },
+      h("div", { class: "banner-container" },
+        h("ix-icon", { color: "color-inv-contrast-text", name: "shout", size: "32" }),
+        h("svg", { viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" },
+          h("polygon", { points: "0 0 48 0 48 56 24 48 0 56" }))),
+      h("div", { class: "cui-popover-news-header" },
+        h("span", { class: "text-l-title" }, this.label)),
+      h("ix-icon-button", { size: "24", icon: "close-small", ghost: true, onClick: () => {
+          this.show = false;
+          this.closePopover.emit();
+        } }),
+      h("slot", null),
+      this.aboutItemLabel ? (h("div", { class: "cui-popover-news-footer" },
+        h("button", { class: "btn btn-primary", onClick: (e) => {
+            this.show = false;
+            this.showMore.emit(e);
+          } }, this.i18nShowMore))) : null,
+      h("svg", { id: "arrow", xmlns: "http://www.w3.org/2000/svg", width: "8", height: "12", viewBox: "0 0 8 12" },
+        h("path", { d: "M8 0 L0 6 L8 12" }))));
+  }
+  static get is() { return "ix-menu-about-news"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["menu-about-news.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["menu-about-news.css"]
+  }; }
+  static get properties() { return {
+    "show": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show about news"
+      },
+      "attribute": "show",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Title of the about news"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "i18nShowMore": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "i-1-8n-show-more",
+      "reflect": false,
+      "defaultValue": "'Show more'"
+    },
+    "aboutItemLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Subtitle of the about news"
+      },
+      "attribute": "about-item-label",
+      "reflect": false
+    },
+    "offsetBottom": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Bottom offset"
+      },
+      "attribute": "offset-bottom",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "expanded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Internal"
+      },
+      "attribute": "expanded",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "showMore",
+      "name": "showMore",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Show More button is pressed"
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "closePopover",
+      "name": "closePopover",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Popover closed"
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,91 @@
+/*
+ * 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: block;
+  position: relative;
+  margin-bottom: 0.5rem;
+}
+:host .avatar {
+  display: flex;
+  align-items: center;
+  height: 2.5rem;
+  max-height: 2.5rem;
+  padding-left: 0.25rem;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+  transition: 0.15s;
+  border-radius: 1.25rem;
+}
+:host .avatar > svg {
+  height: 2rem;
+  width: 2rem;
+  min-height: 2rem;
+  min-width: 2rem;
+}
+:host .avatar #avatar-path-background {
+  fill: var(--theme-avatar--background);
+}
+:host .avatar #avatar-path-person {
+  fill: var(--theme-avatar--person);
+}
+:host .avatar .avatar-name {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-left: 1rem;
+  line-height: 1.14;
+}
+:host .avatar .avatar-name .text-default-single {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:host .avatar:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .avatar:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-avatar-btn--background--hover);
+  color: var(--theme-avatar-btn--color--hover);
+}
+:host .avatar:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .avatar:not(.disabled):not(:disabled):active {
+  background-color: var(--theme-avatar-btn--background--active);
+  color: var(--theme-avatar-btn--color--active);
+}

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

@@ -0,0 +1,136 @@
+/*
+ * 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';
+import { Popover } from '../utils/popover.util';
+export class MenuAvatar {
+  constructor() {
+    /**
+     *
+     */
+    this.i18nLogout = 'Logout';
+  }
+  toggleMenu() {
+    this.outsideListener.open();
+    this.displayMenu = !this.displayMenu;
+  }
+  componentDidLoad() {
+    this.outsideListener = new Popover(this.hostElement, this.hostElement.querySelector('ix-dropdown'), () => {
+      this.displayMenu = false;
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.outsideListener) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  render() {
+    return (h(Host, null,
+      h("li", { class: "nav-item top-item avatar no-hover", title: this.top },
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32" },
+          h("g", { fill: "none", "fill-rule": "evenodd" },
+            h("path", { id: "avatar-path-background", d: "M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n                    16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z" }),
+            h("path", { id: "avatar-path-person", d: "M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n                  6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n                  9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n                  6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z" }))),
+        h("div", { class: "avatar-name" },
+          h("span", { class: "text-default-single", title: this.top }, this.top),
+          h("span", { class: "text-default-single", title: this.bottom }, this.bottom))),
+      h("ix-dropdown", { show: this.displayMenu },
+        h("slot", null),
+        h("ix-menu-avatar-item", { label: this.i18nLogout, icon: "log-out", onClick: (e) => {
+            this.logoutClick.emit(e);
+          } }))));
+  }
+  static get is() { return "ix-menu-avatar"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["menu-avatar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["menu-avatar.css"]
+  }; }
+  static get properties() { return {
+    "top": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "First line of text"
+      },
+      "attribute": "top",
+      "reflect": false
+    },
+    "bottom": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Second line of text"
+      },
+      "attribute": "bottom",
+      "reflect": false
+    },
+    "i18nLogout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "i-1-8n-logout",
+      "reflect": false,
+      "defaultValue": "'Logout'"
+    }
+  }; }
+  static get states() { return {
+    "displayMenu": {}
+  }; }
+  static get events() { return [{
+      "method": "logoutClick",
+      "name": "logoutClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Logout click"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "toggleMenu",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }]; }
+}

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

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

@@ -0,0 +1,79 @@
+/*
+ * 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, Prop } from '@stencil/core';
+export class MenuAvatarItem {
+  render() {
+    return (h("ix-dropdown-item", { icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+  }
+  static get is() { return "ix-menu-avatar-item"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["menu-avatar-item.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["menu-avatar-item.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Avatar dropdown icon"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Avatar dropdown label"
+      },
+      "attribute": "label",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "itemClick",
+      "name": "itemClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Avatar dropdown item clicked"
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,140 @@
+/*
+ * 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.
+ */
+ix-menu-item {
+  position: relative;
+  display: block;
+}
+ix-menu-item .tab {
+  display: flex;
+  position: relative;
+  align-items: center;
+  height: 3rem;
+  z-index: 500;
+  padding-left: 1.25rem;
+}
+ix-menu-item .tab:not(.selected) {
+  cursor: pointer;
+}
+ix-menu-item .tab:not(.selected):not(.disabled):not(:disabled).hover, ix-menu-item .tab:not(.selected):not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-ghost--background--hover);
+}
+ix-menu-item .tab:not(.selected):not(.disabled):not(:disabled).active, ix-menu-item .tab:not(.selected):not(.disabled):not(:disabled):active {
+  background-color: var(--theme-ghost--background--active);
+}
+ix-menu-item i.glyph {
+  color: var(--theme-nav-item-primary-icon--color);
+  position: relative;
+}
+ix-menu-item .tab:focus {
+  outline: none;
+}
+ix-menu-item:focus {
+  outline: none;
+}
+ix-menu-item .tab:not(:last-child) {
+  margin-bottom: 0.5rem;
+}
+ix-menu-item .notification {
+  display: inline-flex;
+  position: absolute;
+  top: -0.5rem;
+  right: -50%;
+}
+ix-menu-item .notification .pill {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 1rem;
+  min-width: 1rem;
+  position: relative;
+  border-radius: 6.25rem;
+  background-color: var(--theme-color-primary);
+  border-radius: 6.25rem;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: 1;
+  font-family: Siemens Sans, Arial, sans-serif;
+  color: var(--theme-color-primary--contrast);
+  padding: 0.25rem;
+}
+ix-menu-item .tab-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--theme-nav-item-primary--color);
+  margin: 0 1.25rem;
+}
+ix-menu-item.active .tab, ix-menu-item.selected .tab {
+  background-color: var(--theme-nav-item-primary--background--selected);
+}
+ix-menu-item.active .tab::before, ix-menu-item.selected .tab::before {
+  content: "";
+  background-color: var(--theme-nav-item-primary--border-color--selected);
+  height: 3rem;
+  width: 0.25rem;
+  left: 0;
+  position: absolute;
+}
+ix-menu-item.active .tab > .glyph, ix-menu-item.selected .tab > .glyph {
+  color: var(--theme-nav-item-primary-icon--color--selected);
+}
+ix-menu-item.disabled {
+  color: var(--theme-color-weak-text);
+  pointer-events: none;
+  cursor: default;
+}
+ix-menu-item.disabled .tab > .glyph {
+  color: var(--theme-color-weak-text);
+}
+ix-menu-item.disabled .tab-text {
+  color: var(--theme-color-weak-text);
+}
+ix-menu-item.home-tab, ix-menu-item[slot=home] {
+  margin-bottom: 1.5rem;
+}
+ix-menu-item.bottom-tab, ix-menu-item[slot=bottom] {
+  height: 2.25rem;
+}
+ix-menu-item.bottom-tab .tab, ix-menu-item[slot=bottom] .tab {
+  height: 2.25rem;
+}
+ix-menu-item.bottom-tab .tab::before, ix-menu-item[slot=bottom] .tab::before {
+  height: 2.25rem;
+}
+ix-menu-item.bottom-tab.active .tab, ix-menu-item.bottom-tab.selected .tab, ix-menu-item[slot=bottom].active .tab, ix-menu-item[slot=bottom].selected .tab {
+  background-color: var(--theme-color-1);
+}