@siemens/ix 1.0.0 → 1.1.0-beta.0

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

@@ -22,18 +22,6 @@ export class MapNavigation {
   get menuOverlay() {
     return this.hostElement.querySelector('ix-menu-overlay');
   }
-  get about() {
-    return this.hostElement.querySelector('ix-menu-about');
-  }
-  get aboutItems() {
-    return this.hostElement.querySelector('ix-menu-about-item');
-  }
-  get settings() {
-    return this.hostElement.querySelector('ix-menu-settings');
-  }
-  get settingsItems() {
-    return this.hostElement.querySelector('ix-menu-settings-item');
-  }
   get mapNavMenu() {
     return this.hostElement.querySelector('.map-nav-menu');
   }
@@ -45,8 +33,6 @@ export class MapNavigation {
   }
   componentDidRender() {
     this.appendMenu();
-    this.appendAbout();
-    this.appendSettings();
     // this.openOverlay('Test', document.createElement('ix-breadcrumb'), 'info', 'color-warning');
     this.closeOverlay();
   }
@@ -59,17 +45,6 @@ export class MapNavigation {
     });
     this.menu.enableMapExpand = true;
   }
-  appendAbout() {
-    const about = this.about || document.createElement('ix-menu-about');
-    about.append(this.aboutItems);
-    this.menu.appendChild(about);
-  }
-  appendSettings() {
-    if (this.menu.enableSettings && this.settings) {
-      this.menu.appendChild(this.settings);
-      this.settings.append(this.settingsItems);
-    }
-  }
   toggleSidebar(show) {
     if (show !== undefined) {
       this.isSidebarOpen = show;
@@ -241,9 +216,7 @@ export class MapNavigation {
     }
   }; }
   static get states() { return {
-    "isSidebarOpen": {},
-    "isAboutOpen": {},
-    "isSettingsOpen": {}
+    "isSidebarOpen": {}
   }; }
   static get events() { return [{
       "method": "navigationToggled",

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

@@ -158,6 +158,9 @@ export class Menu {
   get avatarItem() {
     return this.hostElement.querySelector('ix-menu-avatar');
   }
+  get tabsContainer() {
+    return this.hostElement.querySelector('#menu-tabs');
+  }
   showTab(index) {
     return index + 1 <= this.visibleMenuItems;
   }
@@ -480,6 +483,15 @@ export class Menu {
   getCollapseIcon() {
     return this.mapExpand ? 'double-chevron-left' : 'double-chevron-right';
   }
+  isMenuItemClicked(event) {
+    const path = event.composedPath();
+    const menuItems = path
+      .filter((element) => element.id !== 'more-tab')
+      .filter((element) => {
+      return element.tagName === 'IX-MENU-ITEM';
+    });
+    return menuItems.some((menu) => this.tabsContainer.contains(menu));
+  }
   render() {
     return (h(Host, { class: {
         expanded: this.expand,
@@ -499,24 +511,31 @@ export class Menu {
             h("rect", { class: "line line-2", x: "5", y: "15.5", width: "22", height: "2" }),
             h("rect", { class: "line line-3", x: "5", y: "21.5", width: "22", height: "2" }))),
         h("div", { id: "avatar-tab-placeholder" }),
-        h("div", { class: "tabs-top" }),
-        h("slot", null),
-        h("div", { class: "active-more-tab" }, this.activeTab ? (h("ix-menu-item", { class: "internal-tab", active: true, tabIcon: this.activeTab.tabIcon }, this.activeTab.innerText)) : null),
-        h("ix-menu-item", { id: "more-tab", tabIcon: "more-menu", class: {
-            'internal-tab': true,
-          }, style: {
-            display: this.showMoreButton() ? 'block' : 'none',
-          }, title: "Show more", notifications: this.countMoreNotifications, onClick: () => this.toggleShowMoreDropdown() },
-          this.i18nMore,
-          h("ix-dropdown", { show: this.showMoreItems }, this.menuItems
-            .filter((elm, index) => !this.showTab(index) &&
-            !this.isMenuItemActive(elm) &&
-            this.isVisible(elm))
-            .map((e) => {
-            return (h("ix-menu-item", { tabIcon: e.tabIcon, active: e.active, class: "internal-tab appended", onClick: () => e.dispatchEvent(new CustomEvent('click')) }, e.innerText));
-          }))),
+        h("div", { id: "menu-tabs", style: {
+            display: 'contents',
+          }, onClick: (event) => {
+            if (this.isMenuItemClicked(event)) {
+              this.resetOverlay();
+            }
+          } },
+          h("div", { class: "tabs-top" }),
+          h("slot", null),
+          h("div", { class: "active-more-tab" }, this.activeTab ? (h("ix-menu-item", { class: "internal-tab", active: true, tabIcon: this.activeTab.tabIcon }, this.activeTab.innerText)) : null),
+          h("ix-menu-item", { id: "more-tab", tabIcon: "more-menu", class: {
+              'internal-tab': true,
+            }, style: {
+              display: this.showMoreButton() ? 'block' : 'none',
+            }, title: "Show more", notifications: this.countMoreNotifications, onClick: () => this.toggleShowMoreDropdown() },
+            this.i18nMore,
+            h("ix-dropdown", { show: this.showMoreItems }, this.menuItems
+              .filter((elm, index) => !this.showTab(index) &&
+              !this.isMenuItemActive(elm) &&
+              this.isVisible(elm))
+              .map((e) => {
+              return (h("ix-menu-item", { tabIcon: e.tabIcon, active: e.active, class: "internal-tab appended", onClick: () => e.dispatchEvent(new CustomEvent('click')) }, e.innerText));
+            })))),
         h("div", { class: "bottom-tab-divider" }),
-        this.enableSettings && !this.isSettingsEmpty ? (h("ix-menu-item", { class: {
+        this.enableSettings && !this.isSettingsEmpty ? (h("ix-menu-item", { id: "settings", class: {
             'internal-tab': true,
             'bottom-tab': true,
             active: this.showSettings,

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

@@ -6,17 +6,9 @@
  * 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, forceUpdate, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Prop, State, Watch, } from '@stencil/core';
 export class MenuAbout {
   constructor() {
-    /**
-     *
-     */
-    this.i18nImprintLabel = 'Imprint';
-    /**
-     * Active tab
-     */
-    this.activeTabLabel = this.i18nImprintLabel;
     /**
      * Label of first tab
      */
@@ -40,12 +32,11 @@ export class MenuAbout {
     });
   }
   componentWillLoad() {
-    var _a;
-    this.setTab(this.activeTabLabel || ((_a = this.aboutItems[0]) === null || _a === void 0 ? void 0 : _a.label));
+    if (this.aboutItems.length) {
+      this.setTab(this.activeTabLabel || this.aboutItems[0].label);
+    }
   }
   componentDidLoad() {
-    var _a;
-    this.setTab(this.activeTabLabel || ((_a = this.aboutItems[0]) === null || _a === void 0 ? void 0 : _a.label));
     forceUpdate(this.el);
   }
   componentWillRender() {
@@ -62,6 +53,13 @@ export class MenuAbout {
     const selectedItem = this.aboutItems.find((item) => item.label === label);
     return this.aboutItems.indexOf(selectedItem);
   }
+  getTabItems() {
+    return this.aboutItems.map(({ label }) => {
+      return (h("ix-tab-item", { class: {
+          active: label === this.activeTabLabel,
+        }, onClick: () => this.setTab(label) }, label));
+    });
+  }
   render() {
     return (h(Host, { class: {
         animate__animated: true,
@@ -71,7 +69,7 @@ export class MenuAbout {
       h("div", { class: "about-header" },
         h("h2", { class: "text-h2" }, this.label),
         h("ix-icon-button", { ghost: true, size: "24", icon: "close", onClick: (e) => this.close.emit(e) })),
-      h("ix-tabs", { selected: this.getSelectedTabIndex(this.activeTabLabel), class: "about-tabs" }, this.labels.map((label) => (h("ix-tab-item", { onClick: () => this.setTab(label) }, label)))),
+      h("ix-tabs", { selected: this.getSelectedTabIndex(this.activeTabLabel), class: "about-tabs" }, this.getTabItems()),
       h("div", { class: "about-items" },
         h("slot", null))));
   }
@@ -84,24 +82,6 @@ export class MenuAbout {
     "$": ["menu-about.css"]
   }; }
   static get properties() { return {
-    "i18nImprintLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "i-1-8n-imprint-label",
-      "reflect": true,
-      "defaultValue": "'Imprint'"
-    },
     "activeTabLabel": {
       "type": "string",
       "mutable": true,
@@ -117,8 +97,7 @@ export class MenuAbout {
         "text": "Active tab"
       },
       "attribute": "active-tab-label",
-      "reflect": true,
-      "defaultValue": "this.i18nImprintLabel"
+      "reflect": false
     },
     "label": {
       "type": "string",

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

@@ -59,10 +59,10 @@ ix-menu-item i.glyph {
   color: var(--theme-nav-item-primary-icon--color);
   position: relative;
 }
-ix-menu-item .tab:focus {
+ix-menu-item .tab:focus-visible {
   outline: none;
 }
-ix-menu-item:focus {
+ix-menu-item:focus-visible {
   outline: none;
 }
 ix-menu-item .tab:not(:last-child) {

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

@@ -6,7 +6,7 @@
  * 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, forceUpdate, h, Host, Prop, Watch } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Prop, Watch, } from '@stencil/core';
 export class MenuAbout {
   constructor() {
     /**

package/dist/collection/components/select/select.css

@@ -117,7 +117,7 @@
   -webkit-margin-end: 2rem;
           margin-inline-end: 2rem;
 }
-:host .input-container input, :host .input-container input:hover, :host .input-container input:focus {
+:host .input-container input, :host .input-container input:hover, :host .input-container input:focus-visible {
   border: none;
   outline: none;
 }

package/dist/collection/components/tile/tile.css

@@ -53,7 +53,7 @@
   min-height: 10rem;
   max-height: 10rem;
 }
-:host:active, :host:focus, :host:visited {
+:host:active, :host:focus-visible, :host:visited {
   outline: none;
 }
 :host .tile-header {

package/dist/collection/components/time-picker/time-picker.js

@@ -6,35 +6,68 @@
  * 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, Prop, State } from '@stencil/core';
+import { Component, Element, Event, h, Host, Method, Prop, State, } from '@stencil/core';
 import { DateTime } from 'luxon';
 export class TimePicker {
   constructor() {
     /**
-     * Set corners style
+     * Format of time string
+     *
+     * @since 1.1.0
+     */
+    this.format = 'TT';
+    /**
+     * Corner style
      */
     this.corners = 'rounded';
     /**
-     * set styles
+     * @deprecated - will get removed with next major release
      */
     this.individual = true;
     /**
-     * Show Hour Input
+     * Show hour input
      */
     this.showHour = false;
     /**
-     * Show Minutes Input
+     * Show minutes input
      */
     this.showMinutes = false;
     /**
-     * Show Seconds Input
+     * Show seconds input
      */
     this.showSeconds = false;
     /**
-     * Show Time Reference Input
+     * Select time with format string
+     *
+     * @since 1.1.0
+     */
+    this.time = 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.showTimeReference = false;
-    this.time = DateTime.fromFormat('00:00:00 AM', 'tt');
+    this.timeReference = DateTime.fromFormat(this.time, this.format).toFormat('a');
+    /**
+     * Text of date select button
+     *
+     * @since 1.1.0
+     */
+    this.textSelectTime = 'Done';
+    this._time = DateTime.fromFormat(this.time, this.format);
+  }
+  get hour() {
+    return this._time.hour;
+  }
+  get minutes() {
+    return this._time.minute;
+  }
+  get seconds() {
+    return this._time.second;
   }
   updateInput(step, { hours = undefined, minutes = undefined, seconds = undefined }) {
     if (hours)
@@ -47,25 +80,40 @@ export class TimePicker {
       step === 'up'
         ? this.secondInputRef.stepUp()
         : this.secondInputRef.stepDown();
-    this.time = this.time.set({
+    this._time = this._time.set({
       hour: Number(this.hourInputRef.value),
       minute: Number(this.minuteInputRef.value),
       second: Number(this.secondInputRef.value),
     });
-    this.setHourAccordingToReference();
-    this.timeChange.emit(this.time.toFormat('TT'));
+    this.emitTimeChange();
   }
   changeReference() {
     this.referenceInputRef.value =
       this.referenceInputRef.value === 'PM' ? 'AM' : 'PM';
     this.setHourAccordingToReference();
-    this.timeChange.emit(this.time.toFormat('TT'));
+    this.emitTimeChange();
   }
   setHourAccordingToReference() {
     let hour = Number(this.hourInputRef.value);
     if (this.referenceInputRef.value === 'PM')
       hour += 12;
-    this.time = this.time.set({ hour });
+    this._time = this._time.set({ hour });
+  }
+  emitTimeChange() {
+    const time = this._time.toFormat(this.format);
+    this.timeChange.emit(time);
+  }
+  componentWillLoad() {
+    if (this.showTimeReference === undefined) {
+      const matchedKeys = Object.keys(DateTime.fromFormatExplain(this.time, this.format).matches);
+      this.showTimeReference = matchedKeys.includes('a');
+    }
+  }
+  /**
+   * Get current time
+   */
+  async getCurrentTime() {
+    return this._time;
   }
   render() {
     let hideHour = !this.showHour;
@@ -87,17 +135,17 @@ export class TimePicker {
         h("div", { class: "clock" },
           h("div", { class: { columns: true, hidden: hideHour } },
             h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { hours: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }),
-            h("input", { name: "hours", type: "number", placeholder: "00", min: "0", disabled: true, max: this.showTimeReference === true ? 11 : 23, ref: (ref) => (this.hourInputRef = ref) }),
+            h("input", { name: "hours", type: "number", placeholder: "00", value: this.hour, min: "0", disabled: true, max: this.showTimeReference === true ? 11 : 23, ref: (ref) => (this.hourInputRef = ref) }),
             h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })),
           h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"),
           h("div", { class: { columns: true, hidden: hideMinutes } },
             h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }),
-            h("input", { name: "minutes", type: "number", placeholder: "00", min: "0", max: "59", disabled: true, ref: (ref) => (this.minuteInputRef = ref) }),
+            h("input", { name: "minutes", type: "number", placeholder: "00", value: this.minutes, min: "0", max: "59", disabled: true, ref: (ref) => (this.minuteInputRef = ref) }),
             h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })),
           h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"),
           h("div", { class: { columns: true, hidden: hideSeconds } },
             h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }),
-            h("input", { name: "seconds", type: "number", placeholder: "00", disabled: true, min: "0", max: "59", ref: (ref) => (this.secondInputRef = ref) }),
+            h("input", { name: "seconds", type: "number", placeholder: "00", value: this.seconds, disabled: true, min: "0", max: "59", ref: (ref) => (this.secondInputRef = ref) }),
             h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })),
           h("div", { class: {
               columns: true,
@@ -105,10 +153,10 @@ export class TimePicker {
               hidden: hideTimeReference,
             } },
             h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }),
-            h("input", { name: "reference", type: "text", ref: (ref) => (this.referenceInputRef = ref), value: "AM", disabled: true, class: "text-align" }),
+            h("input", { name: "reference", type: "text", ref: (ref) => (this.referenceInputRef = ref), value: this.timeReference, disabled: true, class: "text-align" }),
             h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" }))),
         h("div", { class: { button: true, hidden: hideIndividual } },
-          h("ix-button", { onClick: () => this.done.emit(this.time.toFormat('TT')) }, "Done")))));
+          h("ix-button", { onClick: () => this.done.emit(this._time.toFormat(this.format)) }, this.textSelectTime)))));
   }
   static get is() { return "ix-time-picker"; }
   static get encapsulation() { return "scoped"; }
@@ -119,6 +167,27 @@ export class TimePicker {
     "$": ["time-picker.css"]
   }; }
   static get properties() { return {
+    "format": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Format of time string"
+      },
+      "attribute": "format",
+      "reflect": false,
+      "defaultValue": "'TT'"
+    },
     "corners": {
       "type": "string",
       "mutable": false,
@@ -136,7 +205,7 @@ export class TimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set corners style"
+        "text": "Corner style"
       },
       "attribute": "corners",
       "reflect": false,
@@ -153,8 +222,11 @@ export class TimePicker {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "set styles"
+        "tags": [{
+            "name": "deprecated",
+            "text": "- will get removed with next major release"
+          }],
+        "text": ""
       },
       "attribute": "individual",
       "reflect": false,
@@ -172,7 +244,7 @@ export class TimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Show Hour Input"
+        "text": "Show hour input"
       },
       "attribute": "show-hour",
       "reflect": false,
@@ -190,7 +262,7 @@ export class TimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Show Minutes Input"
+        "text": "Show minutes input"
       },
       "attribute": "show-minutes",
       "reflect": false,
@@ -208,29 +280,92 @@ export class TimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Show Seconds Input"
+        "text": "Show seconds input"
       },
       "attribute": "show-seconds",
       "reflect": false,
       "defaultValue": "false"
     },
+    "time": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Select time with format string"
+      },
+      "attribute": "time",
+      "reflect": false,
+      "defaultValue": "DateTime.now().toFormat(this.format)"
+    },
     "showTimeReference": {
-      "type": "boolean",
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0 time reference is default aligned with formt tt"
+          }],
+        "text": "Show time reference input"
+      },
+      "attribute": "show-time-reference",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "timeReference": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "'AM' | 'PM'",
+        "resolved": "\"AM\" | \"PM\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Show Time Reference Input"
+        "text": "Set time reference"
       },
-      "attribute": "show-time-reference",
+      "attribute": "time-reference",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "DateTime.fromFormat(\n    this.time,\n    this.format\n  ).toFormat('a') as 'PM' | 'AM'"
+    },
+    "textSelectTime": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Text of date select button"
+      },
+      "attribute": "text-select-time",
+      "reflect": false,
+      "defaultValue": "'Done'"
     }
   }; }
   static get states() { return {
@@ -270,5 +405,27 @@ export class TimePicker {
         "references": {}
       }
     }]; }
+  static get methods() { return {
+    "getCurrentTime": {
+      "complexType": {
+        "signature": "() => Promise<DateTime>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "DateTime": {
+            "location": "import",
+            "path": "luxon"
+          }
+        },
+        "return": "Promise<DateTime>"
+      },
+      "docs": {
+        "text": "Get current time",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "hostElement"; }
 }

package/dist/collection/components/toast/toast.js

@@ -9,6 +9,10 @@
 import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
 export class Toast {
   constructor() {
+    /**
+     * Toast type
+     */
+    this.type = 'info';
     /**
      * Autoclose title after delay
      */
@@ -117,7 +121,8 @@ export class Toast {
         "text": "Toast type"
       },
       "attribute": "type",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "'info'"
     },
     "toastTitle": {
       "type": "string",

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

@@ -50,13 +50,19 @@
   cursor: pointer;
 }
 :host:not(.disabled):not(:disabled):not(.selected).hover, :host:not(.disabled):not(:disabled):not(.selected):hover {
-  background-color: var(--theme-ghost-hover);
+  background-color: var(--theme-tree-item--background--hover);
 }
 :host:not(.disabled):not(:disabled):not(.selected).active, :host:not(.disabled):not(:disabled):not(.selected):active {
-  background-color: var(--theme-ghost-pressed);
+  background-color: var(--theme-tree-item--background--active);
 }
 :host.selected {
-  background-color: var(--theme-ghost-selected);
+  background-color: var(--theme-tree-item--background--selected);
+}
+:host.selected.hover, :host.selected:hover {
+  background-color: var(--theme-tree-item--background--selected-hover);
+}
+:host.selected.active, :host.selected:active {
+  background-color: var(--theme-tree-item--background--selected-active);
 }
 :host .tree-node-container {
   display: flex;