@siemens/ix 1.0.0 → 1.1.0-beta.0

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

@@ -14,33 +14,101 @@ export class DatePicker {
      */
     this.range = 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
+     * Date format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     *
+     * @since 1.1.0
      */
-    this.showTimeReference = false;
+    this.dateFormat = 'yyyy/LL/dd';
+    /**
+     * Time format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     *
+     * @since 1.1.0
+     */
+    this.timeFormat = 'TT';
+    /**
+     * Picker date. If the picker is in range mode this property is the end date.
+     * If the picker is not in range mode leave this value `null`
+     *
+     * Format is based on `format`
+     *
+     * @since 1.1.0
+     */
+    this.to = null;
+    /**
+     * Show time reference input
+     *
+     * @since 1.1.0 time reference is default aligned with formt tt
+     */
+    this.showTimeReference = undefined;
+    /**
+     * Default behavior of the done event is to join the two events (date and time) into one combined string output.
+     * This combination can be configured over the delimiter
+     *
+     * @since 1.1.0
+     */
+    this.eventDelimiter = ' - ';
+    /**
+     * Text of date select button
+     *
+     * @since 1.1.0
+     */
+    this.textSelectDate = 'Done';
   }
-  doneEvent() {
-    console.log(this.date + ' ' + this.time);
-    this.done.emit(this.date + ' ' + this.time);
+  onDone() {
+    var _a;
+    this.done.emit([this._from, (_a = this._to) !== null && _a !== void 0 ? _a : '', this._time].join(this.eventDelimiter));
+    this.dateSelect.emit({
+      from: this._from,
+      to: this._to,
+      time: this._time,
+    });
+  }
+  async onDateChange(event) {
+    var _a, _b;
+    event.preventDefault();
+    event.stopPropagation();
+    const { detail: date } = event;
+    this.dateChange.emit(date);
+    const currentDateTime = await this.datePickerElement.getCurrentDate();
+    this._from = (_a = currentDateTime.start) === null || _a === void 0 ? void 0 : _a.toFormat(this.dateFormat);
+    this._to = (_b = currentDateTime.end) === null || _b === void 0 ? void 0 : _b.toFormat(this.dateFormat);
+  }
+  async onTimeChange(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const { detail: time } = event;
+    this.timeChange.emit(time);
+    const currentDateTime = await this.timePickerElement.getCurrentTime();
+    this._time = currentDateTime.toFormat(this.timeFormat);
+  }
+  componentDidLoad() {
+    this._from = this.from;
+    this._to = this.to;
+    this._time = this.time;
   }
   render() {
     return (h(Host, null,
       h("div", { class: "flex" },
-        h("ix-date-picker", { corners: "left", individual: false, range: this.range, onDateChange: (date) => (this.date = date.detail) }),
-        h("ix-time-picker", { corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (time) => (this.time = time.detail) })),
+        h("div", { class: "separator" }),
+        h("ix-date-picker", { ref: (ref) => (this.datePickerElement = ref), corners: "left", individual: false, range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, eventDelimiter: this.eventDelimiter }),
+        h("ix-time-picker", { ref: (ref) => (this.timePickerElement = ref), corners: "right", individual: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, showTimeReference: this.showTimeReference, onTimeChange: (event) => this.onTimeChange(event), time: this.time, format: this.timeFormat, timeReference: this.timeReference }),
+        h("div", { class: "separator" })),
       h("div", { class: "done" },
-        h("ix-button", { onClick: () => this.doneEvent() }, "Done"))));
+        h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate))));
   }
   static get is() { return "ix-datetime-picker"; }
   static get encapsulation() { return "scoped"; }
@@ -81,7 +149,7 @@ export class DatePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Show Hour Input"
+        "text": "Show hour input"
       },
       "attribute": "show-hour",
       "reflect": false,
@@ -99,7 +167,7 @@ export class DatePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Show Minutes Input"
+        "text": "Show minutes input"
       },
       "attribute": "show-minutes",
       "reflect": false,
@@ -117,29 +185,234 @@ export class DatePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Show Seconds Input"
+        "text": "Show seconds input"
       },
       "attribute": "show-seconds",
       "reflect": false,
       "defaultValue": "false"
     },
+    "minDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "The earliest date that can be selected by the date picker.\nIf not set there will be no restriction."
+      },
+      "attribute": "min-date",
+      "reflect": false
+    },
+    "maxDate": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "The latest date that can be selected by the date picker.\nIf not set there will be no restriction."
+      },
+      "attribute": "max-date",
+      "reflect": false
+    },
+    "dateFormat": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Date format string.\nSee {@link https ://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens."
+      },
+      "attribute": "date-format",
+      "reflect": false,
+      "defaultValue": "'yyyy/LL/dd'"
+    },
+    "timeFormat": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Time format string.\nSee {@link https ://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens."
+      },
+      "attribute": "time-format",
+      "reflect": false,
+      "defaultValue": "'TT'"
+    },
+    "from": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Picker date. If the picker is in range mode this property is the start date.\n\nFormat is based on `format`"
+      },
+      "attribute": "from",
+      "reflect": false
+    },
+    "to": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Picker date. If the picker is in range mode this property is the end date.\nIf the picker is not in range mode leave this value `null`\n\nFormat is based on `format`"
+      },
+      "attribute": "to",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "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
+    },
     "showTimeReference": {
-      "type": "boolean",
+      "type": "any",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "any",
+        "resolved": "any",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Show Time Reference Input"
+        "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": "false"
+      "defaultValue": "undefined"
+    },
+    "eventDelimiter": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Default behavior of the done event is to join the two events (date and time) into one combined string output.\nThis combination can be configured over the delimiter"
+      },
+      "attribute": "event-delimiter",
+      "reflect": false,
+      "defaultValue": "' - '"
+    },
+    "timeReference": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'AM' | 'PM'",
+        "resolved": "\"AM\" | \"PM\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set time reference"
+      },
+      "attribute": "time-reference",
+      "reflect": false
+    },
+    "textSelectDate": {
+      "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-date",
+      "reflect": false,
+      "defaultValue": "'Done'"
     }
   }; }
   static get events() { return [{
@@ -150,12 +423,79 @@ export class DatePicker {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Time event"
+        "text": "Done event\n\nSet `doneEventDelimiter` to null or undefine to get the typed event"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "timeChange",
+      "name": "timeChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Time change"
       },
       "complexType": {
         "original": "string",
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "dateChange",
+      "name": "dateChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Date change"
+      },
+      "complexType": {
+        "original": "string | Omit<DateTimeSelectEvent, 'time'>",
+        "resolved": "string | { from: string; to: string; }",
+        "references": {
+          "Omit": {
+            "location": "global"
+          },
+          "DateTimeSelectEvent": {
+            "location": "import",
+            "path": "./event"
+          }
+        }
+      }
+    }, {
+      "method": "dateSelect",
+      "name": "dateSelect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "since",
+            "text": "1.1.0"
+          }],
+        "text": "Date selection event is fired after confirm button is pressend"
+      },
+      "complexType": {
+        "original": "DateTimeSelectEvent",
+        "resolved": "DateTimeSelectEvent",
+        "references": {
+          "DateTimeSelectEvent": {
+            "location": "import",
+            "path": "./event"
+          }
+        }
+      }
     }]; }
 }

package/dist/collection/components/datetime-picker/event.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+export {};

package/dist/collection/components/dropdown/dropdown.css

@@ -466,7 +466,7 @@
   border: 1px solid transparent;
   color: var(--theme-menu-item--color);
 }
-.dropdown-item:focus {
+.dropdown-item:focus-visible {
   background-color: var(--theme-menu-item--background);
   color: var(--theme-menu-item--color);
 }

package/dist/collection/components/event-list/event-list.css

@@ -44,7 +44,7 @@ ul {
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
 }
-.compact ::slotted(* .ix-event-list-item) .cui-event-list-item-content-container {
+.compact ::slotted(* .ix-event-list-item) .event-list-item-container {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-bottom-left-radius: 0;
@@ -53,6 +53,6 @@ ul {
 .compact ::slotted(* .ix-event-list-item) i.glyph {
   display: none;
 }
-.compact .compact:not(:last-child) .cui-event-list-item-content-container {
+.compact .compact:not(:last-child) .event-list-item-container {
   border-bottom: none;
 }

package/dist/collection/components/event-list-item/event-list-item.css

@@ -46,6 +46,18 @@
   cursor: pointer;
   margin-bottom: 0.5rem;
 }
+.ix-event-list-item:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.ix-event-list-item:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-event-item--background--hover);
+}
+.ix-event-list-item:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.ix-event-list-item:not(.disabled):not(:disabled):active {
+  background-color: var(--theme-event-item--background--active);
+}
 .ix-event-list-item .indicator {
   height: 100%;
   width: 0.5rem;
@@ -58,7 +70,7 @@
   border: var(--theme-weak-bdr-1);
   border-right: none;
 }
-.ix-event-list-item .cui-event-list-item-content-container {
+.ix-event-list-item .event-list-item-container {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -75,6 +87,29 @@
   border-left: none;
   padding-left: 1rem;
 }
+.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-event-item--border--hover);
+}
+.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+.ix-event-list-item .event-list-item-container:not(.disabled):not(:disabled):active {
+  border-color: var(--theme-event-item--border--active);
+}
+.ix-event-list-item.selected:not(:active, .active) .event-list-item-container {
+  background-color: var(--theme-event-item--background--selected);
+  border-color: var(--theme-event-item--border--selected);
+}
+.ix-event-list-item[disabled], .ix-event-list-item.disabled {
+  pointer-events: none;
+}
+.ix-event-list-item[disabled] .event-list-item-container, .ix-event-list-item.disabled .event-list-item-container {
+  background-color: var(--theme-event-item--background--disabled);
+  border-color: var(--theme-event-item--border--disabled);
+}
 .ix-event-list-item .chevron-icon {
   display: none;
   margin-left: auto;
@@ -88,22 +123,4 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-}
-.ix-event-list-item:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-.ix-event-list-item:not(.disabled):not(:disabled):hover {
-  background-color: var(--theme-event-list-item-hover);
-}
-.ix-event-list-item:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-.ix-event-list-item:not(.disabled):not(:disabled):active {
-  background-color: var(--theme-event-list-item-pressed);
-}
-.ix-event-list-item.selected {
-  background-color: var(--theme-event-item--background--selected);
-}
-.ix-event-list-item[disabled], .ix-event-list-item.disabled {
-  pointer-events: none;
 }

package/dist/collection/components/event-list-item/event-list-item.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, h, Listen, Prop } from '@stencil/core';
+import { Component, Element, Event, h, Listen, Prop, } from '@stencil/core';
 export class EventListItem {
   constructor() {
     /**
@@ -32,7 +32,7 @@ export class EventListItem {
             : 'inherit',
           opacity: `${this.disabled ? 0.4 : this.opacity}`,
         } }),
-      h("div", { class: "cui-event-list-item-content-container" },
+      h("div", { class: "event-list-item-container" },
         h("div", { class: "event-content" },
           h("slot", null)),
         h("i", { class: "glyph glyph-16 glyph-chevron-right chevron-icon" }))));

package/dist/collection/components/expanding-search/expanding-search.css

@@ -35,14 +35,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
-  display: flex;
-  width: 11.5625rem;
+  display: inline-flex;
+  width: auto;
   height: 2rem;
   align-items: center;
   justify-content: space-between;
   /*collapsed view*/
   /*expanded view*/
 }
+:host.right-position {
+  width: 11.5625rem !important;
+}
 :host .input-container {
   transition: all 0.3s ease-in-out;
 }
@@ -87,7 +90,7 @@
 :host .btn-search:not(.disabled):not(:disabled):active {
   border-color: transparent;
 }
-:host .btn-search:not(.disabled):not(:disabled):focus, :host .btn-search:not(.disabled):not(:disabled):focus-visible {
+:host .btn-search:not(.disabled):not(:disabled):focus-visible {
   outline: none;
 }
 :host .btn-search:not(.disabled):not(:disabled):focus-visible {

package/dist/collection/components/expanding-search/expanding-search.js

@@ -62,6 +62,7 @@ export class ExpandingSearch {
   render() {
     return (h(Host, { class: {
         expanded: this.expanded,
+        'right-position': this.expanded,
       } },
       h("button", { class: {
           btn: true,

package/dist/collection/components/filter-chip/filter-chip.css

@@ -57,7 +57,7 @@
 :host:not(.disabled):not(:disabled):active {
   background-color: var(--theme-chip--background--active);
 }
-:host:not(.disabled):not(:disabled):focus, :host:not(.disabled):not(:disabled):focus-visible {
+:host:not(.disabled):not(:disabled):focus-visible {
   border-color: #199fff;
 }
 :host .slot-container {
@@ -76,7 +76,7 @@
   padding: 0;
   vertical-align: top;
 }
-:host .btn-oval:not(.disabled):not(:disabled):focus, :host .btn-oval:not(.disabled):not(:disabled):focus-visible {
+:host .btn-oval:not(.disabled):not(:disabled):focus-visible {
   outline: none;
   border-color: #199fff;
 }