@siemens/ix 1.1.0-beta.2 → 1.1.0-beta.4

package/dist/collection/components/date-time-card/date-time-card.css

@@ -0,0 +1,51 @@
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+.card {
+  background-color: var(--theme-menu--background);
+  width: 100%;
+  box-shadow: none;
+  border: none;
+  border-radius: unset;
+}
+.card.individual {
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--theme-menu--border-color);
+  border-radius: 4px;
+}
+.card.left {
+  border-radius: 4px 0 0 4px;
+  height: 100%;
+}
+.card.right {
+  border-radius: 0 4px 4px 0;
+  height: 100%;
+}
+.card .header {
+  padding: 1rem;
+}
+.card .separator {
+  border: 1px solid var(--theme-datepicker-separator--background);
+  width: 100%;
+}
+.card .content {
+  height: 100%;
+  padding: 0px 1rem 1rem 1rem;
+}

package/dist/collection/components/date-time-card/date-time-card.js

@@ -0,0 +1,89 @@
+/*
+ * 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.
+ */
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+export class DateTimeCard {
+  constructor() {
+    /**
+     * set styles
+     */
+    this.individual = true;
+    /**
+     * Set corners style
+     */
+    this.corners = 'rounded';
+  }
+  cardClasses() {
+    return {
+      card: true,
+      individual: this.individual,
+      left: this.corners === 'left',
+      right: this.corners === 'right',
+    };
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: this.cardClasses() },
+        h("div", { class: "header" },
+          h("slot", { name: "header" })),
+        h("div", { class: "separator" }),
+        h("div", { class: "content" },
+          h("slot", null)))));
+  }
+  static get is() { return "ix-date-time-card"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["date-time-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["date-time-card.css"]
+  }; }
+  static get properties() { return {
+    "individual": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "set styles"
+      },
+      "attribute": "individual",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "corners": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DateTimeCardCorners",
+        "resolved": "\"left\" | \"right\" | \"rounded\"",
+        "references": {
+          "DateTimeCardCorners": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set corners style"
+      },
+      "attribute": "corners",
+      "reflect": false,
+      "defaultValue": "'rounded'"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,44 @@
+/*
+ * 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.
+ */
+/*
+ * 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+:host {
+  display: block;
+  background-color: var(--theme-menu--background);
+  border-radius: 4px;
+}
+
+.flex {
+  display: flex;
+  justify-content: center;
+}
+
+.done {
+  display: inline-flex;
+  justify-content: flex-end;
+  padding: 1rem;
+  width: 100%;
+}
+
+.separator {
+  border: 1px solid var(--theme-datepicker-separator--background);
+  width: 100%;
+  margin-top: 72px;
+  height: 1px;
+}

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

@@ -0,0 +1,501 @@
+/*
+ * 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.
+ */
+import { Component, Event, h, Host, Prop } from '@stencil/core';
+export class DatePicker {
+  constructor() {
+    /**
+     * Set range size
+     */
+    this.range = true;
+    /**
+     * Show hour input
+     */
+    this.showHour = false;
+    /**
+     * Show minutes input
+     */
+    this.showMinutes = false;
+    /**
+     * Show seconds input
+     */
+    this.showSeconds = false;
+    /**
+     * Date format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     *
+     * @since 1.1.0
+     */
+    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';
+  }
+  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("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.onDone() }, this.textSelectDate))));
+  }
+  static get is() { return "ix-datetime-picker"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["datetime-picker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["datetime-picker.css"]
+  }; }
+  static get properties() { return {
+    "range": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set range size"
+      },
+      "attribute": "range",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "showHour": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show hour input"
+      },
+      "attribute": "show-hour",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showMinutes": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Show minutes input"
+      },
+      "attribute": "show-minutes",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showSeconds": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "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": "any",
+      "mutable": false,
+      "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"
+    },
+    "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 [{
+      "method": "done",
+      "name": "done",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "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 {};