@siemens/ix 1.1.0-beta.5 → 1.1.0

package/dist/collection/components/map-navigation/map-navigation.js

@@ -6,13 +6,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Component, Element, Event, h, Host, Method, Prop, State } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import anime from 'animejs';
 export class MapNavigation {
   constructor() {
-    /**
-     * Hide the sidebar context menu button when set to true
-     */
+    this.applicationName = undefined;
+    this.navigationTitle = undefined;
     this.hideContextMenu = true;
     this.isSidebarOpen = true;
   }
@@ -33,7 +32,6 @@ export class MapNavigation {
   }
   componentDidRender() {
     this.appendMenu();
-    // this.openOverlay('Test', document.createElement('ix-breadcrumb'), 'info', 'color-warning');
     this.closeOverlay();
   }
   appendMenu() {
@@ -86,6 +84,7 @@ export class MapNavigation {
   }
   /**
    * Open a overlay inside content area
+   * @deprecated will get removed with next major release in favor of slot based approach
    *
    * @param name
    * @param component
@@ -114,6 +113,7 @@ export class MapNavigation {
   }
   /**
    * Close current shown overlay
+   * @deprecated will get removed with next major release in favor of slot based approach
    */
   async closeOverlay() {
     anime({
@@ -125,203 +125,204 @@ export class MapNavigation {
       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');
       },
     });
   }
   render() {
-    return (h(Host, null,
-      h("div", { id: "menu-placeholder" }),
-      h("div", { class: "map-nav" },
-        h("div", { class: "map-nav-sidebar" },
-          h("div", { class: "map-nav-header" },
-            h("div", { class: "map-nav-header-brand" },
-              h("div", { class: "map-nav-brand-logo" },
-                h("slot", { name: "logo" })),
-              h("span", { class: "map-nav-brand-title" }, this.applicationName))),
-          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 bg-2" },
-            h("slot", { name: "content-header" })),
-          h("main", null,
-            h("slot", null)),
-          h("div", { id: "overlay" })))));
+    return (h(Host, null, h("div", { id: "menu-placeholder" }), h("div", { class: "map-nav" }, h("div", { class: "map-nav-sidebar" }, h("div", { class: "map-nav-header" }, h("div", { class: "map-nav-header-brand" }, h("div", { class: "map-nav-brand-logo" }, h("slot", { name: "logo" })), h("span", { class: "map-nav-brand-title" }, this.applicationName))), 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 bg-2" }, h("slot", { name: "content-header" })), h("main", null, h("slot", null))))));
   }
   static get is() { return "ix-map-navigation"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["map-navigation.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["map-navigation.css"]
-  }; }
-  static get properties() { return {
-    "applicationName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Application name"
-      },
-      "attribute": "application-name",
-      "reflect": false
-    },
-    "navigationTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Navigation title"
-      },
-      "attribute": "navigation-title",
-      "reflect": false
-    },
-    "hideContextMenu": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Hide the sidebar context menu button when set to true"
-      },
-      "attribute": "hide-context-menu",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
-  static get states() { return {
-    "isSidebarOpen": {}
-  }; }
-  static get events() { return [{
-      "method": "navigationToggled",
-      "name": "navigationToggled",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Navigation toggled"
+  static get originalStyleUrls() {
+    return {
+      "$": ["map-navigation.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["map-navigation.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "applicationName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Application name"
+        },
+        "attribute": "application-name",
+        "reflect": false
       },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
-    }, {
-      "method": "contextMenuClick",
-      "name": "contextMenuClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Context menu clicked"
+      "navigationTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Navigation title"
+        },
+        "attribute": "navigation-title",
+        "reflect": false
       },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+      "hideContextMenu": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide the sidebar context menu button when set to true"
+        },
+        "attribute": "hide-context-menu",
+        "reflect": false,
+        "defaultValue": "true"
       }
-    }]; }
-  static get methods() { return {
-    "openOverlay": {
-      "complexType": {
-        "signature": "(name: string, component: HTMLElement, icon?: string, color?: string) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "name"
-              }],
-            "text": ""
-          }, {
-            "tags": [{
-                "name": "param",
-                "text": "component"
-              }],
-            "text": ""
-          }, {
-            "tags": [{
-                "name": "param",
-                "text": "icon"
-              }],
-            "text": ""
-          }, {
-            "tags": [{
-                "name": "param",
-                "text": "color"
-              }],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+    };
+  }
+  static get states() {
+    return {
+      "isSidebarOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "navigationToggled",
+        "name": "navigationToggled",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Navigation toggled"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "contextMenuClick",
+        "name": "contextMenuClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Context menu clicked"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "openOverlay": {
+        "complexType": {
+          "signature": "(name: string, component: HTMLElement, icon?: string, color?: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "name"
+                }],
+              "text": ""
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "component"
+                }],
+              "text": ""
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "icon"
+                }],
+              "text": ""
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "color"
+                }],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
           },
-          "HTMLElement": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Open a overlay inside content area",
+          "tags": [{
+              "name": "deprecated",
+              "text": "will get removed with next major release in favor of slot based approach"
+            }, {
+              "name": "param",
+              "text": "name"
+            }, {
+              "name": "param",
+              "text": "component"
+            }, {
+              "name": "param",
+              "text": "icon"
+            }, {
+              "name": "param",
+              "text": "color"
+            }]
+        }
       },
-      "docs": {
-        "text": "Open a overlay inside content area",
-        "tags": [{
-            "name": "param",
-            "text": "name"
-          }, {
-            "name": "param",
-            "text": "component"
-          }, {
-            "name": "param",
-            "text": "icon"
-          }, {
-            "name": "param",
-            "text": "color"
-          }]
-      }
-    },
-    "closeOverlay": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "closeOverlay": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Close current shown overlay",
-        "tags": []
+        "docs": {
+          "text": "Close current shown overlay",
+          "tags": [{
+              "name": "deprecated",
+              "text": "will get removed with next major release in favor of slot based approach"
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "hostElement"; }
 }
 MapNavigation.defaultTime = 150;

package/dist/collection/components/map-navigation-overlay/map-navigation-overlay.css

@@ -191,6 +191,7 @@ a {
   width: 100%;
   height: 100%;
   z-index: 2;
+  top: 0;
   background-color: var(--theme-overlay--background);
 }
 :host .overlay-header {

package/dist/collection/components/map-navigation-overlay/map-navigation-overlay.js

@@ -6,100 +6,136 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Component, Event, h, Host, Prop } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
+import anime from 'animejs';
 export class MapNavigationOverlay {
+  constructor() {
+    this.name = undefined;
+    this.icon = undefined;
+    this.color = undefined;
+  }
+  componentWillLoad() {
+    anime({
+      targets: this.hostElement,
+      duration: MapNavigationOverlay.slowTime,
+      backdropFilter: [0, 'blur(1rem)'],
+      translateX: ['-4rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+      begin: () => {
+        this.hostElement.classList.remove('d-none');
+      }
+    });
+  }
+  closeOverlay() {
+    anime({
+      targets: this.hostElement,
+      duration: MapNavigationOverlay.slowTime,
+      backdropFilter: ['blur(1rem)', 0],
+      translateX: [0, '-4rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        this.closeClick.emit();
+        this.hostElement.classList.add('d-none');
+      },
+    });
+  }
   render() {
-    return (h(Host, null,
-      h("div", { class: "overlay-header" },
-        h("div", { class: {
-            'color-indicator': true,
-            'd-none': this.color === 'undefined' || this.color === undefined,
-          }, style: {
-            'background-color': this.color
-              ? `var(--theme-${this.color})`
-              : '',
-          } }),
-        h("div", { class: "overlay-header-content" },
-          h("ix-icon", { size: "32", name: this.icon }),
-          h("span", { class: "overlay-header-title", title: this.name }, this.name)),
-        h("ix-icon-button", { class: "overlay-close", invisible: true, icon: "close", size: "24", onClick: () => this.closeClick.emit() })),
-      h("slot", null)));
+    return (h(Host, null, h("div", { class: "overlay-header" }, h("div", { class: {
+        'color-indicator': true,
+        'd-none': this.color === 'undefined' || this.color === undefined,
+      }, style: {
+        'background-color': this.color
+          ? `var(--theme-${this.color})`
+          : '',
+      } }), h("div", { class: "overlay-header-content" }, h("ix-icon", { size: "32", name: this.icon }), h("span", { class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { class: "overlay-close", invisible: true, icon: "close", size: "24", onClick: () => this.closeOverlay() })), h("slot", null)));
   }
   static get is() { return "ix-map-navigation-overlay"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["map-navigation-overlay.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["map-navigation-overlay.css"]
-  }; }
-  static get properties() { return {
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Title of overlay"
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon of overlay"
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Color of icon"
+  static get originalStyleUrls() {
+    return {
+      "$": ["map-navigation-overlay.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["map-navigation-overlay.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title of overlay"
+        },
+        "attribute": "name",
+        "reflect": false
       },
-      "attribute": "color",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "closeClick",
-      "name": "closeClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event closed"
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon of overlay"
+        },
+        "attribute": "icon",
+        "reflect": false
       },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Color of icon"
+        },
+        "attribute": "color",
+        "reflect": false
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "closeClick",
+        "name": "closeClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event closed"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
 }
+MapNavigationOverlay.slowTime = 500;