@siemens/ix 0.0.0-20240419081748

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

@@ -0,0 +1,526 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { h, Host } from "@stencil/core";
+export class DatetimePicker {
+    constructor() {
+        this.range = true;
+        this.showHour = true;
+        this.showMinutes = true;
+        this.showSeconds = true;
+        this.minDate = undefined;
+        this.maxDate = undefined;
+        this.dateFormat = 'yyyy/LL/dd';
+        this.timeFormat = 'HH:mm:ss';
+        this.from = undefined;
+        this.to = undefined;
+        this.time = undefined;
+        this.showTimeReference = undefined;
+        this.timeReference = undefined;
+        this.textSelectDate = undefined;
+        this.i18nDone = 'Done';
+        this.weekStartIndex = 0;
+        this.locale = undefined;
+        this.eventDelimiter = ' - ';
+    }
+    async onDone() {
+        var _a;
+        const date = await this.datePickerElement.getCurrentDate();
+        const time = await this.timePickerElement.getCurrentTime();
+        this.dateSelect.emit({
+            from: date.from,
+            to: date.to,
+            time: time,
+        });
+        this.done.emit([date.from, (_a = date.to) !== null && _a !== void 0 ? _a : '', time].join(this.eventDelimiter));
+    }
+    async onDateChange(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const { detail: date } = event;
+        this.dateChange.emit(date);
+    }
+    async onTimeChange(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const { detail: time } = event;
+        this.timeChange.emit(time);
+    }
+    render() {
+        return (h(Host, { key: 'ced15d6ebee8f55870b7fc36283556fae3cf72fd' }, h("ix-layout-grid", { key: '58e9916ce84c7ee9a3f7b930718a396cb76106f2', class: "no-padding" }, h("ix-row", { key: '593109d02398fd179303b7bc3030b13b5701f769' }, h("ix-col", { key: '4b6a39a1ba04096d522fc7943f72b14901e71006', class: "no-padding" }, h("ix-date-picker", { key: '5ee0c7a5a45749104a23e5f3eeea44e33bd7a815', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: '6cbefe036d4a48efaca5a9b1a67ef801feab449f', class: "no-padding" }, h("ix-time-picker", { key: '285d034e938063753075f7f55d4f63a211483f18', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: '24ab1e4d0cf246456d34744d14404c6bbb629d06' }, h("ix-col", { key: '26daaa468b4d80e1c124f1776b7b773df4dd9b97' }, h("ix-button", { key: '38f073daffa3f337e26a319d1721f67ee28db729', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
+    }
+    static get is() { return "ix-datetime-picker"; }
+    static get encapsulation() { return "shadow"; }
+    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": "If true a date-range can be selected (from/to)."
+                },
+                "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": "true"
+            },
+            "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": "true"
+            },
+            "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": "true"
+            },
+            "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": "'HH:mm:ss'"
+            },
+            "from": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.1.0"
+                        }],
+                    "text": "The selected starting date. If the picker is not in range mode this is the selected date.\nFormat has to match the `format` property."
+                },
+                "attribute": "from",
+                "reflect": false
+            },
+            "to": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.1.0"
+                        }],
+                    "text": "The selected end date. If the the picker is not in range mode this property has no impact.\nFormat has to match the `format` property."
+                },
+                "attribute": "to",
+                "reflect": 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
+            },
+            "showTimeReference": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "see",
+                            "text": "{ this.timeFormat}"
+                        }, {
+                            "name": "since",
+                            "text": "1.1.0"
+                        }],
+                    "text": "Show time reference input\nTime reference is default aligned with"
+                },
+                "attribute": "show-time-reference",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "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"
+                        }, {
+                            "name": "deprecated",
+                            "text": "since 2.1.0. Use `i18nDone`"
+                        }],
+                    "text": "Text of date select button"
+                },
+                "attribute": "text-select-date",
+                "reflect": false
+            },
+            "i18nDone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.1.0"
+                        }],
+                    "text": "Text of date select button"
+                },
+                "attribute": "i18n-done",
+                "reflect": false,
+                "defaultValue": "'Done'"
+            },
+            "weekStartIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.1.0"
+                        }],
+                    "text": "The index of which day to start the week on, based on the Locale#weekdays array.\nE.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday."
+                },
+                "attribute": "week-start-index",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.1.0"
+                        }],
+                    "text": "Format of time string\nSee {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens."
+                },
+                "attribute": "locale",
+                "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"
+                        }, {
+                            "name": "deprecated",
+                            "text": "Not used anymore see `done` event"
+                        }],
+                    "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": "' - '"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "done",
+                "name": "done",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `this.dateChange`"
+                        }],
+                    "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": "DateTimeDateChangeEvent",
+                    "resolved": "string | { from: string; to: string; }",
+                    "references": {
+                        "DateTimeDateChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/datetime-picker/datetime-picker.tsx",
+                            "id": "src/components/datetime-picker/datetime-picker.tsx::DateTimeDateChangeEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "dateSelect",
+                "name": "dateSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.1.0"
+                        }],
+                    "text": "Datetime selection event is fired after confirm button is pressed"
+                },
+                "complexType": {
+                    "original": "DateTimeSelectEvent",
+                    "resolved": "{ from: string; to: string; time: string; }",
+                    "references": {
+                        "DateTimeSelectEvent": {
+                            "location": "local",
+                            "path": "/Users/daniel/dev/oss/ix/packages/core/src/components/datetime-picker/datetime-picker.tsx",
+                            "id": "src/components/datetime-picker/datetime-picker.tsx::DateTimeSelectEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=datetime-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datetime-picker.js","sourceRoot":"","sources":["../../../../src/components/datetime-picker/datetime-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker';\n\nexport type DateTimeSelectEvent = {\n  from: string;\n  to: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  shadow: true,\n})\nexport class DatetimePicker {\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = true;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = true;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = true;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Date format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() timeFormat: string = 'HH:mm:ss';\n\n  /**\n   * The selected starting date. If the picker is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string | undefined;\n\n  /**\n   * The selected end date. If the the picker is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | undefined;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   *\n   * @since 1.1.0\n   */\n  @Prop() showTimeReference = undefined;\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   * @deprecated since 2.1.0. Use `i18nDone`\n   */\n  @Prop() textSelectDate: string;\n\n  /**\n   * Text of date select button\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.1.0\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Format of time string\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 2.1.0\n   */\n  @Prop() locale: string = undefined;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   * @deprecated Not used anymore see `done` event\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Done event\n   *\n   * Set `doneEventDelimiter` to null or undefine to get the typed event\n   * @deprecated Use `this.dateChange`\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change\n   *\n   * @since 1.1.0\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  /**\n   * Date change\n   *\n   * @since 1.1.0\n   */\n  @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Datetime selection event is fired after confirm button is pressed\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement: HTMLIxDatePickerElement;\n  private timePickerElement: HTMLIxTimePickerElement;\n\n  private async onDone() {\n    const date = await this.datePickerElement.getCurrentDate();\n    const time = await this.timePickerElement.getCurrentTime();\n\n    this.dateSelect.emit({\n      from: date.from,\n      to: date.to,\n      time: time,\n    });\n\n    this.done.emit([date.from, date.to ?? '', time].join(this.eventDelimiter));\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-layout-grid class=\"no-padding\">\n          <ix-row>\n            <ix-col class=\"no-padding\">\n              <ix-date-picker\n                ref={(ref) => (this.datePickerElement = ref)}\n                corners=\"left\"\n                range={this.range}\n                onDateChange={(event) => this.onDateChange(event)}\n                from={this.from}\n                to={this.to}\n                format={this.dateFormat}\n                minDate={this.minDate}\n                maxDate={this.maxDate}\n                weekStartIndex={this.weekStartIndex}\n                standaloneAppearance={false}\n                locale={this.locale}\n              ></ix-date-picker>\n            </ix-col>\n\n            <ix-col class=\"no-padding\">\n              <ix-time-picker\n                class=\"min-width\"\n                ref={(ref) => (this.timePickerElement = ref)}\n                corners=\"right\"\n                standaloneAppearance={false}\n                showHour={this.showHour}\n                showMinutes={this.showMinutes}\n                showSeconds={this.showSeconds}\n                onTimeChange={(event) => this.onTimeChange(event)}\n                format={this.timeFormat}\n                time={this.time}\n              ></ix-time-picker>\n            </ix-col>\n          </ix-row>\n          <ix-row>\n            <ix-col>\n              <ix-button\n                class=\"btn-select-date btn-md-width\"\n                onClick={() => this.onDone()}\n              >\n                {this.textSelectDate || this.i18nDone}\n              </ix-button>\n            </ix-col>\n          </ix-row>\n        </ix-layout-grid>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,54 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { expect } from "@playwright/test";
+import { test } from "../../../tests/utils/test/index";
+const DATE_TIME_PICKER_SELECTOR = 'ix-datetime-picker';
+test('renders', async ({ mount, page }) => {
+    await mount(`<ix-datetime-picker></ix-datetime-picker>`);
+    const datePicker = page.locator(DATE_TIME_PICKER_SELECTOR);
+    await expect(datePicker).toHaveClass(/hydrated/);
+});
+test.describe('datetime picker tests single', () => {
+    test.beforeEach(async ({ mount }) => {
+        await mount(`
+      <ix-datetime-picker
+        range="false"
+        from="1990/03/29"
+        date-format="yyyy/LL/dd"
+        time="09:10:12"
+        time-format="HH:mm:ss"
+        week-start-index="1"
+      ></ix-datetime-picker>
+      `);
+    });
+    test('increment time units', async ({ page }) => {
+        await page.waitForSelector('ix-date-time-card');
+        const timeChangeEvent = page.evaluate(() => {
+            return new Promise((f) => {
+                document.addEventListener('timeChange', (data) => f(data));
+            });
+        });
+        const incrementButtons = (await page.$$('ix-icon-button.arrows:first-child')).slice(0, 3);
+        for (const button of incrementButtons) {
+            await button.click();
+        }
+        expect(await timeChangeEvent).toBeTruthy;
+    });
+    test('change date', async ({ page }) => {
+        await page.waitForSelector('ix-date-time-card');
+        const dateChangeEvent = page.evaluate(() => {
+            return new Promise((f) => {
+                document.addEventListener('dateChange', (data) => f(data));
+            });
+        });
+        await page.getByText(/^17$/).click();
+        expect(await dateChangeEvent).toBeTruthy;
+    });
+});
+//# sourceMappingURL=datetime-picker.ct.js.map

package/dist/collection/components/datetime-picker/test/datetime-picker.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datetime-picker.ct.js","sourceRoot":"","sources":["../../../../../src/components/datetime-picker/test/datetime-picker.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,MAAM,yBAAyB,GAAG,oBAAoB,CAAC;AAEvD,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IACxC,MAAM,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACzD,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAC3D,MAAM,MAAM,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AACnD,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,QAAQ,CAAC,8BAA8B,EAAE,GAAG,EAAE;IACjD,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QAClC,MAAM,KAAK,CACT;;;;;;;;;OASC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC9C,MAAM,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,CAAC;QAEhD,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YACzC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;gBACvB,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YAC7D,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,MAAM,gBAAgB,GAAG,CACvB,MAAM,IAAI,CAAC,EAAE,CAAC,mCAAmC,CAAC,CACnD,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAEd,KAAK,MAAM,MAAM,IAAI,gBAAgB,EAAE,CAAC;YACtC,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;QACvB,CAAC;QAED,MAAM,CAAC,MAAM,eAAe,CAAC,CAAC,UAAU,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACrC,MAAM,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,CAAC;QAEhD,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;YACzC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;gBACvB,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YAC7D,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;QAErC,MAAM,CAAC,MAAM,eAAe,CAAC,CAAC,UAAU,CAAC;IAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { test } from '@utils/test';\n\nconst DATE_TIME_PICKER_SELECTOR = 'ix-datetime-picker';\n\ntest('renders', async ({ mount, page }) => {\n  await mount(`<ix-datetime-picker></ix-datetime-picker>`);\n  const datePicker = page.locator(DATE_TIME_PICKER_SELECTOR);\n  await expect(datePicker).toHaveClass(/hydrated/);\n});\n\ntest.describe('datetime picker tests single', () => {\n  test.beforeEach(async ({ mount }) => {\n    await mount(\n      `\n      <ix-datetime-picker\n        range=\"false\"\n        from=\"1990/03/29\"\n        date-format=\"yyyy/LL/dd\"\n        time=\"09:10:12\"\n        time-format=\"HH:mm:ss\"\n        week-start-index=\"1\"\n      ></ix-datetime-picker>\n      `\n    );\n  });\n\n  test('increment time units', async ({ page }) => {\n    await page.waitForSelector('ix-date-time-card');\n\n    const timeChangeEvent = page.evaluate(() => {\n      return new Promise((f) => {\n        document.addEventListener('timeChange', (data) => f(data));\n      });\n    });\n\n    const incrementButtons = (\n      await page.$$('ix-icon-button.arrows:first-child')\n    ).slice(0, 3);\n\n    for (const button of incrementButtons) {\n      await button.click();\n    }\n\n    expect(await timeChangeEvent).toBeTruthy;\n  });\n\n  test('change date', async ({ page }) => {\n    await page.waitForSelector('ix-date-time-card');\n\n    const dateChangeEvent = page.evaluate(() => {\n      return new Promise((f) => {\n        document.addEventListener('dateChange', (data) => f(data));\n      });\n    });\n\n    await page.getByText(/^17$/).click();\n\n    expect(await dateChangeEvent).toBeTruthy;\n  });\n});\n"]}

package/dist/collection/components/divider/divider.css

@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  border-bottom: 0.0625rem solid var(--theme-color-x-weak-bdr);
+  margin: 0.25rem 0px;
+}

package/dist/collection/components/divider/divider.js

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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 { h, Host } from "@stencil/core";
+/**
+ * @since 1.4.0
+ */
+export class Divider {
+    render() {
+        return h(Host, { key: 'c4ded9a12469394b7f35bebee62799640ccb905f' });
+    }
+    static get is() { return "ix-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["divider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["divider.css"]
+        };
+    }
+}
+//# sourceMappingURL=divider.js.map

package/dist/collection/components/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../../src/components/divider/divider.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,OAAO;IAClB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAQ,CAAC;IACvB,CAAC;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-divider',\n  styleUrl: 'divider.scss',\n  shadow: true,\n})\nexport class Divider {\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}