@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/datetime-input/datetime-input.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -35,8 +35,6 @@
 */
 :host {
   display: block;
-  background-color: var(--theme-menu--background);
-  border-radius: 4px;
   position: relative;
   width: -moz-min-content;
   width: min-content;
@@ -88,10 +86,6 @@
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
-:host ix-layout-grid {
-  border-radius: 0.25rem;
-  box-shadow: var(--theme-shadow-4);
-}
 :host ix-time-picker {
   width: 100%;
 }
@@ -108,11 +102,8 @@
   justify-content: center;
   flex-direction: column;
 }
-:host .row-separator,
 :host .col-separator {
   border-bottom: 0.0625rem solid var(--theme-datepicker-separator--background);
-}
-:host .col-separator {
   border-right: none;
 }
 @media (min-width: 576px) {
@@ -145,7 +136,8 @@
   border: none;
 }
 :host .btn-select-date-container {
-  padding: 1rem;
+  display: flex;
+  justify-content: flex-end;
 }
 @media (max-width: 576px) {
   :host .btn-select-date-container .btn-select-date {

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

@@ -6,73 +6,228 @@
  * 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";
+import { h, Host, } from "@stencil/core";
+import { DateTime } from "luxon";
+import { TRAP_FOCUS_INCLUDE_ATTRIBUTE } from "../utils/focus/focus-trap";
+import { getLuxonDateOnlyFormatMask } from "../utils/luxon-datetime-format-masks";
 export class DatetimePicker {
-    constructor() {
-        /**
-         * If true, disables date range selection (from/to).
-         */
-        this.singleSelection = false;
-        /**
-         * Date format string.
-         * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-         */
-        this.dateFormat = 'yyyy/LL/dd';
-        /**
-         * Time format string.
-         * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-         */
-        this.timeFormat = 'HH:mm:ss';
-        /**
-         * Show AM/PM time reference control.
-         */
-        this.showTimeReference = false;
-        /**
-         * Text of the date select button.
-         */
-        this.i18nDone = 'Done';
-        /**
-         * Top label of the time picker.
-         *
-         * @since 3.0.0
-         */
-        this.i18nTime = 'Time';
-        /**
-         * ARIA label for the previous month icon button.
-         * Will be set as aria-label on the nested HTML button element.
-         */
-        this.ariaLabelPreviousMonthButton = 'Previous month';
-        /**
-         * ARIA label for the next month icon button.
-         * Will be set as aria-label on the nested HTML button element.
-         */
-        this.ariaLabelNextMonthButton = 'Next month';
-        /**
-         * 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.
-         */
-        this.weekStartIndex = 0;
-        /**
-         * Shows week numbers displayed on the left side of the date picker.
-         *
-         * @since 3.0.0
-         */
-        this.showWeekNumbers = false;
+    hostElement;
+    /**
+     * If true, disables date range selection (from/to).
+     */
+    singleSelection = false;
+    /**
+     * The earliest date that can be selected.
+     * If not set there will be no restriction.
+     */
+    minDate;
+    /**
+     * The latest date that can be selected.
+     * If not set there will be no restriction.
+     */
+    maxDate;
+    /**
+     * Date format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    dateFormat = 'yyyy/LL/dd';
+    /**
+     * Time format string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    timeFormat = 'HH:mm:ss';
+    /**
+     * Earliest selectable time (`timeFormat` tokens). Invalid non-empty values are ignored.
+     *
+     * @since 5.0.0
+     */
+    minTime;
+    /**
+     * Latest selectable time (`timeFormat` tokens). Invalid non-empty values are ignored.
+     *
+     * @since 5.0.0
+     */
+    maxTime;
+    /**
+     * The selected starting date. If the picker is not in range mode, this is the selected date.
+     * Format has to match the `dateFormat` property.
+     */
+    from;
+    /**
+     * The selected end date. If the picker is not in range mode, this property has no impact.
+     * Format has to match the `dateFormat` property.
+     */
+    to;
+    /**
+     * Selected time value for the embedded time picker.
+     * Format has to match the `timeFormat` property.
+     */
+    time;
+    /**
+     * Show AM/PM time reference control.
+     */
+    showTimeReference = false;
+    /**
+     * Time reference (AM or PM).
+     */
+    timeReference;
+    /**
+     * Text of the date select button.
+     */
+    i18nDone = 'Done';
+    /**
+     * Top label of the time picker.
+     *
+     * @since 3.0.0
+     */
+    i18nTime = 'Time';
+    /**
+     * ARIA label for the previous month icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     */
+    ariaLabelPreviousMonthButton = 'Previous month';
+    /**
+     * ARIA label for the next month icon button.
+     * Will be set as aria-label on the nested HTML button element.
+     */
+    ariaLabelNextMonthButton = 'Next month';
+    /**
+     * 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.
+     */
+    weekStartIndex = 0;
+    /**
+     * Locale identifier (e.g. 'en' or 'de').
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    locale;
+    /**
+     * Shows week numbers displayed on the left side of the date picker.
+     *
+     * @since 3.0.0
+     */
+    showWeekNumbers = false;
+    /** @internal */
+    embedded = false;
+    /**
+     * Time change event. Emitted when the time changes in the embedded time picker.
+     */
+    timeChange;
+    /**
+     * Date change event. Emitted when the date changes in the embedded date picker.
+     */
+    dateChange;
+    /**
+     * Datetime selection event. Emitted when the user confirms the selection.
+     */
+    dateSelect;
+    datePickerElement;
+    timePickerElement;
+    selectedFromDate;
+    hasTimeConstraintsConfigured() {
+        return !!(this.minTime?.trim() || this.maxTime?.trim());
+    }
+    warnIfRangeModeIgnoresTimeConstraints() {
+        if (this.singleSelection || !this.hasTimeConstraintsConfigured()) {
+            return;
+        }
+        console.warn('[ix-datetime-picker] `minTime`/`maxTime` are ignored when range selection is enabled (`singleSelection=false`).');
+    }
+    watchFromPropHandler(value) {
+        this.selectedFromDate = value;
+    }
+    watchSingleSelectionPropHandler() {
+        this.warnIfRangeModeIgnoresTimeConstraints();
+    }
+    watchMinTimePropHandler() {
+        this.warnIfRangeModeIgnoresTimeConstraints();
+    }
+    watchMaxTimePropHandler() {
+        this.warnIfRangeModeIgnoresTimeConstraints();
+    }
+    componentWillLoad() {
+        this.selectedFromDate = this.from;
+        this.warnIfRangeModeIgnoresTimeConstraints();
+    }
+    get dateOnlyFormat() {
+        return getLuxonDateOnlyFormatMask(this.dateFormat);
+    }
+    parseDateValue(value) {
+        if (!value) {
+            return null;
+        }
+        let parsed = DateTime.fromFormat(value, this.dateFormat, {
+            locale: this.locale,
+        });
+        if (!parsed.isValid) {
+            parsed = DateTime.fromFormat(value, this.dateOnlyFormat, {
+                locale: this.locale,
+            });
+        }
+        if (!parsed.isValid) {
+            return null;
+        }
+        return parsed;
+    }
+    parseDateConstraint(value, boundary) {
+        const parsed = this.parseDateValue(value);
+        if (!parsed) {
+            return null;
+        }
+        return boundary === 'start' ? parsed.startOf('day') : parsed.endOf('day');
+    }
+    getSelectedFromDateTime() {
+        const parsed = this.parseDateValue(this.selectedFromDate);
+        if (!parsed) {
+            return null;
+        }
+        return parsed.startOf('day');
+    }
+    getEffectiveTimeConstraints() {
+        if (!this.singleSelection) {
+            return { minTime: undefined, maxTime: undefined };
+        }
+        const hasDateBounds = !!(this.minDate || this.maxDate);
+        if (!hasDateBounds) {
+            return {
+                minTime: this.minTime,
+                maxTime: this.maxTime,
+            };
+        }
+        const selectedFromDate = this.getSelectedFromDateTime();
+        if (!selectedFromDate?.isValid) {
+            return { minTime: undefined, maxTime: undefined };
+        }
+        const minDate = this.parseDateConstraint(this.minDate, 'start');
+        const maxDate = this.parseDateConstraint(this.maxDate, 'end');
+        const applyMinTime = !!minDate?.isValid &&
+            !!selectedFromDate?.isValid &&
+            selectedFromDate.hasSame(minDate, 'day');
+        const applyMaxTime = !!maxDate?.isValid && selectedFromDate.hasSame(maxDate, 'day');
+        return {
+            minTime: applyMinTime ? this.minTime : undefined,
+            maxTime: applyMaxTime ? this.maxTime : undefined,
+        };
     }
     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());
+        const date = await this.datePickerElement?.getCurrentDate();
+        const time = await this.timePickerElement?.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 : '',
+            from: date?.from ?? '',
+            to: date?.to ?? '',
+            time: time ?? '',
         });
     }
     async onDateChange(event) {
         event.preventDefault();
         event.stopPropagation();
         const { detail: date } = event;
+        if (typeof date === 'string') {
+            this.selectedFromDate = date;
+        }
+        else {
+            this.selectedFromDate = date?.from;
+        }
         this.dateChange.emit(date);
     }
     async onTimeChange(event) {
@@ -81,8 +236,19 @@ export class DatetimePicker {
         const { detail: time } = event;
         this.timeChange.emit(time);
     }
+    /** @internal */
+    async getDatepickerElement() {
+        return this.datePickerElement;
+    }
+    /** @internal */
+    async getTimepickerElement() {
+        return this.timePickerElement;
+    }
     render() {
-        return (h(Host, { key: 'b9d86c0b546ff3dd211233be90f45cf340904392' }, h("ix-layout-grid", { key: '70904c2a642e1365186ce7e7d4b9bf5adb79eefb', class: "no-padding" }, h("ix-row", { key: '434f29448c882e9699b36f5f6556a685d9c62b94', class: "row-separator" }, h("ix-col", { key: '869ff4df2ee82fd9d5e852b466b7a82f56dd5cf4', class: "col-separator" }, h("ix-date-picker", { key: '2f5de1e8d151e03d09c57c365a7cfa25e3c8beb1', ref: (ref) => (this.datePickerElement = ref), corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton })), h("ix-col", { key: '118da04fff83d0c5980dddf257e9065b73d48e6e' }, h("ix-time-picker", { key: '93683737b572f841bc3b5e0158013cff8f0c0015', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: 'd2b71237c70c8305ba5ccf7026d03e7b32445bae' }, h("ix-col", { key: '5da543ff42da3110b1cdfdd1690c0ccd5612e3de' }, h("div", { key: '1fc6d77082b8dd7469ab417a9837007b46efcdf0', class: "btn-select-date-container" }, h("ix-button", { key: '35678b604a1f84eeeea63d0566c3f51895956a1f', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))))));
+        const { minTime, maxTime } = this.getEffectiveTimeConstraints();
+        return (h(Host, { key: '0eb6ec0e18a9794f023b8dd6dee89640b9a0a948' }, h("ix-date-time-card", { key: 'e45f91528b04c803324da4af217ebf7eda31dba0', hideHeader: true, hasFooter: true, embedded: this.embedded, corners: "rounded", noPadding: true }, h("ix-layout-grid", { key: '4cade86af3e6a77563e528d92d52c1d86079d0f9', class: "no-padding" }, h("ix-row", { key: '657adbd57b8334398f171b5aebf6e63cbc03b2af', class: "row-separator" }, h("ix-col", { key: '02d019f2a71c6c1c8cfa716a486acd7ed844c622', class: "col-separator" }, h("ix-date-picker", { key: 'efb6483f6528cec9660913bca6b51d907c59dd3f', ref: (ref) => (this.datePickerElement = ref), corners: "left", singleSelection: this.singleSelection, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, embedded: true, locale: this.locale, showWeekNumbers: this.showWeekNumbers, ariaLabelPreviousMonthButton: this.ariaLabelPreviousMonthButton, ariaLabelNextMonthButton: this.ariaLabelNextMonthButton, tabIndex: this.embedded ? -1 : 0,
+            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })), h("ix-col", { key: 'e0884bbeabca263427ed98d26febb94b9d90cf91' }, h("ix-time-picker", { key: '9b9088f1ed6568028ab41a7f9732e537a1438359', class: "min-width", ref: (ref) => (this.timePickerElement = ref), embedded: true, dateTimePickerAppearance: true, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time, minTime: minTime, maxTime: maxTime, tabIndex: this.embedded ? -1 : 0,
+            [TRAP_FOCUS_INCLUDE_ATTRIBUTE]: this.embedded })))), h("div", { key: 'ad8dacb09da1525749481373191078dc1b85ba60', slot: "footer", class: "btn-select-date-container" }, h("ix-button", { key: '1124f92c6f59f14c74385f587f665537bd6cb9e2', class: "btn-select-date", onClick: () => this.onDone() }, this.i18nDone)))));
     }
     static get is() { return "ix-datetime-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -196,6 +362,50 @@ export class DatetimePicker {
                 "attribute": "time-format",
                 "defaultValue": "'HH:mm:ss'"
             },
+            "minTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Earliest selectable time (`timeFormat` tokens). Invalid non-empty values are ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-time"
+            },
+            "maxTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Latest selectable time (`timeFormat` tokens). Invalid non-empty values are ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-time"
+            },
             "from": {
                 "type": "string",
                 "mutable": false,
@@ -436,9 +646,37 @@ export class DatetimePicker {
                 "reflect": false,
                 "attribute": "show-week-numbers",
                 "defaultValue": "false"
+            },
+            "embedded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "embedded",
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "selectedFromDate": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "timeChange",
@@ -501,4 +739,72 @@ export class DatetimePicker {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "getDatepickerElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLIxDatePickerElement | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLIxDatePickerElement": {
+                            "location": "global",
+                            "id": "global::HTMLIxDatePickerElement"
+                        }
+                    },
+                    "return": "Promise<HTMLIxDatePickerElement | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "getTimepickerElement": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLIxTimePickerElement | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLIxTimePickerElement": {
+                            "location": "global",
+                            "id": "global::HTMLIxTimePickerElement"
+                        }
+                    },
+                    "return": "Promise<HTMLIxTimePickerElement | undefined>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "from",
+                "methodName": "watchFromPropHandler"
+            }, {
+                "propName": "singleSelection",
+                "methodName": "watchSingleSelectionPropHandler"
+            }, {
+                "propName": "minTime",
+                "methodName": "watchMinTimePropHandler"
+            }, {
+                "propName": "maxTime",
+                "methodName": "watchMaxTimePropHandler"
+            }];
+    }
 }

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

@@ -9,7 +9,7 @@
 import { h, Host } from "@stencil/core";
 export class Divider {
     render() {
-        return h(Host, { key: 'ca814e8d386105be46954dfba6ae6f9a0c8ba4a9' });
+        return h(Host, { key: 'eb2dfcf5c516b8b1469282e06edf116e63c7d66a' });
     }
     static get is() { return "ix-divider"; }
     static get encapsulation() { return "shadow"; }