@wavemaker-ai/app-ng-runtime 1.0.0-rc.309

package/components/input/epoch/time/bundles/index.umd.js

@@ -0,0 +1,401 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/forms'), require('@wm/components/input/epoch/date-time-picker'), require('@angular/common'), require('@angular/core'), require('ngx-bootstrap/timepicker'), require('@wm/core'), require('@wm/components/base'), require('@wm/components/input/epoch/base-date-time'), require('lodash-es'), require('ngx-bootstrap/dropdown'), require('moment')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@angular/forms', '@wm/components/input/epoch/date-time-picker', '@angular/common', '@angular/core', 'ngx-bootstrap/timepicker', '@wm/core', '@wm/components/base', '@wm/components/input/epoch/base-date-time', 'lodash-es', 'ngx-bootstrap/dropdown', 'moment'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wm = global.wm || {}, global.wm.components = global.wm.components || {}, global.wm.components.input = global.wm.components.input || {}, global.wm.components.input.epoch = global.wm.components.input.epoch || {}, global.wm.components.input.epoch.time = {}), global.ng.forms, global.wm.components.input.epoch.dateTimePicker, global.ng.common, global.ng.core, global.ngxBootstrap.timepicker, global.wm.core, global.wm.components.base, global.wm.components.input.epoch.baseDateTime, global._, global.ngxBootstrap.dropdown, global.momentLib));
+})(this, (function (exports, i2, dateTimePicker, i5, i0, i4, i1, base, baseDateTime, lodashEs, i3, momentLib) { 'use strict';
+
+    function _interopNamespaceDefault(e) {
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () { return e[k]; }
+                    });
+                }
+            });
+        }
+        n.default = e;
+        return Object.freeze(n);
+    }
+
+    var i2__namespace = /*#__PURE__*/_interopNamespaceDefault(i2);
+    var i5__namespace = /*#__PURE__*/_interopNamespaceDefault(i5);
+    var i0__namespace = /*#__PURE__*/_interopNamespaceDefault(i0);
+    var i4__namespace = /*#__PURE__*/_interopNamespaceDefault(i4);
+    var i1__namespace = /*#__PURE__*/_interopNamespaceDefault(i1);
+    var i3__namespace = /*#__PURE__*/_interopNamespaceDefault(i3);
+    var momentLib__namespace = /*#__PURE__*/_interopNamespaceDefault(momentLib);
+
+    const timeProps = new Map([
+        ['autofocus', base.PROP_BOOLEAN],
+        ['class', base.PROP_STRING],
+        ['dataentrymode', { value: 'default', ...base.PROP_STRING }],
+        ['datavaluesource', base.PROP_ANY],
+        ['datavalue', base.PROP_STRING],
+        ['disabled', base.PROP_BOOLEAN],
+        ['hint', base.PROP_STRING],
+        ['arialabel', base.PROP_STRING],
+        ['hourstep', { value: 1, ...base.PROP_NUMBER }],
+        ['maxtime', base.PROP_STRING],
+        ['mintime', base.PROP_STRING],
+        ['minutestep', { value: 15, ...base.PROP_NUMBER }],
+        ['name', base.PROP_STRING],
+        ['outputformat', { value: 'HH:mm:ss', ...base.PROP_STRING }],
+        ['placeholder', { value: 'Select time', ...base.PROP_STRING }],
+        ['readonly', base.PROP_BOOLEAN],
+        ['required', base.PROP_BOOLEAN],
+        ['shortcutkey', base.PROP_STRING],
+        ['show', { value: true, ...base.PROP_BOOLEAN }],
+        ['showdropdownon', { value: 'default', ...base.PROP_STRING }],
+        ['showcustompicker', { value: false, ...base.PROP_BOOLEAN }],
+        ['secondsstep', { value: 1, ...base.PROP_NUMBER }],
+        ['tabindex', { value: 0, ...base.PROP_NUMBER }],
+        ['timepattern', base.PROP_STRING],
+        ['timestamp', base.PROP_STRING],
+        ['showampmbuttons', { value: false, ...base.PROP_BOOLEAN }]
+    ]);
+    const registerProps = () => {
+        base.register('wm-time', timeProps);
+        base.registerFormWidget(i1.FormWidgetType.TIME, new Map(timeProps));
+    };
+
+    const moment = momentLib__namespace.default || window['moment'];
+    const CURRENT_TIME = 'CURRENT_TIME';
+    const DEFAULT_CLS = 'input-group app-timeinput';
+    const WIDGET_CONFIG = { widgetType: 'wm-time', hostClass: DEFAULT_CLS };
+    class TimeComponent extends baseDateTime.BaseDateTimeComponent {
+        static { this.initializeProps = registerProps(); }
+        get timestamp() {
+            return this.bsTimeValue ? this.bsTimeValue.valueOf() : undefined;
+        }
+        // @ts-ignore
+        get datavalue() {
+            if (this.isCurrentTime && !this.bsTimeValue) {
+                return CURRENT_TIME;
+            }
+            return i1.getFormattedDate(this.datePipe, this.bsTimeValue, this.outputformat, this.timeZone, null, null, this) || '';
+        }
+        /**Todo[Shubham]: needs to be redefined
+         * This property sets the default value for the time selection
+         */
+        // @ts-ignore
+        set datavalue(newVal) {
+            if (newVal) {
+                if (newVal === CURRENT_TIME) {
+                    this.isCurrentTime = true;
+                    this.setTimeInterval();
+                }
+                else {
+                    this.clearTimeInterval();
+                    this.bsTimeValue = i1.getNativeDateObject(newVal, { pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+                    this.isCurrentTime = false;
+                    this.mintimeMaxtimeValidation();
+                }
+            }
+            else {
+                this.bsTimeValue = undefined;
+                this.clearTimeInterval();
+                this.isCurrentTime = false;
+            }
+            this.invokeOnChange(this.datavalue);
+            i1.$appDigest();
+        }
+        get displayValue() {
+            const display = i1.getFormattedDate(this.datePipe, this.bsTimeValue, this.timepattern, this.timeZone, null, null, this) || '';
+            return this.safeReplaceMeridians(display);
+        }
+        get nativeDisplayValue() {
+            return i1.getFormattedDate(this.datePipe, this.bsTimeValue, 'HH:mm:ss', this.timeZone, null, null, this) || '';
+        }
+        constructor(inj, ngZone, appDefaults, app, explicitContext) {
+            super(inj, WIDGET_CONFIG, explicitContext);
+            this.ngZone = ngZone;
+            this.appDefaults = appDefaults;
+            /**
+             * This is an internal property used to toggle the timepicker dropdown
+             */
+            this.status = { isopen: false };
+            base.styler(this.nativeElement, this);
+            /**
+             * Destroy the timer once the date widget is gone
+             */
+            this.registerDestroyListener(() => this.clearTimeInterval());
+            this.timepattern = this.appDefaults.timeFormat || i1.getDisplayDateTimeFormat(i1.FormWidgetType.TIME);
+            this.updateFormat('timepattern');
+            this.app = app;
+        }
+        onPropertyChange(key, nv, ov) {
+            const isPristine = this.formControl?.pristine;
+            if (key === 'tabindex') {
+                return;
+            }
+            if (key === 'timepattern') {
+                this.updateFormat('timepattern');
+            }
+            if (key === 'mintime') {
+                this.minTime = i1.getNativeDateObject(nv, { pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput }); // TODO it is supposed to be time conversion, not to the day
+                this.mintimeMaxtimeValidation();
+            }
+            else if (key === 'maxtime') {
+                this.maxTime = i1.getNativeDateObject(nv, { pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+                this.mintimeMaxtimeValidation();
+            }
+            else {
+                super.onPropertyChange(key, nv, ov);
+            }
+            if ((key === 'mintime' || key === 'maxtime') && isPristine) {
+                this.formControl?.control?.markAsPristine();
+            }
+        }
+        setValidateType(min, max, val) {
+            if (this.timeNotInRange) {
+                if (val < min) {
+                    this.validateType = 'mintime';
+                }
+                else if (val > max) {
+                    this.validateType = 'maxtime';
+                }
+            }
+        }
+        /**
+         * This is an internal method used to validate mintime and maxtime
+         */
+        mintimeMaxtimeValidation() {
+            this.timeNotInRange = this.minTime && this.maxTime && (this.bsTimeValue < this.minTime || this.bsTimeValue > this.maxTime);
+            this.setValidateType(this.minTime, this.maxTime, this.bsTimeValue);
+            this.invokeOnChange(this.datavalue, undefined, false);
+        }
+        /**
+         * This is an internal method used to toggle the dropdown of the time widget
+         */
+        toggleDropdown($event, skipFocus = false) {
+            if (this.loadNativeDateInput) {
+                //Fixes click event getting triggred twice in Mobile devices.
+                if (!skipFocus) {
+                    this.onDateTimeInputFocus();
+                }
+                return;
+            }
+            if ($event.type === 'click') {
+                this.invokeEventCallback('click', { $event: $event });
+                //this.focusOnInputEl();
+            }
+            if ($event.target && $($event.target).is('input') && !(this.isDropDownDisplayEnabledOnInput(this.showdropdownon))) {
+                return;
+            }
+            this.ngZone.run(() => {
+                this.status.isopen = !this.status.isopen;
+            });
+            this.addBodyClickListener(this.status.isopen);
+        }
+        /**
+         * This is an internal method used to Prevent time picker close while changing time value
+         */
+        preventTpClose($event) {
+            $event.stopImmediatePropagation();
+            const parentEl = $(this.nativeElement).closest('.app-composite-widget.caption-floating');
+            if (parentEl.length > 0) {
+                this.app.notify('captionPositionAnimate', { displayVal: this.displayValue, nativeEl: parentEl });
+            }
+        }
+        addBodyClickListener(skipListener) {
+            if (!skipListener) {
+                return;
+            }
+            const bodyElement = document.querySelector('body');
+            setTimeout(() => {
+                const dropdownElement = $(bodyElement).find('>bs-dropdown-container .dropdown-menu').get(0);
+                this.deregisterEventListener = i1.addEventListenerOnElement(bodyElement, dropdownElement, this.nativeElement, 'click', this.isDropDownDisplayEnabledOnInput(this.showdropdownon), () => {
+                    this.status.isopen = false;
+                }, 0 /* EVENT_LIFE.ONCE */, true);
+            }, 350);
+        }
+        /**
+         * This is an internal method triggered when pressing key on the time input
+         */
+        onDisplayKeydown(event) {
+            if (this.isDropDownDisplayEnabledOnInput(this.showdropdownon)) {
+                event.stopPropagation();
+                if (event.key === 'Enter' || event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    this.toggleDropdown(event);
+                }
+                else {
+                    this.hideTimepickerDropdown();
+                }
+            }
+            else {
+                this.hideTimepickerDropdown();
+            }
+        }
+        /**
+         * This is an internal method triggered when the time input changes
+         */
+        onDisplayTimeChange($event) {
+            const newVal = i1.getNativeDateObject($event.target.value?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]), { meridians: this.meridians, pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+            // time pattern validation
+            // if invalid pattern is entered, device is showing an error.
+            if (!this.formatValidation(newVal, $event.target.value)) {
+                return;
+            }
+            this.invalidDateTimeFormat = false;
+            this.onTimeChange(newVal);
+        }
+        onInputBlur($event) {
+            if (!$($event.relatedTarget).hasClass('bs-timepicker-field')) {
+                this.invokeOnTouched();
+                this.invokeEventCallback('blur', { $event });
+            }
+        }
+        /**
+         * This is an internal method used to execute the on time change functionality
+         */
+        onTimeChange(newVal, isNativePicker) {
+            let timeValue, timeInputValue, minTimeMeridian;
+            // For nativePicker, newVal is event, get the dateobject from the event.
+            if (isNativePicker) {
+                newVal = i1.getNativeDateObject(newVal.target.value, { pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+            }
+            if (newVal) {
+                // if the newVal is valid but not in the given range then highlight the input field
+                this.timeNotInRange = this.minTime && this.maxTime && (newVal < this.minTime || newVal > this.maxTime);
+                this.setValidateType(this.minTime, this.maxTime, newVal);
+                if (!this.timeNotInRange) {
+                    this.bsTimeValue = newVal;
+                }
+            } // sometimes library is not returning the correct value when the min and max time are given, displaying the datavalue based on the value given by the user
+            else if (this.bsTimePicker && this.bsTimePicker.min && this.bsTimePicker.max) {
+                minTimeMeridian = moment(new Date(this.bsTimePicker.min)).format('A');
+                moment(new Date(this.bsTimePicker.max)).format('A');
+                timeValue = this.bsTimePicker.hours + ':' + (this.bsTimePicker.minutes || 0) + ':' + (this.bsTimePicker.seconds || 0) + (this.bsTimePicker.showMeridian ? (' ' + minTimeMeridian) : '');
+                timeInputValue = i1.getNativeDateObject(timeValue, { pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+                this.bsTimePicker.meridian = minTimeMeridian?.replace(this.meridians[0], this.am)?.replace(this.meridians[1], this.pm);
+                this.timeNotInRange = this.bsTimePicker.min > timeInputValue || this.bsTimePicker.max < timeInputValue;
+                if (this.timeNotInRange || this.invalidDateTimeFormat) {
+                    this.bsTimeValue = this.getPrevDataValue();
+                    setTimeout(() => {
+                        const timeStr = i1.getFormattedDate(this.datePipe, timeValue, this.timepattern, this.timeZone, null, null, this) || '';
+                        $(this.nativeElement).find('.display-input').val(this.safeReplaceMeridians(timeStr));
+                    });
+                }
+                this.setValidateType(this.bsTimePicker.min, this.bsTimePicker.max, timeInputValue);
+                if (!this.timeNotInRange) {
+                    this.bsTimeValue = timeInputValue;
+                }
+            }
+            // Update UI display if value hasn't changed
+            if (!this.timeNotInRange && this.datavalue === this.getPrevDataValue()) {
+                const displayTime = i1.getFormattedDate(this.datePipe, this.datavalue, this.timepattern, this.timeZone, null, null, this) || '';
+                $(this.nativeElement).find('.display-input').val(this.safeReplaceMeridians(displayTime));
+            }
+            this.invokeOnTouched();
+            this.invokeOnChange(this.datavalue, {}, true);
+        }
+        /**
+         * This is an internal method used to maintain a time interval to update the time model when the data value is set to CURRENT_TIME
+         */
+        setTimeInterval() {
+            if (this.timeinterval) {
+                return;
+            }
+            this.timeinterval = setInterval(() => {
+                const now = this.timeZone ? i1.getMomentLocaleObject(this.timeZone) : new Date();
+                now.setSeconds(now.getSeconds() + 1);
+                this.datavalue = CURRENT_TIME;
+                this.onTimeChange(now);
+            }, 1000);
+        }
+        /**
+         * This is an internal method used to clear the time interval created
+         */
+        clearTimeInterval() {
+            if (this.timeinterval) {
+                clearInterval(this.timeinterval);
+                this.timeinterval = null;
+            }
+        }
+        /**
+         * This function sets the value isOpen/isTimeOpen (i.e when datepicker popup is closed) based on widget type(i.e  DateTime, Time)
+         * @param val - isOpen/isTimeOpen is set based on the timepicker popup is open/closed
+         */
+        setIsTimeOpen(val) {
+            this.status.isopen = val;
+        }
+        // Change event is registered from the template, Prevent the framework from registering one more event
+        handleEvent(node, eventName, eventCallback, locals) {
+            if (!lodashEs.includes(['blur', 'focus', 'change', 'click'], eventName)) {
+                super.handleEvent(node, eventName, eventCallback, locals);
+            }
+        }
+        hideTimepickerDropdown() {
+            this.invokeOnTouched();
+            this.status.isopen = false;
+            if (this.deregisterEventListener) {
+                this.deregisterEventListener();
+            }
+            this.removeKeyupListener();
+            const parentEl = $(this.nativeElement).closest('.app-composite-widget.caption-floating');
+            if (parentEl.length > 0) {
+                this.app.notify('captionPositionAnimate', { displayVal: this.displayValue, nativeEl: parentEl });
+            }
+            this.blurDateInput(true);
+        }
+        isValid(event) {
+            if (!event) {
+                const enteredDate = $(this.nativeElement).find('input').val()?.replace(this.am, this.meridians[0])?.replace(this.pm, this.meridians[1]);
+                const newVal = i1.getNativeDateObject(enteredDate, { meridians: this.meridians, pattern: this.loadNativeDateInput ? this.outputformat : undefined, isNativePicker: this.loadNativeDateInput });
+                if (!this.formatValidation(newVal, enteredDate)) {
+                    return;
+                }
+            }
+        }
+        /**
+         * This is an internal method to add css class for dropdown while opening the time dropdown
+         */
+        onShown() {
+            const tpElements = document.querySelectorAll('timepicker');
+            lodashEs.forEach(tpElements, element => {
+                i1.addClass(element.parentElement, 'app-datetime', true);
+            });
+            if (this.bsDropdown && (this.timeNotInRange || this.invalidDateTimeFormat)) {
+                this.bsTimeValue = null;
+            }
+            this.focusTimePickerPopover(this);
+            this.bindTimePickerKeyboardEvents();
+            i1.adjustContainerPosition($('bs-dropdown-container'), this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
+        }
+        assignModel() {
+            if (!this.displayInputElem) {
+                this.displayInputElem = this.getMobileInput();
+            }
+            this.displayInputElem.value = lodashEs.get(this, 'nativeDisplayValue');
+        }
+        static { this.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: TimeComponent, deps: [{ token: i0__namespace.Injector }, { token: i0__namespace.NgZone }, { token: i1__namespace.AppDefaults }, { token: i1__namespace.App }, { token: 'EXPLICIT_CONTEXT', optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component }); }
+        static { this.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: TimeComponent, isStandalone: true, selector: "[wmTime]", providers: [
+                base.provideAs(TimeComponent, i2.NG_VALUE_ACCESSOR, true),
+                base.provideAs(TimeComponent, i2.NG_VALIDATORS, true),
+                base.provideAsWidgetRef(TimeComponent),
+                { provide: i4.TimepickerConfig, deps: [i1.AbstractI18nService], useFactory: baseDateTime.getTimepickerConfig }
+            ], usesInheritance: true, ngImport: i0__namespace, template: "<div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n  <input [attr.aria-label]=\"arialabel\" class=\"form-control app-textbox display-input\"\n    focus-target\n    [tabindex]=\"tabindex\"\n    [name]=\"name\"\n    type=\"text\"\n    role=\"timer\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled || readonly || isCurrentTime\"\n    [autofocus]=\"autofocus\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.accesskey]=\"shortcutkey\"\n    [attr.aria-atomic]=\"isCurrentTime ? 'true' : 'false'\"\n    [required]=\"required\"\n    [readOnly]=\"isReadOnly\"\n    (click)=\"toggleDropdown($event, true)\"\n    (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n    (blur)=\"onInputBlur($event)\"\n    (change)=\"onDisplayTimeChange($event)\"\n    (keydown)=\"_triggeredByUser = true; onDisplayKeydown($event)\">\n  <span class=\"input-group-btn dropdown-toggle\">\n    <button type=\"button\" class=\"btn btn-default btn-date\" [tabindex]=\"tabindex\" [disabled]=\"disabled || readonly || isCurrentTime\" aria-label=\"Select time\" aria-haspopup=\"true\" aria-expanded=\"false\" (click)=\"toggleDropdown($event, false)\"><i aria-hidden=\"true\" class=\"app-icon wm-sl-l sl-time\"></i></button>\n  </span>\n  <div *dropdownMenu class=\"dropdown-menu\" (click)=\"preventTpClose($event)\">\n    <timepicker class=\"model-holder\"\n      [showMeridian]=\"ismeridian\"\n      [readonlyInput]=\"isDisabled\"\n      [(ngModel)]=\"bsTimeValue\"\n      [ngModelOptions]=\"{standalone: true}\"\n      [disabled]=\"disabled || readonly || isCurrentTime\"\n      [min]=\"minTime\"\n      [max]=\"maxTime\"\n      [hourStep]=\"hourstep\"\n      [minuteStep]=\"minutestep\"\n      [secondsStep]=\"secondsstep\"\n      [mousewheel]=\"true\"\n      [arrowkeys]=\"true\"\n      (isValid)=\"isValid($event)\"\n      [showSeconds]=\"showseconds\" (ngModelChange)=\"onTimeChange($event)\"\n      [ngClass]=\"{ 'showbuttons': showampmbuttons }\"></timepicker>\n      @if (ismeridian && showampmbuttons) {\n          <div class=\"ampm-toggle text-center\">\n              <button class=\"meridian-btn mb-1\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'AM' }\" (click)=\"setPeriod('AM')\">{{appLocale.LABEL_AM ||\"AM\"}}</button><br>\n              <button class=\"meridian-btn\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'PM' }\" (click)=\"setPeriod('PM')\">{{appLocale.LABEL_PM ||\"PM\"}}</button>\n          </div>\n      }\n  </div>\n</div>\n@if (loadNativeDateInput) {\n  <wm-datetimepicker\n    dateTimePicker\n    mode=\"TIME\"\n    [minTime]=\"minTime\"\n    [maxTime]=\"maxTime\"\n    [placement]=\"modal\"\n    [displayFormat]=\"timepattern\"\n    [value]=\"bsTimeValue\"\n    (change)=\"onTimeChange($event)\">\n  </wm-datetimepicker>\n  <div class=\"mobile-input mobile-datepicker-container\"\n    tabindex=\"1000000\"\n    (click)=\"!(disabled || readonly) && showDatePickerModal(bsTimeValue)\"\n    [attr.aria-label]=\"displayValue ? 'Change time  ' + displayValue : arialabel || 'Select time'\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event); assignModel()\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    role=\"button\">\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: i2.FormsModule }, { kind: "directive", type: i2__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: dateTimePicker.DateTimePickerComponent, selector: "wm-datetimepicker", inputs: ["mode", "placement", "config", "minTime", "maxTime", "_displayFormat", "excludedDatesToDisable", "value", "excludedDaysToDisable", "displayFormat"], outputs: ["change"] }, { kind: "ngmodule", type: i3.BsDropdownModule }, { kind: "directive", type: i3__namespace.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i3__namespace.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "ngmodule", type: i4.TimepickerModule }, { kind: "component", type: i4__namespace.TimepickerComponent, selector: "timepicker", inputs: ["hourStep", "minuteStep", "secondsStep", "readonlyInput", "disabled", "mousewheel", "arrowkeys", "showSpinners", "showMeridian", "showMinutes", "showSeconds", "meridians", "min", "max", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder"], outputs: ["isValid", "meridianChange"] }, { kind: "ngmodule", type: i5.CommonModule }, { kind: "directive", type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    }
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0__namespace, type: TimeComponent, decorators: [{
+                type: i0.Component,
+                args: [{ standalone: true, imports: [i2.FormsModule, dateTimePicker.DateTimePickerComponent, i3.BsDropdownModule, i4.TimepickerModule, i5.CommonModule], selector: '[wmTime]', providers: [
+                            base.provideAs(TimeComponent, i2.NG_VALUE_ACCESSOR, true),
+                            base.provideAs(TimeComponent, i2.NG_VALIDATORS, true),
+                            base.provideAsWidgetRef(TimeComponent),
+                            { provide: i4.TimepickerConfig, deps: [i1.AbstractI18nService], useFactory: baseDateTime.getTimepickerConfig }
+                        ], template: "<div dropdown [isOpen]=\"status.isopen\" (onShown)=\"onShown()\" (onHidden)=\"hideTimepickerDropdown()\" [container]=\"'body'\" style=\"display: inherit\">\n  <input [attr.aria-label]=\"arialabel\" class=\"form-control app-textbox display-input\"\n    focus-target\n    [tabindex]=\"tabindex\"\n    [name]=\"name\"\n    type=\"text\"\n    role=\"timer\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled || readonly || isCurrentTime\"\n    [autofocus]=\"autofocus\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.accesskey]=\"shortcutkey\"\n    [attr.aria-atomic]=\"isCurrentTime ? 'true' : 'false'\"\n    [required]=\"required\"\n    [readOnly]=\"isReadOnly\"\n    (click)=\"toggleDropdown($event, true)\"\n    (focus)=\"onDateTimeInputFocus(); invokeOnFocus($event);\"\n    (blur)=\"onInputBlur($event)\"\n    (change)=\"onDisplayTimeChange($event)\"\n    (keydown)=\"_triggeredByUser = true; onDisplayKeydown($event)\">\n  <span class=\"input-group-btn dropdown-toggle\">\n    <button type=\"button\" class=\"btn btn-default btn-date\" [tabindex]=\"tabindex\" [disabled]=\"disabled || readonly || isCurrentTime\" aria-label=\"Select time\" aria-haspopup=\"true\" aria-expanded=\"false\" (click)=\"toggleDropdown($event, false)\"><i aria-hidden=\"true\" class=\"app-icon wm-sl-l sl-time\"></i></button>\n  </span>\n  <div *dropdownMenu class=\"dropdown-menu\" (click)=\"preventTpClose($event)\">\n    <timepicker class=\"model-holder\"\n      [showMeridian]=\"ismeridian\"\n      [readonlyInput]=\"isDisabled\"\n      [(ngModel)]=\"bsTimeValue\"\n      [ngModelOptions]=\"{standalone: true}\"\n      [disabled]=\"disabled || readonly || isCurrentTime\"\n      [min]=\"minTime\"\n      [max]=\"maxTime\"\n      [hourStep]=\"hourstep\"\n      [minuteStep]=\"minutestep\"\n      [secondsStep]=\"secondsstep\"\n      [mousewheel]=\"true\"\n      [arrowkeys]=\"true\"\n      (isValid)=\"isValid($event)\"\n      [showSeconds]=\"showseconds\" (ngModelChange)=\"onTimeChange($event)\"\n      [ngClass]=\"{ 'showbuttons': showampmbuttons }\"></timepicker>\n      @if (ismeridian && showampmbuttons) {\n          <div class=\"ampm-toggle text-center\">\n              <button class=\"meridian-btn mb-1\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'AM' }\" (click)=\"setPeriod('AM')\">{{appLocale.LABEL_AM ||\"AM\"}}</button><br>\n              <button class=\"meridian-btn\" [ngClass]=\"{ 'active btn-secondary': getPeriod() === 'PM' }\" (click)=\"setPeriod('PM')\">{{appLocale.LABEL_PM ||\"PM\"}}</button>\n          </div>\n      }\n  </div>\n</div>\n@if (loadNativeDateInput) {\n  <wm-datetimepicker\n    dateTimePicker\n    mode=\"TIME\"\n    [minTime]=\"minTime\"\n    [maxTime]=\"maxTime\"\n    [placement]=\"modal\"\n    [displayFormat]=\"timepattern\"\n    [value]=\"bsTimeValue\"\n    (change)=\"onTimeChange($event)\">\n  </wm-datetimepicker>\n  <div class=\"mobile-input mobile-datepicker-container\"\n    tabindex=\"1000000\"\n    (click)=\"!(disabled || readonly) && showDatePickerModal(bsTimeValue)\"\n    [attr.aria-label]=\"displayValue ? 'Change time  ' + displayValue : arialabel || 'Select time'\"\n    (focus)=\"onDateTimeInputFocus(true); invokeOnFocus($event); assignModel()\"\n    (blur)=\"onDateTimeInputBlur(); invokeOnTouched($event)\"\n    role=\"button\">\n  </div>\n}\n" }]
+            }], ctorParameters: () => [{ type: i0__namespace.Injector }, { type: i0__namespace.NgZone }, { type: i1__namespace.AppDefaults }, { type: i1__namespace.App }, { type: undefined, decorators: [{
+                        type: i0.Inject,
+                        args: ['EXPLICIT_CONTEXT']
+                    }, {
+                        type: i0.Optional
+                    }] }] });
+
+    exports.TimeComponent = TimeComponent;
+
+}));