@siemens/ix 4.4.0 → 5.0.0

package/dist/collection/components/tile/tile.js

@@ -8,14 +8,13 @@
  */
 import { h, Host } from "@stencil/core";
 export class Tile {
-    constructor() {
-        /**
-         * Size of the tile - one of 'small', 'medium' or 'large'
-         */
-        this.size = 'medium';
-        this.hasHeaderSlot = false;
-        this.hasFooterSlot = false;
-    }
+    hostElement;
+    /**
+     * Size of the tile - one of 'small', 'medium' or 'large'
+     */
+    size = 'medium';
+    hasHeaderSlot = false;
+    hasFooterSlot = false;
     handleHeaderSlotChange() {
         this.hasHeaderSlot = !!this.hostElement.querySelector('[slot="header"]');
     }
@@ -23,17 +22,17 @@ export class Tile {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: 'd94cab5c0cf9b368c7d54ef7b976521be79bdc84', class: {
+        return (h(Host, { key: 'c57941571e070a94be7dbbb781950c22a8be3803', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: 'c7f093c38d9afb443402ebd957a4c1c498ca2b51', class: {
+            } }, h("div", { key: '3bfa12c4510191a93ae9bdbb811099a4787319ce', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: '3b7014fb2a536caaafa7eef82f2297af30a96bcd', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: 'c6d46d5a94cd2b34cffe1046ebe057fbfe3bfb12', class: "tile-subheader" }, h("slot", { key: '85553397aebd5172e8bfe61008f23d7f5da5306d', name: "subheader" })), h("div", { key: 'c0425239fa7a63b72df2d1e9e51e578c9f4c42db', class: "tile-content" }, h("slot", { key: '8ef2076ac291c0c2aeefd049723b712daca52857' })), h("div", { key: 'a74190d35357948bcf4f27a958a4b014fb9b6a6a', class: {
+            } }, h("slot", { key: 'd7b682647b2dbbd4a430fa84cf28942497816057', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '1965567486b35ce2ff87e0ffeeaa9b33837f5345', class: "tile-subheader" }, h("slot", { key: 'c03ba4fdec33cf0821d1c90a05b344f26a69ff89', name: "subheader" })), h("div", { key: '8e834709f24eba9f1161be7b736f38fabb9b88d9', class: "tile-content" }, h("slot", { key: '69c7deddb575649a4943f3592aceacdf1cd7fcf7' })), h("div", { key: '853de711d9edc48b16290f294d7f88af626ba815', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: '3820bb93457bcab474fb3422dafdbc2d8a20e49d', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: 'f87ebc8a0de54427400fea4cd37ed2a75eae119f', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     static get is() { return "ix-tile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/time-input/time-input.css

@@ -475,7 +475,7 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
   left: var(--theme-input--border-thickness);
 }
 :host .end-container {
-  right: calc(var(--theme-input--border-thickness) + 0.125rem);
+  right: 0.25rem;
 }
 :host .start-container ::slotted(*) {
   margin-left: 0.5rem;
@@ -488,14 +488,14 @@ input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.read
   margin-left: 0;
 }
 :host .end-container ::slotted(*) {
-  margin-right: 0.5rem;
+  margin-right: calc(0.5rem - 0.25rem);
 }
 :host .end-container ::slotted(ix-icon.size-24),
 :host .end-container ::slotted(ix-icon-button.btn-icon-16) {
-  margin-right: 0.25rem;
+  margin-right: calc(0.25rem - 0.25rem);
 }
 :host .end-container ::slotted(ix-icon-button.btn-icon-32) {
-  margin-right: 0;
+  margin-right: calc(0rem - 0.25rem);
 }
 :host .bottom-text {
   margin-top: 0.25rem;

package/dist/collection/components/time-input/time-input.js

@@ -17,129 +17,228 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { iconClock } from "@siemens/ix-icons/icons";
-import { Host, h, } from "@stencil/core";
+import { Host, Mixin, h, } from "@stencil/core";
 import { DateTime } from "luxon";
 import { SlotEnd, SlotStart } from "../input/input.fc";
 import { addDisposableChangesAndVisibilityObservers, adjustPaddingForStartAndEnd, createPickerValidityStateTracker, emitPickerValidityState, handleSubmitOnEnterKeydown, onEnterKeyChangeEmit, onInputBlurWithChange, } from "../input/input.util";
+import { getTimePickerConstraintBounds, isWithinTimePickerConstraints, } from "../time-picker/time-picker-constraints";
 import { HookValidationLifecycle, createClassMutationObserver, getValidationText, } from "../utils/input";
 import { closeDropdown as closeDropdownUtil, createValidityState, handleIconClick, openDropdown as openDropdownUtil, } from "../utils/input/picker-input.util";
+import { DefaultMixins } from "../utils/internal/component";
+import { InputPickerMixin, } from "../utils/internal/mixins/input/input-picker.mixin";
 import { makeRef } from "../utils/make-ref";
+import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
 /**
  * @since 3.2.0
  * @form-ready
  * @slot start - Element will be displayed at the start of the input
  * @slot end - Element will be displayed at the end of the input
  */
-export class TimeInput {
+export class TimeInput extends Mixin(...DefaultMixins, InputPickerMixin) {
     constructor() {
-        /**
-         * Value of the input element.
-         */
-        this.value = '';
-        /**
-         * Format of time string.
-         * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
-         */
-        this.format = 'TT';
-        /**
-         * Readonly attribute.
-         */
-        this.readonly = false;
-        /**
-         * Disabled attribute.
-         */
-        this.disabled = false;
-        /**
-         * I18n string for the error message when the time is not parsable.
-         */
-        this.i18nErrorTimeUnparsable = 'Time is not valid';
-        /**
-         * Interval for hour selection.
-         */
-        this.hourInterval = 1;
-        /**
-         * Interval for minute selection.
-         */
-        this.minuteInterval = 1;
-        /**
-         * Interval for second selection.
-         */
-        this.secondInterval = 1;
-        /**
-         * Interval for millisecond selection.
-         */
-        this.millisecondInterval = 100;
-        /**
-         * Text of the time picker confirm button.
-         */
-        this.i18nSelectTime = 'Confirm';
-        /**
-         * Text for the time picker top label.
-         */
-        this.i18nTime = 'Time';
-        /**
-         * Text for the time picker hour column header.
-         */
-        this.i18nHourColumnHeader = 'hr';
-        /**
-         * Text for the time picker minute column header.
-         */
-        // eslint-disable-next-line @stencil-community/decorators-style
-        this.i18nMinuteColumnHeader = 'min';
-        /**
-         * Text for the time picker second column header.
-         */
-        // eslint-disable-next-line @stencil-community/decorators-style
-        this.i18nSecondColumnHeader = 'sec';
-        /**
-         * Text for the time picker millisecond column header.
-         */
-        // eslint-disable-next-line @stencil-community/decorators-style
-        this.i18nMillisecondColumnHeader = 'ms';
-        /**
-         * If false, pressing Enter will submit the form (if inside a form).
-         * Set to true to suppress submit on Enter.
-         */
-        this.suppressSubmitOnEnter = false;
-        /**
-         * Hides the header of the picker.
-         *
-         * @since 4.0.0
-         */
-        this.hideHeader = false;
-        /**
-         * Text alignment within the time input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
-         */
-        this.textAlignment = 'start';
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.show = false;
-        this.time = null;
-        this.isInputInvalid = false;
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
-        this.focus = false;
-        this.slotStartRef = makeRef();
-        this.slotEndRef = makeRef();
-        this.timePickerRef = makeRef();
-        this.inputElementRef = makeRef();
-        this.dropdownElementRef = makeRef();
-        /** @internal */
-        this.touched = false;
-        /** @internal */
-        this.validityTracker = createPickerValidityStateTracker();
+        super();
     }
+    hostElement;
+    formInternals;
+    /**
+     * Name of the input element.
+     */
+    name;
+    /**
+     * Placeholder of the input element.
+     */
+    placeholder;
+    /**
+     * Value of the input element.
+     */
+    value = '';
     watchValuePropHandler(newValue) {
         this.onInput(newValue);
     }
+    /**
+     * Format of time string.
+     * See {@link https://moment.github.io/luxon/#/formatting?id=table-of-tokens} for all available tokens.
+     */
+    format = 'TT';
+    /**
+     * Earliest selectable time (`format` tokens). Invalid non-empty values are ignored.
+     *
+     * @since 5.0.0
+     */
+    minTime;
+    /**
+     * Latest selectable time (`format` tokens). Invalid non-empty values are ignored.
+     *
+     * @since 5.0.0
+     */
+    maxTime;
+    watchMinTimePropHandler() {
+        this.revalidateCurrentValue();
+    }
+    watchMaxTimePropHandler() {
+        this.revalidateCurrentValue();
+    }
+    /**
+     * Required attribute.
+     */
+    required;
+    /**
+     * Helper text below the input field.
+     */
+    helperText;
+    /**
+     * Label of the input field.
+     */
+    label;
+    /**
+     * Error text below the input field.
+     */
+    invalidText;
+    /**
+     * Readonly attribute.
+     */
+    readonly = false;
+    /**
+     * Disabled attribute.
+     */
+    disabled = false;
+    /**
+     * Info text below the input field.
+     */
+    infoText;
+    /**
+     * Warning text below the input field.
+     */
+    warningText;
+    /**
+     * Valid text below the input field.
+     */
+    validText;
+    /**
+     * Show text as tooltip.
+     */
+    showTextAsTooltip;
+    /**
+     * I18n string for the error message when the time is not parsable.
+     */
+    i18nErrorTimeUnparsable = 'Time is not valid';
+    /**
+     * Interval for hour selection.
+     */
+    hourInterval = 1;
+    /**
+     * Interval for minute selection.
+     */
+    minuteInterval = 1;
+    /**
+     * Interval for second selection.
+     */
+    secondInterval = 1;
+    /**
+     * Interval for millisecond selection.
+     */
+    millisecondInterval = 100;
+    /**
+     * Text of the time picker confirm button.
+     */
+    i18nSelectTime = 'Confirm';
+    /**
+     * Text for the time picker top label.
+     */
+    i18nTime = 'Time';
+    /**
+     * Text for the time picker hour column header.
+     */
+    i18nHourColumnHeader = 'hr';
+    /**
+     * Text for the time picker minute column header.
+     */
+    // eslint-disable-next-line @stencil-community/decorators-style
+    i18nMinuteColumnHeader = 'min';
+    /**
+     * Text for the time picker second column header.
+     */
+    // eslint-disable-next-line @stencil-community/decorators-style
+    i18nSecondColumnHeader = 'sec';
+    /**
+     * Text for the time picker millisecond column header.
+     */
+    // eslint-disable-next-line @stencil-community/decorators-style
+    i18nMillisecondColumnHeader = 'ms';
+    /**
+     * If false, pressing Enter will submit the form (if inside a form).
+     * Set to true to suppress submit on Enter.
+     */
+    suppressSubmitOnEnter = false;
+    /**
+     * Hides the header of the picker.
+     *
+     * @since 4.0.0
+     */
+    hideHeader = false;
+    /**
+     * Text alignment within the time input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
+     */
+    textAlignment = 'start';
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * ARIA label for the time picker toggle button
+     * Will be set as aria-label for the nested HTML button element
+     *
+     * @since 5.0.0
+     */
+    ariaLabelTimeToggleButton = 'Toggle time picker';
+    /**
+     * Value change event. Emitted when the input value changes.
+     */
+    valueChange;
+    /**
+     * Validation state change event. Emitted when the validation state changes.
+     */
+    validityStateChange;
+    /** @internal */
+    ixFocus;
+    /** @internal */
+    ixBlur;
+    /**
+     * Change event. Emitted when the time input loses focus and the value has changed.
+     *
+     * @since 4.4.0
+     */
+    ixChange;
+    show = false;
+    time = null;
+    isInputInvalid = false;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
+    focus = false;
+    slotStartRef = makeRef();
+    slotEndRef = makeRef();
+    timePickerRef = makeRef();
+    inputElementRef = makeRef();
+    dropdownElementRef = makeRef();
+    classObserver;
+    initialValue;
+    invalidReason;
+    touched = false;
+    validityTracker = createPickerValidityStateTracker();
+    disposableChangesAndVisibilityObservers;
     handleInputKeyDown(event) {
+        if (event.key === 'ArrowDown') {
+            this.show = true;
+            requestAnimationFrameNoNgZone(() => {
+                const focusableTimeButton = this.timePickerRef.current?.shadowRoot?.querySelector('button[tabindex="0"]');
+                focusableTimeButton?.focus();
+            });
+        }
         onEnterKeyChangeEmit(event, this, this.value);
         handleSubmitOnEnterKeydown(event, this.suppressSubmitOnEnter, this.formInternals.form);
     }
@@ -160,12 +259,6 @@ export class TimeInput {
             }
         }
         this.onInput(this.value);
-        if (this.isInputInvalid) {
-            this.time = null;
-        }
-        else {
-            this.watchValue();
-        }
         this.checkClassList();
         this.updateFormInternalValue(this.value);
     }
@@ -173,12 +266,8 @@ export class TimeInput {
         adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputElementRef.current);
     }
     disconnectedCallback() {
-        var _a, _b;
-        (_a = this.classObserver) === null || _a === void 0 ? void 0 : _a.destroy();
-        (_b = this.disposableChangesAndVisibilityObservers) === null || _b === void 0 ? void 0 : _b.call(this);
-    }
-    watchValue() {
-        this.time = this.value;
+        this.classObserver?.destroy();
+        this.disposableChangesAndVisibilityObservers?.();
     }
     /** @internal */
     hasValidValue() {
@@ -188,8 +277,56 @@ export class TimeInput {
     getAssociatedFormElement() {
         return Promise.resolve(this.formInternals.form);
     }
+    isWithinConfiguredBounds(parsed) {
+        const baseDay = parsed.startOf('day');
+        const { min, max } = getTimePickerConstraintBounds(this.minTime, this.maxTime, this.format, baseDay);
+        return isWithinTimePickerConstraints(parsed, min, max);
+    }
+    syncPickerTimeFromValue() {
+        const trimmed = this.value?.trim() ?? '';
+        if (!trimmed) {
+            this.time = null;
+            return;
+        }
+        const parsed = DateTime.fromFormat(trimmed, this.format);
+        if (!parsed.isValid) {
+            this.time = null;
+            return;
+        }
+        this.time = trimmed;
+    }
+    validateNonEmptyValue(value) {
+        if (!this.format) {
+            return null;
+        }
+        const time = DateTime.fromFormat(value, this.format);
+        if (time.isValid && this.isWithinConfiguredBounds(time)) {
+            return {
+                isInputInvalid: false,
+                invalidReason: undefined,
+            };
+        }
+        return {
+            isInputInvalid: true,
+            invalidReason: time.isValid
+                ? 'customError'
+                : (time.invalidReason ?? undefined),
+        };
+    }
+    revalidateCurrentValue() {
+        if (!this.value) {
+            return;
+        }
+        const validity = this.validateNonEmptyValue(this.value);
+        if (!validity) {
+            return;
+        }
+        this.isInputInvalid = validity.isInputInvalid;
+        this.invalidReason = validity.invalidReason;
+        this.emitValidityStateChangeIfChanged();
+        this.syncPickerTimeFromValue();
+    }
     async onInput(value) {
-        var _a;
         this.value = value;
         if (!value) {
             this.isInputInvalid = false;
@@ -197,29 +334,26 @@ export class TimeInput {
             this.emitValidityStateChangeIfChanged();
             this.updateFormInternalValue(value);
             this.valueChange.emit(value);
+            this.syncPickerTimeFromValue();
             return;
         }
-        if (!this.format) {
+        const validity = this.validateNonEmptyValue(value);
+        if (!validity) {
+            this.syncPickerTimeFromValue();
             return;
         }
-        const time = DateTime.fromFormat(value, this.format);
-        if (time.isValid) {
-            this.isInputInvalid = false;
-            this.invalidReason = undefined;
-        }
-        else {
-            this.isInputInvalid = true;
-            this.invalidReason = (_a = time.invalidReason) !== null && _a !== void 0 ? _a : undefined;
-        }
+        this.isInputInvalid = validity.isInputInvalid;
+        this.invalidReason = validity.invalidReason;
         this.emitValidityStateChangeIfChanged();
         this.updateFormInternalValue(value);
         this.valueChange.emit(value);
+        this.syncPickerTimeFromValue();
     }
     onTimeIconClick(event) {
         handleIconClick(event, this.show, () => this.openDropdown(), this.inputElementRef);
     }
     async openDropdown() {
-        this.time = this.value;
+        this.syncPickerTimeFromValue();
         return openDropdownUtil(this.dropdownElementRef);
     }
     async closeDropdown() {
@@ -229,7 +363,7 @@ export class TimeInput {
         this.isInvalid = this.hostElement.classList.contains('ix-invalid');
     }
     renderInput() {
-        return (h("div", { class: "input-wrapper" }, h(SlotStart, { slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h("input", { autoComplete: "off", class: {
+        return (h("div", { class: "input-wrapper" }, h(SlotStart, { slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h("input", { "aria-haspopup": "true", autoComplete: "off", class: {
                 'is-invalid': this.isInputInvalid,
             }, style: {
                 textAlign: this.textAlignment,
@@ -243,13 +377,12 @@ export class TimeInput {
                 }
             }, onFocus: async () => {
                 this.initialValue = this.value;
-                this.openDropdown();
                 this.ixFocus.emit();
             }, onBlur: () => {
                 onInputBlurWithChange(this, this.inputElementRef.current, this.value);
                 this.touched = true;
                 this.emitValidityStateChangeIfChanged();
-            }, onKeyDown: (event) => this.handleInputKeyDown(event) }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { "data-testid": "open-time-picker", class: { 'time-icon-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", size: "16", icon: iconClock, onClick: (event) => this.onTimeIconClick(event), "aria-label": "Toggle time picker", "aria-expanded": this.show }))));
+            }, onKeyDown: (event) => this.handleInputKeyDown(event) }), h(SlotEnd, { slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { tabindex: -1, ref: (ref) => (ref.tabIndex = -1), "data-testid": "open-time-picker", class: { 'time-icon-hidden': this.disabled || this.readonly }, variant: "subtle-tertiary", size: "16", icon: iconClock, onClick: (event) => this.onTimeIconClick(event), "aria-label": this.ariaLabelTimeToggleButton, "aria-expanded": this.show }))));
     }
     hookValidationLifecycle({ isInfo, isInvalid, isInvalidByRequired, isValid, isWarning, }) {
         this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;
@@ -283,15 +416,22 @@ export class TimeInput {
     isTouched() {
         return Promise.resolve(this.touched);
     }
+    getPickerElement() {
+        return this.dropdownElementRef;
+    }
     render() {
-        var _a;
         const invalidText = getValidationText(this.isInputInvalid, this.invalidText, this.i18nErrorTimeUnparsable);
-        return (h(Host, { key: 'bdc4ea4daa680cb86e068e89a85c24e677194894', class: {
+        return (h(Host, { key: '293a527e1b0337b962eb6c24680df978c9b1356d', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("ix-field-wrapper", { key: '161d696e8e3b2e93d44bb2cd89227756803f72c0', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: '509749521f08d008496d5b39357198cd7c65cd67', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
+            }, onFocusout: () => {
+                this.closeDropdown();
+            } }, h("ix-field-wrapper", { key: '103566ac44e0dacb9f8e979c16c5ebb53cc144d9', label: this.label, helperText: this.helperText, isInvalid: this.isInvalid, invalidText: invalidText, infoText: this.infoText, isInfo: this.isInfo, isWarning: this.isWarning, warningText: this.warningText, isValid: this.isValid, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, required: this.required, controlRef: this.inputElementRef }, this.renderInput()), h("ix-dropdown", { key: '7cdaaa66afbf87e052b8b2548e002b901c1879e5', "data-testid": "time-dropdown", trigger: this.inputElementRef.waitForCurrent(), ref: this.dropdownElementRef, closeBehavior: "outside", enableTopLayer: this.enableTopLayer, suppressOverflowBehavior: true, show: this.show, onShowChanged: (event) => {
                 this.show = event.detail;
-            } }, h("ix-time-picker", { key: '00171df4b640293e1d8225f23aba117cff73dc47', ref: this.timePickerRef, format: this.format, time: (_a = this.time) !== null && _a !== void 0 ? _a : '', hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
+            }, focusTrapOptions: {
+                targetElement: this.timePickerRef,
+                trapFocusInShadowDom: true,
+            } }, h("ix-time-picker", { key: '6018c8f9c77ffb1f37f9ca3e4d8b789b28076323', ref: this.timePickerRef, format: this.format, time: this.time ?? '', minTime: this.minTime, maxTime: this.maxTime, hourInterval: this.hourInterval, minuteInterval: this.minuteInterval, secondInterval: this.secondInterval, millisecondInterval: this.millisecondInterval, embedded: true, hideHeader: this.hideHeader, i18nConfirmTime: this.i18nSelectTime, i18nHeader: this.i18nTime, i18nHourColumnHeader: this.i18nHourColumnHeader, i18nSecondColumnHeader: this.i18nSecondColumnHeader, i18nMinuteColumnHeader: this.i18nMinuteColumnHeader, i18nMillisecondColumnHeader: this.i18nMillisecondColumnHeader, onTimeSelect: (event) => {
                 this.onInput(event.detail);
                 if (this.initialValue !== event.detail) {
                     this.ixChange.emit(event.detail);
@@ -302,6 +442,7 @@ export class TimeInput {
     }
     static get is() { return "ix-time-input"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
@@ -393,6 +534,50 @@ export class TimeInput {
                 "attribute": "format",
                 "defaultValue": "'TT'"
             },
+            "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 (`format` 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 (`format` tokens). Invalid non-empty values are ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-time"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,
@@ -893,6 +1078,29 @@ export class TimeInput {
                 "reflect": false,
                 "attribute": "enable-top-layer",
                 "defaultValue": "false"
+            },
+            "ariaLabelTimeToggleButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "ARIA label for the time picker toggle button\nWill be set as aria-label for the nested HTML button element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-time-toggle-button",
+                "defaultValue": "'Toggle time picker'"
             }
         };
     }
@@ -1138,8 +1346,11 @@ export class TimeInput {
                 "propName": "value",
                 "methodName": "watchValuePropHandler"
             }, {
-                "propName": "value",
-                "methodName": "watchValue"
+                "propName": "minTime",
+                "methodName": "watchMinTimePropHandler"
+            }, {
+                "propName": "maxTime",
+                "methodName": "watchMaxTimePropHandler"
             }];
     }
     static get attachInternalsMemberName() { return "formInternals"; }