@ptsecurity/mosaic 13.4.0 → 13.5.0

package/fesm2020/ptsecurity-mosaic-timepicker.mjs

@@ -2,711 +2,734 @@ import { A11yModule } from '@angular/cdk/a11y';
 import { PlatformModule } from '@angular/cdk/platform';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, Directive, Optional, Input, Output, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, Directive, Optional, Inject, Input, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormsModule } from '@angular/forms';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i1 from '@ptsecurity/cdk/datetime';
+import * as i2 from '@ptsecurity/cdk/datetime';
 import { isLetterKey, hasModifierKey, isVerticalMovement, isHorizontalMovement, DELETE, BACKSPACE, TAB, SPACE, HOME, PAGE_UP, END, PAGE_DOWN, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW } from '@ptsecurity/cdk/keycodes';
-import { validationTooltipShowDelay, validationTooltipHideDelay } from '@ptsecurity/mosaic/core';
+import { validationTooltipShowDelay, validationTooltipHideDelay, setMosaicValidationForCustomFormControl, MC_VALIDATION } from '@ptsecurity/mosaic/core';
 import { McFormFieldControl } from '@ptsecurity/mosaic/form-field';
 import '@ptsecurity/mosaic/tooltip';
 import { Subject, noop } from 'rxjs';
 
-// tslint:disable:naming-convention
-var TimeParts;
-(function (TimeParts) {
-    TimeParts[TimeParts["hours"] = 0] = "hours";
-    TimeParts[TimeParts["minutes"] = 1] = "minutes";
-    TimeParts[TimeParts["seconds"] = 2] = "seconds";
-})(TimeParts || (TimeParts = {}));
-var TimeFormats;
-(function (TimeFormats) {
-    TimeFormats["HHmmss"] = "HH:mm:ss";
-    TimeFormats["HHmm"] = "HH:mm";
-})(TimeFormats || (TimeFormats = {}));
-const TIMEFORMAT_PLACEHOLDERS = {
-    [TimeFormats.HHmmss]: 'чч:мм:сс',
-    [TimeFormats.HHmm]: 'чч:мм'
-};
-const DEFAULT_TIME_FORMAT = TimeFormats.HHmm;
-const HOURS_MINUTES_SECONDS_REGEXP = /^([0-1][0-9]|2[0-3]):?([0-5][0-9]):?([0-5][0-9])?$/;
-const HOURS_MINUTES_REGEXP = /^([0-1][0-9]|2[0-3]):?([0-5][0-9])?$/;
-const HOURS_ONLY_REGEXP = /^([0-1][0-9]|2[0-3]):?$/;
-const AM_PM_FORMAT_REGEXP = /^([0-1]?[0-9]):([0-5]?[0-9]) ([ap][m]?$)/i;
-const SECONDS_PER_MINUTE = 59;
-const MINUTES_PER_HOUR = 59;
+// tslint:disable:naming-convention
+var TimeParts;
+(function (TimeParts) {
+    TimeParts[TimeParts["hours"] = 0] = "hours";
+    TimeParts[TimeParts["minutes"] = 1] = "minutes";
+    TimeParts[TimeParts["seconds"] = 2] = "seconds";
+})(TimeParts || (TimeParts = {}));
+var TimeFormats;
+(function (TimeFormats) {
+    TimeFormats["HHmmss"] = "HH:mm:ss";
+    TimeFormats["HHmm"] = "HH:mm";
+})(TimeFormats || (TimeFormats = {}));
+const TIMEFORMAT_PLACEHOLDERS = {
+    [TimeFormats.HHmmss]: 'чч:мм:сс',
+    [TimeFormats.HHmm]: 'чч:мм'
+};
+const DEFAULT_TIME_FORMAT = TimeFormats.HHmm;
+const HOURS_MINUTES_SECONDS_REGEXP = /^([0-1][0-9]|2[0-3]):?([0-5][0-9]):?([0-5][0-9])?$/;
+const HOURS_MINUTES_REGEXP = /^([0-1][0-9]|2[0-3]):?([0-5][0-9])?$/;
+const HOURS_ONLY_REGEXP = /^([0-1][0-9]|2[0-3]):?$/;
+const AM_PM_FORMAT_REGEXP = /^([0-1]?[0-9]):([0-5]?[0-9]) ([ap][m]?$)/i;
+const SECONDS_PER_MINUTE = 59;
+const MINUTES_PER_HOUR = 59;
 const HOURS_PER_DAY = 23;
 
-/** @docs-private */
-const MC_TIMEPICKER_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => McTimepicker),
-    multi: true
-};
-/** @docs-private */
-const MC_TIMEPICKER_VALIDATORS = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => McTimepicker),
-    multi: true
-};
-let uniqueComponentIdSuffix = 0;
-const shortFormatSize = 5;
-const fullFormatSize = 8;
-class McTimepicker {
-    constructor(elementRef, renderer, dateAdapter) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.dateAdapter = dateAdapter;
-        /**
-         * Implemented as part of McFormFieldControl.
-         * @docs-private
-         */
-        this.stateChanges = new Subject();
-        /**
-         * Implemented as part of McFormFieldControl.
-         * @docs-private
-         */
-        this.focused = false;
-        /**
-         * Implemented as part of McFormFieldControl.
-         * @docs-private
-         */
-        this.controlType = 'timepicker';
-        this._placeholder = TIMEFORMAT_PLACEHOLDERS[DEFAULT_TIME_FORMAT];
-        this._format = DEFAULT_TIME_FORMAT;
-        this._min = null;
-        this._max = null;
-        this.incorrectInput = new EventEmitter();
-        this.uid = `mc-timepicker-${uniqueComponentIdSuffix++}`;
-        this.lastValueValid = false;
-        this.defaultPlaceholder = true;
-        this.onInput = () => {
-            const formattedValue = this.formatUserInput(this.viewValue);
-            const newTimeObj = this.getDateFromTimeString(formattedValue);
-            this.lastValueValid = !!newTimeObj;
-            if (!newTimeObj) {
-                this.onChange(null);
-                return;
-            }
-            const selectionStart = this.selectionStart;
-            const selectionEnd = this.selectionEnd;
-            this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.format));
-            this.selectionStart = selectionStart;
-            this.selectionEnd = selectionEnd;
-            this.createSelectionOfTimeComponentInInput(selectionStart + 1);
-            this.value = newTimeObj;
-            this.onChange(newTimeObj);
-            this.stateChanges.next();
-        };
-        this.parseValidator = () => {
-            return this.focused ||
-                this.empty ||
-                this.lastValueValid ? null : { mcTimepickerParse: { text: this.viewValue } };
-        };
-        this.minValidator = (control) => {
-            const controlValue = this.getValidDateOrNull(this.dateAdapter.deserialize(control.value));
-            return (!this.min || !controlValue || this.compareTime(this.min, controlValue) <= 0) ?
-                null :
-                { mcTimepickerLowerThenMin: { min: this.min, actual: controlValue } };
-        };
-        this.maxValidator = (control) => {
-            const controlValue = this.getValidDateOrNull(this.dateAdapter.deserialize(control.value));
-            return (!this.max || !controlValue || this.compareTime(this.max, controlValue) >= 0) ?
-                null :
-                { mcTimepickerHigherThenMax: { max: this.max, actual: controlValue } };
-        };
-        // tslint:disable-next-line:no-empty
-        this.validatorOnChange = () => { };
-        if (!this.dateAdapter) {
-            throw Error(`McTimepicker: No provider found for DateAdapter. You must import one of the existing ` +
-                `modules at your application root or provide a custom implementation or use exists ones.`);
-        }
-        this.validator = Validators.compose([this.parseValidator, this.minValidator, this.maxValidator]);
-        this.onChange = noop;
-        // Force setter to be called in case id was not specified.
-        this.id = this.id;
-    }
-    /**
-     * Implemented as part of McFormFieldControl.
-     * @docs-private
-     */
-    get placeholder() {
-        return this._placeholder;
-    }
-    set placeholder(value) {
-        this._placeholder = value;
-        this.defaultPlaceholder = false;
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        // Browsers may not fire the blur event if the input is disabled too quickly.
-        // Reset from here to ensure that the element doesn't become stuck.
-        if (this.focused) {
-            this.focused = false;
-        }
-        this.stateChanges.next();
-    }
-    get id() {
-        return this._id;
-    }
-    set id(value) {
-        this._id = value || this.uid;
-    }
-    /**
-     * Implemented as part of McFormFieldControl.
-     * @docs-private
-     */
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-    }
-    get format() {
-        return this._format;
-    }
-    set format(formatValue) {
-        this._format = Object
-            .keys(TimeFormats)
-            .map((timeFormatKey) => TimeFormats[timeFormatKey])
-            .indexOf(formatValue) > -1 ? formatValue : DEFAULT_TIME_FORMAT;
-        if (this.defaultPlaceholder) {
-            this._placeholder = TIMEFORMAT_PLACEHOLDERS[this._format];
-        }
-        if (this.value) {
-            this.updateView();
-        }
-    }
-    get min() {
-        return this._min;
-    }
-    set min(value) {
-        this._min = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-        this.validatorOnChange();
-    }
-    get max() {
-        return this._max;
-    }
-    set max(value) {
-        this._max = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
-        this.validatorOnChange();
-    }
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        const newValue = this.dateAdapter.deserialize(value);
-        this.lastValueValid = !newValue || this.dateAdapter.isValid(newValue);
-        this._value = this.getValidDateOrNull(newValue);
-        this.updateView();
-    }
-    set mcValidationTooltip(tooltip) {
-        if (!tooltip) {
-            return;
-        }
-        tooltip.enterDelay = validationTooltipShowDelay;
-        tooltip.trigger = 'manual';
-        tooltip.initListeners();
-        this.incorrectInput.subscribe(() => {
-            if (tooltip.isOpen) {
-                return;
-            }
-            tooltip.show();
-            setTimeout(() => tooltip.hide(), validationTooltipHideDelay);
-        });
-    }
-    get hasSelection() {
-        return this.selectionStart !== this.selectionEnd;
-    }
-    get isFullFormat() {
-        return this.format === TimeFormats.HHmmss;
-    }
-    get isShortFormat() {
-        return this.format === TimeFormats.HHmm;
-    }
-    get viewValue() {
-        return this.elementRef.nativeElement.value;
-    }
-    get ngControl() {
-        return this.control;
-    }
-    /**
-     * Implemented as part of McFormFieldControl.
-     * @docs-private
-     */
-    get empty() {
-        return !this.viewValue && !this.isBadInput();
-    }
-    get selectionStart() {
-        return this.elementRef.nativeElement.selectionStart;
-    }
-    set selectionStart(value) {
-        this.elementRef.nativeElement.selectionStart = value;
-    }
-    get selectionEnd() {
-        return this.elementRef.nativeElement.selectionEnd;
-    }
-    set selectionEnd(value) {
-        this.elementRef.nativeElement.selectionEnd = value;
-    }
-    ngOnDestroy() {
-        this.stateChanges.complete();
-    }
-    getSize() {
-        return this.isFullFormat ? fullFormatSize : shortFormatSize;
-    }
-    focus() {
-        this.elementRef.nativeElement.focus();
-    }
-    focusChanged(isFocused) {
-        if (isFocused !== this.focused) {
-            this.focused = isFocused;
-            this.onTouched();
-            this.stateChanges.next();
-        }
-    }
-    onBlur() {
-        this.focusChanged(false);
-        this.setViewValue(this.formatUserPaste(this.viewValue));
-        this.onInput();
-    }
-    onPaste($event) {
-        $event.preventDefault();
-        const value = this.formatUserPaste($event.clipboardData.getData('text'));
-        const newTimeObj = this.getDateFromTimeString(value);
-        if (!newTimeObj) {
-            return;
-        }
-        this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.format));
-        this.value = newTimeObj;
-        this.onChange(newTimeObj);
-        this.stateChanges.next();
-    }
-    /**
-     * Implemented as part of McFormFieldControl.
-     * @docs-private
-     */
-    onContainerClick() {
-        this.focus();
-    }
-    onKeyDown(event) {
-        // tslint:disable-next-line: deprecation
-        const keyCode = event.keyCode;
-        if (isLetterKey(event) && !event.ctrlKey && !event.metaKey) {
-            event.preventDefault();
-            this.incorrectInput.emit();
-        }
-        else if ((hasModifierKey(event) && (isVerticalMovement(event) || isHorizontalMovement(event))) ||
-            event.ctrlKey || event.metaKey ||
-            [DELETE, BACKSPACE, TAB].includes(keyCode)) {
-            noop();
-        }
-        else if (keyCode === SPACE) {
-            this.spaceKeyHandler(event);
-        }
-        else if ([HOME, PAGE_UP].includes(keyCode)) {
-            this.createSelectionOfTimeComponentInInput(0);
-        }
-        else if ([END, PAGE_DOWN].includes(keyCode)) {
-            this.createSelectionOfTimeComponentInInput(this.viewValue.length);
-        }
-        else if ([UP_ARROW, DOWN_ARROW].includes(keyCode)) {
-            event.preventDefault();
-            this.verticalArrowKeyHandler(keyCode);
-        }
-        else if ([LEFT_ARROW, RIGHT_ARROW].includes(keyCode)) {
-            this.horizontalArrowKeyHandler(keyCode);
-        }
-        else if (/^\D$/.test(event.key)) {
-            event.preventDefault();
-            const newValue = this.getNewValue(event.key, this.selectionStart);
-            const formattedValue = this.replaceSymbols(newValue);
-            if (newValue !== formattedValue) {
-                this.setViewValue(formattedValue);
-                setTimeout(this.onInput);
-            }
-            else {
-                this.incorrectInput.emit();
-            }
-        }
-        else {
-            setTimeout(this.onInput);
-        }
-    }
-    validate(control) {
-        this.setControl(control);
-        return this.validator ? this.validator(control) : null;
-    }
-    registerOnValidatorChange(fn) {
-        this.validatorOnChange = fn;
-    }
-    writeValue(value) {
-        this.value = value;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    formatUserPaste(value) {
-        if (value.match(AM_PM_FORMAT_REGEXP)) {
-            return value;
-        }
-        const match = value.match(/^(\D+)?(?<hours>\d+)?(\D+)?(\D+)?(?<minutes>\d+)?(\D+)?(\D+)?(?<seconds>\d+)?(\D+)?$/);
-        if (!match?.groups?.hours) {
-            this.setViewValue(value);
-            return value;
-        }
-        return this.replaceNumbers(Object.values(match.groups)
-            // tslint:disable-next-line:no-magic-numbers
-            .map((group) => (group || '').padStart(2, '0'))
-            .join(':'));
-    }
-    formatUserInput(value) {
-        return this.replaceNumbers(this.replaceSymbols(value));
-    }
-    replaceSymbols(value) {
-        let formattedValue = value;
-        const match = value.match(/^(\d\d:){0,2}(?<number>[0-9])(?<symbol>\W)(:\d\d){0,2}$/);
-        if (match?.groups) {
-            const { number, symbol } = match.groups;
-            formattedValue = value.replace(number + symbol, `0${number}`);
-        }
-        return formattedValue;
-    }
-    replaceNumbers(value) {
-        let formattedValue = value;
-        const match = value.match(/^(?<hours>\d{0,4}):?(?<minutes>\d{0,4}):?(?<seconds>\d{0,4})$/);
-        if (match?.groups) {
-            const { hours, minutes, seconds } = match.groups;
-            if (hours.length && parseInt(hours) > HOURS_PER_DAY) {
-                formattedValue = formattedValue.replace(hours, HOURS_PER_DAY.toString());
-            }
-            if (minutes.length && parseInt(minutes) > MINUTES_PER_HOUR) {
-                formattedValue = formattedValue.replace(minutes, MINUTES_PER_HOUR.toString());
-            }
-            if (seconds.length && parseInt(seconds) > SECONDS_PER_MINUTE) {
-                formattedValue = formattedValue.replace(seconds, SECONDS_PER_MINUTE.toString());
-            }
-        }
-        return formattedValue;
-    }
-    /** Checks whether the input is invalid based on the native validation. */
-    isBadInput() {
-        const validity = this.elementRef.nativeElement.validity;
-        return validity && validity.badInput;
-    }
-    spaceKeyHandler(event) {
-        event.preventDefault();
-        if (this.selectionStart === this.selectionEnd) {
-            const value = this.getNewValue(event.key, this.selectionStart);
-            const formattedValue = this.replaceSymbols(value);
-            if (value !== formattedValue) {
-                this.setViewValue(formattedValue);
-                setTimeout(this.onInput);
-            }
-        }
-        else if (this.selectionStart !== this.selectionEnd) {
-            let cursorPos = this.selectionStart;
-            const nextDividerPos = this.viewValue.indexOf(':', cursorPos);
-            cursorPos = nextDividerPos ? nextDividerPos + 1 : 0;
-            this.createSelectionOfTimeComponentInInput(cursorPos);
-        }
-    }
-    getNewValue(key, position) {
-        return [this.viewValue.slice(0, position), key, this.viewValue.slice(position)].join('');
-    }
-    verticalArrowKeyHandler(keyCode) {
-        if (!this.value) {
-            return;
-        }
-        let changedTime;
-        const newEditParams = this.getTimeEditMetrics(this.selectionStart);
-        if (keyCode === UP_ARROW) {
-            changedTime = this.incrementTime(this.value, newEditParams.modifiedTimePart);
-        }
-        if (keyCode === DOWN_ARROW) {
-            changedTime = this.decrementTime(this.value, newEditParams.modifiedTimePart);
-        }
-        this.value = changedTime;
-        this.selectionStart = newEditParams.cursorStartPosition;
-        this.selectionEnd = newEditParams.cursorEndPosition;
-        this.onChange(changedTime);
-        this.stateChanges.next();
-    }
-    horizontalArrowKeyHandler(keyCode) {
-        if (!this.value) {
-            return;
-        }
-        let cursorPos = this.selectionStart;
-        if (keyCode === LEFT_ARROW) {
-            cursorPos = cursorPos === 0 ? this.viewValue.length : cursorPos - 1;
-        }
-        else if (keyCode === RIGHT_ARROW) {
-            const nextDividerPos = this.viewValue.indexOf(':', cursorPos);
-            cursorPos = nextDividerPos ? nextDividerPos + 1 : 0;
-        }
-        this.createSelectionOfTimeComponentInInput(cursorPos);
-    }
-    createSelectionOfTimeComponentInInput(cursorPos) {
-        setTimeout(() => {
-            const newEditParams = this.getTimeEditMetrics(cursorPos);
-            this.selectionStart = newEditParams.cursorStartPosition;
-            this.selectionEnd = newEditParams.cursorEndPosition;
-        });
-    }
-    incrementTime(dateVal, whatToIncrement = TimeParts.seconds) {
-        let hours = this.dateAdapter.getHours(dateVal);
-        let minutes = this.dateAdapter.getMinutes(dateVal);
-        let seconds = this.dateAdapter.getSeconds(dateVal);
-        switch (whatToIncrement) {
-            case TimeParts.hours:
-                hours++;
-                break;
-            case TimeParts.minutes:
-                minutes++;
-                break;
-            case TimeParts.seconds:
-                seconds++;
-                break;
-            default:
-        }
-        if (seconds > SECONDS_PER_MINUTE) {
-            seconds = 0;
-        }
-        if (minutes > MINUTES_PER_HOUR) {
-            minutes = 0;
-        }
-        if (hours > HOURS_PER_DAY) {
-            hours = 0;
-        }
-        return this.dateAdapter.createDateTime(this.dateAdapter.getYear(this.value), this.dateAdapter.getMonth(this.value), this.dateAdapter.getDate(this.value), hours, minutes, seconds, this.dateAdapter.getMilliseconds(this.value));
-    }
-    decrementTime(dateVal, whatToDecrement = TimeParts.seconds) {
-        let hours = this.dateAdapter.getHours(dateVal);
-        let minutes = this.dateAdapter.getMinutes(dateVal);
-        let seconds = this.dateAdapter.getSeconds(dateVal);
-        switch (whatToDecrement) {
-            case TimeParts.hours:
-                hours--;
-                break;
-            case TimeParts.minutes:
-                minutes--;
-                break;
-            case TimeParts.seconds:
-                seconds--;
-                break;
-            default:
-        }
-        if (seconds < 0) {
-            seconds = SECONDS_PER_MINUTE;
-        }
-        if (minutes < 0) {
-            minutes = MINUTES_PER_HOUR;
-        }
-        if (hours < 0) {
-            hours = HOURS_PER_DAY;
-        }
-        return this.dateAdapter.createDateTime(this.dateAdapter.getYear(this.value), this.dateAdapter.getMonth(this.value), this.dateAdapter.getDate(this.value), hours, minutes, seconds, this.dateAdapter.getMilliseconds(this.value));
-    }
-    /**
-     * @description Get params for arrow-keys (up/down) time valie edit.
-     * @param cursorPosition Current cursor position in timeString
-     */
-    getTimeEditMetrics(cursorPosition) {
-        const timeString = this.viewValue;
-        let modifiedTimePart;
-        let cursorStartPosition;
-        let cursorEndPosition;
-        const hoursIndex = 0;
-        const minutesIndex = timeString.indexOf(':', hoursIndex + 1);
-        const secondsIndex = minutesIndex !== -1 ? timeString.indexOf(':', minutesIndex + 1) : -1;
-        if (secondsIndex !== -1 && cursorPosition > secondsIndex) {
-            modifiedTimePart = TimeParts.seconds;
-            cursorStartPosition = secondsIndex + 1;
-            cursorEndPosition = timeString.length;
-        }
-        else if (minutesIndex !== -1 && cursorPosition > minutesIndex) {
-            modifiedTimePart = TimeParts.minutes;
-            cursorStartPosition = minutesIndex + 1;
-            cursorEndPosition = secondsIndex > -1 ? secondsIndex : timeString.length;
-        }
-        else {
-            modifiedTimePart = TimeParts.hours;
-            cursorStartPosition = hoursIndex;
-            cursorEndPosition = minutesIndex !== -1 ? minutesIndex : timeString.length;
-        }
-        return { modifiedTimePart, cursorStartPosition, cursorEndPosition };
-    }
-    /**
-     * @description Create time string for displaying inside input element of UI
-     */
-    getTimeStringFromDate(value, timeFormat) {
-        if (!value || !this.dateAdapter.isValid(value)) {
-            return '';
-        }
-        return this.dateAdapter.format(value, timeFormat);
-    }
-    getDateFromTimeString(timeString) {
-        if (!timeString) {
-            return null;
-        }
-        const HMS = timeString.match(HOURS_MINUTES_SECONDS_REGEXP);
-        const HM = timeString.match(HOURS_MINUTES_REGEXP);
-        const H = timeString.match(HOURS_ONLY_REGEXP);
-        const amPm = timeString.match(AM_PM_FORMAT_REGEXP);
-        let hours = 0;
-        let minutes = 0;
-        let seconds = 0;
-        // tslint:disable:no-magic-numbers
-        if (amPm) {
-            hours = Number(amPm[1]);
-            minutes = Number(amPm[2]);
-            if (/[p]/i.test(amPm[3]) || (/[a]/i.test(amPm[3]) && hours === 12)) {
-                hours += 12;
-            }
-        }
-        else if (HMS) {
-            hours = Number(HMS[1]);
-            minutes = Number(HMS[2]);
-            seconds = Number(HMS[3]);
-        }
-        else if (HM) {
-            hours = Number(HM[1]);
-            minutes = Number(HM[2]);
-        }
-        else if (H) {
-            hours = Number(H[1]);
-        }
-        else {
-            return null;
-        }
-        // tslint:enable
-        const date = this.value || this.dateAdapter.today();
-        const resultDate = this.dateAdapter.createDateTime(this.dateAdapter.getYear(date), this.dateAdapter.getMonth(date), this.dateAdapter.getDate(date), hours, minutes || 0, seconds || 0, this.dateAdapter.getMilliseconds(date));
-        return this.getValidDateOrNull(resultDate);
-    }
-    compareTime(first, second) {
-        const result = this.dateAdapter.getHours(first) - this.dateAdapter.getHours(second) ||
-            this.dateAdapter.getMinutes(first) - this.dateAdapter.getMinutes(second);
-        if (TimeFormats.HHmm === this.format) {
-            return result;
-        }
-        else if (TimeFormats.HHmmss === this.format) {
-            return result || this.dateAdapter.getSeconds(first) - this.dateAdapter.getSeconds(second);
-        }
-        else {
-            throw Error(`Unknown format: ${this.format}`);
-        }
-    }
-    getValidDateOrNull(obj) {
-        return (this.dateAdapter.isDateInstance(obj) && this.dateAdapter.isValid(obj)) ? obj : null;
-    }
-    setViewValue(value) {
-        this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
-    }
-    updateView() {
-        const formattedValue = this.getTimeStringFromDate(this.value, this.format);
-        this.setViewValue(formattedValue);
-    }
-    setControl(control) {
-        if (!this.control) {
-            this.control = control;
-        }
-    }
-}
-/** @nocollapse */ /** @nocollapse */ McTimepicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepicker, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.DateAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTimepicker.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTimepicker, selector: "input[mcTimepicker]", inputs: { placeholder: "placeholder", disabled: "disabled", id: "id", required: "required", format: "format", min: "min", max: "max", value: "value", mcValidationTooltip: "mcValidationTooltip" }, outputs: { incorrectInput: "incorrectInput" }, host: { listeners: { "blur": "onBlur()", "focus": "focusChanged(true)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.id": "id", "attr.placeholder": "placeholder", "attr.disabled": "disabled || null", "attr.required": "required", "attr.size": "getSize()", "attr.autocomplete": "\"off\"" }, classAttribute: "mc-input mc-timepicker" }, providers: [
-        MC_TIMEPICKER_VALIDATORS,
-        MC_TIMEPICKER_VALUE_ACCESSOR,
-        { provide: McFormFieldControl, useExisting: McTimepicker }
-    ], exportAs: ["mcTimepicker"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepicker, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[mcTimepicker]',
-                    exportAs: 'mcTimepicker',
-                    host: {
-                        class: 'mc-input mc-timepicker',
-                        // Native input properties that are overwritten by Angular inputs need to be synced with
-                        // the native input element. Otherwise property bindings for those don't work.
-                        '[attr.id]': 'id',
-                        '[attr.placeholder]': 'placeholder',
-                        '[attr.disabled]': 'disabled || null',
-                        '[attr.required]': 'required',
-                        '[attr.size]': 'getSize()',
-                        '[attr.autocomplete]': '"off"',
-                        '(blur)': 'onBlur()',
-                        '(focus)': 'focusChanged(true)',
-                        '(paste)': 'onPaste($event)',
-                        '(keydown)': 'onKeyDown($event)'
-                    },
-                    providers: [
-                        MC_TIMEPICKER_VALIDATORS,
-                        MC_TIMEPICKER_VALUE_ACCESSOR,
-                        { provide: McFormFieldControl, useExisting: McTimepicker }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.DateAdapter, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { placeholder: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], mcValidationTooltip: [{
-                type: Input
-            }], incorrectInput: [{
-                type: Output
+/** @docs-private */
+const MC_TIMEPICKER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => McTimepicker),
+    multi: true
+};
+/** @docs-private */
+const MC_TIMEPICKER_VALIDATORS = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => McTimepicker),
+    multi: true
+};
+let uniqueComponentIdSuffix = 0;
+const shortFormatSize = 5;
+const fullFormatSize = 8;
+class McTimepicker {
+    constructor(elementRef, changeDetectorRef, renderer, mcValidation, parentForm, parentFormGroup, dateAdapter) {
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
+        this.renderer = renderer;
+        this.mcValidation = mcValidation;
+        this.parentForm = parentForm;
+        this.parentFormGroup = parentFormGroup;
+        this.dateAdapter = dateAdapter;
+        /**
+         * Implemented as part of McFormFieldControl.
+         * @docs-private
+         */
+        this.stateChanges = new Subject();
+        /**
+         * Implemented as part of McFormFieldControl.
+         * @docs-private
+         */
+        this.focused = false;
+        /**
+         * Implemented as part of McFormFieldControl.
+         * @docs-private
+         */
+        this.controlType = 'timepicker';
+        this._placeholder = TIMEFORMAT_PLACEHOLDERS[DEFAULT_TIME_FORMAT];
+        this._format = DEFAULT_TIME_FORMAT;
+        this._min = null;
+        this._max = null;
+        this.incorrectInput = new EventEmitter();
+        this.uid = `mc-timepicker-${uniqueComponentIdSuffix++}`;
+        this.lastValueValid = false;
+        this.defaultPlaceholder = true;
+        this.onInput = () => {
+            const formattedValue = this.formatUserInput(this.viewValue);
+            const newTimeObj = this.getDateFromTimeString(formattedValue);
+            this.lastValueValid = !!newTimeObj;
+            if (!newTimeObj) {
+                if (!this.viewValue) {
+                    this.onChange(null);
+                }
+                else {
+                    this.control.updateValueAndValidity();
+                }
+                return;
+            }
+            const selectionStart = this.selectionStart;
+            const selectionEnd = this.selectionEnd;
+            this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.format));
+            this.selectionStart = selectionStart;
+            this.selectionEnd = selectionEnd;
+            this.createSelectionOfTimeComponentInInput(selectionStart + 1);
+            this.value = newTimeObj;
+            this.onChange(newTimeObj);
+            this.stateChanges.next();
+        };
+        this.parseValidator = () => {
+            return this.focused ||
+                this.empty ||
+                this.lastValueValid ? null : { mcTimepickerParse: { text: this.viewValue } };
+        };
+        this.minValidator = (control) => {
+            const controlValue = this.getValidDateOrNull(this.dateAdapter.deserialize(control.value));
+            return (!this.min || !controlValue || this.compareTime(this.min, controlValue) <= 0) ?
+                null :
+                { mcTimepickerLowerThenMin: { min: this.min, actual: controlValue } };
+        };
+        this.maxValidator = (control) => {
+            const controlValue = this.getValidDateOrNull(this.dateAdapter.deserialize(control.value));
+            return (!this.max || !controlValue || this.compareTime(this.max, controlValue) >= 0) ?
+                null :
+                { mcTimepickerHigherThenMax: { max: this.max, actual: controlValue } };
+        };
+        // tslint:disable-next-line:no-empty
+        this.validatorOnChange = () => { };
+        if (!this.dateAdapter) {
+            throw Error(`McTimepicker: No provider found for DateAdapter. You must import one of the existing ` +
+                `modules at your application root or provide a custom implementation or use exists ones.`);
+        }
+        this.validator = Validators.compose([this.parseValidator, this.minValidator, this.maxValidator]);
+        this.onChange = noop;
+        // Force setter to be called in case id was not specified.
+        this.id = this.id;
+    }
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.defaultPlaceholder = false;
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        // Browsers may not fire the blur event if the input is disabled too quickly.
+        // Reset from here to ensure that the element doesn't become stuck.
+        if (this.focused) {
+            this.focused = false;
+        }
+        this.stateChanges.next();
+    }
+    get id() {
+        return this._id;
+    }
+    set id(value) {
+        this._id = value || this.uid;
+    }
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+    }
+    get format() {
+        return this._format;
+    }
+    set format(formatValue) {
+        this._format = Object
+            .keys(TimeFormats)
+            .map((timeFormatKey) => TimeFormats[timeFormatKey])
+            .indexOf(formatValue) > -1 ? formatValue : DEFAULT_TIME_FORMAT;
+        if (this.defaultPlaceholder) {
+            this._placeholder = TIMEFORMAT_PLACEHOLDERS[this._format];
+        }
+        if (this.value) {
+            this.updateView();
+        }
+    }
+    get min() {
+        return this._min;
+    }
+    set min(value) {
+        this._min = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
+        this.validatorOnChange();
+    }
+    get max() {
+        return this._max;
+    }
+    set max(value) {
+        this._max = this.getValidDateOrNull(this.dateAdapter.deserialize(value));
+        this.validatorOnChange();
+    }
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        const newValue = this.dateAdapter.deserialize(value);
+        this.lastValueValid = !newValue || this.dateAdapter.isValid(newValue);
+        this._value = this.getValidDateOrNull(newValue);
+        this.updateView();
+    }
+    set mcValidationTooltip(tooltip) {
+        if (!tooltip) {
+            return;
+        }
+        tooltip.enterDelay = validationTooltipShowDelay;
+        tooltip.trigger = 'manual';
+        tooltip.initListeners();
+        this.incorrectInput.subscribe(() => {
+            if (tooltip.isOpen) {
+                return;
+            }
+            tooltip.show();
+            setTimeout(() => tooltip.hide(), validationTooltipHideDelay);
+        });
+    }
+    get hasSelection() {
+        return this.selectionStart !== this.selectionEnd;
+    }
+    get isFullFormat() {
+        return this.format === TimeFormats.HHmmss;
+    }
+    get isShortFormat() {
+        return this.format === TimeFormats.HHmm;
+    }
+    get viewValue() {
+        return this.elementRef.nativeElement.value;
+    }
+    get ngControl() {
+        return this.control;
+    }
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    get empty() {
+        return !this.viewValue && !this.isBadInput();
+    }
+    get selectionStart() {
+        return this.elementRef.nativeElement.selectionStart;
+    }
+    set selectionStart(value) {
+        this.elementRef.nativeElement.selectionStart = value;
+    }
+    get selectionEnd() {
+        return this.elementRef.nativeElement.selectionEnd;
+    }
+    set selectionEnd(value) {
+        this.elementRef.nativeElement.selectionEnd = value;
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    getSize() {
+        return this.isFullFormat ? fullFormatSize : shortFormatSize;
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    focusChanged(isFocused) {
+        if (isFocused !== this.focused) {
+            this.focused = isFocused;
+            this.onTouched();
+            this.stateChanges.next();
+        }
+    }
+    onBlur() {
+        this.focusChanged(false);
+        this.setViewValue(this.formatUserPaste(this.viewValue));
+        this.onInput();
+    }
+    onPaste($event) {
+        $event.preventDefault();
+        const value = this.formatUserPaste($event.clipboardData.getData('text'));
+        const newTimeObj = this.getDateFromTimeString(value);
+        if (!newTimeObj) {
+            return;
+        }
+        this.setViewValue(this.getTimeStringFromDate(newTimeObj, this.format));
+        this.value = newTimeObj;
+        this.onChange(newTimeObj);
+        this.stateChanges.next();
+    }
+    /**
+     * Implemented as part of McFormFieldControl.
+     * @docs-private
+     */
+    onContainerClick() {
+        this.focus();
+    }
+    onKeyDown(event) {
+        // tslint:disable-next-line: deprecation
+        const keyCode = event.keyCode;
+        if (isLetterKey(event) && !event.ctrlKey && !event.metaKey) {
+            event.preventDefault();
+            this.incorrectInput.emit();
+        }
+        else if ((hasModifierKey(event) && (isVerticalMovement(event) || isHorizontalMovement(event))) ||
+            event.ctrlKey || event.metaKey ||
+            [DELETE, BACKSPACE, TAB].includes(keyCode)) {
+            noop();
+        }
+        else if (keyCode === SPACE) {
+            this.spaceKeyHandler(event);
+        }
+        else if ([HOME, PAGE_UP].includes(keyCode)) {
+            this.createSelectionOfTimeComponentInInput(0);
+        }
+        else if ([END, PAGE_DOWN].includes(keyCode)) {
+            this.createSelectionOfTimeComponentInInput(this.viewValue.length);
+        }
+        else if ([UP_ARROW, DOWN_ARROW].includes(keyCode)) {
+            event.preventDefault();
+            this.verticalArrowKeyHandler(keyCode);
+        }
+        else if ([LEFT_ARROW, RIGHT_ARROW].includes(keyCode)) {
+            this.horizontalArrowKeyHandler(keyCode);
+        }
+        else if (/^\D$/.test(event.key)) {
+            event.preventDefault();
+            const newValue = this.getNewValue(event.key, this.selectionStart);
+            const formattedValue = this.replaceSymbols(newValue);
+            if (newValue !== formattedValue) {
+                this.setViewValue(formattedValue);
+                setTimeout(this.onInput);
+            }
+            else {
+                this.incorrectInput.emit();
+            }
+        }
+        else {
+            setTimeout(this.onInput);
+        }
+    }
+    validate(control) {
+        this.setControl(control);
+        return this.validator ? this.validator(control) : null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorOnChange = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    formatUserPaste(value) {
+        if (value.match(AM_PM_FORMAT_REGEXP)) {
+            return value;
+        }
+        const match = value.match(/^(\D+)?(?<hours>\d+)?(\D+)?(\D+)?(?<minutes>\d+)?(\D+)?(\D+)?(?<seconds>\d+)?(\D+)?$/);
+        if (!match?.groups?.hours) {
+            this.setViewValue(value);
+            return value;
+        }
+        return this.replaceNumbers(Object.values(match.groups)
+            // tslint:disable-next-line:no-magic-numbers
+            .map((group) => (group || '').padStart(2, '0'))
+            .join(':'));
+    }
+    formatUserInput(value) {
+        return this.replaceNumbers(this.replaceSymbols(value));
+    }
+    replaceSymbols(value) {
+        let formattedValue = value;
+        const match = value.match(/^(\d\d:){0,2}(?<number>[0-9])(?<symbol>\W)(:\d\d){0,2}$/);
+        if (match?.groups) {
+            const { number, symbol } = match.groups;
+            formattedValue = value.replace(number + symbol, `0${number}`);
+        }
+        return formattedValue;
+    }
+    replaceNumbers(value) {
+        let formattedValue = value;
+        const match = value.match(/^(?<hours>\d{0,4}):?(?<minutes>\d{0,4}):?(?<seconds>\d{0,4})$/);
+        if (match?.groups) {
+            const { hours, minutes, seconds } = match.groups;
+            if (hours.length && parseInt(hours) > HOURS_PER_DAY) {
+                formattedValue = formattedValue.replace(hours, HOURS_PER_DAY.toString());
+            }
+            if (minutes.length && parseInt(minutes) > MINUTES_PER_HOUR) {
+                formattedValue = formattedValue.replace(minutes, MINUTES_PER_HOUR.toString());
+            }
+            if (seconds.length && parseInt(seconds) > SECONDS_PER_MINUTE) {
+                formattedValue = formattedValue.replace(seconds, SECONDS_PER_MINUTE.toString());
+            }
+        }
+        return formattedValue;
+    }
+    /** Checks whether the input is invalid based on the native validation. */
+    isBadInput() {
+        const validity = this.elementRef.nativeElement.validity;
+        return validity && validity.badInput;
+    }
+    spaceKeyHandler(event) {
+        event.preventDefault();
+        if (this.selectionStart === this.selectionEnd) {
+            const value = this.getNewValue(event.key, this.selectionStart);
+            const formattedValue = this.replaceSymbols(value);
+            if (value !== formattedValue) {
+                this.setViewValue(formattedValue);
+                setTimeout(this.onInput);
+            }
+        }
+        else if (this.selectionStart !== this.selectionEnd) {
+            let cursorPos = this.selectionStart;
+            const nextDividerPos = this.viewValue.indexOf(':', cursorPos);
+            cursorPos = nextDividerPos ? nextDividerPos + 1 : 0;
+            this.createSelectionOfTimeComponentInInput(cursorPos);
+        }
+    }
+    getNewValue(key, position) {
+        return [this.viewValue.slice(0, position), key, this.viewValue.slice(position)].join('');
+    }
+    verticalArrowKeyHandler(keyCode) {
+        if (!this.value) {
+            return;
+        }
+        let changedTime;
+        const newEditParams = this.getTimeEditMetrics(this.selectionStart);
+        if (keyCode === UP_ARROW) {
+            changedTime = this.incrementTime(this.value, newEditParams.modifiedTimePart);
+        }
+        if (keyCode === DOWN_ARROW) {
+            changedTime = this.decrementTime(this.value, newEditParams.modifiedTimePart);
+        }
+        this.value = changedTime;
+        this.selectionStart = newEditParams.cursorStartPosition;
+        this.selectionEnd = newEditParams.cursorEndPosition;
+        this.onChange(changedTime);
+        this.stateChanges.next();
+    }
+    horizontalArrowKeyHandler(keyCode) {
+        if (!this.value) {
+            return;
+        }
+        let cursorPos = this.selectionStart;
+        if (keyCode === LEFT_ARROW) {
+            cursorPos = cursorPos === 0 ? this.viewValue.length : cursorPos - 1;
+        }
+        else if (keyCode === RIGHT_ARROW) {
+            const nextDividerPos = this.viewValue.indexOf(':', cursorPos);
+            cursorPos = nextDividerPos ? nextDividerPos + 1 : 0;
+        }
+        this.createSelectionOfTimeComponentInInput(cursorPos);
+    }
+    createSelectionOfTimeComponentInInput(cursorPos) {
+        setTimeout(() => {
+            const newEditParams = this.getTimeEditMetrics(cursorPos);
+            this.selectionStart = newEditParams.cursorStartPosition;
+            this.selectionEnd = newEditParams.cursorEndPosition;
+        });
+    }
+    incrementTime(dateVal, whatToIncrement = TimeParts.seconds) {
+        let hours = this.dateAdapter.getHours(dateVal);
+        let minutes = this.dateAdapter.getMinutes(dateVal);
+        let seconds = this.dateAdapter.getSeconds(dateVal);
+        switch (whatToIncrement) {
+            case TimeParts.hours:
+                hours++;
+                break;
+            case TimeParts.minutes:
+                minutes++;
+                break;
+            case TimeParts.seconds:
+                seconds++;
+                break;
+            default:
+        }
+        if (seconds > SECONDS_PER_MINUTE) {
+            seconds = 0;
+        }
+        if (minutes > MINUTES_PER_HOUR) {
+            minutes = 0;
+        }
+        if (hours > HOURS_PER_DAY) {
+            hours = 0;
+        }
+        return this.dateAdapter.createDateTime(this.dateAdapter.getYear(this.value), this.dateAdapter.getMonth(this.value), this.dateAdapter.getDate(this.value), hours, minutes, seconds, this.dateAdapter.getMilliseconds(this.value));
+    }
+    decrementTime(dateVal, whatToDecrement = TimeParts.seconds) {
+        let hours = this.dateAdapter.getHours(dateVal);
+        let minutes = this.dateAdapter.getMinutes(dateVal);
+        let seconds = this.dateAdapter.getSeconds(dateVal);
+        switch (whatToDecrement) {
+            case TimeParts.hours:
+                hours--;
+                break;
+            case TimeParts.minutes:
+                minutes--;
+                break;
+            case TimeParts.seconds:
+                seconds--;
+                break;
+            default:
+        }
+        if (seconds < 0) {
+            seconds = SECONDS_PER_MINUTE;
+        }
+        if (minutes < 0) {
+            minutes = MINUTES_PER_HOUR;
+        }
+        if (hours < 0) {
+            hours = HOURS_PER_DAY;
+        }
+        return this.dateAdapter.createDateTime(this.dateAdapter.getYear(this.value), this.dateAdapter.getMonth(this.value), this.dateAdapter.getDate(this.value), hours, minutes, seconds, this.dateAdapter.getMilliseconds(this.value));
+    }
+    /**
+     * @description Get params for arrow-keys (up/down) time valie edit.
+     * @param cursorPosition Current cursor position in timeString
+     */
+    getTimeEditMetrics(cursorPosition) {
+        const timeString = this.viewValue;
+        let modifiedTimePart;
+        let cursorStartPosition;
+        let cursorEndPosition;
+        const hoursIndex = 0;
+        const minutesIndex = timeString.indexOf(':', hoursIndex + 1);
+        const secondsIndex = minutesIndex !== -1 ? timeString.indexOf(':', minutesIndex + 1) : -1;
+        if (secondsIndex !== -1 && cursorPosition > secondsIndex) {
+            modifiedTimePart = TimeParts.seconds;
+            cursorStartPosition = secondsIndex + 1;
+            cursorEndPosition = timeString.length;
+        }
+        else if (minutesIndex !== -1 && cursorPosition > minutesIndex) {
+            modifiedTimePart = TimeParts.minutes;
+            cursorStartPosition = minutesIndex + 1;
+            cursorEndPosition = secondsIndex > -1 ? secondsIndex : timeString.length;
+        }
+        else {
+            modifiedTimePart = TimeParts.hours;
+            cursorStartPosition = hoursIndex;
+            cursorEndPosition = minutesIndex !== -1 ? minutesIndex : timeString.length;
+        }
+        return { modifiedTimePart, cursorStartPosition, cursorEndPosition };
+    }
+    /**
+     * @description Create time string for displaying inside input element of UI
+     */
+    getTimeStringFromDate(value, timeFormat) {
+        if (!value || !this.dateAdapter.isValid(value)) {
+            return '';
+        }
+        return this.dateAdapter.format(value, timeFormat);
+    }
+    getDateFromTimeString(timeString) {
+        if (!timeString) {
+            return null;
+        }
+        const HMS = timeString.match(HOURS_MINUTES_SECONDS_REGEXP);
+        const HM = timeString.match(HOURS_MINUTES_REGEXP);
+        const H = timeString.match(HOURS_ONLY_REGEXP);
+        const amPm = timeString.match(AM_PM_FORMAT_REGEXP);
+        let hours = 0;
+        let minutes = 0;
+        let seconds = 0;
+        // tslint:disable:no-magic-numbers
+        if (amPm) {
+            hours = Number(amPm[1]);
+            minutes = Number(amPm[2]);
+            if (/[p]/i.test(amPm[3]) || (/[a]/i.test(amPm[3]) && hours === 12)) {
+                hours += 12;
+            }
+        }
+        else if (HMS) {
+            hours = Number(HMS[1]);
+            minutes = Number(HMS[2]);
+            seconds = Number(HMS[3]);
+        }
+        else if (HM) {
+            hours = Number(HM[1]);
+            minutes = Number(HM[2]);
+        }
+        else if (H) {
+            hours = Number(H[1]);
+        }
+        else {
+            return null;
+        }
+        // tslint:enable
+        const date = this.value || this.dateAdapter.today();
+        const resultDate = this.dateAdapter.createDateTime(this.dateAdapter.getYear(date), this.dateAdapter.getMonth(date), this.dateAdapter.getDate(date), hours, minutes || 0, seconds || 0, this.dateAdapter.getMilliseconds(date));
+        return this.getValidDateOrNull(resultDate);
+    }
+    compareTime(first, second) {
+        const result = this.dateAdapter.getHours(first) - this.dateAdapter.getHours(second) ||
+            this.dateAdapter.getMinutes(first) - this.dateAdapter.getMinutes(second);
+        if (TimeFormats.HHmm === this.format) {
+            return result;
+        }
+        else if (TimeFormats.HHmmss === this.format) {
+            return result || this.dateAdapter.getSeconds(first) - this.dateAdapter.getSeconds(second);
+        }
+        else {
+            throw Error(`Unknown format: ${this.format}`);
+        }
+    }
+    getValidDateOrNull(obj) {
+        return (this.dateAdapter.isDateInstance(obj) && this.dateAdapter.isValid(obj)) ? obj : null;
+    }
+    setViewValue(value) {
+        this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
+    }
+    updateView() {
+        const formattedValue = this.getTimeStringFromDate(this.value, this.format);
+        this.setViewValue(formattedValue);
+    }
+    setControl(control) {
+        if (this.control) {
+            return;
+        }
+        this.control = control;
+        if (this.mcValidation.useValidation) {
+            setMosaicValidationForCustomFormControl(this, this.changeDetectorRef);
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McTimepicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepicker, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: MC_VALIDATION, optional: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2.DateAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTimepicker.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTimepicker, selector: "input[mcTimepicker]", inputs: { placeholder: "placeholder", disabled: "disabled", id: "id", required: "required", format: "format", min: "min", max: "max", value: "value", mcValidationTooltip: "mcValidationTooltip" }, outputs: { incorrectInput: "incorrectInput" }, host: { listeners: { "blur": "onBlur()", "focus": "focusChanged(true)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.id": "id", "attr.placeholder": "placeholder", "attr.disabled": "disabled || null", "attr.required": "required", "attr.size": "getSize()", "attr.autocomplete": "\"off\"" }, classAttribute: "mc-input mc-timepicker" }, providers: [
+        MC_TIMEPICKER_VALIDATORS,
+        MC_TIMEPICKER_VALUE_ACCESSOR,
+        { provide: McFormFieldControl, useExisting: McTimepicker }
+    ], exportAs: ["mcTimepicker"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepicker, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[mcTimepicker]',
+                    exportAs: 'mcTimepicker',
+                    host: {
+                        class: 'mc-input mc-timepicker',
+                        // Native input properties that are overwritten by Angular inputs need to be synced with
+                        // the native input element. Otherwise property bindings for those don't work.
+                        '[attr.id]': 'id',
+                        '[attr.placeholder]': 'placeholder',
+                        '[attr.disabled]': 'disabled || null',
+                        '[attr.required]': 'required',
+                        '[attr.size]': 'getSize()',
+                        '[attr.autocomplete]': '"off"',
+                        '(blur)': 'onBlur()',
+                        '(focus)': 'focusChanged(true)',
+                        '(paste)': 'onPaste($event)',
+                        '(keydown)': 'onKeyDown($event)'
+                    },
+                    providers: [
+                        MC_TIMEPICKER_VALIDATORS,
+                        MC_TIMEPICKER_VALUE_ACCESSOR,
+                        { provide: McFormFieldControl, useExisting: McTimepicker }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MC_VALIDATION]
+                }] }, { type: i1.NgForm, decorators: [{
+                    type: Optional
+                }] }, { type: i1.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: i2.DateAdapter, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], mcValidationTooltip: [{
+                type: Input
+            }], incorrectInput: [{
+                type: Output
             }] } });
 
-class McTimepickerModule {
-}
-/** @nocollapse */ /** @nocollapse */ McTimepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ McTimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepickerModule, declarations: [McTimepicker], imports: [CommonModule,
-        A11yModule,
-        PlatformModule,
-        FormsModule], exports: [McTimepicker] });
-/** @nocollapse */ /** @nocollapse */ McTimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepickerModule, imports: [[
-            CommonModule,
-            A11yModule,
-            PlatformModule,
-            FormsModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepickerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        A11yModule,
-                        PlatformModule,
-                        FormsModule
-                    ],
-                    declarations: [McTimepicker],
-                    exports: [McTimepicker]
-                }]
+class McTimepickerModule {
+}
+/** @nocollapse */ /** @nocollapse */ McTimepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McTimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepickerModule, declarations: [McTimepicker], imports: [CommonModule,
+        A11yModule,
+        PlatformModule,
+        FormsModule], exports: [McTimepicker] });
+/** @nocollapse */ /** @nocollapse */ McTimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepickerModule, imports: [[
+            CommonModule,
+            A11yModule,
+            PlatformModule,
+            FormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTimepickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        A11yModule,
+                        PlatformModule,
+                        FormsModule
+                    ],
+                    declarations: [McTimepicker],
+                    exports: [McTimepicker]
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AM_PM_FORMAT_REGEXP, DEFAULT_TIME_FORMAT, HOURS_MINUTES_REGEXP, HOURS_MINUTES_SECONDS_REGEXP, HOURS_ONLY_REGEXP, HOURS_PER_DAY, MC_TIMEPICKER_VALIDATORS, MC_TIMEPICKER_VALUE_ACCESSOR, MINUTES_PER_HOUR, McTimepicker, McTimepickerModule, SECONDS_PER_MINUTE, TIMEFORMAT_PLACEHOLDERS, TimeFormats, TimeParts };