@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

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

@@ -0,0 +1,581 @@
+/*
+ * 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() {
+        /**
+         * If true a date-range can be selected (from/to).
+         */
+        this.range = true;
+        /**
+         * Show hour input
+         */
+        this.showHour = true;
+        /**
+         * Show minutes input
+         */
+        this.showMinutes = true;
+        /**
+         * Show seconds input
+         */
+        this.showSeconds = true;
+        /**
+         * 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 = 'HH:mm:ss';
+        /**
+         * Show time reference input
+         * Time reference is default aligned with @see {this.timeFormat}
+         *
+         * @since 1.1.0
+         */
+        this.showTimeReference = false;
+        /**
+         * Text of date select button
+         *
+         * @since 2.1.0
+         */
+        this.i18nDone = 'Done';
+        /**
+         * Top label of time picker
+         *
+         * @since 3.0.0
+         */
+        this.i18nTime = 'Time';
+        /**
+         * The index of which day to start the week on, based on the Locale#weekdays array.
+         * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
+         *
+         * @since 2.1.0
+         */
+        this.weekStartIndex = 0;
+        /**
+         * Shows week numbers displayed on the left side of the date picker
+         *
+         * @since 3.0.0
+         */
+        this.showWeekNumbers = false;
+    }
+    async onDone() {
+        var _a, _b, _c, _d;
+        const date = await ((_a = this.datePickerElement) === null || _a === void 0 ? void 0 : _a.getCurrentDate());
+        const time = await ((_b = this.timePickerElement) === null || _b === void 0 ? void 0 : _b.getCurrentTime());
+        this.dateSelect.emit({
+            from: (_c = date === null || date === void 0 ? void 0 : date.from) !== null && _c !== void 0 ? _c : '',
+            to: (_d = date === null || date === void 0 ? void 0 : date.to) !== null && _d !== void 0 ? _d : '',
+            time: time !== null && time !== void 0 ? time : '',
+        });
+    }
+    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: 'dd665870ff9bffac05640617ded60ca70bfb4060' }, h("ix-layout-grid", { key: 'b67a7dfbfad4383ece3a69c6da13c2fd76a48d60', class: "no-padding" }, h("ix-row", { key: '7e5f0d44bdb53dd28ceb5d2389f389d582d2a7d4' }, h("ix-col", { key: 'aa9c25a9dc54da2d99f486c127980105287bfb0c' }, h("ix-date-picker", { key: '0627d2e1c77a29fec14cc79fea96945626881313', 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, showWeekNumbers: this.showWeekNumbers })), h("ix-col", { key: '86804434e7b28a88011f93a37f33ed01cc9699d7' }, h("ix-time-picker", { key: 'b68dd97d4d0fbbdc1e52f72c27eb975f52a60402', class: "min-width", ref: (ref) => (this.timePickerElement = ref), standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, textTime: this.i18nTime, time: this.time }), h("div", { key: 'd2d929c1c7bcca8326d2b7d1ba94ffb1be7f5b39', class: "btn-select-date-container" }, h("ix-button", { key: '5052d32b58dfaafb5e5f0038df5ea8aa3c1752e3', class: "btn-select-date", onClick: () => this.onDone() }, 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)."
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-seconds",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-date",
+                "reflect": false
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "time-format",
+                "reflect": false,
+                "defaultValue": "'HH:mm:ss'"
+            },
+            "from": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "from",
+                "reflect": false
+            },
+            "to": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "to",
+                "reflect": false
+            },
+            "time": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.1.0"
+                        }],
+                    "text": "Select time with format string"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "time",
+                "reflect": false
+            },
+            "showTimeReference": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-time-reference",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "timeReference": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'AM' | 'PM'",
+                    "resolved": "\"AM\" | \"PM\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set time reference"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "time-reference",
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "i18n-done",
+                "reflect": false,
+                "defaultValue": "'Done'"
+            },
+            "i18nTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "3.0.0"
+                        }],
+                    "text": "Top label of time picker"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "i-1-8n-time",
+                "reflect": false,
+                "defaultValue": "'Time'"
+            },
+            "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "week-start-index",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "locale",
+                "reflect": false
+            },
+            "showWeekNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "3.0.0"
+                        }],
+                    "text": "Shows week numbers displayed on the left side of the date picker"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-week-numbers",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "timeChange",
+                "name": "timeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.1.0"
+                        }],
+                    "text": "\nTime 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": "/home/runner/work/ix/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": "/home/runner/work/ix/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';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\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  implements Omit<IxDatePickerComponent, 'corners' | 'format'>\n{\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;\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;\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: boolean = false;\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference?: 'AM' | 'PM';\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   * Top label of time picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() i18nTime: string = 'Time';\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;\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\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\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>\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                showWeekNumbers={this.showWeekNumbers}\n              ></ix-date-picker>\n            </ix-col>\n\n            <ix-col>\n              <ix-time-picker\n                class=\"min-width\"\n                ref={(ref) => (this.timePickerElement = ref)}\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                textTime={this.i18nTime}\n                time={this.time}\n              ></ix-time-picker>\n              <div class=\"btn-select-date-container\">\n                <ix-button\n                  class=\"btn-select-date\"\n                  onClick={() => this.onDone()}\n                >\n                  {this.i18nDone}\n                </ix-button>\n              </div>\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 { regressionTest } from "../../../tests/utils/test/index";
+const DATE_TIME_PICKER_SELECTOR = 'ix-datetime-picker';
+regressionTest('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/);
+});
+regressionTest.describe('datetime picker tests single', () => {
+    regressionTest.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>
+      `);
+    });
+    regressionTest('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;
+    });
+    regressionTest('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,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,yBAAyB,GAAG,oBAAoB,CAAC;AAEvD,cAAc,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClD,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,cAAc,CAAC,QAAQ,CAAC,8BAA8B,EAAE,GAAG,EAAE;IAC3D,cAAc,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QAC5C,MAAM,KAAK,CACT;;;;;;;;;OASC,CACF,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,sBAAsB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QACxD,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,cAAc,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAC/C,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 { regressionTest } from '@utils/test';\n\nconst DATE_TIME_PICKER_SELECTOR = 'ix-datetime-picker';\n\nregressionTest('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\nregressionTest.describe('datetime picker tests single', () => {\n  regressionTest.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  regressionTest('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  regressionTest('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"]}