@siemens/ix 1.1.0-beta.5 → 1.1.0

package/dist/components/ix-tree.js

@@ -1,9 +1,27 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as createCommonjsModule, g as getDefaultExportFromCjs, a as commonjsRequire } from './_commonjsHelpers.js';
-import { r as renderDefaultItem } from './default-tree-item.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './tree-item.js';
 
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+function renderDefaultItem(item, context, update) {
+  const el = document.createElement('ix-tree-item');
+  el.hasChildren = item.hasChildren;
+  el.context = context;
+  el.text = item.data.name;
+  update((updateTreeItem) => {
+    el.text = updateTreeItem.data.name;
+  });
+  return el;
+}
+
 var hyperlist = createCommonjsModule(function (module, exports) {
 (function(f){{module.exports=f();}})(function(){return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof commonjsRequire&&commonjsRequire;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t);}return n[i].exports}for(var u="function"==typeof commonjsRequire&&commonjsRequire,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(_dereq_,module,exports){
 
@@ -514,13 +532,13 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.contextChange = createEvent(this, "contextChange", 7);
     this.nodeRemoved = createEvent(this, "nodeRemoved", 7);
-    /**
-     * Selection and collapsed state management
-     */
-    this.context = {};
     this.toggleListener = new Map();
     this.itemClickListener = new Map();
     this.updates = new Map();
+    this.root = undefined;
+    this.model = undefined;
+    this.renderItem = undefined;
+    this.context = {};
   }
   getVirtualizerOptions() {
     const list = this.buildTreeList(this.model[this.root]);
@@ -691,4 +709,4 @@ function defineCustomElement$1() {
 const IxTree = Tree;
 const defineCustomElement = defineCustomElement$1;
 
-export { IxTree, defineCustomElement };
+export { IxTree, defineCustomElement, renderDefaultItem as r };

package/dist/components/ix-upload.js

@@ -1,57 +1,27 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { U as UploadFileState } from './upload-file-state.js';
 import { d as defineCustomElement$3 } from './button.js';
 import { d as defineCustomElement$2 } from './spinner.js';
 
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var UploadFileState;
+(function (UploadFileState) {
+  UploadFileState["SELECT_FILE"] = "SELECT_FILE";
+  UploadFileState["LOADING"] = "LOADING";
+  UploadFileState["UPLOAD_FAILED"] = "UPLOAD_FAILED";
+  UploadFileState["UPLOAD_SUCCESSED"] = "UPLOAD_SUCCESSED";
+})(UploadFileState || (UploadFileState = {}));
+
 const uploadCss = ".sc-ix-upload-h{display:block;min-height:4rem;height:4rem}.sc-ix-upload-h .file-upload-area.sc-ix-upload{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}.sc-ix-upload-h .file-upload-area.multiline.sc-ix-upload{max-height:unset;height:auto}.sc-ix-upload-h .file-upload-area.multiline.sc-ix-upload .glyph.sc-ix-upload{align-self:flex-start;-webkit-margin-before:3px;margin-block-start:3px}.sc-ix-upload-h .file-upload-area.multiline.sc-ix-upload>div.sc-ix-upload{align-self:flex-start}.sc-ix-upload-h .file-upload-area.sc-ix-upload:not(.multiline) .state.sc-ix-upload,.sc-ix-upload-h .file-upload-area.sc-ix-upload:not(.multiline) .upload-text.sc-ix-upload{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-upload-h .file-upload-area.file-over.sc-ix-upload{border-color:var(--theme-upload--border-color--dragover);border-style:solid}.sc-ix-upload-h .file-upload-area.checking.sc-ix-upload{color:var(--theme-upload-text--color--checking);border-style:solid}.sc-ix-upload-h .file-upload-area.disabled.sc-ix-upload{border-style:solid;color:var(--theme-upload-text--color--disabled)}.sc-ix-upload-h .file-upload-area.sc-ix-upload ix-button.sc-ix-upload{-webkit-margin-start:1rem;margin-inline-start:1rem}.sc-ix-upload-h .file-upload-area.sc-ix-upload .upload-browser.sc-ix-upload{opacity:0;overflow:hidden;position:absolute;z-index:-1}.sc-ix-upload-h .file-upload-area.sc-ix-upload .loader.sc-ix-upload{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}.sc-ix-upload-h .file-upload-area.sc-ix-upload .upload-filename.sc-ix-upload{margin-bottom:1rem}.sc-ix-upload-h .file-upload-area.sc-ix-upload .state.sc-ix-upload{display:flex;align-items:center}.sc-ix-upload-h .file-upload-area.sc-ix-upload .state.sc-ix-upload>ix-spinner.sc-ix-upload{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem;height:1.5rem;width:1.5rem}.sc-ix-upload-h .file-upload-area.sc-ix-upload .state.sc-ix-upload>i.sc-ix-upload{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.sc-ix-upload-h .file-upload-area.sc-ix-upload .state.sc-ix-upload>i.glyph-error.sc-ix-upload{color:var(--theme-color-alarm)}.sc-ix-upload-h .file-upload-area.sc-ix-upload .state.sc-ix-upload>i.glyph-success.sc-ix-upload{color:var(--theme-color-success)}";
 
 const Upload = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.filesChanged = createEvent(this, "filesChanged", 7);
-    /**
-     * If multiple is true the user can drop or select multiple files
-     */
-    this.multiple = false;
-    /**
-     * Whether the text should wrap to more than one line
-     */
-    this.multiline = false;
-    /**
-     * Disable all input events
-     */
-    this.disabled = false;
-    /**
-     * After a file is uploaded you can set the upload component to a defined state
-     */
-    this.state = UploadFileState.SELECT_FILE;
-    /**
-     * Will be used by state = UploadFileState.SELECT_FILE
-     */
-    this.selectFileText = '+ Drag files here or…';
-    /**
-     * Will be used by state = UploadFileState.LOADING
-     */
-    this.loadingText = 'Checking files…';
-    /**
-     * Will be used by state = UploadFileState.UPLOAD_FAILED
-     */
-    this.uploadFailedText = 'Upload failed. Please try again.';
-    /**
-     * Will be used by state = UploadFileState.UPLOAD_SUCCESSED
-     */
-    this.uploadSuccessText = 'Upload successful';
-    /**
-     * Label for upload file button
-     */
-    this.i18nUploadFile = 'Upload file…';
-    /**
-     * Text for disabled state
-     */
-    this.i18nUploadDisabled = 'File upload currently not possible.';
-    this.isFileOver = false;
-  }
+  constructor() { super(); this.__registerHost(); this.filesChanged = createEvent(this, "filesChanged", 7); this.accept = undefined; this.multiple = false; this.multiline = false; this.disabled = false; this.state = UploadFileState.SELECT_FILE; this.selectFileText = '+ Drag files here or…'; this.loadingText = 'Checking files…'; this.uploadFailedText = 'Upload failed. Please try again.'; this.uploadSuccessText = 'Upload successful'; this.i18nUploadFile = 'Upload file…'; this.i18nUploadDisabled = 'File upload currently not possible.'; this.isFileOver = false; }
   get inputElement() {
     return this.hostElement.querySelector('#upload-browser');
   }
@@ -175,4 +145,4 @@ function defineCustomElement$1() {
 const IxUpload = Upload;
 const defineCustomElement = defineCustomElement$1;
 
-export { IxUpload, defineCustomElement };
+export { IxUpload, UploadFileState as U, defineCustomElement };

package/dist/components/ix-validation-tooltip.js

@@ -7,13 +7,11 @@ const ValidationTooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Placement of the tooltip
-     */
-    this.placement = 'top';
-    this.isInputValid = true;
     this.onSubmitBind = this.onSubmit.bind(this);
     this.onInputFocusBind = this.onInputFocus.bind(this);
+    this.message = undefined;
+    this.placement = 'top';
+    this.isInputValid = true;
   }
   get arrow() {
     return this.hostElement.querySelector('#arrow');

package/dist/components/ix-workflow-step.js

@@ -7,29 +7,11 @@ const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Select orientation
-     */
     this.vertical = false;
-    /**
-     * Set disabled
-     */
     this.disabled = false;
-    /**
-     * Set status
-     */
     this.status = 'open';
-    /**
-     * Activate navigation click
-     */
     this.clickable = false;
-    /**
-     * Set selected
-     */
     this.selected = false;
-    /**
-     * Activate navigation click
-     */
     this.position = 'undefined';
     this.iconName = 'circle';
     this.iconColor = 'workflow-step-icon-default--color';

package/dist/components/ix-workflow-steps.js

@@ -7,21 +7,9 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.stepSelected = createEvent(this, "stepSelected", 7);
-    /**
-     * Select orientation
-     */
     this.vertical = false;
-    /**
-     * Select linear mode
-     */
     this.linear = false;
-    /**
-     * Activate navigation click
-     */
     this.clickable = false;
-    /**
-     * Activate navigation click
-     */
     this.selectedIndex = 0;
   }
   getSteps() {

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

@@ -1,14 +1,45 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon-button.js';
 
-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;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{margin-left: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);margin-left: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{margin-left:auto;margin-right:1rem}";
+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;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{margin-left: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);margin-left: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{margin-left:auto;margin-right:1rem}";
 
 const MapNavigationOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.closeClick = createEvent(this, "closeClick", 7);
+    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: {
@@ -18,14 +49,16 @@ const MapNavigationOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTML
         '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)));
+      } }), 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)));
   }
+  get hostElement() { return this; }
   static get style() { return mapNavigationOverlayCss; }
 }, [6, "ix-map-navigation-overlay", {
     "name": [1],
     "icon": [1],
     "color": [1]
   }]);
+MapNavigationOverlay.slowTime = 500;
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

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

@@ -9,6 +9,8 @@ const MenuAvatarItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     super();
     this.__registerHost();
     this.itemClick = createEvent(this, "itemClick", 7);
+    this.icon = undefined;
+    this.label = undefined;
   }
   render() {
     return (h("ix-dropdown-item", { icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));

package/dist/components/menu-item.js

@@ -6,18 +6,13 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Move the Tab to a top position.
-     */
     this.home = false;
-    /**
-     * Place tab on bottom
-     */
     this.bottom = false;
-    /**
-     * Icon name from @siemens/ix-icons
-     */
     this.tabIcon = 'document';
+    this.notifications = undefined;
+    this.active = undefined;
+    this.disabled = undefined;
+    this.title = undefined;
   }
   get tabLabel() {
     return this.hostElement.querySelector('.tab-text');

package/dist/components/modal.js

@@ -11,40 +11,23 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.closed = createEvent(this, "closed", 7);
     this.dismissed = createEvent(this, "dismissed", 7);
-    /**
-     * Should the modal be animtated
-     */
+    this.onKeydown = this.handleKeydown.bind(this);
     this.animation = true;
-    /**
-     *
-     */
+    this.ariaDescribedBy = undefined;
     this.ariaLabelledBy = 'modal-title';
-    /**
-     * Adds a dimming layer to the modal.
-     * This should only be used when it it necessary to focus the user's attention to the dialog content (e.g. errors, warnings, complex tasks).
-     */
     this.backdrop = true;
-    /**
-     * Centered modal
-     */
+    this.backdropClass = undefined;
+    this.beforeDismiss = undefined;
     this.centered = false;
-    /**
-     * ESC close modal dialog
-     */
+    this.content = undefined;
     this.keyboard = true;
-    /**
-     * Color of the header {@link icon}
-     */
+    this.icon = undefined;
     this.iconColor = 'color-std-text';
-    /**
-     * Modal scollable
-     */
+    this.modalDialogClass = undefined;
     this.scrollable = true;
-    /**
-     * Modal size
-     */
     this.size = 'sm';
-    this.onKeydown = this.handleKeydown.bind(this);
+    this.headerTitle = undefined;
+    this.windowClass = undefined;
   }
   get modal() {
     return this.hostElement.querySelector('.modal');

package/dist/components/select-item.js

@@ -9,13 +9,9 @@ const SelectItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.itemClick = createEvent(this, "itemClick", 7);
-    /**
-     * Whether the item is selected.
-     */
+    this.label = undefined;
+    this.value = undefined;
     this.selected = false;
-    /**
-     * ***Internal***
-     */
     this.hover = false;
   }
   /**

package/dist/components/spinner.js

@@ -6,13 +6,7 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Variant of spinner
-     */
     this.variant = 'secondary';
-    /**
-     * Size of spinner
-     */
     this.size = 'medium';
   }
   render() {

package/dist/components/tab-item.js

@@ -6,33 +6,13 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Set selected tab
-     */
     this.selected = false;
-    /**
-     * Set disabled tab
-     */
     this.disabled = false;
-    /**
-     * Set small size tab
-     */
     this.small = false;
-    /**
-     * Set icon only tab
-     */
     this.icon = false;
-    /**
-     * Set rounded tab
-     */
     this.rounded = false;
-    /**
-     * Set layout width style
-     */
+    this.counter = undefined;
     this.layout = 'auto';
-    /**
-     * Set selected placement
-     */
     this.placement = 'bottom';
   }
   tabItemClasses(props) {

package/dist/components/tabs.js

@@ -7,34 +7,19 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    /**
-     * Set tab items to small size
-     */
+    this.clickAction = {
+      timeout: null,
+      isClick: true,
+    };
     this.small = false;
-    /**
-     * Set rounded tabs
-     */
     this.rounded = false;
-    /**
-     * Set default selected tab by index
-     */
     this.selected = 0;
-    /**
-     * Set layout width style
-     */
     this.layout = 'auto';
-    /**
-     * Set placement style
-     */
     this.placement = 'bottom';
     this.totalItems = 0;
     this.currentScrollAmount = 0;
     this.scrollAmount = 100;
     this.scrollActionAmount = 0;
-    this.clickAction = {
-      timeout: null,
-      isClick: true,
-    };
   }
   onWindowResize() {
     this.totalItems = 0;

package/dist/components/time-picker.js

@@ -13,55 +13,21 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.done = createEvent(this, "done", 7);
     this.timeChange = createEvent(this, "timeChange", 7);
-    /**
-     * Format of time string
-     *
-     * @since 1.1.0
-     */
+    this._time = luxon.DateTime.now();
     this.format = 'TT';
-    /**
-     * Corner style
-     */
     this.corners = 'rounded';
-    /**
-     * @deprecated - will get removed with next major release
-     */
     this.individual = true;
-    /**
-     * Show hour input
-     */
     this.showHour = false;
-    /**
-     * Show minutes input
-     */
     this.showMinutes = false;
-    /**
-     * Show seconds input
-     */
     this.showSeconds = false;
-    /**
-     * Select time with format string
-     *
-     * @since 1.1.0
-     */
     this.time = luxon.DateTime.now().toFormat(this.format);
-    /**
-     * Show time reference input
-     *
-     * @since 1.1.0 time reference is default aligned with formt tt
-     */
     this.showTimeReference = undefined;
-    /**
-     * Set time reference
-     */
     this.timeReference = luxon.DateTime.fromFormat(this.time, this.format).toFormat('a');
-    /**
-     * Text of date select button
-     *
-     * @since 1.1.0
-     */
     this.textSelectTime = 'Done';
-    this._time = luxon.DateTime.fromFormat(this.time, this.format);
+    this.hourInputRef = undefined;
+    this.minuteInputRef = undefined;
+    this.secondInputRef = undefined;
+    this.referenceInputRef = undefined;
   }
   get hour() {
     return this._time.hour;
@@ -107,6 +73,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.timeChange.emit(time);
   }
   componentWillLoad() {
+    this._time = luxon.DateTime.fromFormat(this.time, this.format);
     if (this.showTimeReference === undefined) {
       const matchedKeys = Object.keys(luxon.DateTime.fromFormatExplain(this.time, this.format).matches);
       this.showTimeReference = matchedKeys.includes('a');
@@ -116,7 +83,7 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * Get current time
    */
   async getCurrentTime() {
-    return this._time;
+    return this._time.toFormat(this.format);
   }
   render() {
     let hideHour = !this.showHour;

package/dist/components/toast.js

@@ -9,18 +9,12 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.closeToast = createEvent(this, "closeToast", 7);
-    /**
-     * Toast type
-     */
     this.type = 'info';
-    /**
-     * Autoclose title after delay
-     */
+    this.toastTitle = undefined;
     this.autoCloseDelay = 5000;
-    /**
-     * Autoclose behavior
-     */
     this.autoClose = true;
+    this.icon = undefined;
+    this.iconColor = undefined;
     this.progress = 0;
     this.isRunning = true;
     this.touched = false;

package/dist/components/tree-item.js

@@ -9,6 +9,9 @@ const TreeItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.toggle = createEvent(this, "toggle", 7);
     this.itemClick = createEvent(this, "itemClick", 7);
+    this.text = undefined;
+    this.hasChildren = undefined;
+    this.context = undefined;
   }
   render() {
     var _a, _b, _c;

package/dist/esm/{base-button-7bfb747f.js → base-button-0b6635df.js}

@@ -14,7 +14,7 @@ const isSecondary = (variant) => {
 };
 const getButtonClasses = (variant, outline, ghost, iconOnly = false, iconOval = false, selected, disabled) => {
   return {
-    'btn': true,
+    btn: true,
     'btn-primary': isPrimary(variant) && !outline && !ghost,
     'btn-outline-primary': isPrimary(variant) && outline && !ghost,
     'btn-invisible-primary': isPrimary(variant) && !outline && ghost,
@@ -23,8 +23,8 @@ const getButtonClasses = (variant, outline, ghost, iconOnly = false, iconOval =
     'btn-invisible-secondary': isSecondary(variant) && !outline && ghost,
     'btn-icon': iconOnly,
     'btn-oval': iconOval,
-    'selected': isSecondary(variant) && (outline || ghost) && selected,
-    'disabled': disabled,
+    selected: isSecondary(variant) && (outline || ghost) && selected,
+    disabled: disabled,
   };
 };