@agorapulse/ui-components 2.5.0 → 2.5.1

package/bundles/agorapulse-ui-components.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/overlay'), require('@angular/flex-layout'), require('@angular/forms'), require('@angular/material/badge'), require('@angular/material/bottom-sheet'), require('@angular/material/button'), require('@angular/material/button-toggle'), require('@angular/material/card'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/dialog'), require('@angular/material/divider'), require('@angular/material/expansion'), require('@angular/material/grid-list'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/menu'), require('@angular/material/progress-bar'), require('@angular/material/progress-spinner'), require('@angular/material/radio'), require('@angular/material/sidenav'), require('@angular/material/slider'), require('@angular/material/slide-toggle'), require('@angular/material/snack-bar'), require('@angular/material/stepper'), require('@angular/material/table'), require('@angular/material/tabs'), require('@angular/material/toolbar'), require('@ng-select/ng-select'), require('moment'), require('@angular/animations'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/scrolling'), require('@angular/platform-browser'), require('@angular/cdk/portal'), require('ngx-daterangepicker-material'), require('@agorapulse/ui-symbol')) :
-    typeof define === 'function' && define.amd ? define('@agorapulse/ui-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/overlay', '@angular/flex-layout', '@angular/forms', '@angular/material/badge', '@angular/material/bottom-sheet', '@angular/material/button', '@angular/material/button-toggle', '@angular/material/card', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/dialog', '@angular/material/divider', '@angular/material/expansion', '@angular/material/grid-list', '@angular/material/icon', '@angular/material/list', '@angular/material/menu', '@angular/material/progress-bar', '@angular/material/progress-spinner', '@angular/material/radio', '@angular/material/sidenav', '@angular/material/slider', '@angular/material/slide-toggle', '@angular/material/snack-bar', '@angular/material/stepper', '@angular/material/table', '@angular/material/tabs', '@angular/material/toolbar', '@ng-select/ng-select', 'moment', '@angular/animations', 'rxjs', 'rxjs/operators', '@angular/cdk/scrolling', '@angular/platform-browser', '@angular/cdk/portal', 'ngx-daterangepicker-material', '@agorapulse/ui-symbol'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.agorapulse = global.agorapulse || {}, global.agorapulse["ui-components"] = {}), global.ng.core, global.ng.common, global.ng.cdk.overlay, global.ng.flexLayout, global.ng.forms, global.ng.material.badge, global.ng.material.bottomSheet, global.ng.material.button, global.ng.material.buttonToggle, global.ng.material.card, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.dialog, global.ng.material.divider, global.ng.material.expansion, global.ng.material.gridList, global.ng.material.icon, global.ng.material.list, global.ng.material.menu, global.ng.material.progressBar, global.ng.material.progressSpinner, global.ng.material.radio, global.ng.material.sidenav, global.ng.material.slider, global.ng.material.slideToggle, global.ng.material.snackBar, global.ng.material.stepper, global.ng.material.table, global.ng.material.tabs, global.ng.material.toolbar, global.ngSelect, global.moment, global.ng.animations, global.rxjs, global.rxjs.operators, global.ng.cdk.scrolling, global.ng.platformBrowser, global.ng.cdk.portal, global.ngxDaterangepickerMaterial, global.uiSymbol));
-})(this, (function (exports, i0, common, overlay, flexLayout, forms, badge, bottomSheet, button, buttonToggle, card, checkbox, chips, dialog, divider, expansion, gridList, icon, list, menu, progressBar, progressSpinner, radio, sidenav, slider, slideToggle, snackBar, stepper, table, tabs, toolbar, ngSelect, moment, animations, rxjs, operators, scrolling, i1, portal, ngxDaterangepickerMaterial, uiSymbol) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/overlay'), require('@angular/flex-layout'), require('@angular/forms'), require('@angular/material/badge'), require('@angular/material/bottom-sheet'), require('@angular/material/button'), require('@angular/material/button-toggle'), require('@angular/material/card'), require('@angular/material/checkbox'), require('@angular/material/chips'), require('@angular/material/dialog'), require('@angular/material/divider'), require('@angular/material/expansion'), require('@angular/material/grid-list'), require('@angular/material/icon'), require('@angular/material/list'), require('@angular/material/menu'), require('@angular/material/progress-bar'), require('@angular/material/progress-spinner'), require('@angular/material/radio'), require('@angular/material/sidenav'), require('@angular/material/slider'), require('@angular/material/slide-toggle'), require('@angular/material/snack-bar'), require('@angular/material/stepper'), require('@angular/material/table'), require('@angular/material/tabs'), require('@angular/material/toolbar'), require('@ng-select/ng-select'), require('moment'), require('@angular/animations'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/scrolling'), require('date-fns/format'), require('date-fns/parse'), require('imask'), require('@angular/platform-browser'), require('@angular/cdk/portal'), require('ngx-daterangepicker-material'), require('@agorapulse/ui-symbol'), require('angular-imask')) :
+    typeof define === 'function' && define.amd ? define('@agorapulse/ui-components', ['exports', '@angular/core', '@angular/common', '@angular/cdk/overlay', '@angular/flex-layout', '@angular/forms', '@angular/material/badge', '@angular/material/bottom-sheet', '@angular/material/button', '@angular/material/button-toggle', '@angular/material/card', '@angular/material/checkbox', '@angular/material/chips', '@angular/material/dialog', '@angular/material/divider', '@angular/material/expansion', '@angular/material/grid-list', '@angular/material/icon', '@angular/material/list', '@angular/material/menu', '@angular/material/progress-bar', '@angular/material/progress-spinner', '@angular/material/radio', '@angular/material/sidenav', '@angular/material/slider', '@angular/material/slide-toggle', '@angular/material/snack-bar', '@angular/material/stepper', '@angular/material/table', '@angular/material/tabs', '@angular/material/toolbar', '@ng-select/ng-select', 'moment', '@angular/animations', 'rxjs', 'rxjs/operators', '@angular/cdk/scrolling', 'date-fns/format', 'date-fns/parse', 'imask', '@angular/platform-browser', '@angular/cdk/portal', 'ngx-daterangepicker-material', '@agorapulse/ui-symbol', 'angular-imask'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.agorapulse = global.agorapulse || {}, global.agorapulse["ui-components"] = {}), global.ng.core, global.ng.common, global.ng.cdk.overlay, global.ng.flexLayout, global.ng.forms, global.ng.material.badge, global.ng.material.bottomSheet, global.ng.material.button, global.ng.material.buttonToggle, global.ng.material.card, global.ng.material.checkbox, global.ng.material.chips, global.ng.material.dialog, global.ng.material.divider, global.ng.material.expansion, global.ng.material.gridList, global.ng.material.icon, global.ng.material.list, global.ng.material.menu, global.ng.material.progressBar, global.ng.material.progressSpinner, global.ng.material.radio, global.ng.material.sidenav, global.ng.material.slider, global.ng.material.slideToggle, global.ng.material.snackBar, global.ng.material.stepper, global.ng.material.table, global.ng.material.tabs, global.ng.material.toolbar, global.ngSelect, global.moment, global.ng.animations, global.rxjs, global.rxjs.operators, global.ng.cdk.scrolling, global.format, global.parse, global.IMask, global.ng.platformBrowser, global.ng.cdk.portal, global.ngxDaterangepickerMaterial, global.uiSymbol, global.angularImask));
+})(this, (function (exports, i0, common, overlay, flexLayout, forms, badge, bottomSheet, button, buttonToggle, card, checkbox, chips, dialog, divider, expansion, gridList, icon, list, menu, progressBar, progressSpinner, radio, sidenav, slider, slideToggle, snackBar, stepper, table, tabs, toolbar, ngSelect, moment, animations, rxjs, operators, scrolling, format, parse, IMask, i1, portal, ngxDaterangepickerMaterial, uiSymbol, angularImask) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,6 +26,9 @@
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+    var format__default = /*#__PURE__*/_interopDefaultLegacy(format);
+    var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
+    var IMask__default = /*#__PURE__*/_interopDefaultLegacy(IMask);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
 
     var AddCommentComponent = /** @class */ (function () {
@@ -2668,6 +2671,375 @@
         timeModelChange: [{ type: i0.Output }]
     };
 
+    var NeoTimepickerComponent = /** @class */ (function () {
+        function NeoTimepickerComponent(changeDetectorRef) {
+            this.changeDetectorRef = changeDetectorRef;
+            this.i18n = {
+                hourLabel: 'Hour',
+                minuteLabel: 'Minute',
+                meridianLabel: 'AM/PM',
+                doneLabel: 'Done',
+                cancelLabel: 'Cancel',
+            };
+            this.disabled = false;
+            this.format = exports.TimeFormat.Default;
+            this.invalid = false;
+            this.placement = 'bottom';
+            this.timeModelChange = new i0.EventEmitter();
+            this.meridians = ['AM', 'PM'];
+            this.imaskDefault = {
+                mask: 'HH:MM',
+                blocks: {
+                    HH: {
+                        mask: IMask__default["default"].MaskedRange,
+                        from: 0,
+                        to: 23,
+                        autofix: 'pad',
+                    },
+                    MM: {
+                        mask: IMask__default["default"].MaskedRange,
+                        from: 0,
+                        to: 59,
+                        autofix: 'pad',
+                    },
+                },
+            };
+            this.imaskMeridian = {
+                mask: 'HH:MM AMPM',
+                blocks: {
+                    HH: {
+                        mask: IMask__default["default"].MaskedRange,
+                        from: 1,
+                        to: 12,
+                        autofix: 'pad',
+                    },
+                    MM: {
+                        mask: IMask__default["default"].MaskedRange,
+                        from: 0,
+                        to: 59,
+                        autofix: 'pad',
+                    },
+                    AMPM: {
+                        mask: IMask__default["default"].MaskedEnum,
+                        enum: ['AM', 'PM']
+                    }
+                },
+                lazy: false,
+                prepare: function (str) {
+                    return str.toUpperCase();
+                },
+            };
+            this.ENTER_KEY = 'Enter';
+            this.ESCAPE_KEY = 'Escape';
+            this.FIX_NUMBER = 10;
+            this.HOURS_MAX = 24;
+            this.HOURS_MERIDIAN_MAX = 12;
+            this.MARGIN = 8;
+            this.MINUTES_MAX = 60;
+            this.TIME_OPTION_HEIGHT = 387;
+            this.TIME_PICKER_DEFAULT_WIDTH = 96;
+            this.TIME_PICKER_MERIDIAN_WIDTH = 152;
+            this.ROW_HEIGHT = 36;
+            this.hours = [];
+            this.minutes = [];
+            this.position = null;
+            this.TimeFormat = exports.TimeFormat;
+        }
+        NeoTimepickerComponent.prototype.onKeypress = function (event) {
+            if (this.timepickerOpened) {
+                if (event.code === this.ENTER_KEY) {
+                    this.onSaveSelection();
+                }
+                if (event.code === this.ESCAPE_KEY) {
+                    this.onCancelSelection();
+                }
+            }
+        };
+        NeoTimepickerComponent.prototype.ngOnInit = function () {
+            this.generateTimeSlots();
+            this.onTimeModelChange();
+        };
+        NeoTimepickerComponent.prototype.ngOnChanges = function (changes) {
+            var _this = this;
+            var _a, _b, _c;
+            this.generateTimeSlots();
+            if ((_a = changes.format) === null || _a === void 0 ? void 0 : _a.currentValue) {
+                this.timeFormat = this.format === exports.TimeFormat.Default ? 'HH:mm' : 'hh:mm a';
+                if (this.format === exports.TimeFormat.Default && this.meridians.some(function (meridian) { var _a; return (_a = _this.timeModel) === null || _a === void 0 ? void 0 : _a.endsWith(meridian); })) {
+                    this.timeModel = NeoTimepickerComponent.convert12To24(this.timeModel);
+                }
+                else if (this.format === exports.TimeFormat.Meridian && this.meridians.every(function (meridian) { var _a; return !((_a = _this.timeModel) === null || _a === void 0 ? void 0 : _a.endsWith(meridian)); })) {
+                    this.timeModel = NeoTimepickerComponent.convert24To12(this.timeModel);
+                }
+                setTimeout(function () { return _this.changeDetectorRef.markForCheck(); });
+            }
+            if ((_b = changes.placement) === null || _b === void 0 ? void 0 : _b.currentValue) {
+                this.updateTimePickerPosition();
+            }
+            if ((_c = changes.format) === null || _c === void 0 ? void 0 : _c.currentValue) {
+                this.updateTimePickerPosition();
+            }
+        };
+        NeoTimepickerComponent.prototype.onOpenTimepicker = function () {
+            var _this = this;
+            this.destroy$ = new rxjs.Subject();
+            this.previousValue = this.timeModel;
+            this.timepickerOpened = true;
+            this.timepickerClosed = false;
+            this.updateTimePickerPosition();
+            setTimeout(function () {
+                _this.updateElementPosition('minute', _this.selectedMinute, 'auto');
+                _this.updateElementPosition('hour', _this.selectedHour, 'auto');
+                _this.updateElementPosition('meridian', _this.selectedMeridian, 'auto');
+                _this.inputBox.nativeElement.focus();
+                _this.inputBox.nativeElement.select();
+            }, 1);
+            this.changeDetectorRef.markForCheck();
+        };
+        NeoTimepickerComponent.prototype.onTimepickerOpened = function () {
+            var _this = this;
+            this.hoursScrollObserver$ = this.onObserveElementScroll(this.hourOptions.nativeElement);
+            this.minutesScrollObserver$ = this.onObserveElementScroll(this.minutesOptions.nativeElement);
+            this.hoursScrollObserver$.subscribe(function (indexToScroll) {
+                _this.updateTimeModel(_this.hours[indexToScroll], _this.selectedMinute, _this.selectedMeridian);
+            });
+            this.minutesScrollObserver$.subscribe(function (indexToScroll) {
+                _this.updateTimeModel(_this.selectedHour, _this.minutes[indexToScroll], _this.selectedMeridian);
+            });
+            if (this.format === exports.TimeFormat.Meridian) {
+                this.meridiansScrollObserver$ = this.onObserveElementScroll(this.meridiansOptions.nativeElement);
+                this.meridiansScrollObserver$.subscribe(function (indexToScroll) {
+                    _this.updateTimeModel(_this.selectedHour, _this.selectedMinute, _this.meridians[indexToScroll]);
+                });
+            }
+        };
+        NeoTimepickerComponent.prototype.onObserveElementScroll = function (element) {
+            var _this = this;
+            return rxjs.fromEvent(element, 'scroll').pipe(operators.debounceTime(150), operators.distinctUntilChanged(), operators.takeUntil(this.destroy$), operators.map(function () {
+                return Math.round(element.scrollTop / _this.ROW_HEIGHT);
+            }));
+        };
+        NeoTimepickerComponent.prototype.onTimePickerClosed = function () {
+            this.onCancelSelection();
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
+        NeoTimepickerComponent.prototype.onTimeModelChange = function () {
+            var date = new Date();
+            if (this.timeModel) {
+                date = parse__default["default"](this.timeModel, this.timeFormat, new Date());
+            }
+            this.timeModel = format__default["default"](date, this.timeFormat);
+            if (!this.previousValue) {
+                this.previousValue = this.timeModel;
+            }
+            var jsHour = date.getHours();
+            if (this.format === exports.TimeFormat.Meridian) {
+                if (jsHour > 12) {
+                    jsHour = jsHour - 12;
+                }
+                // JS doesn't handle well AM/PM hour so 12:53 PM will be 00:53 ...
+                if (jsHour == 0) {
+                    jsHour = 12;
+                }
+            }
+            var hour = NeoTimepickerComponent.toFixed(jsHour.toString(), 10);
+            if (hour != this.selectedHour) {
+                this.selectedHour = hour;
+                this.updateElementPosition('hour', this.selectedHour, 'auto');
+            }
+            var minute = NeoTimepickerComponent.toFixed(date.getMinutes().toString(), 10);
+            if (minute != this.selectedMinute) {
+                this.selectedMinute = minute;
+                this.updateElementPosition('minute', this.selectedMinute, 'auto');
+            }
+            if (this.format === exports.TimeFormat.Meridian && this.selectedMeridian !== this.timeModel.split(' ')[1]) {
+                this.selectedMeridian = this.timeModel.split(' ')[1];
+                this.updateElementPosition('meridian', this.selectedMeridian, 'auto');
+            }
+            this.changeDetectorRef.markForCheck();
+        };
+        NeoTimepickerComponent.prototype.onSelectHour = function (hour) {
+            this.updateTimeModel(hour, this.selectedMinute, this.selectedMeridian);
+        };
+        NeoTimepickerComponent.prototype.onSelectMinute = function (minute) {
+            this.updateTimeModel(this.selectedHour, minute, this.selectedMeridian);
+        };
+        NeoTimepickerComponent.prototype.onSelectMeridian = function (meridian) {
+            this.updateTimeModel(this.selectedHour, this.selectedMinute, meridian);
+        };
+        NeoTimepickerComponent.prototype.onSaveSelection = function () {
+            this.previousValue = this.timeModel;
+            this.timepickerClosed = true;
+            this.timepickerOpened = false;
+            var timeModelValue = parse__default["default"](this.timeModel, this.timeFormat, new Date());
+            this.timeModelChange.emit({
+                hours: timeModelValue.getHours(),
+                minutes: timeModelValue.getMinutes(),
+            });
+            this.changeDetectorRef.markForCheck();
+        };
+        NeoTimepickerComponent.prototype.onCancelSelection = function () {
+            this.timepickerClosed = true;
+            this.timepickerOpened = false;
+            this.timeModel = this.previousValue;
+            this.changeDetectorRef.markForCheck();
+        };
+        NeoTimepickerComponent.prototype.onMaskValidateComplete = function (value) {
+            if (this.timeModel !== value) {
+                this.timeModel = value;
+            }
+            this.onTimeModelChange();
+        };
+        NeoTimepickerComponent.prototype.updateTimeModel = function (hour, minute, meridian) {
+            if (this.format === exports.TimeFormat.Meridian) {
+                this.timeModel = hour + ":" + minute + " " + meridian;
+            }
+            else {
+                this.timeModel = hour + ":" + minute;
+            }
+            this.changeDetectorRef.markForCheck();
+        };
+        NeoTimepickerComponent.prototype.updateElementPosition = function (elementType, id, scrollBehavior) {
+            var element = document.getElementById(elementType + "-" + id);
+            this.scrollToElement(element, scrollBehavior);
+        };
+        NeoTimepickerComponent.prototype.scrollToElement = function (element, behavior) {
+            if (behavior === void 0) { behavior = 'auto'; }
+            if (element) {
+                setTimeout(function () {
+                    element.scrollIntoView({
+                        behavior: behavior,
+                        block: 'center',
+                        inline: 'center'
+                    });
+                }, 1);
+            }
+        };
+        /**
+         * Fullfill minutes and hours arrays like [0, 1, 2 ... 12] and [0, 1, 2, ... 59]
+         */
+        NeoTimepickerComponent.prototype.generateTimeSlots = function () {
+            this.hours = [];
+            this.minutes = [NeoTimepickerComponent.toFixed(0, this.FIX_NUMBER)];
+            for (var i = 1; i <= this.HOURS_MERIDIAN_MAX; i++) {
+                var indexToAdd = NeoTimepickerComponent.toFixed(i, this.FIX_NUMBER);
+                this.hours.push(indexToAdd);
+                this.minutes.push(indexToAdd);
+            }
+            if (this.format === exports.TimeFormat.Default) {
+                this.hours = __spreadArray([NeoTimepickerComponent.toFixed(0, this.FIX_NUMBER)], __read(this.hours));
+                for (var i = 13; i < this.HOURS_MAX; i++) {
+                    this.hours.push(NeoTimepickerComponent.toFixed(i, this.FIX_NUMBER));
+                }
+            }
+            for (var i = 13; i < this.MINUTES_MAX; i++) {
+                this.minutes.push(NeoTimepickerComponent.toFixed(i, this.FIX_NUMBER));
+            }
+            this.changeDetectorRef.markForCheck();
+        };
+        NeoTimepickerComponent.prototype.updateTimePickerPosition = function () {
+            var _a;
+            if ((_a = this.inputBox) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+                var inputBoxBounds = this.inputBox.nativeElement.getBoundingClientRect();
+                var topPosition = inputBoxBounds.top - this.TIME_OPTION_HEIGHT - this.MARGIN;
+                var bottomPosition = inputBoxBounds.top + inputBoxBounds.height;
+                var timePickerWidth = this.format === exports.TimeFormat.Meridian ? this.TIME_PICKER_MERIDIAN_WIDTH : this.TIME_PICKER_DEFAULT_WIDTH;
+                var shift = (timePickerWidth - inputBoxBounds.width) / 2;
+                if (this.placement === 'top') {
+                    this.position = {
+                        top: topPosition < 0 ? bottomPosition : topPosition,
+                        left: inputBoxBounds.left - shift,
+                    };
+                }
+                else {
+                    this.position = {
+                        top: bottomPosition + this.TIME_OPTION_HEIGHT + this.MARGIN > window.innerHeight ? topPosition : bottomPosition,
+                        left: inputBoxBounds.left - shift,
+                    };
+                }
+                this.changeDetectorRef.markForCheck();
+            }
+        };
+        NeoTimepickerComponent.convert12To24 = function (time) {
+            var terms = time.split(':');
+            var minutes = terms[1].substring(0, 2);
+            var meridian = terms[1].trim().slice(-2).toUpperCase();
+            var hour = parseInt(terms[0]);
+            if (!isNaN(parseInt(terms[0]))) {
+                if (meridian === 'PM' && hour < 12) {
+                    hour = hour + 12;
+                }
+                if (meridian === 'AM' && hour === 12) {
+                    hour = 0;
+                }
+            }
+            return hour + ":" + minutes;
+        };
+        NeoTimepickerComponent.convert24To12 = function (time) {
+            var terms = time.split(':');
+            var meridian = 'AM';
+            var hour = parseInt(terms[0]);
+            var minute = parseInt(terms[1]);
+            if (!isNaN(parseInt(terms[0]))) {
+                if (hour >= 12) {
+                    meridian = 'PM';
+                    if (hour > 12) {
+                        hour = hour - 12;
+                    }
+                }
+                if (hour === 0) {
+                    hour = 12;
+                }
+            }
+            var hourStr = NeoTimepickerComponent.toFixed(hour, 10);
+            var minuteStr = NeoTimepickerComponent.toFixed(minute, 10);
+            return hourStr + ":" + minuteStr + " " + meridian;
+        };
+        /**
+         * Return 08 for 8, 06 for 6
+         * @param num
+         * @param fix
+         * @private
+         */
+        NeoTimepickerComponent.toFixed = function (num, fix) {
+            var fixedNum = num.toString();
+            if (num < fix) {
+                fixedNum = "0" + fixedNum;
+            }
+            return fixedNum;
+        };
+        return NeoTimepickerComponent;
+    }());
+    NeoTimepickerComponent.decorators = [
+        { type: i0.Component, args: [{
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    selector: 'ap-neo-timepicker',
+                    template: "<div class=\"time-picker-container\">\n    <ng-template #timeOptionsTemplate>\n        <div class=\"time-picker-options\"\n             [class.meridian]=\"format === TimeFormat.Meridian\"\n             *ngIf=\"timepickerOpened\"\n             #timepicker\n        >\n            <div class=\"header\">\n                <span> {{ i18n.hourLabel }} </span>\n                <span> {{ i18n.minuteLabel }} </span>\n                <span *ngIf=\"format === TimeFormat.Meridian\"> {{ i18n.meridianLabel }} </span>\n            </div>\n            <div class=\"content\">\n                <div class=\"selector\">\n                    <span>:</span>\n                    <span *ngIf=\"format === TimeFormat.Meridian\"></span>\n                </div>\n                <div class=\"options\"\n                    #hourOptions>\n                    <div class=\"invisible-block\"></div>\n                    <div *ngFor=\"let hour of hours;\"\n                        class=\"option\"\n                        [id]=\"'hour-' + hour\"\n                        [class.selected]=\"hour === selectedHour\"\n                        (click)=\"onSelectHour(hour)\">\n                        {{ hour }}\n                    </div>\n                    <div class=\"invisible-block\"></div>\n                </div>\n                <div class=\"divider\"></div>\n                <div class=\"options\"\n                     #minutesOptions>\n                    <div class=\"invisible-block\"></div>\n                    <div *ngFor=\"let minute of minutes;\"\n                         class=\"option\"\n                         [id]=\"'minute-' + minute\"\n                         [class.selected]=\"minute === selectedMinute\"\n                         (click)=\"onSelectMinute(minute)\">\n                        {{ minute }}\n                    </div>\n                    <div class=\"invisible-block\"></div>\n                </div>\n                <div *ngIf=\"format === TimeFormat.Meridian\"\n                     class=\"divider\"></div>\n                <div *ngIf=\"format === TimeFormat.Meridian\"\n                     class=\"options\"\n                     #meridiansOptions>\n                    <div class=\"invisible-block\"></div>\n                    <div *ngFor=\"let meridian of meridians;\"\n                         class=\"option\"\n                         [id]=\"'meridian-' + meridian\"\n                         [class.selected]=\"selectedMeridian === meridian\"\n                         (click)=\"onSelectMeridian(meridian)\">\n                        {{ meridian }}\n                    </div>\n                    <div class=\"invisible-block\"></div>\n                </div>\n            </div>\n            <div class=\"buttons\">\n                <button mat-flat-button\n                        class=\"full-width\"\n                        color=\"primary\"\n                        (click)=\"onSaveSelection()\">\n                    {{ i18n.doneLabel }}\n                </button>\n                <button mat-flat-button\n                        class=\"full-width\"\n                        (click)=\"onCancelSelection()\">\n                    {{ i18n.cancelLabel }}\n                </button>\n            </div>\n        </div>\n    </ng-template>\n    <input #inputBox\n           class=\"time-input\"\n           placement=\"bottom right\"\n           color=\"secondary\"\n           [class.active]=\"timepickerOpened\"\n           [class.invalid]=\"invalid\"\n           [apPopmenu]=\"timeOptionsTemplate\"\n           [apPopmenuBackground]=\"false\"\n           [apPopmenuBorder]=\"false\"\n           [apPopmenuDisabled]=\"timepickerOpened\"\n           [apTooltipNeo]=\"{content: invalidationMessage, display: invalidationMessage && invalid}\"\n           [close]=\"timepickerClosed\"\n           [disabled]=\"disabled\"\n           [imask]=\"format === TimeFormat.Meridian ? imaskMeridian : imaskDefault\"\n           [(ngModel)]=\"timeModel\"\n           [pointer]=\"true\"\n           [position]=\"position\"\n           [rounded]=\"true\"\n           [shadow]=\"false\"\n           (click)=\"onOpenTimepicker()\"\n           (complete)=\"onMaskValidateComplete($event)\"\n           (menuClosed)=\"onTimePickerClosed()\"\n           (menuOpened)=\"onTimepickerOpened()\">\n</div>\n",
+                    styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid red}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #fff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:#0000}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:initial}[border=transparent]{border:1px solid #0000}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.time-picker-container{display:flex}.time-input{width:80px;max-width:80px;text-align:center;padding:0;margin:0;height:36px;line-height:24px}.time-input.active{border-color:#178dfe}.time-picker-options{display:flex;flex-direction:column;width:96px;margin-top:8px;max-width:96px;height:379px;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 3px 10px #00000014}.time-picker-options.meridian{width:152px;max-width:152px}.time-picker-options .header{display:flex;align-items:center;min-height:29px;border-bottom:1px solid #eaecef;color:#344563;font-size:12px;line-height:18px}.time-picker-options .header>span{flex:1;text-align:center}.time-picker-options .content{display:flex;position:relative;min-height:252px;overflow:hidden}.time-picker-options .content .selector{display:flex;justify-content:space-evenly;align-items:center;background-color:#f9f9fa;border-top:1px solid #eaecef;border-bottom:1px solid #eaecef;width:100%;height:34px;position:absolute;top:50%;transform:translateY(-50%);z-index:4;box-sizing:border-box}.time-picker-options .content .divider{height:100%;width:1px;background:#eaecef}.time-picker-options .content .options{flex:1;height:100%;overflow-y:scroll;z-index:5;scroll-snap-type:y mandatory;-ms-overflow-style:none;scrollbar-width:none}.time-picker-options .content .options::-webkit-scrollbar{display:none}.time-picker-options .content .options .invisible-block{min-height:109px;max-height:109px;width:100%}.time-picker-options .content .options .option{min-height:34px;display:flex;z-index:5;justify-content:center;align-items:center;font-size:14px;line-height:17px;color:#aeb5c1;scroll-snap-align:center;padding-block:1px}.time-picker-options .content .options .option:hover{color:#178dfe;cursor:pointer}.time-picker-options .content .options .option.selected{color:#344563!important}.time-picker-options .content .meridian{flex:1;display:flex;flex-direction:column;justify-content:center}.time-picker-options .content .meridian>div{min-height:34px;display:flex;justify-content:center;align-items:center;font-size:14px;line-height:17px;color:#aeb5c1;scroll-snap-align:center}.time-picker-options .buttons{display:flex;flex-direction:column;padding:8px;min-height:96px;border-top:1px solid #eaecef;grid-gap:8px;gap:8px}.time-picker-options .buttons button{font-weight:700;min-width:80px}"]
+                },] }
+    ];
+    /** @nocollapse */
+    NeoTimepickerComponent.ctorParameters = function () { return [
+        { type: i0.ChangeDetectorRef }
+    ]; };
+    NeoTimepickerComponent.propDecorators = {
+        inputBox: [{ type: i0.ViewChild, args: ['inputBox',] }],
+        hourOptions: [{ type: i0.ViewChild, args: ['hourOptions',] }],
+        minutesOptions: [{ type: i0.ViewChild, args: ['minutesOptions',] }],
+        meridiansOptions: [{ type: i0.ViewChild, args: ['meridiansOptions',] }],
+        timepicker: [{ type: i0.ViewChild, args: ['timepicker',] }],
+        i18n: [{ type: i0.Input }],
+        disabled: [{ type: i0.Input }],
+        format: [{ type: i0.Input }],
+        invalid: [{ type: i0.Input }],
+        invalidationMessage: [{ type: i0.Input }],
+        placement: [{ type: i0.Input }],
+        timeModel: [{ type: i0.Input }],
+        timeModelChange: [{ type: i0.Output }],
+        onKeypress: [{ type: i0.HostListener, args: ['window:keydown', ['$event'],] }]
+    };
+
     var NotificationComponent = /** @class */ (function () {
         function NotificationComponent() {
             this.type = 'info';
@@ -4106,6 +4478,7 @@
                         TagListComponent,
                         TagsSelectorComponent,
                         TimepickerComponent,
+                        NeoTimepickerComponent,
                         TryPopupComponent,
                         NotificationComponent,
                         PaginatorComponent,
@@ -4166,6 +4539,8 @@
                         snackBar.MatSnackBarModule,
                         // Table
                         table.MatTableModule,
+                        // Mask
+                        angularImask.IMaskModule
                     ],
                     exports: [
                         forms.FormsModule,
@@ -4199,6 +4574,7 @@
                         TagListComponent,
                         TagsSelectorComponent,
                         TimepickerComponent,
+                        NeoTimepickerComponent,
                         TryPopupComponent,
                         NotificationComponent,
                         PaginatorComponent,
@@ -4438,9 +4814,10 @@
     exports["ɵa"] = OverlayDialogRef;
     exports["ɵb"] = OVERLAY_DATA;
     exports["ɵc"] = PASSWORD_CONTROL_VALUE_ACCESSOR;
-    exports["ɵd"] = TooltipNeoComponent;
-    exports["ɵe"] = TooltipNeoService;
-    exports["ɵf"] = PopmenuOptionsService;
+    exports["ɵd"] = NeoTimepickerComponent;
+    exports["ɵe"] = TooltipNeoComponent;
+    exports["ɵf"] = TooltipNeoService;
+    exports["ɵg"] = PopmenuOptionsService;
 
     Object.defineProperty(exports, '__esModule', { value: true });