@siemens/ix 2.0.0 → 2.0.1

package/components/ix-link-button.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const linkButtonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:inline-flex;height:2rem;font-size:0.875rem;font-weight:400;min-width:2rem}:host .link-button{display:inline-flex;position:relative;width:100%;padding:0 0.25rem 0 0;align-items:center;justify-content:center;background-color:transparent;color:var(--theme-color-primary);cursor:pointer;text-decoration:none}:host .link-button .link{display:block;position:relative;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):hover{color:var(--theme-color-dynamic--hover)}:host .link-button:not(.disabled):not(:disabled):hover .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):active,:host .link-button:not(.disabled):not(:disabled).active{color:var(--theme-color-dynamic--active)}:host .link-button:not(.disabled):not(:disabled):active .link,:host .link-button:not(.disabled):not(:disabled).active .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button.disabled{cursor:default;color:var(--theme-color-weak-text)}:host .link-button a{all:unset}:host :focus-visible{outline:1px solid var(--theme-color-focus-bdr)}";
+
+const LinkButton = /*@__PURE__*/ proxyCustomElement(class LinkButton extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.disabled = false;
+    this.url = undefined;
+    this.target = '_self';
+  }
+  render() {
+    return (h(Host, null, h("a", { title: this.url, tabindex: "0", class: {
+        'link-button': true,
+        disabled: this.disabled,
+      }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { class: {
+        link: true,
+        disabled: this.disabled,
+      } }, h("slot", null)))));
+  }
+  static get style() { return linkButtonCss; }
+}, [1, "ix-link-button", {
+    "disabled": [4],
+    "url": [1],
+    "target": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-link-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-link-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LinkButton);
+      }
+      break;
+  } });
+}
+
+const IxLinkButton = LinkButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxLinkButton, defineCustomElement };
+
+//# sourceMappingURL=ix-link-button.js.map

package/components/ix-link-button.js.map

@@ -0,0 +1 @@
+{"file":"ix-link-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,svbAAsvb;;MCmB/vb,UAAU;;;;;oBAIF,KAAK;;kBAYkC,OAAO;;EAEjE,MAAM;IACJ,QACE,EAAC,IAAI,QACH,SACE,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,eACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,GACA,EACX,WACE,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACT,CACJ,CACC,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/link-button/link-button.scss?tag=ix-link-button&encapsulation=shadow","./src/components/link-button/link-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/components/buttons';\n@import 'mixins/hover';\n\n:host {\n  display: inline-flex;\n  height: $x-large-space;\n  font-size: $font-size-default;\n  font-weight: $font-weight-normal;\n  min-width: $x-large-space;\n\n  .link-button {\n    display: inline-flex;\n    position: relative;\n    width: 100%;\n    padding: 0 $tiny-space 0 0;\n    align-items: center;\n    justify-content: center;\n    background-color: transparent;\n    color: var(--theme-color-primary);\n    cursor: pointer;\n    text-decoration: none;\n\n    .link {\n      display: block;\n      position: relative;\n      width: 100%;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n\n    @include hover {\n      color: var(--theme-color-dynamic--hover);\n\n      .link {\n        text-decoration: underline;\n        text-underline-offset: 0.2rem;\n      }\n    }\n\n    @include active {\n      color: var(--theme-color-dynamic--active);\n\n      .link {\n        text-decoration: underline;\n        text-underline-offset: 0.2rem;\n      }\n    }\n\n    &.disabled {\n      cursor: default;\n      color: var(--theme-color-weak-text);\n    }\n\n    a {\n      all: unset;\n    }\n  }\n\n  :focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  /**\n   * Disable the link button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Url for the link button\n   */\n  @Prop() url: string;\n\n  /**\n   * Specifies where to open the link\n   *\n   * https://www.w3schools.com/html/html_links.asp\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  render() {\n    return (\n      <Host>\n        <a\n          title={this.url}\n          tabindex=\"0\"\n          class={{\n            'link-button': true,\n            disabled: this.disabled,\n          }}\n          href={this.disabled ? undefined : this.url}\n          target={this.target}\n        >\n          <ix-icon\n            class=\"icon\"\n            name={'chevron-right-small'}\n            size=\"16\"\n          ></ix-icon>\n          <div\n            class={{\n              link: true,\n              disabled: this.disabled,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-map-navigation-overlay.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxMapNavigationOverlay extends Components.IxMapNavigationOverlay, HTMLElement {}
+export const IxMapNavigationOverlay: {
+  prototype: IxMapNavigationOverlay;
+  new (): IxMapNavigationOverlay;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-map-navigation-overlay.js

@@ -0,0 +1,8 @@
+import { M as MapNavigationOverlay, d as defineCustomElement$1 } from './map-navigation-overlay.js';
+
+const IxMapNavigationOverlay = MapNavigationOverlay;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMapNavigationOverlay, defineCustomElement };
+
+//# sourceMappingURL=ix-map-navigation-overlay.js.map

package/components/ix-map-navigation-overlay.js.map

@@ -0,0 +1 @@
+{"file":"ix-map-navigation-overlay.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-map-navigation.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxMapNavigation extends Components.IxMapNavigation, HTMLElement {}
+export const IxMapNavigation: {
+  prototype: IxMapNavigation;
+  new (): IxMapNavigation;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-map-navigation.js

@@ -0,0 +1,226 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { u as useContextProvider, A as ApplicationLayoutContext } from './context.js';
+import { d as defineCustomElement$6 } from './application-header.js';
+import { d as defineCustomElement$5 } from './burger-menu.js';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './map-navigation-overlay.js';
+import { d as defineCustomElement$2 } from './spinner.js';
+
+const mapNavigationCss = ":host{display:flex;position:relative;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .map-nav{display:flex;margin-left:3.25rem;position:relative;height:100%;flex-grow:1;overflow:hidden}:host .map-nav-sidebar{display:flex;flex-direction:column;align-items:center;width:29.75rem;max-width:29.75rem;min-width:29.75rem;height:100%;left:4rem;background-color:var(--theme-map-navigation--background);-webkit-border-end:0.125rem solid var(--theme-map-navigation-separator--background);border-inline-end:0.125rem solid var(--theme-map-navigation-separator--background);z-index:99}:host .map-nav-sidebar-content{align-items:center;position:relative;overflow:auto;height:100%;width:100%}:host .map-nav-sidebar-content .map-nav-sidebar-static-content{-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);display:flex;justify-content:space-between;margin-top:0.437rem;margin-bottom:0.812rem;margin-left:1rem;margin-right:1rem}:host .map-nav-header{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}:host .map-nav-header .map-nav-header-brand{background-color:var(--theme-map-navigation-background);display:flex;align-items:center;height:100%;width:100%;padding:0 1rem;--theme-app-header--color:var(--theme-map-navigation-header--color);--theme-app-header-logo--color:var(--theme-map-navigation-logo--color)}:host .map-nav-header .map-nav-header-brand button{margin-left:1rem}:host .map-nav-header-content{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}:host .map-nav-header-content.empty{height:0}:host .map-nav-title{-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);display:flex;align-items:center;flex-grow:1}:host .content{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}:host ::slotted(ix-menu){position:absolute}";
+
+const MapNavigation = /*@__PURE__*/ proxyCustomElement(class MapNavigation extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.navigationToggled = createEvent(this, "navigationToggled", 7);
+    this.contextMenuClick = createEvent(this, "contextMenuClick", 7);
+    this.applicationName = undefined;
+    this.navigationTitle = undefined;
+    this.hideContextMenu = true;
+    this.isSidebarOpen = true;
+    this.hasContentHeader = false;
+  }
+  get menu() {
+    return this.hostElement.querySelector('ix-menu');
+  }
+  get menuOverlay() {
+    return this.hostElement.querySelector('ix-menu-overlay');
+  }
+  get mapNavMenu() {
+    return this.hostElement.shadowRoot.querySelector('.map-nav-menu');
+  }
+  get sidebar() {
+    return this.hostElement.shadowRoot.querySelector('.map-nav-sidebar');
+  }
+  get overlay() {
+    return this.hostElement.shadowRoot.querySelector('#overlay');
+  }
+  componentDidRender() {
+    this.appendMenu();
+    this.closeOverlay();
+  }
+  componentWillLoad() {
+    useContextProvider(this.hostElement, ApplicationLayoutContext, {
+      hideHeader: false,
+      host: 'map-navigation',
+    });
+  }
+  appendMenu() {
+    this.menu.addEventListener('mapExpandChange', (event) => {
+      const state = !event.detail;
+      this.toggleSidebar(state);
+    });
+    this.menu.enableMapExpand = true;
+  }
+  /**
+   * Change the visibility of the sidebar
+   *
+   * @param show new visibility state
+   * @since 1.6.0
+   */
+  async toggleSidebar(show) {
+    if (show !== undefined) {
+      this.isSidebarOpen = show;
+    }
+    else {
+      this.isSidebarOpen = !this.isSidebarOpen;
+    }
+    if (this.isSidebarOpen) {
+      this.openSidebar();
+    }
+    else {
+      this.closeSidebar();
+    }
+    this.navigationToggled.emit(this.isSidebarOpen);
+    this.menu.toggleMapExpand(this.isSidebarOpen);
+  }
+  closeSidebar() {
+    anime({
+      targets: this.sidebar,
+      duration: MapNavigation.defaultTime,
+      marginLeft: [0, '-29.75rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        this.sidebar.classList.add('d-none');
+      },
+    });
+  }
+  openSidebar() {
+    anime({
+      targets: this.sidebar,
+      duration: MapNavigation.defaultTime,
+      marginLeft: ['-29.75rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+      begin: () => {
+        this.sidebar.classList.remove('d-none');
+      },
+    });
+  }
+  /**
+   * Open a overlay inside content area
+   * @deprecated Will be removed in 2.0.0. Use slot based approach
+   *
+   * @param name
+   * @param component
+   * @param icon
+   * @param color
+   */
+  async openOverlay(name, component, icon, color) {
+    anime({
+      targets: this.overlay,
+      duration: MapNavigation.slowTime,
+      backdropFilter: [0, 'blur(1rem)'],
+      translateX: ['-4rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+      begin: () => {
+        this.overlay.classList.remove('d-none');
+      },
+    });
+    const overlayInstance = document.createElement('ix-map-navigation-overlay');
+    overlayInstance.setAttribute('color', color);
+    overlayInstance.setAttribute('name', name);
+    overlayInstance.setAttribute('icon', icon);
+    overlayInstance.setAttribute('slot', 'overlay');
+    overlayInstance.addEventListener('closeClick', () => this.closeOverlay());
+    overlayInstance.appendChild(component);
+    this.hostElement.appendChild(overlayInstance);
+  }
+  /**
+   * Close current shown overlay
+   * @deprecated Will be removed in 2.0.0. Use slot based approach
+   */
+  async closeOverlay() {
+    anime({
+      targets: this.overlay,
+      duration: MapNavigation.slowTime,
+      backdropFilter: ['blur(1rem)', 0],
+      translateX: [0, '-4rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        var _a;
+        if (!this.overlay) {
+          return;
+        }
+        (_a = this.overlay.firstChild) === null || _a === void 0 ? void 0 : _a.remove();
+        this.overlay.classList.add('d-none');
+      },
+    });
+  }
+  checkHasContentHeader(e) {
+    const nodes = e.currentTarget.assignedNodes({
+      flatten: true,
+    });
+    this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "menu" }), h("div", { class: "map-nav" }, h("div", { class: "map-nav-sidebar" }, h("div", { class: "map-nav-header" }, h("ix-application-header", { name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { slot: "logo", name: "logo" }))), h("div", { class: "map-nav-sidebar-content" }, h("div", { class: "map-nav-sidebar-static-content" }, h("div", { class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { class: "map-nav-sidebar-user-content" }, h("slot", { name: "sidebar-content" })))), h("div", { class: "content" }, h("div", { class: {
+        'map-nav-header-content': true,
+        'bg-2': true,
+        empty: !this.hasContentHeader,
+      } }, h("slot", { name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", null, h("slot", null), h("slot", { name: "overlay" }))))));
+  }
+  get hostElement() { return this; }
+  static get style() { return mapNavigationCss; }
+}, [1, "ix-map-navigation", {
+    "applicationName": [1, "application-name"],
+    "navigationTitle": [1, "navigation-title"],
+    "hideContextMenu": [4, "hide-context-menu"],
+    "isSidebarOpen": [32],
+    "hasContentHeader": [32],
+    "toggleSidebar": [64],
+    "openOverlay": [64],
+    "closeOverlay": [64]
+  }]);
+MapNavigation.defaultTime = 150;
+MapNavigation.slowTime = 500;
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-map-navigation", "ix-application-header", "ix-burger-menu", "ix-icon-button", "ix-map-navigation-overlay", "ix-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-map-navigation":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MapNavigation);
+      }
+      break;
+    case "ix-application-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ix-burger-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-map-navigation-overlay":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxMapNavigation = MapNavigation;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMapNavigation, defineCustomElement };
+
+//# sourceMappingURL=ix-map-navigation.js.map

package/components/ix-map-navigation.js.map

@@ -0,0 +1 @@
+{"file":"ix-map-navigation.js","mappings":"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","names":[],"sources":["./src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","./src/components/map-navigation/map-navigation.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  $appHeaderHeight: 3.5rem;\n  $appHeaderGradientHeight: 4rem;\n  $navHeaderHeight: 11.5rem;\n  $sidebarWidth: 29.75rem;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  .map-nav {\n    display: flex;\n    margin-left: 3.25rem;\n    position: relative;\n    height: 100%;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .map-nav-sidebar {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: $sidebarWidth;\n    max-width: $sidebarWidth;\n    min-width: $sidebarWidth;\n    height: 100%;\n    left: 4rem;\n    background-color: var(--theme-map-navigation--background);\n    border-inline-end: 0.125rem solid\n      var(--theme-map-navigation-separator--background);\n    z-index: 99;\n  }\n\n  .map-nav-sidebar-content {\n    align-items: center;\n    position: relative;\n    overflow: auto;\n    height: 100%;\n    width: 100%;\n\n    .map-nav-sidebar-static-content {\n      @include text-h2;\n      display: flex;\n      justify-content: space-between;\n      margin-top: 0.437rem;\n      margin-bottom: 0.812rem;\n      margin-left: $default-space;\n      margin-right: $default-space;\n    }\n  }\n\n  .map-nav-header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: $appHeaderHeight;\n    min-height: $appHeaderHeight;\n    width: 100%;\n\n    .map-nav-header-brand {\n      background-color: var(--theme-map-navigation-background);\n      display: flex;\n      align-items: center;\n      height: 100%;\n      width: 100%;\n      padding: 0 $default-space;\n\n      --theme-app-header--color: var(--theme-map-navigation-header--color);\n      --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n      button {\n        margin-left: $default-space;\n      }\n    }\n  }\n\n  .map-nav-header-content {\n    display: flex;\n    height: $appHeaderHeight;\n    align-items: center;\n    overflow: hidden;\n    padding: 0 $default-space;\n\n    &.empty {\n      height: 0;\n    }\n  }\n\n  .map-nav-title {\n    @include text-h2();\n\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n  }\n\n  .content {\n    display: block;\n    flex-grow: 1;\n    position: relative;\n    height: 100%;\n    overflow: hidden;\n    z-index: calc(var(--theme-z-index-sticky) - 1);\n  }\n\n  ::slotted(ix-menu) {\n    position: absolute;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\n\n@Component({\n  tag: 'ix-map-navigation',\n  styleUrl: 'map-navigation.scss',\n  shadow: true,\n})\nexport class MapNavigation {\n  private static readonly defaultTime = 150;\n  private static readonly slowTime = 500;\n\n  @Element() hostElement: HTMLIxMapNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Navigation title\n   */\n  @Prop() navigationTitle: string;\n\n  /**\n   * Hide the sidebar context menu button when set to true\n   */\n  @Prop() hideContextMenu = true;\n\n  /**\n   * Navigation toggled\n   */\n  @Event() navigationToggled: EventEmitter<boolean>;\n\n  /**\n   * Context menu clicked\n   */\n  @Event() contextMenuClick: EventEmitter<void>;\n\n  @State() isSidebarOpen = true;\n  @State() hasContentHeader = false;\n\n  get menu() {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  get menuOverlay() {\n    return this.hostElement.querySelector('ix-menu-overlay');\n  }\n\n  get mapNavMenu() {\n    return this.hostElement.shadowRoot.querySelector('.map-nav-menu');\n  }\n\n  get sidebar() {\n    return this.hostElement.shadowRoot.querySelector('.map-nav-sidebar');\n  }\n\n  get overlay() {\n    return this.hostElement.shadowRoot.querySelector('#overlay');\n  }\n\n  componentDidRender() {\n    this.appendMenu();\n    this.closeOverlay();\n  }\n\n  componentWillLoad() {\n    useContextProvider(this.hostElement, ApplicationLayoutContext, {\n      hideHeader: false,\n      host: 'map-navigation',\n    });\n  }\n\n  private appendMenu() {\n    this.menu.addEventListener(\n      'mapExpandChange',\n      (event: CustomEvent<boolean>) => {\n        const state = !event.detail;\n        this.toggleSidebar(state);\n      }\n    );\n    this.menu.enableMapExpand = true;\n  }\n\n  /**\n   * Change the visibility of the sidebar\n   *\n   * @param show new visibility state\n   * @since 1.6.0\n   */\n  @Method()\n  async toggleSidebar(show?: boolean) {\n    if (show !== undefined) {\n      this.isSidebarOpen = show;\n    } else {\n      this.isSidebarOpen = !this.isSidebarOpen;\n    }\n\n    if (this.isSidebarOpen) {\n      this.openSidebar();\n    } else {\n      this.closeSidebar();\n    }\n\n    this.navigationToggled.emit(this.isSidebarOpen);\n    this.menu.toggleMapExpand(this.isSidebarOpen);\n  }\n\n  private closeSidebar() {\n    anime({\n      targets: this.sidebar,\n      duration: MapNavigation.defaultTime,\n      marginLeft: [0, '-29.75rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        this.sidebar.classList.add('d-none');\n      },\n    });\n  }\n\n  private openSidebar() {\n    anime({\n      targets: this.sidebar,\n      duration: MapNavigation.defaultTime,\n      marginLeft: ['-29.75rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.sidebar.classList.remove('d-none');\n      },\n    });\n  }\n\n  /**\n   * Open a overlay inside content area\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   *\n   * @param name\n   * @param component\n   * @param icon\n   * @param color\n   */\n  @Method()\n  async openOverlay(\n    name: string,\n    component: HTMLElement,\n    icon?: string,\n    color?: string\n  ) {\n    anime({\n      targets: this.overlay,\n      duration: MapNavigation.slowTime,\n      backdropFilter: [0, 'blur(1rem)'],\n      translateX: ['-4rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.overlay.classList.remove('d-none');\n      },\n    });\n\n    const overlayInstance = document.createElement('ix-map-navigation-overlay');\n    overlayInstance.setAttribute('color', color);\n    overlayInstance.setAttribute('name', name);\n    overlayInstance.setAttribute('icon', icon);\n    overlayInstance.setAttribute('slot', 'overlay');\n    overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n    overlayInstance.appendChild(component);\n    this.hostElement.appendChild(overlayInstance);\n  }\n\n  /**\n   * Close current shown overlay\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   */\n  @Method()\n  async closeOverlay() {\n    anime({\n      targets: this.overlay,\n      duration: MapNavigation.slowTime,\n      backdropFilter: ['blur(1rem)', 0],\n      translateX: [0, '-4rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        if (!this.overlay) {\n          return;\n        }\n        this.overlay.firstChild?.remove();\n        this.overlay.classList.add('d-none');\n      },\n    });\n  }\n\n  private checkHasContentHeader(e: Event) {\n    const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n      flatten: true,\n    });\n\n    this.hasContentHeader = nodes?.length !== 0;\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"menu\"></slot>\n        <div class=\"map-nav\">\n          <div class=\"map-nav-sidebar\">\n            <div class=\"map-nav-header\">\n              <ix-application-header\n                name={this.applicationName}\n                class=\"map-nav-header-brand\"\n              >\n                <slot slot=\"logo\" name=\"logo\"></slot>\n              </ix-application-header>\n            </div>\n            <div class=\"map-nav-sidebar-content\">\n              <div class=\"map-nav-sidebar-static-content\">\n                <div class=\"map-nav-title\">{this.navigationTitle}</div>\n                {this.hideContextMenu ? (\n                  ''\n                ) : (\n                  <ix-icon-button\n                    icon={'context-menu'}\n                    ghost\n                    size=\"24\"\n                    variant=\"secondary\"\n                    onClick={(_) => this.contextMenuClick.emit()}\n                  ></ix-icon-button>\n                )}\n              </div>\n              <div class=\"map-nav-sidebar-user-content\">\n                <slot name=\"sidebar-content\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"content\">\n            <div\n              class={{\n                'map-nav-header-content': true,\n                'bg-2': true,\n                empty: !this.hasContentHeader,\n              }}\n            >\n              <slot\n                name=\"content-header\"\n                onSlotchange={(e) => this.checkHasContentHeader(e)}\n              ></slot>\n            </div>\n            <main>\n              <slot></slot>\n              <slot name=\"overlay\"></slot>\n            </main>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-menu-about-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxMenuAboutItem extends Components.IxMenuAboutItem, HTMLElement {}
+export const IxMenuAboutItem: {
+  prototype: IxMenuAboutItem;
+  new (): IxMenuAboutItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-menu-about-item.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const menuAboutItemCss = ":host{display:block}";
+
+const MenuAboutItem = /*@__PURE__*/ proxyCustomElement(class MenuAboutItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return menuAboutItemCss; }
+}, [1, "ix-menu-about-item", {
+    "label": [513]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-about-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-about-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuAboutItem);
+      }
+      break;
+  } });
+}
+
+const IxMenuAboutItem = MenuAboutItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuAboutItem, defineCustomElement };
+
+//# sourceMappingURL=ix-menu-about-item.js.map

package/components/ix-menu-about-item.js.map

@@ -0,0 +1 @@
+{"file":"ix-menu-about-item.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sBAAsB;;MCgBlC,aAAa;;;;;;;EAMxB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-about-item/menu-about-item.css?tag=ix-menu-about-item&encapsulation=shadow","./src/components/menu-about-item/menu-about-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-item',\n  styleUrl: 'menu-about-item.css',\n  shadow: true,\n})\nexport class MenuAboutItem {\n  /**\n   * About Item label\n   */\n  @Prop({ reflect: true }) label: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-menu-about-news.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxMenuAboutNews extends Components.IxMenuAboutNews, HTMLElement {}
+export const IxMenuAboutNews: {
+  prototype: IxMenuAboutNews;
+  new (): IxMenuAboutNews;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-menu-about-news.js

@@ -0,0 +1,83 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$5 } from './button.js';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './spinner.js';
+import { d as defineCustomElement$2 } from './typography.js';
+
+const menuAboutNewsCss = ":host{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-1);border:var(--theme-weak-bdr-1);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--animate-duration);margin-left:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .banner-container{position:absolute;top:0.0625rem;left:1rem}:host .banner-container svg{position:absolute;height:3.625rem;width:3rem}:host .banner-container svg polygon{fill:var(--theme-color-primary)}:host .banner-container ix-icon{margin:0.5rem;position:absolute;z-index:1}:host .cui-popover-news-header{margin-bottom:2.5rem;margin-left:4rem;margin-top:-0.25rem}:host .popover-body{color:var(--theme-color-std-text)}:host .cui-popover-news-footer{display:flex;justify-content:flex-end;margin-top:1rem}:host ix-icon-button{top:0.5rem;right:0.5rem;position:absolute}:host #arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-1);border-left:var(--theme-weak-bdr-1);border-bottom:var(--theme-weak-bdr-1);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}:host(.expanded){left:calc(3.4rem + 12.7rem)}:host(.show){display:none}";
+
+const MenuAboutNews = /*@__PURE__*/ proxyCustomElement(class MenuAboutNews extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.showMore = createEvent(this, "showMore", 7);
+    this.closePopover = createEvent(this, "closePopover", 7);
+    this.show = false;
+    this.label = undefined;
+    this.i18nShowMore = 'Show more';
+    this.aboutItemLabel = undefined;
+    this.offsetBottom = 0;
+    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("ix-typography", { variant: "default-title-single" }, 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("ix-button", { variant: "primary", onClick: (e) => {
+        this.show = false;
+        this.showMore.emit(e);
+      } }, this.i18nShowMore))) : null, h("div", { id: "arrow" })));
+  }
+  static get style() { return menuAboutNewsCss; }
+}, [1, "ix-menu-about-news", {
+    "show": [1540],
+    "label": [1],
+    "i18nShowMore": [1, "i-1-8n-show-more"],
+    "aboutItemLabel": [1, "about-item-label"],
+    "offsetBottom": [2, "offset-bottom"],
+    "expanded": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-menu-about-news", "ix-button", "ix-icon-button", "ix-spinner", "ix-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-menu-about-news":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MenuAboutNews);
+      }
+      break;
+    case "ix-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ix-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ix-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IxMenuAboutNews = MenuAboutNews;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxMenuAboutNews, defineCustomElement };
+
+//# sourceMappingURL=ix-menu-about-news.js.map

package/components/ix-menu-about-news.js.map

@@ -0,0 +1 @@
+{"file":"ix-menu-about-news.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,uxDAAuxD;;MCgBnyD,aAAa;;;;;;;gBAIuB,KAAK;;wBAU7B,WAAW;;wBAUX,CAAC;oBAeL,KAAK;;EAExB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI;OACjB,IAED,WAAK,KAAK,EAAC,kBAAkB,IAC3B,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,EACX,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,IACzD,eAAS,MAAM,EAAC,2BAA2B,GAAG,CAC1C,CACF,EAEN,WAAK,KAAK,EAAC,yBAAyB,IAClC,qBAAe,OAAO,EAAC,sBAAsB,IAC1C,IAAI,CAAC,KAAK,CACG,CACZ,EAEN,sBACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,aAAa,EACnB,KAAK,QACL,OAAO,EAAE;QACP,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;OAC1B,GACe,EAClB,eAAa,EACZ,IAAI,CAAC,cAAc,IAClB,WAAK,KAAK,EAAC,yBAAyB,IAClC,iBACE,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,CAAC,CAAC;QACT,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;OACvB,IAEA,IAAI,CAAC,YAAY,CACR,CACR,IACJ,IAAI,EACR,WAAK,EAAE,EAAC,OAAO,GAAO,CACjB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/menu-about-news/menu-about-news.scss?tag=ix-menu-about-news&encapsulation=shadow","./src/components/menu-about-news/menu-about-news.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadows';\n@import 'mixins/shadow-dom/component';\n$left: 3.4rem;\n\n:host {\n  @include ix-component;\n\n  --margin: 0.5rem;\n\n  display: block;\n  position: fixed;\n  width: 20rem;\n  height: auto;\n  background-color: var(--theme-color-1);\n  border: var(--theme-weak-bdr-1);\n  border-radius: $default-border-radius;\n  padding: 1rem;\n  left: $left;\n  z-index: 10000;\n  transition: left var(--animate-duration);\n\n  margin-left: var(--margin) !important;\n\n  @include box-shadow(4);\n\n  .banner-container {\n    position: absolute;\n    top: 0.0625rem;\n    left: $default-space;\n\n    svg {\n      position: absolute;\n      height: 3.625rem;\n      width: 3rem;\n\n      polygon {\n        fill: var(--theme-color-primary);\n      }\n    }\n\n    ix-icon {\n      margin: $small-space;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  .cui-popover-news-header {\n    margin-bottom: 2.5rem;\n    margin-left: 4rem;\n    margin-top: -$tiny-space;\n  }\n\n  .popover-body {\n    color: var(--theme-color-std-text);\n  }\n\n  .cui-popover-news-footer {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 1rem;\n  }\n\n  ix-icon-button {\n    top: $small-space;\n    right: $small-space;\n    position: absolute;\n  }\n\n  #arrow {\n    position: absolute;\n    width: 0.5rem;\n    height: 0.5rem;\n    background-color: var(--theme-color-1);\n    border-left: var(--theme-weak-bdr-1);\n    border-bottom: var(--theme-weak-bdr-1);\n    transform: translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg);\n  }\n}\n\n:host(.expanded) {\n  left: calc(#{$left} + 12.7rem);\n}\n\n:host(.show) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-news',\n  styleUrl: 'menu-about-news.scss',\n  shadow: true,\n})\nexport class MenuAboutNews {\n  /**\n   * Show about news\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Title of the about news\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() i18nShowMore = 'Show more';\n\n  /**\n   * Subtitle of the about news\n   */\n  @Prop() aboutItemLabel: string;\n\n  /**\n   * Bottom offset\n   */\n  @Prop() offsetBottom = 0;\n\n  /**\n   * Show More button is pressed\n   */\n  @Event() showMore: EventEmitter<MouseEvent>;\n\n  /**\n   * Popover closed\n   */\n  @Event() closePopover: EventEmitter<void>;\n\n  /**\n   * Internal\n   */\n  @Prop() expanded = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          show: !this.show,\n        }}\n      >\n        <div class=\"banner-container\">\n          <ix-icon\n            color=\"color-inv-contrast-text\"\n            name={'shout'}\n            size=\"32\"\n          ></ix-icon>\n          <svg viewBox=\"0 0 48 56\" xmlns=\"http://www.w3.org/2000/svg\">\n            <polygon points=\"0 0 48 0 48 56 24 48 0 56\" />\n          </svg>\n        </div>\n\n        <div class=\"cui-popover-news-header\">\n          <ix-typography variant=\"default-title-single\">\n            {this.label}\n          </ix-typography>\n        </div>\n\n        <ix-icon-button\n          size=\"24\"\n          icon={'close-small'}\n          ghost\n          onClick={() => {\n            this.show = false;\n            this.closePopover.emit();\n          }}\n        ></ix-icon-button>\n        <slot></slot>\n        {this.aboutItemLabel ? (\n          <div class=\"cui-popover-news-footer\">\n            <ix-button\n              variant=\"primary\"\n              onClick={(e) => {\n                this.show = false;\n                this.showMore.emit(e);\n              }}\n            >\n              {this.i18nShowMore}\n            </ix-button>\n          </div>\n        ) : null}\n        <div id=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-menu-about.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxMenuAbout extends Components.IxMenuAbout, HTMLElement {}
+export const IxMenuAbout: {
+  prototype: IxMenuAbout;
+  new (): IxMenuAbout;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;