@agorapulse/ui-components 0.0.1 → 2.5.1

package/fesm2015/agorapulse-ui-components.js

@@ -33,13 +33,17 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
 import moment from 'moment';
 import { trigger, transition, style, animate, AnimationBuilder } from '@angular/animations';
-import { Subject, of, BehaviorSubject, merge, fromEvent } from 'rxjs';
+import { Subject, of, fromEvent, BehaviorSubject, merge } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged, tap, switchMap, catchError, map, delay } from 'rxjs/operators';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import format from 'date-fns/format';
+import parse from 'date-fns/parse';
+import IMask from 'imask';
 import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
 import { AgorapulseUiSymbolModule } from '@agorapulse/ui-symbol';
+import { IMaskModule } from 'angular-imask';
 
 class AddCommentComponent {
     constructor() {
@@ -659,7 +663,7 @@ class EditTagsModalComponent {
 }
 EditTagsModalComponent.decorators = [
     { type: Component, args: [{
-                template: "<ng-template #headerTemplate>\n    <h2 class=\"title\">\n        {{ data.translatedString.title }}\n    </h2>\n    <p class=\"large\">{{ data.translatedString.subtitle }}</p>\n</ng-template>\n<ng-template #mainTemplate>\n    <div class=\"main-container\">\n        <div class=\"search\">\n            <div class=\"input-group\">\n                <input type=\"text\"\n                       placeholder=\"{{ data.translatedString.searchPlaceholder }}\"\n                       (keyup)=\"onSearch($event.target.value)\">\n                <ap-symbol class=\"input-group-append\"\n                           [symbolId]=\"'search-alternate'\"\n                           [size]=\"'micro'\">\n                </ap-symbol>\n            </div>\n        </div>\n        <div class=\"tags-content\" *ngIf=\"filteredTags\">\n            <div class=\"tag-row\" *ngFor=\"let tag of filteredTags;let i=index\"\n                 [@tagRemoved]=\"deletedTags.includes(filteredTags[i]) ? 'deleted' : 'valid'\">\n                <span *ngIf=\"tagEditedIndex !== i\" [class.disabled]=\"tagEditedIndex !== null\"> {{tag}} </span>\n                <input type=\"text\" *ngIf=\"tagEditedIndex === i\" [value]=\"filteredTags[i]\"\n                       (keyup)=\"onValidateEnter($event, i)\" #tagInput/>\n                <div class=\"button-container\">\n                    <img alt=\"spinner-loading\" width=\"20\" height=\"20\" src=\"assets/lib-ui-components/img/spinner_animation.gif\"\n                         *ngIf=\"updateStatusByTags?.get(filteredTags[i]) || updateStatusByTags?.get(tag)\"/>\n                    <div class=\"edit-label saved-label\"\n                         *ngIf=\"updateStatusByTags?.get(filteredTags[i]) === false && tagEditedIndex != i && savingTags.includes(filteredTags[i])\"\n                         [@tagSaved]>\n                        <ap-symbol [symbolId]=\"'check-1'\" [size]=\"'pico'\"></ap-symbol>\n                        {{ data.translatedString.savedLabel }}\n                    </div>\n                    <div class=\"edit-label deleted-label\"\n                         *ngIf=\"updateStatusByTags?.get(filteredTags[i]) === false && updatedTags && updatedTags.has(tag) && updatedTags.get(tag) === null\">\n                        <ap-symbol [symbolId]=\"'delete-2-alternate'\" [size]=\"'pico'\"></ap-symbol>\n                        {{ data.translatedString.deletedLabel }}\n                    </div>\n                    <button mat-flat-button *ngIf=\"tagEditedIndex !== i\"\n                            class=\"circle edit-button\"\n                            (click)=\"onEdit(i)\">\n                        <ap-symbol [symbolId]=\"'pencil-2'\"></ap-symbol>\n                    </button>\n                    <div *ngIf=\"tagEditedIndex === i\">\n                        <button mat-flat-button\n                                class=\"circle button-action button-validate\"\n                                [apTooltipNeo]=\"{content: data.translatedString.validateTooltip}\"\n                                [color]=\"'#858fa1'\"\n                                (click)=\"onValidateInput(i)\">\n                            <ap-symbol symbolId=\"check-2\"></ap-symbol>\n                        </button>\n                        <button mat-flat-button\n                                class=\"circle button-action button-cancel\"\n                                [apTooltipNeo]=\"{content: data.translatedString.cancelTooltip}\"\n                                [color]=\"'#858fa1'\"\n                                (click)=\"cancelEdit()\">\n                            <ap-symbol symbolId=\"delete-2-alternate\"></ap-symbol>\n                        </button>\n                        <button mat-flat-button\n                                class=\"circle button-action button-remove\"\n                                [apTooltipNeo]=\"{content: data.translatedString.deleteTooltip}\"\n                                [color]=\"'#858fa1'\"\n                                (click)=\"onRemove(tag)\">\n                            <ap-symbol symbolId=\"bin-2\"></ap-symbol>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n        <div class=\"loader\">\n            <img alt=\"spinner-loading\" src=\"assets/lib-ui-components/img/spinner_animation.gif\"\n                 *ngIf=\"!filteredTags\"/>\n        </div>\n    </div>\n</ng-template>\n<ng-template #footerTemplate>\n    <div class=\"footer\">\n        <div>\n            <button mat-flat-button class=\"done-button\" (click)=\"onDone()\" color=\"primary\">\n                {{data.translatedString.doneLabel}}\n            </button>\n        </div>\n    </div>\n\n</ng-template>\n\n<ap-modal class=\"design-system\"\n          closable=\"true\"\n          [headerTemplate]=\"headerTemplate\"\n          [mainTemplate]=\"mainTemplate\"\n          [footerTemplate]=\"footerTemplate\"></ap-modal>\n",
+                template: "<ng-template #headerTemplate>\n    <h2 class=\"title\">\n        {{ data.translatedString.title }}\n    </h2>\n    <p class=\"large\">{{ data.translatedString.subtitle }}</p>\n</ng-template>\n<ng-template #mainTemplate>\n    <div class=\"main-container\">\n        <div class=\"search\">\n            <div class=\"input-group\">\n                <input type=\"text\"\n                       placeholder=\"{{ data.translatedString.searchPlaceholder }}\"\n                       (keyup)=\"onSearch($event.target.value)\">\n                <ap-symbol class=\"input-group-append\"\n                           [symbolId]=\"'search-alternate'\"\n                           [size]=\"'micro'\">\n                </ap-symbol>\n            </div>\n        </div>\n        <div class=\"tags-content\" *ngIf=\"filteredTags\">\n            <div class=\"tag-row\" *ngFor=\"let tag of filteredTags;let i=index\"\n                 [@tagRemoved]=\"deletedTags.includes(filteredTags[i]) ? 'deleted' : 'valid'\">\n                <span *ngIf=\"tagEditedIndex !== i\" [class.disabled]=\"tagEditedIndex !== null\"> {{tag}} </span>\n                <input type=\"text\" *ngIf=\"tagEditedIndex === i\" [value]=\"filteredTags[i]\"\n                       (keyup)=\"onValidateEnter($event, i)\" #tagInput/>\n                <div class=\"button-container\">\n                    <img alt=\"spinner-loading\" width=\"20\" height=\"20\" src=\"../../assets/img/spinner_animation.gif\"\n                         *ngIf=\"updateStatusByTags?.get(filteredTags[i]) || updateStatusByTags?.get(tag)\"/>\n                    <div class=\"edit-label saved-label\"\n                         *ngIf=\"updateStatusByTags?.get(filteredTags[i]) === false && tagEditedIndex != i && savingTags.includes(filteredTags[i])\"\n                         [@tagSaved]>\n                        <ap-symbol [symbolId]=\"'check-1'\" [size]=\"'pico'\"></ap-symbol>\n                        {{ data.translatedString.savedLabel }}\n                    </div>\n                    <div class=\"edit-label deleted-label\"\n                         *ngIf=\"updateStatusByTags?.get(filteredTags[i]) === false && updatedTags && updatedTags.has(tag) && updatedTags.get(tag) === null\">\n                        <ap-symbol [symbolId]=\"'delete-2-alternate'\" [size]=\"'pico'\"></ap-symbol>\n                        {{ data.translatedString.deletedLabel }}\n                    </div>\n                    <button mat-flat-button *ngIf=\"tagEditedIndex !== i\"\n                            class=\"circle edit-button\"\n                            (click)=\"onEdit(i)\">\n                        <ap-symbol [symbolId]=\"'pencil-2'\"></ap-symbol>\n                    </button>\n                    <div *ngIf=\"tagEditedIndex === i\">\n                        <button mat-flat-button\n                                class=\"circle button-action button-validate\"\n                                [apTooltipNeo]=\"{content: data.translatedString.validateTooltip}\"\n                                [color]=\"'#858fa1'\"\n                                (click)=\"onValidateInput(i)\">\n                            <ap-symbol symbolId=\"check-2\"></ap-symbol>\n                        </button>\n                        <button mat-flat-button\n                                class=\"circle button-action button-cancel\"\n                                [apTooltipNeo]=\"{content: data.translatedString.cancelTooltip}\"\n                                [color]=\"'#858fa1'\"\n                                (click)=\"cancelEdit()\">\n                            <ap-symbol symbolId=\"delete-2-alternate\"></ap-symbol>\n                        </button>\n                        <button mat-flat-button\n                                class=\"circle button-action button-remove\"\n                                [apTooltipNeo]=\"{content: data.translatedString.deleteTooltip}\"\n                                [color]=\"'#858fa1'\"\n                                (click)=\"onRemove(tag)\">\n                            <ap-symbol symbolId=\"bin-2\"></ap-symbol>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n        <div class=\"loader\">\n            <img alt=\"spinner-loading\" src=\"../../assets/img/spinner_animation.gif\"\n                 *ngIf=\"!filteredTags\"/>\n        </div>\n    </div>\n</ng-template>\n<ng-template #footerTemplate>\n    <div class=\"footer\">\n        <div>\n            <button mat-flat-button class=\"done-button\" (click)=\"onDone()\" color=\"primary\">\n                {{data.translatedString.doneLabel}}\n            </button>\n        </div>\n    </div>\n\n</ng-template>\n\n<ap-modal class=\"design-system\"\n          closable=\"true\"\n          [headerTemplate]=\"headerTemplate\"\n          [mainTemplate]=\"mainTemplate\"\n          [footerTemplate]=\"footerTemplate\"></ap-modal>\n",
                 animations: [
                     trigger('tagSaved', [
                         transition('void => *', [
@@ -2193,6 +2197,369 @@ TimepickerComponent.propDecorators = {
     timeModelChange: [{ type: Output }]
 };
 
+class NeoTimepickerComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.i18n = {
+            hourLabel: 'Hour',
+            minuteLabel: 'Minute',
+            meridianLabel: 'AM/PM',
+            doneLabel: 'Done',
+            cancelLabel: 'Cancel',
+        };
+        this.disabled = false;
+        this.format = TimeFormat.Default;
+        this.invalid = false;
+        this.placement = 'bottom';
+        this.timeModelChange = new EventEmitter();
+        this.meridians = ['AM', 'PM'];
+        this.imaskDefault = {
+            mask: 'HH:MM',
+            blocks: {
+                HH: {
+                    mask: IMask.MaskedRange,
+                    from: 0,
+                    to: 23,
+                    autofix: 'pad',
+                },
+                MM: {
+                    mask: IMask.MaskedRange,
+                    from: 0,
+                    to: 59,
+                    autofix: 'pad',
+                },
+            },
+        };
+        this.imaskMeridian = {
+            mask: 'HH:MM AMPM',
+            blocks: {
+                HH: {
+                    mask: IMask.MaskedRange,
+                    from: 1,
+                    to: 12,
+                    autofix: 'pad',
+                },
+                MM: {
+                    mask: IMask.MaskedRange,
+                    from: 0,
+                    to: 59,
+                    autofix: 'pad',
+                },
+                AMPM: {
+                    mask: IMask.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 = TimeFormat;
+    }
+    onKeypress(event) {
+        if (this.timepickerOpened) {
+            if (event.code === this.ENTER_KEY) {
+                this.onSaveSelection();
+            }
+            if (event.code === this.ESCAPE_KEY) {
+                this.onCancelSelection();
+            }
+        }
+    }
+    ngOnInit() {
+        this.generateTimeSlots();
+        this.onTimeModelChange();
+    }
+    ngOnChanges(changes) {
+        var _a, _b, _c;
+        this.generateTimeSlots();
+        if ((_a = changes.format) === null || _a === void 0 ? void 0 : _a.currentValue) {
+            this.timeFormat = this.format === TimeFormat.Default ? 'HH:mm' : 'hh:mm a';
+            if (this.format === TimeFormat.Default && this.meridians.some(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 === TimeFormat.Meridian && this.meridians.every(meridian => { var _a; return !((_a = this.timeModel) === null || _a === void 0 ? void 0 : _a.endsWith(meridian)); })) {
+                this.timeModel = NeoTimepickerComponent.convert24To12(this.timeModel);
+            }
+            setTimeout(() => 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();
+        }
+    }
+    onOpenTimepicker() {
+        this.destroy$ = new Subject();
+        this.previousValue = this.timeModel;
+        this.timepickerOpened = true;
+        this.timepickerClosed = false;
+        this.updateTimePickerPosition();
+        setTimeout(() => {
+            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();
+    }
+    onTimepickerOpened() {
+        this.hoursScrollObserver$ = this.onObserveElementScroll(this.hourOptions.nativeElement);
+        this.minutesScrollObserver$ = this.onObserveElementScroll(this.minutesOptions.nativeElement);
+        this.hoursScrollObserver$.subscribe((indexToScroll) => {
+            this.updateTimeModel(this.hours[indexToScroll], this.selectedMinute, this.selectedMeridian);
+        });
+        this.minutesScrollObserver$.subscribe((indexToScroll) => {
+            this.updateTimeModel(this.selectedHour, this.minutes[indexToScroll], this.selectedMeridian);
+        });
+        if (this.format === TimeFormat.Meridian) {
+            this.meridiansScrollObserver$ = this.onObserveElementScroll(this.meridiansOptions.nativeElement);
+            this.meridiansScrollObserver$.subscribe((indexToScroll) => {
+                this.updateTimeModel(this.selectedHour, this.selectedMinute, this.meridians[indexToScroll]);
+            });
+        }
+    }
+    onObserveElementScroll(element) {
+        return fromEvent(element, 'scroll').pipe(debounceTime(150), distinctUntilChanged(), takeUntil(this.destroy$), map(() => {
+            return Math.round(element.scrollTop / this.ROW_HEIGHT);
+        }));
+    }
+    onTimePickerClosed() {
+        this.onCancelSelection();
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onTimeModelChange() {
+        let date = new Date();
+        if (this.timeModel) {
+            date = parse(this.timeModel, this.timeFormat, new Date());
+        }
+        this.timeModel = format(date, this.timeFormat);
+        if (!this.previousValue) {
+            this.previousValue = this.timeModel;
+        }
+        let jsHour = date.getHours();
+        if (this.format === 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;
+            }
+        }
+        const hour = NeoTimepickerComponent.toFixed(jsHour.toString(), 10);
+        if (hour != this.selectedHour) {
+            this.selectedHour = hour;
+            this.updateElementPosition('hour', this.selectedHour, 'auto');
+        }
+        const minute = NeoTimepickerComponent.toFixed(date.getMinutes().toString(), 10);
+        if (minute != this.selectedMinute) {
+            this.selectedMinute = minute;
+            this.updateElementPosition('minute', this.selectedMinute, 'auto');
+        }
+        if (this.format === TimeFormat.Meridian && this.selectedMeridian !== this.timeModel.split(' ')[1]) {
+            this.selectedMeridian = this.timeModel.split(' ')[1];
+            this.updateElementPosition('meridian', this.selectedMeridian, 'auto');
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    onSelectHour(hour) {
+        this.updateTimeModel(hour, this.selectedMinute, this.selectedMeridian);
+    }
+    onSelectMinute(minute) {
+        this.updateTimeModel(this.selectedHour, minute, this.selectedMeridian);
+    }
+    onSelectMeridian(meridian) {
+        this.updateTimeModel(this.selectedHour, this.selectedMinute, meridian);
+    }
+    onSaveSelection() {
+        this.previousValue = this.timeModel;
+        this.timepickerClosed = true;
+        this.timepickerOpened = false;
+        const timeModelValue = parse(this.timeModel, this.timeFormat, new Date());
+        this.timeModelChange.emit({
+            hours: timeModelValue.getHours(),
+            minutes: timeModelValue.getMinutes(),
+        });
+        this.changeDetectorRef.markForCheck();
+    }
+    onCancelSelection() {
+        this.timepickerClosed = true;
+        this.timepickerOpened = false;
+        this.timeModel = this.previousValue;
+        this.changeDetectorRef.markForCheck();
+    }
+    onMaskValidateComplete(value) {
+        if (this.timeModel !== value) {
+            this.timeModel = value;
+        }
+        this.onTimeModelChange();
+    }
+    updateTimeModel(hour, minute, meridian) {
+        if (this.format === TimeFormat.Meridian) {
+            this.timeModel = `${hour}:${minute} ${meridian}`;
+        }
+        else {
+            this.timeModel = `${hour}:${minute}`;
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    updateElementPosition(elementType, id, scrollBehavior) {
+        const element = document.getElementById(`${elementType}-${id}`);
+        this.scrollToElement(element, scrollBehavior);
+    }
+    scrollToElement(element, behavior = 'auto') {
+        if (element) {
+            setTimeout(() => {
+                element.scrollIntoView({
+                    behavior,
+                    block: 'center',
+                    inline: 'center'
+                });
+            }, 1);
+        }
+    }
+    /**
+     * Fullfill minutes and hours arrays like [0, 1, 2 ... 12] and [0, 1, 2, ... 59]
+     */
+    generateTimeSlots() {
+        this.hours = [];
+        this.minutes = [NeoTimepickerComponent.toFixed(0, this.FIX_NUMBER)];
+        for (let i = 1; i <= this.HOURS_MERIDIAN_MAX; i++) {
+            const indexToAdd = NeoTimepickerComponent.toFixed(i, this.FIX_NUMBER);
+            this.hours.push(indexToAdd);
+            this.minutes.push(indexToAdd);
+        }
+        if (this.format === TimeFormat.Default) {
+            this.hours = [NeoTimepickerComponent.toFixed(0, this.FIX_NUMBER), ...this.hours];
+            for (let i = 13; i < this.HOURS_MAX; i++) {
+                this.hours.push(NeoTimepickerComponent.toFixed(i, this.FIX_NUMBER));
+            }
+        }
+        for (let i = 13; i < this.MINUTES_MAX; i++) {
+            this.minutes.push(NeoTimepickerComponent.toFixed(i, this.FIX_NUMBER));
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    updateTimePickerPosition() {
+        var _a;
+        if ((_a = this.inputBox) === null || _a === void 0 ? void 0 : _a.nativeElement) {
+            const inputBoxBounds = this.inputBox.nativeElement.getBoundingClientRect();
+            const topPosition = inputBoxBounds.top - this.TIME_OPTION_HEIGHT - this.MARGIN;
+            const bottomPosition = inputBoxBounds.top + inputBoxBounds.height;
+            const timePickerWidth = this.format === TimeFormat.Meridian ? this.TIME_PICKER_MERIDIAN_WIDTH : this.TIME_PICKER_DEFAULT_WIDTH;
+            const 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();
+        }
+    }
+    static convert12To24(time) {
+        const terms = time.split(':');
+        const minutes = terms[1].substring(0, 2);
+        const meridian = terms[1].trim().slice(-2).toUpperCase();
+        let 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}`;
+    }
+    static convert24To12(time) {
+        const terms = time.split(':');
+        let meridian = 'AM';
+        let hour = parseInt(terms[0]);
+        let 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;
+            }
+        }
+        const hourStr = NeoTimepickerComponent.toFixed(hour, 10);
+        const minuteStr = NeoTimepickerComponent.toFixed(minute, 10);
+        return `${hourStr}:${minuteStr} ${meridian}`;
+    }
+    /**
+     * Return 08 for 8, 06 for 6
+     * @param num
+     * @param fix
+     * @private
+     */
+    static toFixed(num, fix) {
+        let fixedNum = num.toString();
+        if (num < fix) {
+            fixedNum = `0${fixedNum}`;
+        }
+        return fixedNum;
+    }
+}
+NeoTimepickerComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: 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 = () => [
+    { type: ChangeDetectorRef }
+];
+NeoTimepickerComponent.propDecorators = {
+    inputBox: [{ type: ViewChild, args: ['inputBox',] }],
+    hourOptions: [{ type: ViewChild, args: ['hourOptions',] }],
+    minutesOptions: [{ type: ViewChild, args: ['minutesOptions',] }],
+    meridiansOptions: [{ type: ViewChild, args: ['meridiansOptions',] }],
+    timepicker: [{ type: ViewChild, args: ['timepicker',] }],
+    i18n: [{ type: Input }],
+    disabled: [{ type: Input }],
+    format: [{ type: Input }],
+    invalid: [{ type: Input }],
+    invalidationMessage: [{ type: Input }],
+    placement: [{ type: Input }],
+    timeModel: [{ type: Input }],
+    timeModelChange: [{ type: Output }],
+    onKeypress: [{ type: HostListener, args: ['window:keydown', ['$event'],] }]
+};
+
 class NotificationComponent {
     constructor() {
         this.type = 'info';
@@ -2815,7 +3182,7 @@ class DefaultImageDirective {
             this.src = this.default;
         }
         else {
-            this.src = 'assets/lib-ui/img/default-avatar.png';
+            this.src = 'assets/lib-ui-components/img/default-avatar.png';
         }
     }
 }
@@ -3531,6 +3898,7 @@ AgorapulseUiComponentsModule.decorators = [
                     TagListComponent,
                     TagsSelectorComponent,
                     TimepickerComponent,
+                    NeoTimepickerComponent,
                     TryPopupComponent,
                     NotificationComponent,
                     PaginatorComponent,
@@ -3591,6 +3959,8 @@ AgorapulseUiComponentsModule.decorators = [
                     MatSnackBarModule,
                     // Table
                     MatTableModule,
+                    // Mask
+                    IMaskModule
                 ],
                 exports: [
                     FormsModule,
@@ -3624,6 +3994,7 @@ AgorapulseUiComponentsModule.decorators = [
                     TagListComponent,
                     TagsSelectorComponent,
                     TimepickerComponent,
+                    NeoTimepickerComponent,
                     TryPopupComponent,
                     NotificationComponent,
                     PaginatorComponent,
@@ -3801,5 +4172,5 @@ function generateCodeStatus(text, type) {
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EditTagsModalComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, LeadModalComponent, MediaDisplayOverlayDialogComponent, ModalComponent, MultiStyleTextDirective, NotificationComponent, OverlayDialogComponent, OverlayDialogService, OverlayInDivComponent, PaginatorButtonComponent, PaginatorComponent, PasswordInputComponent, PasswordStrengthBarComponent, PasswordStrengthDisplayBarComponent, PhoneNumberInputComponent, PlaceComponent, PlaceListComponent, PopmenuComponent, PopmenuDirective, PopmenuModule, SlideToggleComponent, SnackBarComponent, SnackbarsThreadComponent, SnackbarsThreadService, SplashscreenComponent, StarRatingComponent, StepperComponent, TagComponent, TagListComponent, TagsSelectorComponent, TimeFormat, TimepickerComponent, TooltipNeoDirective, TruncateTooltipDirective, TryPopupComponent, generateCodeStatus, OverlayDialogRef as ɵa, OVERLAY_DATA as ɵb, PASSWORD_CONTROL_VALUE_ACCESSOR as ɵc, TooltipNeoComponent as ɵd, TooltipNeoService as ɵe, PopmenuOptionsService as ɵf };
+export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EditTagsModalComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, LeadModalComponent, MediaDisplayOverlayDialogComponent, ModalComponent, MultiStyleTextDirective, NotificationComponent, OverlayDialogComponent, OverlayDialogService, OverlayInDivComponent, PaginatorButtonComponent, PaginatorComponent, PasswordInputComponent, PasswordStrengthBarComponent, PasswordStrengthDisplayBarComponent, PhoneNumberInputComponent, PlaceComponent, PlaceListComponent, PopmenuComponent, PopmenuDirective, PopmenuModule, SlideToggleComponent, SnackBarComponent, SnackbarsThreadComponent, SnackbarsThreadService, SplashscreenComponent, StarRatingComponent, StepperComponent, TagComponent, TagListComponent, TagsSelectorComponent, TimeFormat, TimepickerComponent, TooltipNeoDirective, TruncateTooltipDirective, TryPopupComponent, generateCodeStatus, OverlayDialogRef as ɵa, OVERLAY_DATA as ɵb, PASSWORD_CONTROL_VALUE_ACCESSOR as ɵc, NeoTimepickerComponent as ɵd, TooltipNeoComponent as ɵe, TooltipNeoService as ɵf, PopmenuOptionsService as ɵg };
 //# sourceMappingURL=agorapulse-ui-components.js.map