npm - @siemens/ix - Versions diffs - 1.6.3 → 2.0.0-beta.1 - Mend

@siemens/ix 1.6.3 → 2.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1549) hide show

package/dist/cjs/ix-link-button.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-link-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,svbAAsvb;;MCmB/vb,UAAU;;;oBAIF,KAAK;;kBAYkC,OAAO;;EAEjE,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,eACE,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,IAEnBA,qBAAS,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAC,IAAI,GAAW,EACrEA,iBACE,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEDA,qBAAa,CACT,CACJ,CACC,EACP;GACH;;;;;;","names":["h","Host"],"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 class=\"icon\" name=\"chevron-right-small\" size=\"16\"></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/dist/cjs/ix-map-navigation_2.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-c978628a.js');
+const index = require('./index-be499a74.js');
 const anime_es = require('./anime.es-8822f296.js');
+const context = require('./context-0fdf2fa1.js');
+require('./typed-event-f0f051da.js');
-const mapNavigationCss = ".sc-ix-map-navigation-h{display:flex;position:relative;width:100%;height:100%}.sc-ix-map-navigation-h .map-nav.sc-ix-map-navigation{display:flex;margin-left:3.25rem;position:relative;height:100%;flex-grow:1;overflow:hidden}.sc-ix-map-navigation-h .map-nav-sidebar.sc-ix-map-navigation{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}.sc-ix-map-navigation-h .map-nav-sidebar-content.sc-ix-map-navigation{align-items:center;position:relative;overflow:auto;height:100%;width:100%}.sc-ix-map-navigation-h .map-nav-sidebar-content.sc-ix-map-navigation .map-nav-sidebar-static-content.sc-ix-map-navigation{-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}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation{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)}.sc-ix-map-navigation-h .map-nav-header.sc-ix-map-navigation .map-nav-header-brand.sc-ix-map-navigation button.sc-ix-map-navigation{margin-left:1rem}.sc-ix-map-navigation-h .map-nav-header-content.sc-ix-map-navigation{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}.sc-ix-map-navigation-h .map-nav-header-content.sc-ix-map-navigation:empty{height:0}.sc-ix-map-navigation-h .map-nav-title.sc-ix-map-navigation{-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}.sc-ix-map-navigation-h .content.sc-ix-map-navigation{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}";
+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 = class {
   constructor(hostRef) {
@@ -16,6 +18,7 @@ const MapNavigation = class {
     this.navigationTitle = undefined;
     this.hideContextMenu = true;
     this.isSidebarOpen = true;
+    this.hasContentHeader = false;
   }
   get menu() {
     return this.hostElement.querySelector('ix-menu');
@@ -24,20 +27,25 @@ const MapNavigation = class {
     return this.hostElement.querySelector('ix-menu-overlay');
   }
   get mapNavMenu() {
-    return this.hostElement.querySelector('.map-nav-menu');
+    return this.hostElement.shadowRoot.querySelector('.map-nav-menu');
   }
   get sidebar() {
-    return this.hostElement.querySelector('.map-nav-sidebar');
+    return this.hostElement.shadowRoot.querySelector('.map-nav-sidebar');
   }
   get overlay() {
-    return this.hostElement.querySelector('#overlay');
+    return this.hostElement.shadowRoot.querySelector('#overlay');
   }
   componentDidRender() {
     this.appendMenu();
     this.closeOverlay();
   }
+  componentWillLoad() {
+    context.useContextProvider(this.hostElement, context.ApplicationLayoutContext, {
+      hideHeader: false,
+      host: 'map-navigation',
+    });
+  }
   appendMenu() {
-    this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
     this.menu.addEventListener('mapExpandChange', (event) => {
       const state = !event.detail;
       this.toggleSidebar(state);
@@ -142,8 +150,18 @@ const MapNavigation = class {
       },
     });
   }
+  checkHasContentHeader(e) {
+    const nodes = e.currentTarget.assignedNodes({
+      flatten: true,
+    });
+    this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
+  }
   render() {
-    return (index.h(index.Host, null, index.h("div", { id: "menu-placeholder" }), index.h("div", { class: "map-nav" }, index.h("div", { class: "map-nav-sidebar" }, index.h("div", { class: "map-nav-header" }, index.h("ix-application-header", { name: this.applicationName, class: "map-nav-header-brand" }, index.h("slot", { name: "logo" }))), index.h("div", { class: "map-nav-sidebar-content" }, index.h("div", { class: "map-nav-sidebar-static-content" }, index.h("div", { class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (index.h("ix-icon-button", { icon: "context-menu", ghost: true, size: "24", variant: "Secondary", onClick: (_) => this.contextMenuClick.emit() }))), index.h("div", { class: "map-nav-sidebar-user-content" }, index.h("slot", { name: "sidebar-content" })))), index.h("div", { class: "content" }, index.h("div", { class: "map-nav-header-content bg-2" }, index.h("slot", { name: "content-header" })), index.h("main", null, index.h("slot", null), index.h("slot", { name: "overlay" }))))));
+    return (index.h(index.Host, null, index.h("slot", { name: "menu" }), index.h("div", { class: "map-nav" }, index.h("div", { class: "map-nav-sidebar" }, index.h("div", { class: "map-nav-header" }, index.h("ix-application-header", { name: this.applicationName, class: "map-nav-header-brand" }, index.h("slot", { slot: "logo", name: "logo" }))), index.h("div", { class: "map-nav-sidebar-content" }, index.h("div", { class: "map-nav-sidebar-static-content" }, index.h("div", { class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (index.h("ix-icon-button", { icon: "context-menu", ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), index.h("div", { class: "map-nav-sidebar-user-content" }, index.h("slot", { name: "sidebar-content" })))), index.h("div", { class: "content" }, index.h("div", { class: {
+        'map-nav-header-content': true,
+        'bg-2': true,
+        empty: !this.hasContentHeader,
+      } }, index.h("slot", { name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), index.h("main", null, index.h("slot", null), index.h("slot", { name: "overlay" }))))));
   }
   get hostElement() { return index.getElement(this); }
 };
@@ -151,7 +169,7 @@ MapNavigation.defaultTime = 150;
 MapNavigation.slowTime = 500;
 MapNavigation.style = mapNavigationCss;
-const mapNavigationOverlayCss = ".text-xs.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{-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.sc-ix-map-navigation-overlay{color:var(--theme-color-primary)}.sc-ix-map-navigation-overlay-h{position:absolute;width:100%;height:100%;z-index:2;top:0;left:0;background-color:var(--theme-overlay--background)}.sc-ix-map-navigation-overlay-h .overlay-header.sc-ix-map-navigation-overlay{display:flex;position:relative;justify-content:flex-start;align-items:center;height:3.5rem;background-color:var(--theme-overlay-header--background)}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay{display:flex;align-items:center;min-width:0}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay ix-icon.sc-ix-map-navigation-overlay{-webkit-margin-start:1rem;margin-inline-start:1rem;color:var(--theme-overlay-header--color)}.sc-ix-map-navigation-overlay-h .overlay-header-content.sc-ix-map-navigation-overlay .overlay-header-title.sc-ix-map-navigation-overlay{-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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-overlay-header--color);-webkit-margin-start:1rem;margin-inline-start:1rem}.sc-ix-map-navigation-overlay-h .color-indicator.sc-ix-map-navigation-overlay{display:inline-block;position:relative;width:0.5rem;height:100%;background-color:var(--theme-color-neutral)}.sc-ix-map-navigation-overlay-h .overlay-close.sc-ix-map-navigation-overlay{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:1rem;margin-inline-end:1rem}";
+const mapNavigationOverlayCss = ".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{position:absolute;width:100%;height:100%;z-index:2;top:0;left:0;background-color:var(--theme-overlay--background)}: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 .overlay-header{display:flex;position:relative;justify-content:flex-start;align-items:center;height:3.5rem;background-color:var(--theme-overlay-header--background)}:host .overlay-header-content{display:flex;align-items:center;min-width:0}:host .overlay-header-content ix-icon{-webkit-margin-start:1rem;margin-inline-start:1rem;color:var(--theme-overlay-header--color)}:host .overlay-header-content .overlay-header-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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-overlay-header--color);-webkit-margin-start:1rem;margin-inline-start:1rem}:host .color-indicator{display:inline-block;position:relative;width:0.5rem;height:100%;background-color:var(--theme-color-neutral)}:host .overlay-close{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:1rem;margin-inline-end:1rem}:host .d-none{display:none}:host(.d-none){display:none}";
 const MapNavigationOverlay = class {
   constructor(hostRef) {

package/dist/cjs/ix-map-navigation_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ix-map-navigation.ix-map-navigation-overlay.entry.cjs.js","mappings":"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","names":["anime","h","Host"],"sources":["./src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=scoped","./src/components/map-navigation/map-navigation.tsx","./src/components/map-navigation-overlay/map-navigation-overlay.scss?tag=ix-map-navigation-overlay&encapsulation=scoped","./src/components/map-navigation-overlay/map-navigation-overlay.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/fonts';\n@import 'mixins/text-truncation';\n\n:host {\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","/\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';\n\n@Component({\n tag: 'ix-map-navigation',\n styleUrl: 'map-navigation.scss',\n scoped: 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 @State() isSidebarOpen = 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 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.querySelector('.map-nav-menu');\n }\n\n get sidebar() {\n return this.hostElement.querySelector('.map-nav-sidebar');\n }\n\n get overlay() {\n return this.hostElement.querySelector('#overlay');\n }\n\n componentDidRender() {\n this.appendMenu();\n this.closeOverlay();\n }\n\n private appendMenu() {\n this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);\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 render() {\n return (\n <Host>\n <div id=\"menu-placeholder\"></div>\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 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 class=\"map-nav-header-content bg-2\">\n <slot name=\"content-header\"></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","/\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@import 'common-variables';\n@import 'fonts';\n@import 'mixins/text-truncation';\n\n:host {\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n top: 0;\n left: 0;\n\n background-color: var(--theme-overlay--background);\n\n .overlay-header {\n display: flex;\n position: relative;\n justify-content: flex-start;\n align-items: center;\n height: 3.5rem;\n\n background-color: var(--theme-overlay-header--background);\n }\n\n .overlay-header-content {\n display: flex;\n align-items: center;\n min-width: 0;\n\n ix-icon {\n margin-inline-start: $default-space;\n color: var(--theme-overlay-header--color);\n }\n\n .overlay-header-title {\n @include text-h2;\n @include ellipsis;\n color: var(--theme-overlay-header--color);\n margin-inline-start: $default-space;\n }\n }\n\n .color-indicator {\n display: inline-block;\n position: relative;\n width: $small-space;\n height: 100%;\n background-color: var(--theme-color-neutral);\n }\n\n .overlay-close {\n margin-inline-start: auto;\n margin-inline-end: $default-space;\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 Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-map-navigation-overlay',\n styleUrl: 'map-navigation-overlay.scss',\n scoped: true,\n})\nexport class MapNavigationOverlay {\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n /\n Title of overlay\n /\n @Prop() name: string;\n\n /\n Icon of overlay\n /\n @Prop() icon: string;\n\n /\n Color of icon\n /\n @Prop() color: string;\n\n /\n Event closed\n */\n @Event() closeClick: EventEmitter;\n\n componentWillLoad() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.hostElement.classList.remove('d-none');\n },\n });\n }\n\n private closeOverlay() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.closeClick.emit();\n this.hostElement.classList.add('d-none');\n },\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"overlay-header\">\n <div\n class={{\n 'color-indicator': true,\n 'd-none': this.color === 'undefined' \|\| this.color === undefined,\n }}\n style={{\n 'background-color': this.color\n ? `var(--theme-${this.color})`\n : '',\n }}\n ></div>\n <div class=\"overlay-header-content\">\n <ix-icon size=\"32\" name={this.icon}></ix-icon>\n <span class=\"overlay-header-title\" title={this.name}>\n {this.name}\n </span>\n </div>\n <ix-icon-button\n class=\"overlay-close\"\n ghost\n icon=\"close\"\n size=\"24\"\n onClick={() => this.closeOverlay()}\n ></ix-icon-button>\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ix-map-navigation.ix-map-navigation-overlay.entry.cjs.js","mappings":"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","names":["useContextProvider","ApplicationLayoutContext","anime","h","Host"],"sources":["./src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","./src/components/map-navigation/map-navigation.tsx","./src/components/map-navigation-overlay/map-navigation-overlay.scss?tag=ix-map-navigation-overlay&encapsulation=shadow","./src/components/map-navigation-overlay/map-navigation-overlay.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","/\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@import 'mixins/shadow-dom/component';\n@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/text-truncation';\n\n:host {\n @include ix-component;\n\n position: absolute;\n width: 100%;\n height: 100%;\n z-index: 2;\n top: 0;\n left: 0;\n\n background-color: var(--theme-overlay--background);\n\n .overlay-header {\n display: flex;\n position: relative;\n justify-content: flex-start;\n align-items: center;\n height: 3.5rem;\n\n background-color: var(--theme-overlay-header--background);\n }\n\n .overlay-header-content {\n display: flex;\n align-items: center;\n min-width: 0;\n\n ix-icon {\n margin-inline-start: $default-space;\n color: var(--theme-overlay-header--color);\n }\n\n .overlay-header-title {\n @include text-h2;\n @include ellipsis;\n color: var(--theme-overlay-header--color);\n margin-inline-start: $default-space;\n }\n }\n\n .color-indicator {\n display: inline-block;\n position: relative;\n width: $small-space;\n height: 100%;\n background-color: var(--theme-color-neutral);\n }\n\n .overlay-close {\n margin-inline-start: auto;\n margin-inline-end: $default-space;\n }\n\n .d-none {\n display: none;\n }\n}\n\n:host(.d-none) {\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 {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-map-navigation-overlay',\n styleUrl: 'map-navigation-overlay.scss',\n shadow: true,\n})\nexport class MapNavigationOverlay {\n private static readonly slowTime = 500;\n\n @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n /\n Title of overlay\n /\n @Prop() name: string;\n\n /\n Icon of overlay\n /\n @Prop() icon: string;\n\n /\n Color of icon\n /\n @Prop() color: string;\n\n /\n Event closed\n */\n @Event() closeClick: EventEmitter;\n\n componentWillLoad() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: [0, 'blur(1rem)'],\n translateX: ['-4rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n this.hostElement.classList.remove('d-none');\n },\n });\n }\n\n private closeOverlay() {\n anime({\n targets: this.hostElement,\n duration: MapNavigationOverlay.slowTime,\n backdropFilter: ['blur(1rem)', 0],\n translateX: [0, '-4rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n this.closeClick.emit();\n this.hostElement.classList.add('d-none');\n },\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"overlay-header\">\n <div\n class={{\n 'color-indicator': true,\n 'd-none': this.color === 'undefined' \|\| this.color === undefined,\n }}\n style={{\n 'background-color': this.color\n ? `var(--theme-${this.color})`\n : '',\n }}\n ></div>\n <div class=\"overlay-header-content\">\n <ix-icon size=\"32\" name={this.icon}></ix-icon>\n <span class=\"overlay-header-title\" title={this.name}>\n {this.name}\n </span>\n </div>\n <ix-icon-button\n class=\"overlay-close\"\n ghost\n icon=\"close\"\n size=\"24\"\n onClick={() => this.closeOverlay()}\n ></ix-icon-button>\n </div>\n\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-menu-category.cjs.entry.js ADDED Viewed

@@ -0,0 +1,139 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-be499a74.js');
+const anime_es = require('./anime.es-8822f296.js');
+const context = require('./context-0fdf2fa1.js');
+const mutationObserver = require('./mutation-observer-eaaa5399.js');
+require('./typed-event-f0f051da.js');
+const menuCategoryCss = ":host{display:flex;flex-direction:column;position:relative}: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 .category{display:flex;position:relative;align-items:center;width:100%;height:100%}:host .category-chevron{margin-left:auto;margin-right:0px;transition:var(--theme-default-time) transform ease-in-out}:host .category-chevron--open{transform:rotate(-180deg)}:host .menu-items{overflow:hidden;max-height:0px;transition:var(--theme-default-time) max-height ease-in-out;padding:0.25rem 0 0.25rem 1.625rem}:host .menu-items--expanded{max-height:999999999px}:host .category-dropdown ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host .category-dropdown-header{pointer-events:none;min-width:256px}:host ::slotted(ix-menu-item){--ix-menu-item-height:2.5rem}:host(.expanded){background-color:var(--theme-color-ghost--active)}:host ::slotted(a[href]){text-decoration:none !important}";
+const DefaultIxMenuItemHeight = 40;
+const DefaultAnimationTimeout = 150;
+const MenuCategory = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = undefined;
+    this.icon = undefined;
+    this.notifications = undefined;
+    this.menuExpand = false;
+    this.showItems = false;
+    this.showDropdown = false;
+    this.nestedItems = [];
+  }
+  isNestedItemActive() {
+    return this.getNestedItems().some((item) => item.active);
+  }
+  getNestedItems() {
+    return Array.from(this.hostElement.querySelectorAll(':scope ix-menu-item'));
+  }
+  getNestedItemsHeight() {
+    const items = this.getNestedItems();
+    return items.length * DefaultIxMenuItemHeight;
+  }
+  onExpandCategory(showItems) {
+    if (showItems) {
+      this.animateFadeIn();
+    }
+    else {
+      this.animateFadeOut();
+    }
+  }
+  animateFadeOut() {
+    const slotHideThresholdMs = 25;
+    anime_es.anime({
+      targets: this.menuItemsContainer,
+      duration: DefaultAnimationTimeout,
+      easing: 'easeInSine',
+      opacity: [1, 0],
+      maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],
+      complete: () => {
+        setTimeout(() => {
+          this.showItems = false;
+          this.showDropdown = false;
+        }, DefaultAnimationTimeout + slotHideThresholdMs);
+      },
+    });
+  }
+  animateFadeIn() {
+    anime_es.anime({
+      targets: this.menuItemsContainer,
+      duration: DefaultAnimationTimeout,
+      easing: 'easeInSine',
+      opacity: [0, 1],
+      maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],
+      begin: () => {
+        this.showItems = true;
+        this.showDropdown = false;
+      },
+    });
+  }
+  onCategoryClicked(e) {
+    if (this.ixMenu.expand) {
+      e === null || e === void 0 ? void 0 : e.stopPropagation();
+      this.onExpandCategory(!this.showItems);
+      return;
+    }
+    this.showDropdown = !this.showDropdown;
+  }
+  onNestedItemsChanged() {
+    this.nestedItems = this.getNestedItems();
+  }
+  isCategoryItemListVisible() {
+    return this.menuExpand && (this.showItems || this.isNestedItemActive());
+  }
+  componentDidLoad() {
+    const closestMenu = context.closestIxMenu(this.hostElement);
+    if (!closestMenu) {
+      throw Error('ix-menu-category can only be used as a child of ix-menu');
+    }
+    this.ixMenu = closestMenu;
+    this.observer = mutationObserver.createMutationObserver(() => this.onNestedItemsChanged());
+    this.observer.observe(this.hostElement, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+    requestAnimationFrame(() => {
+      this.onNestedItemsChanged();
+    });
+    this.ixMenu.addEventListener('expandChange', ({ detail: menuExpand }) => {
+      this.menuExpand = menuExpand;
+      this.showItems = this.isCategoryItemListVisible();
+    });
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        expanded: this.showItems,
+      } }, index.h("ix-menu-item", { class: 'category-parent', active: this.isNestedItemActive(), notifications: this.notifications, icon: this.icon, onClick: (e) => this.onCategoryClicked(e) }, index.h("div", { class: "category" }, this.label, index.h("ix-icon", { name: "chevron-down-small", class: {
+        'category-chevron': true,
+        'category-chevron--open': this.showItems,
+      } }))), index.h("div", { ref: (ref) => (this.menuItemsContainer = ref), class: {
+        'menu-items': true,
+        'menu-items--expanded': this.showItems,
+      } }, this.showItems ? index.h("slot", null) : null), index.h("ix-dropdown", { closeBehavior: 'both', show: this.showDropdown, onShowChanged: ({ detail: dropdownShown }) => {
+        this.showDropdown = dropdownShown;
+      }, class: 'category-dropdown', anchor: this.hostElement, placement: "right-start", offset: {
+        mainAxis: 3,
+      }, onClick: (e) => {
+        if (e.target instanceof HTMLElement) {
+          if (e.target.tagName === 'IX-MENU-ITEM') {
+            this.showDropdown = false;
+          }
+        }
+      } }, index.h("ix-dropdown-item", { class: 'category-dropdown-header' }, index.h("ix-typography", { variant: "default-title-single", color: "std" }, this.label)), index.h("ix-divider", null), index.h("slot", null))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+MenuCategory.style = menuCategoryCss;
+exports.ix_menu_category = MenuCategory;
+//# sourceMappingURL=ix-menu-category.cjs.entry.js.map

package/dist/cjs/ix-menu-category.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-menu-category.entry.cjs.js","mappings":"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","names":["anime","closestIxMenu","createMutationObserver","h","Host"],"sources":["./src/components/menu-category/menu-category.scss?tag=ix-menu-category&encapsulation=shadow","./src/components/menu-category/menu-category.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 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n position: relative;\n\n .category {\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n }\n\n .category-chevron {\n margin-left: auto;\n margin-right: 0px;\n transition: var(--theme-default-time) transform ease-in-out;\n }\n\n .category-chevron--open {\n transform: rotate(-180deg);\n }\n\n .menu-items {\n overflow: hidden;\n max-height: 0px;\n transition: var(--theme-default-time) max-height ease-in-out;\n padding: 0.25rem 0 0.25rem 1.625rem;\n }\n\n .menu-items--expanded {\n max-height: 999999999px;\n }\n\n .category-dropdown {\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n }\n\n .category-dropdown-header {\n pointer-events: none;\n min-width: 256px;\n }\n\n ::slotted(ix-menu-item) {\n --ix-menu-item-height: 2.5rem;\n }\n}\n\n:host(.expanded) {\n background-color: var(--theme-color-ghost--active);\n}\n\n:host {\n ::slotted(a[href]) {\n text-decoration: none !important;\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 */\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport anime from 'animejs';\nimport { closestIxMenu } from '../utils/application-layout/context';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nconst DefaultIxMenuItemHeight = 40;\nconst DefaultAnimationTimeout = 150;\n\n/**\n * @since 2.0.0\n */\n@Component({\n tag: 'ix-menu-category',\n styleUrl: 'menu-category.scss',\n shadow: true,\n})\nexport class MenuCategory {\n @Element() hostElement: HTMLIxMenuCategoryElement;\n\n /**\n * Display name of the category\n */\n @Prop() label: string;\n\n /**\n * Icon of the category\n */\n @Prop() icon: string;\n\n /**\n * Show notification count on the category\n */\n @Prop() notifications: number;\n\n @State() menuExpand = false;\n @State() showItems = false;\n @State() showDropdown = false;\n @State() nestedItems: HTMLIxMenuItemElement[] = [];\n\n private observer: MutationObserver;\n private menuItemsContainer: HTMLDivElement;\n private ixMenu: HTMLIxMenuElement;\n\n private isNestedItemActive() {\n return this.getNestedItems().some((item) => item.active);\n }\n\n private getNestedItems() {\n return Array.from(\n this.hostElement.querySelectorAll(':scope ix-menu-item')\n ) as HTMLIxMenuItemElement[];\n }\n\n private getNestedItemsHeight() {\n const items = this.getNestedItems();\n\n return items.length * DefaultIxMenuItemHeight;\n }\n\n private onExpandCategory(showItems: boolean) {\n if (showItems) {\n this.animateFadeIn();\n } else {\n this.animateFadeOut();\n }\n }\n\n private animateFadeOut() {\n const slotHideThresholdMs = 25;\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [1, 0],\n maxHeight: [this.getNestedItemsHeight() + DefaultIxMenuItemHeight, 0],\n complete: () => {\n setTimeout(() => {\n this.showItems = false;\n this.showDropdown = false;\n }, DefaultAnimationTimeout + slotHideThresholdMs);\n },\n });\n }\n\n private animateFadeIn() {\n anime({\n targets: this.menuItemsContainer,\n duration: DefaultAnimationTimeout,\n easing: 'easeInSine',\n opacity: [0, 1],\n maxHeight: [0, this.getNestedItemsHeight() + DefaultIxMenuItemHeight],\n begin: () => {\n this.showItems = true;\n this.showDropdown = false;\n },\n });\n }\n\n private onCategoryClicked(e?: MouseEvent) {\n if (this.ixMenu.expand) {\n e?.stopPropagation();\n this.onExpandCategory(!this.showItems);\n return;\n }\n\n this.showDropdown = !this.showDropdown;\n }\n\n private onNestedItemsChanged() {\n this.nestedItems = this.getNestedItems();\n }\n\n private isCategoryItemListVisible() {\n return this.menuExpand && (this.showItems || this.isNestedItemActive());\n }\n\n componentDidLoad() {\n const closestMenu = closestIxMenu(this.hostElement);\n if (!closestMenu) {\n throw Error('ix-menu-category can only be used as a child of ix-menu');\n }\n this.ixMenu = closestMenu;\n\n this.observer = createMutationObserver(() => this.onNestedItemsChanged());\n this.observer.observe(this.hostElement, {\n attributes: true,\n childList: true,\n subtree: true,\n });\n\n requestAnimationFrame(() => {\n this.onNestedItemsChanged();\n });\n\n this.ixMenu.addEventListener(\n 'expandChange',\n ({ detail: menuExpand }: CustomEvent<boolean>) => {\n this.menuExpand = menuExpand;\n\n this.showItems = this.isCategoryItemListVisible();\n }\n );\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host\n class={{\n expanded: this.showItems,\n }}\n >\n <ix-menu-item\n class={'category-parent'}\n active={this.isNestedItemActive()}\n notifications={this.notifications}\n icon={this.icon}\n onClick={(e) => this.onCategoryClicked(e)}\n >\n <div class=\"category\">\n {this.label}\n <ix-icon\n name=\"chevron-down-small\"\n class={{\n 'category-chevron': true,\n 'category-chevron--open': this.showItems,\n }}\n ></ix-icon>\n </div>\n </ix-menu-item>\n <div\n ref={(ref) => (this.menuItemsContainer = ref!)}\n class={{\n 'menu-items': true,\n 'menu-items--expanded': this.showItems,\n }}\n >\n {this.showItems ? <slot></slot> : null}\n </div>\n <ix-dropdown\n closeBehavior={'both'}\n show={this.showDropdown}\n onShowChanged={({ detail: dropdownShown }: CustomEvent<boolean>) => {\n this.showDropdown = dropdownShown;\n }}\n class={'category-dropdown'}\n anchor={this.hostElement}\n placement=\"right-start\"\n offset={{\n mainAxis: 3,\n }}\n onClick={(e) => {\n if (e.target instanceof HTMLElement) {\n if (e.target.tagName === 'IX-MENU-ITEM') {\n this.showDropdown = false;\n }\n }\n }}\n >\n <ix-dropdown-item class={'category-dropdown-header'}>\n <ix-typography variant=\"default-title-single\" color=\"std\">\n {this.label}\n </ix-typography>\n </ix-dropdown-item>\n <ix-divider></ix-divider>\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"version":3}