@agorapulse/ui-components 0.0.1

package/fesm2015/agorapulse-ui-components.js

@@ -0,0 +1,3805 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, forwardRef, Input, Output, ChangeDetectorRef, ViewChild, Inject, HostListener, InjectionToken, Renderer2, ElementRef, HostBinding, Directive, Optional, ComponentFactoryResolver, ApplicationRef, Injector, NgModule, Injectable, Attribute } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { OverlayContainer, Overlay, OverlayPositionBuilder, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCardModule } from '@angular/material/card';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBarRef, MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatTableModule } from '@angular/material/table';
+import { MatTabsModule, MAT_TABS_CONFIG } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+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 { takeUntil, debounceTime, distinctUntilChanged, tap, switchMap, catchError, map, delay } from 'rxjs/operators';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+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';
+
+class AddCommentComponent {
+    constructor() {
+        this.placeholder = 'Add a comment';
+        this.disable = false;
+        this.action = new EventEmitter();
+        this._commentValue = '';
+        this.propagateChange = () => { };
+    }
+    get commentValue() {
+        return this._commentValue;
+    }
+    set commentValue(value) {
+        this._commentValue = value;
+        this.propagateChange(value);
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) {
+        this.disable = isDisabled;
+    }
+    writeValue(obj) {
+        this._commentValue = obj != undefined ? obj : '';
+        this.propagateChange(this._commentValue);
+    }
+    onChange(event) {
+        const value = event.target.value;
+        this._commentValue = value != undefined ? value : '';
+        this.propagateChange(value);
+    }
+}
+AddCommentComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-add-comment',
+                template: "<div class=\"add-comment\">\n    <textarea ap-autosize\n              dir=\"auto\"\n              matInput\n              rows=\"1\"\n              [placeholder]=\"placeholder\"\n              [value]=\"_commentValue\"\n              (keyup)=\"onChange($event)\"\n              (change)=\"onChange($event)\">\n    </textarea>\n\n    <ng-template\n        #defaultTemplate\n        let-action=\"action\">\n        <div class=\"default-template\">\n            <button mat-stroked-button color=\"secondary\" (click)=\"action.emit('send')\">\n                Send\n            </button>\n        </div>\n    </ng-template>\n\n    <ng-template\n        [ngTemplateOutlet]=\"customTemplate || defaultTemplate\"\n        [ngTemplateOutletContext]=\"{\n            action: action\n        }\">\n    </ng-template>\n</div>\n",
+                providers: [{
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => AddCommentComponent),
+                        multi: true
+                    }],
+                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}.add-comment{border:1px solid #d6dae0;border-radius:4px;display:flex;flex-direction:column}.add-comment:focus-within{border:1px solid #178dfe}.add-comment:not(:focus-within):hover{border-color:#aeb5c1}.add-comment textarea{border:none;background:#0000;color:#858fa1;padding:0;margin:6px 16px}.add-comment input:focus,.add-comment textarea:focus{outline:none}.add-comment .default-template{display:flex;flex-direction:row-reverse}.add-comment .default-template button{background-color:#fff!important;width:90px;margin-right:8px;margin-bottom:8px;align-self:end}.add-comment .default-template button:hover{border-color:#d6dae0!important}.add-comment .default-template button:active{border-color:#aeb5c1!important}"]
+            },] }
+];
+AddCommentComponent.propDecorators = {
+    placeholder: [{ type: Input }],
+    customTemplate: [{ type: Input }],
+    disable: [{ type: Input }],
+    action: [{ type: Output }]
+};
+
+const SizeMap = {
+    'large': '64',
+    'normal': '48',
+    'medium': '40',
+    'medium-sm': '36',
+    'small': '32',
+    'mini': '24',
+    'mini-sm': '16',
+    'micro': '12',
+    'facebook': '40',
+    'linkedin': '40',
+    'instagram': '40',
+    'youtube': '40',
+    'google': '40',
+    'twitter': '48'
+};
+class AvatarComponent {
+    constructor() {
+        this.border = '';
+        this.defaultImageEnabled = true; // DEPRECATED default avatar if we don't have username
+        this.fallbackSymbolId = 'single-neutral';
+        this.fallbackSymbolSize = 'mini';
+        this.loading = 'auto';
+        this.outerBorderHidden = false;
+        this.size = 'medium';
+        this.rounded = false;
+        this.online = false;
+        this.sizeMap = SizeMap;
+    }
+    ngOnInit() {
+    }
+    ngOnChanges(changes) {
+        var _a, _b;
+        if (((_a = changes.social) === null || _a === void 0 ? void 0 : _a.currentValue) || ((_b = changes.size) === null || _b === void 0 ? void 0 : _b.currentValue)) {
+            if (this.social === 'google') {
+                switch (this.size) {
+                    case 'medium-sm':
+                        this.socialSize = '14';
+                        break;
+                    case 'mini':
+                        this.socialSize = '15';
+                        break;
+                    default:
+                        this.socialSize = '19';
+                }
+            }
+            else {
+                this.socialSize = this.size === 'mini' || this.size === 'medium-sm' ? '12' : '16';
+            }
+        }
+        if (changes.defaultImageEnabled && changes.defaultImageEnabled.currentValue) {
+            console.warn("'defaultImageEnabled' attribute is deprecated.");
+        }
+    }
+    onError() {
+        this.imageUrl = null;
+    }
+}
+AvatarComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-avatar',
+                template: "<div class=\"ap-avatar-container {{size}}\">\n    <!-- simple avatar -->\n    <img *ngIf=\"imageUrl; else noPicture\"\n        class=\"ap-avatar {{size}}\"\n         [class.outer-border]=\"!outerBorderHidden\"\n         [class.rounded]=\"rounded\"\n         [attr.border]=\"border\"\n         [attr.loading]=\"loading\"\n         [attr.height]=\"sizeMap[size]\"\n         [attr.width]=\"sizeMap[size]\"\n         [src]=\"imageUrl\"\n         (error)=\"onError()\"/>\n    <!-- image with first letter of screen name -->\n    <ng-template #noPicture>\n        <span\n              class=\"ap-avatar ap-avatar-username {{size}}\"\n              [class.outer-border]=\"!outerBorderHidden\"\n              [class.rounded]=\"rounded\"\n              [attr.border]=\"border\">\n            <ng-container *ngIf=\"username; else symbol\">\n                {{username.charAt(0).toUpperCase()}}\n            </ng-container>\n            <ng-template #symbol>\n                <ap-symbol\n                    [size]=\"fallbackSymbolSize\"\n                    [symbolId]=\"fallbackSymbolId\">\n                </ap-symbol>\n            </ng-template>\n        </span>\n    </ng-template>\n\n    <div  *ngIf=\"social\"\n          class=\"social-symbol-wrapper {{social}} {{size}}\">\n        <ap-symbol [symbolId]=\"social === 'google' ? social + '-my-business-official' : social + '-official'\"\n                   [size]=\"socialSize\">\n        </ap-symbol>\n    </div>\n    <div *ngIf=\"online\" class=\"online-indicator {{size}}\"></div>\n\n</div>\n<label>\n    <ng-content></ng-content>\n</label>\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}:host{align-items:center;display:inline-flex}label{margin-left:8px}label:empty{display:none}.ap-avatar-container{position:relative}.ap-avatar-container.large{height:64px;width:64px}.ap-avatar-container.normal{height:48px;width:48px}.ap-avatar-container.medium{height:40px;width:40px}.ap-avatar-container.medium-sm{height:36px;width:36px}.ap-avatar-container.small{height:32px;width:32px}.ap-avatar-container.mini{height:24px;width:24px}.ap-avatar-container.mini-sm{height:16px;width:16px}.ap-avatar-container.micro{height:12px;width:12px}.ap-avatar-container .ap-avatar.outer-border{box-shadow:0 0 0 1.5px #eaecef}.ap-avatar-container .ap-avatar.large{height:64px;width:64px}.ap-avatar-container .ap-avatar.normal{height:48px;width:48px}.ap-avatar-container .ap-avatar.medium{height:40px;width:40px}.ap-avatar-container .ap-avatar.medium-sm{height:36px;width:36px}.ap-avatar-container .ap-avatar.small{height:32px;width:32px}.ap-avatar-container .ap-avatar.mini{height:24px;width:24px}.ap-avatar-container .ap-avatar.mini-sm{height:16px;width:16px}.ap-avatar-container .ap-avatar.micro{height:12px;width:12px}.ap-avatar-container .ap-avatar.facebook,.ap-avatar-container .ap-avatar.google,.ap-avatar-container .ap-avatar.instagram,.ap-avatar-container .ap-avatar.linkedin,.ap-avatar-container .ap-avatar.youtube{height:40px;width:40px}.ap-avatar-container .ap-avatar.twitter{height:48px;width:48px}.ap-avatar-container .ap-avatar:not(.rounded){border-radius:13%}.ap-avatar-container .ap-avatar-username{display:inline-flex;align-items:center;justify-content:center;background-color:#aeb5c1;color:#fff;font-size:24px}.ap-avatar-container .ap-avatar-username ap-symbol{height:24px!important;width:24px!important}.ap-avatar-container .ap-avatar-username.large{font-size:28px}.ap-avatar-container .ap-avatar-username.medium{font-size:18px}.ap-avatar-container .ap-avatar-username.medium-sm{font-size:16px}.ap-avatar-container .ap-avatar-username.small{font-size:14px}.ap-avatar-container .ap-avatar-username.mini,.ap-avatar-container .ap-avatar-username.mini-sm{font-size:12px}.ap-avatar-container .social-symbol-wrapper{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px #eaecef}.ap-avatar-container .social-symbol-wrapper.facebook,.ap-avatar-container .social-symbol-wrapper.twitter,.ap-avatar-container .social-symbol-wrapper.youtube{border-radius:100%}.ap-avatar-container .social-symbol-wrapper.instagram{border-radius:28%}.ap-avatar-container .social-symbol-wrapper.linkedin{border-radius:6%}.ap-avatar-container .social-symbol-wrapper.google{box-shadow:none;right:-3px;bottom:-3px}.ap-avatar-container .social-symbol-wrapper.google ap-symbol{border-radius:0;background-color:initial}.ap-avatar-container .social-symbol-wrapper ap-symbol{border-radius:100%;background-color:#fff}.ap-avatar-container .online-indicator{box-shadow:none;background:#45b854;right:0;bottom:0;position:absolute}.ap-avatar-container .online-indicator.large{outline:5px solid #fff;border-radius:16px;min-height:16px;min-width:16px}.ap-avatar-container .online-indicator.normal{outline:4px solid #fff;border-radius:12px;min-height:12px;min-width:12px}.ap-avatar-container .online-indicator.medium,.ap-avatar-container .online-indicator.medium-sm,.ap-avatar-container .online-indicator.small{outline:3px solid #fff;border-radius:8px;min-height:8px;min-width:8px}.ap-avatar-container .online-indicator.mini,.ap-avatar-container .online-indicator.mini-sm{outline:2px solid #fff;border-radius:6px;min-height:6px;min-width:6px}.ap-avatar-container .online-indicator.micro{outline:1px solid #fff;border-radius:4px;min-height:4px;min-width:4px}"]
+            },] }
+];
+AvatarComponent.propDecorators = {
+    border: [{ type: Input }],
+    defaultImageEnabled: [{ type: Input }],
+    fallbackSymbolId: [{ type: Input }],
+    fallbackSymbolSize: [{ type: Input }],
+    imageUrl: [{ type: Input }],
+    loading: [{ type: Input }],
+    outerBorderHidden: [{ type: Input }],
+    size: [{ type: Input }],
+    social: [{ type: Input }],
+    username: [{ type: Input }],
+    rounded: [{ type: Input }],
+    online: [{ type: Input }]
+};
+
+class ModalComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+        this.footerVisible = true;
+        this.headerVisible = true;
+        this.containerStyle = {};
+        this.headerStyle = {};
+        this.contentStyle = {};
+        this.footerStyle = {};
+        this.defaultLayout = true;
+        dialogRef.disableClose = true;
+    }
+    /**
+     * Use it to open a modal containing the {@link componentType} component, with the right configuration.
+     */
+    static openWithComponent(matDialog, config, componentType) {
+        let matDialogConfig;
+        if (config) {
+            matDialogConfig = config.matDialogConfig;
+            if (matDialogConfig) {
+                matDialogConfig.panelClass = Array.isArray(config.matDialogConfig.panelClass)
+                    ? [...config.matDialogConfig.panelClass, ModalComponent.PANEL_CLASS] // in case where the panelClass is an array
+                    : [config.matDialogConfig.panelClass, ModalComponent.PANEL_CLASS]; // in the other case, it's a String
+            }
+            else {
+                matDialogConfig = { panelClass: ModalComponent.PANEL_CLASS };
+            }
+        }
+        else {
+            matDialogConfig = {
+                panelClass: ModalComponent.PANEL_CLASS
+            };
+        }
+        matDialogConfig.autoFocus = false; // Prevent first button to be focused
+        const dialogRef = matDialog.open(componentType, matDialogConfig);
+        if (config.backdropCloseEnable === true) {
+            dialogRef.disableClose = false;
+        }
+        return dialogRef;
+    }
+    /**
+     * Use it to open a modal containing the provided templates, with the right configuration.
+     */
+    static openWithTemplates(matDialog, headerTemplate, mainTemplate, footerTemplate, config) {
+        const dialogRef = ModalComponent.openWithComponent(matDialog, config, ModalComponent);
+        dialogRef.componentInstance.closable = (config && config.closable) ? config.closable : false;
+        dialogRef.componentInstance.headerBottomBorderEnabled = (config && config.headerBottomBorderEnabled) ? config.headerBottomBorderEnabled : false;
+        dialogRef.componentInstance.headerTemplate = headerTemplate;
+        dialogRef.componentInstance.mainTemplate = mainTemplate;
+        dialogRef.componentInstance.footerTemplate = footerTemplate;
+        return dialogRef;
+    }
+    close() {
+        this.dialogRef.close();
+    }
+}
+ModalComponent.PANEL_CLASS = 'modal-container';
+ModalComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-modal',
+                template: "<div\n    [ngStyle]=\"containerStyle\"\n    [ngClass]=\"{'modal-wrapper': true, 'default-layout': defaultLayout}\">\n    <button\n        *ngIf=\"closable\"\n        class=\"circle close-button\"\n        mat-flat-button\n        (click)=\"close()\">\n        <ap-symbol symbolId=\"close\"></ap-symbol>\n    </button>\n    <div\n        *ngIf=\"headerTemplate && headerVisible\"\n        [ngStyle]=\"headerStyle\"\n        [ngClass]=\"{header: defaultLayout}\"\n        [class.border-bottom]=\"headerBottomBorderEnabled\">\n        <ng-template [ngTemplateOutlet]=\"headerTemplate\"></ng-template>\n    </div>\n    <div\n        *ngIf=\"mainTemplate\"\n        [ngStyle]=\"contentStyle\"\n        [ngClass]=\"{content: defaultLayout}\">\n        <ng-template [ngTemplateOutlet]=\"mainTemplate\"></ng-template>\n    </div>\n    <div\n        *ngIf=\"footerTemplate && footerVisible\"\n        [ngStyle]=\"footerStyle\"\n        [ngClass]=\"{footer: defaultLayout}\">\n        <ng-template [ngTemplateOutlet]=\"footerTemplate\"></ng-template>\n    </div>\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}.modal-wrapper{position:relative}.modal-wrapper.default-layout{padding-top:24px;padding-bottom:16px}.modal-wrapper .close-button{margin:-12px;position:absolute;right:24px;top:24px}.modal-wrapper .close-button ap-symbol{height:12px;width:12px}.modal-wrapper .header{padding:0 24px 16px}.modal-wrapper .header ::ng-deep h2{margin-top:0}.modal-wrapper .header.border-bottom{border-bottom:1px solid #eaecef;margin-bottom:16px}.modal-wrapper .content{color:#5d6a82;font-size:16px;padding:0 24px}.modal-wrapper .footer{align-items:center;border-top:1px solid #eaecef;display:flex;justify-content:flex-end;margin-top:24px;padding:14px 24px 0}.modal-wrapper .footer .mat-stroked-button:not(:last-child),.modal-wrapper .footer ::ng-deep .mat-flat-button:not(:last-child){margin-right:16px}::ng-deep .modal-container{max-width:100vw!important;margin:24px 24px calc(2 * 32px)}::ng-deep .modal-container .mat-dialog-container{border-radius:10px;box-shadow:0 25px 50px #0000000a;max-width:100vw;padding:0}::ng-deep .cdk-overlay-dark-backdrop{background:#344563b3}"]
+            },] }
+];
+/** @nocollapse */
+ModalComponent.ctorParameters = () => [
+    { type: MatDialogRef }
+];
+ModalComponent.propDecorators = {
+    closable: [{ type: Input }],
+    headerBottomBorderEnabled: [{ type: Input }],
+    footerTemplate: [{ type: Input }],
+    footerVisible: [{ type: Input }],
+    headerTemplate: [{ type: Input }],
+    headerVisible: [{ type: Input }],
+    mainTemplate: [{ type: Input }],
+    config: [{ type: Input }],
+    containerStyle: [{ type: Input }],
+    headerStyle: [{ type: Input }],
+    contentStyle: [{ type: Input }],
+    footerStyle: [{ type: Input }],
+    defaultLayout: [{ type: Input }]
+};
+
+class ConfirmModalComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+        this.contentText = '';
+        this.footerCancelButtonId = 'cancel';
+        this.footerCancelButtonLabel = '';
+        this.footerConfirmButtonId = 'confirm';
+        this.footerConfirmButtonLabel = '';
+        this.headerTitle = '';
+        dialogRef.disableClose = true;
+    }
+    onCancel() {
+        this.dialogRef.close(false);
+    }
+    onConfirm() {
+        this.dialogRef.close(true);
+    }
+    static open(dialog, confirmModalTexts, modalConfig = null) {
+        if (!modalConfig) {
+            modalConfig = {};
+        }
+        if (!modalConfig.matDialogConfig) {
+            modalConfig.matDialogConfig = {
+                width: '550px'
+            };
+        }
+        const confirmModal = ModalComponent.openWithComponent(dialog, modalConfig, ConfirmModalComponent);
+        confirmModal.componentInstance.contentText = confirmModalTexts.contentText;
+        confirmModal.componentInstance.footerConfirmButtonId = confirmModalTexts.footerConfirmButtonId;
+        confirmModal.componentInstance.footerConfirmButtonLabel = confirmModalTexts.footerConfirmButtonLabel;
+        confirmModal.componentInstance.footerCancelButtonId = confirmModalTexts.footerCancelButtonId;
+        confirmModal.componentInstance.footerCancelButtonLabel = confirmModalTexts.footerCancelButtonLabel;
+        confirmModal.componentInstance.headerTitle = confirmModalTexts.headerTitle;
+        return confirmModal;
+    }
+}
+ConfirmModalComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-confirm-modal',
+                template: "<ng-template #headerTemplate>\n    <h2>{{headerTitle}}</h2>\n</ng-template>\n\n<ng-template #mainTemplate>\n    <p>{{contentText}}</p>\n</ng-template>\n\n<ng-template #footerTemplate>\n    <button mat-flat-button (click)=\"onCancel()\" [id]=\"footerCancelButtonId\">\n        {{ footerCancelButtonLabel }}\n    </button>\n    <button mat-flat-button color=\"primary\" cdkFocusInitial [id]=footerConfirmButtonId\n            (click)=\"onConfirm()\">\n        {{ footerConfirmButtonLabel }}\n    </button>\n</ng-template>\n\n<ap-modal [closable]=\"true\"\n          [headerTemplate]=\"headerTemplate\"\n          [mainTemplate]=\"mainTemplate\"\n          [footerTemplate]=\"footerTemplate\"\n></ap-modal>\n"
+            },] }
+];
+/** @nocollapse */
+ConfirmModalComponent.ctorParameters = () => [
+    { type: MatDialogRef }
+];
+ConfirmModalComponent.propDecorators = {
+    contentText: [{ type: Input }],
+    footerCancelButtonId: [{ type: Input }],
+    footerCancelButtonLabel: [{ type: Input }],
+    footerConfirmButtonId: [{ type: Input }],
+    footerConfirmButtonLabel: [{ type: Input }],
+    headerTitle: [{ type: Input }]
+};
+
+var DatepickerMode;
+(function (DatepickerMode) {
+    DatepickerMode["Single"] = "Single";
+    DatepickerMode["Multiple"] = "Multiple";
+    DatepickerMode["Range"] = "Range";
+})(DatepickerMode || (DatepickerMode = {}));
+var SideEnum;
+(function (SideEnum) {
+    SideEnum["left"] = "left";
+    SideEnum["right"] = "right";
+})(SideEnum || (SideEnum = {}));
+// TODO fix css for range mode (more lateral padding)
+class DatepickerComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.i18n = {
+            ranges: {
+                yesterday: 'Yesterday',
+                lastWeek: 'Last Week',
+                last30Days: 'Last 30 days',
+                lastMonth: 'Previous month',
+                thisMonth: 'This Month',
+            }
+        };
+        this.selectedDates = [];
+        this.selectedPeriod = { startDate: null, endDate: null };
+        this.dateSelected = new EventEmitter();
+        this.periodSelected = new EventEmitter();
+        this.DatepickerMode = DatepickerMode;
+        this.doubleCalendarWidth = 528; // 231px calendar table * 2 = 462 (+ 16px x-padding * 4 = 64)
+        this.ranges = {};
+        this.rangePickerWidth = 150;
+        this.pageSet = false;
+        this.isCustomDate = (date) => {
+            var _a, _b;
+            const classes = [];
+            if (this.mode === DatepickerMode.Multiple) {
+                classes.push(this.isSelected(date) ? 'active' : 'force-inactive');
+            }
+            else if (this.mode === DatepickerMode.Single) {
+                classes.push(this.selectedDate && this.selectedDate.isSame(date, 'day') ? 'active' : 'force-inactive');
+            }
+            else if (this.mode === DatepickerMode.Range) {
+                classes.push('range-picker-mode');
+                // Workaround to fix the auto-active today date when no date is selected
+                if (moment().isSame(date, 'day')
+                    && !((_a = this.selectedPeriod) === null || _a === void 0 ? void 0 : _a.startDate)
+                    && !((_b = this.selectedPeriod) === null || _b === void 0 ? void 0 : _b.endDate)) {
+                    classes.push('force-inactive');
+                }
+            }
+            return classes;
+        };
+    }
+    ngOnInit() {
+        this.initRanges();
+        this.initDatePickerLocale();
+    }
+    ngOnChanges(changes) {
+        var _a, _b;
+        this.setWidth();
+        if (this.datepickerRef) {
+            setTimeout(() => {
+                this.datepickerRef.updateCalendars();
+                this.changeDetectorRef.detectChanges();
+            }, 100);
+        }
+        if (((_a = changes.selectedPeriod) === null || _a === void 0 ? void 0 : _a.currentValue) && this.datepickerRef) {
+            if (this.selectedPeriod.startDate === null && this.selectedPeriod.endDate === null) {
+                this.datepickerRef.clear();
+            }
+            else {
+                this.datepickerRef.setStartDate(this.selectedPeriod.startDate);
+                this.datepickerRef.setEndDate(this.selectedPeriod.endDate);
+            }
+        }
+        if (((_b = changes.mode) === null || _b === void 0 ? void 0 : _b.currentValue) === DatepickerMode.Single && this.datepickerRef) {
+            this.setCalendarCurrentPage();
+        }
+    }
+    ngAfterViewInit() {
+        if (this.datepickerRef) {
+            setTimeout(() => {
+                this.datepickerRef.updateCalendars();
+                this.setCalendarCurrentPage();
+            }, 100);
+        }
+    }
+    initDatePickerLocale() {
+        if (this.locale) {
+            moment.locale(this.locale);
+        }
+        let firstDayOfWeekIndex;
+        if (this.firstDayOfWeek === "sunday") {
+            firstDayOfWeekIndex = 0;
+        }
+        else if (this.firstDayOfWeek === "monday") {
+            firstDayOfWeekIndex = 1;
+        }
+        else {
+            firstDayOfWeekIndex = moment.localeData().firstDayOfWeek();
+        }
+        this.localeConfig = {
+            customRangeLabel: 'custom',
+            daysOfWeek: moment.weekdaysMin(),
+            monthNames: moment.months(),
+            firstDay: firstDayOfWeekIndex
+        };
+    }
+    initRanges() {
+        this.ranges[this.i18n.ranges.yesterday] = [moment().subtract(1, 'days'), moment().subtract(1, 'days')];
+        this.ranges[this.i18n.ranges.lastWeek] = [moment().subtract(7, 'days'), moment().subtract(1, 'days')];
+        this.ranges[this.i18n.ranges.last30Days] = [moment().subtract(30, 'days'), moment().subtract(1, 'days')];
+        this.ranges[this.i18n.ranges.lastMonth] = [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')];
+        this.ranges[this.i18n.ranges.thisMonth] = [moment().startOf('month'), moment().endOf('month')];
+    }
+    isSelected(date) {
+        return this.selectedDates && this.selectedDates.some(selectedDate => selectedDate.isSame(date, 'day'));
+    }
+    onStartDateChanged(event) {
+        const date = event.startDate;
+        if (this.mode !== DatepickerMode.Range) {
+            this.selectedDate = date;
+            this.datepickerRef.setEndDate(date);
+            if (this.pageSet) {
+                this.pageSet = false;
+            }
+            else {
+                this.dateSelected.emit(date.clone());
+                if (this.mode === DatepickerMode.Multiple) {
+                    this.selectedDates.push(date);
+                }
+            }
+            if (this.datepickerRef) {
+                this.datepickerRef.updateCalendars();
+            }
+        }
+    }
+    onDatesUpdated(event) {
+        var _a, _b;
+        if (this.mode === DatepickerMode.Range) {
+            this.periodSelected.emit({
+                startDate: (_a = event.startDate) === null || _a === void 0 ? void 0 : _a.clone(),
+                endDate: (_b = event.endDate) === null || _b === void 0 ? void 0 : _b.clone()
+            });
+        }
+        if (this.datepickerRef) {
+            this.datepickerRef.updateCalendars();
+        }
+    }
+    onNextMonth() {
+        this.datepickerRef.leftCalendar.month = this.datepickerRef.leftCalendar.month.add(1, 'months').clone();
+        this.datepickerRef.rightCalendar.month = this.datepickerRef.rightCalendar.month.add(1, 'months').clone();
+        this.datepickerRef.clickNext(SideEnum.left);
+        this.datepickerRef.clickNext(SideEnum.right);
+    }
+    onPreviousMonth() {
+        this.datepickerRef.leftCalendar.month = this.datepickerRef.leftCalendar.month.subtract(1, 'months').clone();
+        this.datepickerRef.rightCalendar.month = this.datepickerRef.rightCalendar.month.subtract(1, 'months').clone();
+        this.datepickerRef.clickPrev(SideEnum.left);
+        this.datepickerRef.clickPrev(SideEnum.right);
+    }
+    /**
+     * Ugly hack used here to open the calendar on the right day if they are selected dates
+     *      * https://github.com/fetrarij/ngx-daterangepicker-material/issues/139
+     */
+    setCalendarCurrentPage() {
+        const selectedFirstDate = this.selectedDates.length > 0 ? this.selectedDates[0] : this.selectedDate;
+        if (selectedFirstDate && selectedFirstDate.isValid() && this.mode !== DatepickerMode.Range) {
+            const endDate = selectedFirstDate.clone();
+            endDate.add(1, 'month');
+            this.pageSet = true;
+            this.datepickerRef.setStartDate(selectedFirstDate);
+            this.datepickerRef.setEndDate(endDate);
+            this.datepickerRef.updateView();
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+    setWidth() {
+        this.width = this.showRanges && this.mode === DatepickerMode.Range ? this.doubleCalendarWidth + this.rangePickerWidth : this.doubleCalendarWidth;
+    }
+}
+DatepickerComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-datepicker',
+                template: "<div class=\"custom-calendar\" [style.width]=\"width + 'px'\">\n    <div class=\"custom-header\">\n        <div class=\"month-header\"\n             *ngIf=\"this.datepickerRef.leftCalendar.month\">\n            <div class=\"month-arrow-button\" (click)=\"onPreviousMonth()\">\n                <ap-symbol\n                    [symbolId]=\"'arrow-left-1'\"\n                    [color]=\"'#858FA1'\"\n                    [size]=\"'14'\"></ap-symbol>\n            </div>\n            <div class=\"month-label\">\n                {{ this.datepickerRef.leftCalendar.month.locale(locale).format('MMMM YYYY') }}\n            </div>\n        </div>\n        <div class=\"month-header\"\n             *ngIf=\"this.datepickerRef.rightCalendar.month\">\n            <div class=\"month-label\">\n                {{ this.datepickerRef.rightCalendar.month.locale(locale).format('MMMM YYYY') }}\n            </div>\n            <div class=\"month-arrow-button\" (click)=\"onNextMonth()\">\n                <ap-symbol\n                    [symbolId]=\"'arrow-right-1'\"\n                    [color]=\"'#858FA1'\"\n                    [size]=\"'14'\"></ap-symbol>\n            </div>\n        </div>\n        <div class=\"header-filler\" *ngIf=\"showRanges && mode === DatepickerMode.Range\">\n        </div>\n    </div>\n    <ngx-daterangepicker-material\n        #datepickerRef\n        [class.hide-ranges]=\"!showRanges\"\n        [alwaysShowCalendars]=\"true\"\n        [autoApply]=\"true\"\n        [customRangeDirection]=\"true\"\n        [isCustomDate]=\"isCustomDate\"\n        [locale]=\"localeConfig\"\n        [maxDate]=\"maxDate\"\n        [minDate]=\"minDate\"\n        [ranges]=\"showRanges && mode === DatepickerMode.Range ? ranges : null\"\n        (datesUpdated)=\"onDatesUpdated($event)\"\n        (startDateChanged)=\"onStartDateChanged($event)\">\n    </ngx-daterangepicker-material>\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}::ng-deep .custom-calendar{background-color:#fff;display:flex;flex-direction:column;justify-content:center;border-radius:4px;height:-moz-fit-content;height:fit-content}::ng-deep .custom-calendar .custom-header{display:flex;align-items:center;justify-content:center;color:#344563;font-size:12px;font-weight:700;height:55px;text-transform:capitalize}::ng-deep .custom-calendar .custom-header .month-header{height:30px;width:255px;display:flex;align-items:center}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button{padding:10px;border-radius:2em;cursor:pointer}::ng-deep .custom-calendar .custom-header .month-header .month-arrow-button:hover{background-color:#eaecef}::ng-deep .custom-calendar .custom-header .month-header .month-label{flex:1;text-align:center}::ng-deep .custom-calendar .custom-header .header-filler{width:150px}::ng-deep .custom-calendar .md-drppicker{font-family:Averta;width:unset;height:219px;padding:0;margin:0 0 16px;box-shadow:none!important;z-index:0!important}::ng-deep .custom-calendar .md-drppicker .ranges{border-left:1px solid #eaecef;float:right!important;max-width:150px;height:100%}::ng-deep .custom-calendar .md-drppicker .ranges ul li{margin-left:12px}::ng-deep .custom-calendar .md-drppicker .ranges ul li:hover{background:unset}::ng-deep .custom-calendar .md-drppicker .ranges ul li button{font-family:Averta;font-size:14px;border-radius:4px;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:hover:not(.active):not(:disabled){color:#178dfe;background:#e8f4ff}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active{color:#fff;background:#178dfe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button.active:hover{background:#3a9efe}::ng-deep .custom-calendar .md-drppicker .ranges ul li button:disabled{color:#d6dae0;background:none;cursor:default}::ng-deep .custom-calendar .md-drppicker .month{cursor:auto}::ng-deep .custom-calendar .md-drppicker .calendar{margin:0!important;padding:0 16px}::ng-deep .custom-calendar .md-drppicker .calendar.left{border-right:1px solid #eaecef}::ng-deep .custom-calendar .md-drppicker .calendar-table{width:231px;padding:0!important;border:none!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table{border-spacing:0 5px!important;height:184px}::ng-deep .custom-calendar .md-drppicker .calendar-table table td,::ng-deep .custom-calendar .md-drppicker .calendar-table table th{height:unset;border:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead{line-height:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr:first-child{display:none}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th{color:#aeb5c1;font-weight:700;font-size:12px;text-transform:capitalize;padding-bottom:10px}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.month,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev{color:#344563}::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.next,::ng-deep .custom-calendar .md-drppicker .calendar-table table thead tr th.prev{font-size:16px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:last-child.in-range{border-radius:0 2em 2em 0}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody tr td:first-child.in-range{border-radius:2em 0 0 2em}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td{opacity:1!important;border-spacing:0;height:27px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td span{width:27px!important;height:27px!important;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:3px}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.in-range:not(.off):not(.force-inactive){background-color:#e8f4ff!important;color:#344563!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.start-date:not(.end-date).range-picker-mode:not(.off){border-radius:2em 0 0 2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active.end-date:not(.start-date).range-picker-mode:not(.off){border-radius:0 2em 2em 0;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.force-inactive).start-date.end-date.range-picker-mode:not(.off) span{border-radius:2em;background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover span{background-color:#d1e8ff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.today.force-inactive:hover:not(.in-range),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available:not(.start-date):not(.end-date):hover:not(.in-range){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.available.in-range:not(.start-date):not(.end-date):hover{border-radius:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.off{background-color:unset!important;color:#d6dae0!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode),::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive){background-color:unset!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:hover:not(.off):not(.range-picker-mode) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.active:not(.off):not(.range-picker-mode):not(.force-inactive) span{background-color:#178dfe!important;color:#fff!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.force-inactive{background-color:unset!important;color:#5d6a82}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off) span{border:1px solid #178dfe;color:#5d6a82;height:25px!important;width:25px!important}::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).end-date:not(.force-inactive) span,::ng-deep .custom-calendar .md-drppicker .calendar-table table tbody td.today:not(.off).start-date:not(.force-inactive) span{color:#fff}.hide-ranges ::ng-deep.ranges{display:none}"]
+            },] }
+];
+/** @nocollapse */
+DatepickerComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
+DatepickerComponent.propDecorators = {
+    datepickerRef: [{ type: ViewChild, args: ['datepickerRef',] }],
+    firstDayOfWeek: [{ type: Input }],
+    i18n: [{ type: Input }],
+    locale: [{ type: Input }],
+    maxDate: [{ type: Input }],
+    minDate: [{ type: Input }],
+    mode: [{ type: Input }],
+    selectedDate: [{ type: Input }],
+    selectedDates: [{ type: Input }],
+    selectedPeriod: [{ type: Input }],
+    showRanges: [{ type: Input }],
+    dateSelected: [{ type: Output }],
+    periodSelected: [{ type: Output }]
+};
+
+class DotsStepperComponent {
+    constructor() {
+        this.disabled = false;
+        this.forwardAllowed = true;
+        this.items = [];
+        this.size = '';
+        this.dotClick = new EventEmitter();
+    }
+    ngOnChanges() {
+        this.currentItem = this.items[this.index];
+    }
+    onDotClick(event, item, index) {
+        event.stopPropagation();
+        if (this.disabled || (!this.forwardAllowed && index > this.index)) {
+            return;
+        }
+        this.currentItem = item;
+        this.index = index;
+        this.dotClick.emit(this.index);
+    }
+}
+DotsStepperComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-dots-stepper',
+                template: "<div class=\"dots\"\n    [ngClass]=\"{'small-dots': size == 'small'}\">\n    <div class=\"dot\"\n         *ngFor=\"let item of items; let i = index\"\n         [ngClass]=\"{'active': item === currentItem, 'disabled': disabled || (!forwardAllowed  && i > index) }\"\n         (click)=\"onDotClick($event, item, i)\">\n    </div>\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}.dots{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;place-content:stretch center;position:absolute}.dots .dot{-webkit-transition:all .2s ease-in-out;background:#d6dae0;border-radius:50%;cursor:pointer;height:8px;margin:16px 4px;transition:all .2s ease-in-out;width:8px}.dots .dot.active{background:#178dfe;cursor:auto}.dots .dot.disabled{background:#d6dae0;cursor:auto}.dots.small-dots .dot{height:6px;margin:16px 2px;width:6px}"]
+            },] }
+];
+/** @nocollapse */
+DotsStepperComponent.ctorParameters = () => [];
+DotsStepperComponent.propDecorators = {
+    disabled: [{ type: Input }],
+    forwardAllowed: [{ type: Input }],
+    index: [{ type: Input }],
+    items: [{ type: Input }],
+    size: [{ type: Input }],
+    dotClick: [{ type: Output }]
+};
+
+class EditTagsModalComponent {
+    constructor(data, dialogRef, dialog) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+        this.dialog = dialog;
+        this.deletedTags = [];
+        this.editTag = new EventEmitter();
+        this.savingTags = [];
+        this.tagEditedIndex = null;
+        this.updatedTags = new Map();
+        this.updateStatusByTags = new Map();
+        this.destroy$ = new Subject();
+        data.tags$.pipe(takeUntil(this.destroy$)).subscribe(tags => {
+            if (tags) {
+                this.tags = [...tags];
+                this.filteredTags = [...tags];
+                tags.forEach(tag => this.updatedTags.set(tag, tag));
+            }
+        });
+        data.updateStatusByTag$.pipe(takeUntil(this.destroy$)).subscribe((updateStatusByTag) => {
+            if (updateStatusByTag) {
+                const updateStatusByTagMap = new Map();
+                updateStatusByTag.forEach(value => {
+                    updateStatusByTagMap.set(value.tag, value.loading);
+                    if (value.loading === false) {
+                        this.updateTagSuccess(value.tag);
+                    }
+                });
+                this.updateStatusByTags = updateStatusByTagMap;
+            }
+        });
+    }
+    cancelEdit() {
+        this.tagEditedIndex = null;
+    }
+    onDone() {
+        this.dialogRef.close();
+    }
+    onEdit(index) {
+        this.tagEditedIndex = index;
+    }
+    onRemove(tag) {
+        this.updatedTags.set(tag, null);
+        const updatedTag = new Map();
+        updatedTag.set(tag, null);
+        this.editTag.emit(updatedTag);
+        this.tagEditedIndex = null;
+    }
+    onValidateInput(index) {
+        this.onValidate(this.tagInput.nativeElement.value, index);
+    }
+    onValidate(value, index) {
+        if (value) {
+            const entry = Array.from(this.updatedTags.entries()).find(((keyValue) => keyValue[1] === this.tags[index]));
+            this.updatedTags.set(entry[0], value);
+            const updatedTag = new Map();
+            updatedTag.set(entry[0], value);
+            this.tags[index] = value;
+            this.filteredTags[index] = value;
+            this.editTag.emit(updatedTag);
+            this.savingTags.push(value);
+            this.tagEditedIndex = null;
+        }
+    }
+    onValidateEnter(event, index) {
+        if (event.key === 'Enter') {
+            this.onValidate(event.target.value, index);
+        }
+    }
+    onSearch(tag) {
+        this.filteredTags = Array.from(this.updatedTags.values()).filter((item) => item === null || item === void 0 ? void 0 : item.toLowerCase().includes(tag.toLowerCase()));
+    }
+    updateTagSuccess(tag) {
+        if (this.updatedTags.get(tag) === null) {
+            this.deletedTags.push(tag);
+            setTimeout(() => {
+                this.tags = this.tags.filter(tagToFilter => tagToFilter !== tag);
+                this.filteredTags = this.filteredTags.filter(tagToFilter => tagToFilter !== tag);
+                this.deletedTags = this.deletedTags.filter(tagToFilter => tagToFilter !== tag);
+            }, 2000);
+        }
+        else {
+            setTimeout(() => {
+                this.savingTags = this.savingTags.filter(tagToFilter => tagToFilter !== tag);
+            }, 6000);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+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",
+                animations: [
+                    trigger('tagSaved', [
+                        transition('void => *', [
+                            style({ opacity: 1 }),
+                            style({ width: 'fit-content' }),
+                            style({ display: 'flex' }),
+                            animate('6000ms', style({ opacity: 0 })),
+                        ]),
+                    ]),
+                    trigger('tagRemoved', [
+                        transition('valid => deleted', [
+                            style({ opacity: 1 }),
+                            animate('1000ms 1000ms', style({ opacity: 0 })),
+                        ]),
+                    ])
+                ],
+                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}.title{font-weight:700!important;margin-bottom:16px}p.large{color:#5d6a82;font-size:14px}.max-character-size-notification{margin-top:8px}.content{display:flex;margin-top:16px}.search{padding-bottom:16px}.loader{display:flex;align-items:center;width:100%;flex-direction:column}.tags-content{max-height:245px;overflow-y:scroll;overflow-x:hidden}.tag-row{display:flex;align-items:center;margin-left:-4px;margin-right:-8px;padding:4px;min-height:44px}.tag-row .button-container{flex:1;display:flex;align-items:center}.tag-row .button-container .edit-button{display:none}.tag-row .button-container .edit-label{display:none;align-items:center;opacity:0;background-color:#ecf7ed;color:#45b854;border-radius:25px;align-self:center;width:0;padding:4px 8px;font-weight:700;font-size:10px;line-height:12px}.tag-row .button-container .edit-label ap-symbol{padding-right:4px}.tag-row .button-container .edit-label.deleted-label{display:flex;width:-moz-fit-content;width:fit-content;opacity:1;background-color:#fde7e7;color:#e81313}.tag-row input,.tag-row span{margin-right:8px}.tag-row input{width:252px;max-width:252px}.tag-row:not(.disabled):hover .button-container .edit-button{display:block}.tag-row .disabled{color:#aeb5c1}.notification-warning{margin-bottom:8px}.footer{flex-direction:column}.footer,.footer div{display:flex}.footer p{text-align:right;color:#e81313}.footer .done-button{background-color:#ff6726;color:#fff}.footer .done-button:hover{background-color:#ff560d}.footer .done-button:active{background-color:#ff4d00}:host::ng-deep button,:host::ng-deep input,:host::ng-deep select,:host::ng-deep textarea{outline:none}:host::ng-deep input{border-radius:4px;color:#344563;font-family:Averta;font-size:14px;font-weight:400;padding:8px 16px}:host::ng-deep input::placeholder{color:#aeb5c1}:host::ng-deep input:focus:not(.transparent){border-color:#178dfe}:host::ng-deep .input-group{display:flex;flex-direction:row;width:252px;border:1px solid #d6dae0;border-radius:4px;color:#344563}:host::ng-deep .input-group input{border:none;box-sizing:border-box;width:100%}:host::ng-deep .input-group .input-group-append{position:relative;top:10px;right:10px;height:15px;width:15px;color:#858fa1}"]
+            },] }
+];
+/** @nocollapse */
+EditTagsModalComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] },
+    { type: MatDialogRef },
+    { type: MatDialog }
+];
+EditTagsModalComponent.propDecorators = {
+    tagInput: [{ type: ViewChild, args: ['tagInput',] }]
+};
+
+var InstagramCarouselItemType;
+(function (InstagramCarouselItemType) {
+    InstagramCarouselItemType["IMAGE"] = "photo";
+    InstagramCarouselItemType["VIDEO"] = "video";
+})(InstagramCarouselItemType || (InstagramCarouselItemType = {}));
+class ImageCarouselComponent {
+    constructor(animationBuilder) {
+        this.animationBuilder = animationBuilder;
+        this.InstagramCarouselItemType = InstagramCarouselItemType;
+        this.items = [];
+        this.dotsInside = false;
+        this.soundEnabled = false;
+        this.supportGif = true;
+        this.tinyMode = false;
+        this.currentImageChanged = new EventEmitter();
+        this._selectedIndex = 0;
+        this.carouselOffset = 0;
+        this.videoPlayers = [];
+    }
+    get selectedIndex() {
+        return this._selectedIndex;
+    }
+    set selectedIndex(value) {
+        this.videoPause(this.selectedIndex);
+        if (value < 0) {
+            value = 0;
+        }
+        if (value > this.items.length - 1) {
+            value = this.items.length - 1;
+        }
+        this._selectedIndex = value;
+        this.move();
+        if (this.tinyMode && this.mouseOver) {
+            this.videoPlay(this.selectedIndex);
+        }
+    }
+    isPrevButtonEnabled() {
+        return this.selectedIndex > 0;
+    }
+    isNextButtonEnabled() {
+        if (this.items && this.items[this.selectedIndex]) {
+            return this.selectedIndex < this.items.length - 1;
+        }
+        return false;
+    }
+    isVideo() {
+        if (this.items && this.items[this.selectedIndex]) {
+            return this.items[this.selectedIndex].type === InstagramCarouselItemType.VIDEO;
+        }
+        return false;
+    }
+    dotsDisplayed() {
+        if (this.items && this.items[this.selectedIndex]) {
+            return this.items.length > 1;
+        }
+        return false;
+    }
+    prev() {
+        this.selectedIndex -= 1;
+        this.currentImageChanged.emit(this.items[this.selectedIndex]);
+    }
+    next() {
+        this.selectedIndex += 1;
+        this.currentImageChanged.emit(this.items[this.selectedIndex]);
+    }
+    play(event, index) {
+        if (!this.tinyMode) {
+            const videoPlayer = this.videoPlayers[index];
+            if (videoPlayer) {
+                videoPlayer.paused ? this.videoPlay(index) : this.videoPause(index);
+            }
+            event.stopPropagation();
+        }
+    }
+    move(instantaneous = false) {
+        this.carouselOffset = -this.carousel.nativeElement.offsetWidth * this.selectedIndex;
+        this.animationBuilder.build(animate(instantaneous ? '1ms' : '250ms ease-in', style({ transform: `translateX(${this.carouselOffset}px)` }))).create(this.carousel.nativeElement).play();
+    }
+    onMouseEntersVideo(event, index) {
+        this.mouseOver = true;
+        if (this.tinyMode) {
+            this.videoPlay(index);
+        }
+    }
+    onMouseLeavesVideo(event, index) {
+        this.mouseOver = false;
+        if (this.tinyMode) {
+            this.videoPause(index);
+        }
+    }
+    onResize(event) {
+        this.move(true);
+    }
+    registerVideoPlayer(event, index) {
+        this.videoPlayers[index] = event.target;
+        event.target.muted = !this.soundEnabled;
+    }
+    videoPause(index) {
+        const videoPlayer = this.videoPlayers[index];
+        if (videoPlayer) {
+            videoPlayer.pause();
+            this.isPlaying = false;
+        }
+    }
+    videoPlay(index) {
+        const videoPlayer = this.videoPlayers[index];
+        if (videoPlayer) {
+            videoPlayer.play();
+            this.isPlaying = true;
+        }
+    }
+    switchSound() {
+        this.soundEnabled = !this.soundEnabled;
+        for (const player of this.videoPlayers) {
+            player.muted = !this.soundEnabled;
+        }
+    }
+}
+ImageCarouselComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-image-carousel',
+                template: "<section *ngIf=\"items && items.length > 0 && items[0].url\">\n    <div class=\"carousel-wrapper\"\n         (mouseenter)=\"onMouseEntersVideo($event, selectedIndex)\"\n         (mouseleave)=\"onMouseLeavesVideo($event, selectedIndex)\">\n        <ul class=\"carousel-inner\" #carousel>\n            <li *ngFor=\"let item of items; let i = index\" class=\"carousel-item\">\n                <ng-template [ngIf]=\"item.type === InstagramCarouselItemType.IMAGE && item.url\">\n                    <img apFrozenGif\n                         [apFrozen]=\"!supportGif\"\n                         [default]=\"'assets/img/default.png'\"\n                         [src]=\"item.url\">\n                </ng-template>\n                <ng-template [ngIf]=\"item.type === InstagramCarouselItemType.VIDEO && item.url\">\n                    <video [id]=\"'video-' + i\"\n                           [attr.poster]=\"item.thumbnailUrl\"\n                           [loop]=\"tinyMode\"\n                           [src]=\"item.url\"\n                           (click)=\"play($event, i)\"\n                           (ended)=\"isPlaying = false\"\n                           (loadstart)=\"registerVideoPlayer($event, i)\">\n                    </video>\n                    <svg class=\"play-button\"\n                         xmlns=\"http://www.w3.org/2000/svg\"\n                         (click)=\"play($event, i)\">\n                        <path *ngIf=\"!isPlaying\" d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\"/>\n                    </svg>\n                    <mat-icon class=\"sound-button\"\n                              *ngIf=\"!tinyMode\"\n                              (click)=\"switchSound(); $event.stopPropagation();\">\n                        {{soundEnabled ? 'volume_up' : 'volume_off'}}\n                    </mat-icon>\n                </ng-template>\n            </li>\n        </ul>\n\n        <svg class=\"nav-button prev\"\n             [ngClass]=\"{'disabled': !isPrevButtonEnabled(), 'tiny': tinyMode}\"\n             (click)=\"prev(); $event.stopPropagation();\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 455 455\">\n            <path d=\"M227.5,0C101.855,0,0,101.855,0,227.5S101.855,455,227.5,455S455,353.145,455,227.5S353.145,0,227.5,0z M199.476,355.589\n                  l-21.248-21.178L284.791,227.5L178.228,120.589l21.248-21.178L327.148,227.5L199.476,355.589z\"/>\n        </svg>\n\n        <svg class=\"nav-button next\"\n             [ngClass]=\"{'disabled': !isNextButtonEnabled(), 'tiny': tinyMode}\"\n             (click)=\"next(); $event.stopPropagation();\"\n             xmlns=\"http://www.w3.org/2000/svg\"\n             viewBox=\"0 0 455 455\">\n            <path d=\"M227.5,0C101.855,0,0,101.855,0,227.5S101.855,455,227.5,455S455,353.145,455,227.5S353.145,0,227.5,0z M199.476,355.589\n\t              l-21.248-21.178L284.791,227.5L178.228,120.589l21.248-21.178L327.148,227.5L199.476,355.589z\"/>\n        </svg>\n    </div>\n    <div [ngClass]=\"{'inside': dotsInside}\">\n        <ap-dots-stepper\n            fxLayout=\"row\"\n            fxLayoutAlign=\"center\"\n            size=\"small\"\n            *ngIf=\"dotsDisplayed()\"\n            [items]=\"items\"\n            [index]=\"selectedIndex\"\n            (dotClick)=\"selectedIndex = $event\"></ap-dots-stepper>\n    </div>\n</section>\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}section{position:relative}section .carousel-wrapper{overflow:hidden;width:100%;padding-top:100%;position:relative}section .carousel-wrapper .carousel-inner{position:absolute;top:0;margin:0;padding:0;width:100%;height:100%;display:flex;list-style:none}section .carousel-wrapper .carousel-inner .carousel-item{position:relative;width:100%;flex-shrink:0;text-align:center}section .carousel-wrapper .carousel-inner .carousel-item img,section .carousel-wrapper .carousel-inner .carousel-item video{height:100%;width:100%;object-fit:cover;object-position:center}section .carousel-wrapper .carousel-inner .carousel-item .play-button{z-index:1000;position:absolute;top:0;right:0;bottom:0;left:0;width:32px;height:32px;transform:scale(2);margin:auto;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}section .carousel-wrapper .carousel-inner .carousel-item .play-button path{fill:#fffc}section .carousel-wrapper .carousel-inner .carousel-item .sound-button{z-index:1000;position:absolute;right:8px;bottom:8px;color:#fff}section .carousel-wrapper .nav-button{width:30px;height:30px;position:absolute;top:0;bottom:0;cursor:pointer;margin:auto;opacity:.4;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}section .carousel-wrapper .nav-button.tiny{width:20px;height:20px}section .carousel-wrapper .nav-button path{fill:#fffc}section .carousel-wrapper .nav-button.prev{left:12px;transform:rotate(180deg)}section .carousel-wrapper .nav-button.next{right:12px}section .carousel-wrapper .nav-button.disabled{display:none}section ::ng-deep div.inside ap-dots-stepper div.dots{bottom:0;width:calc(100% - 80px)}"]
+            },] }
+];
+/** @nocollapse */
+ImageCarouselComponent.ctorParameters = () => [
+    { type: AnimationBuilder }
+];
+ImageCarouselComponent.propDecorators = {
+    carousel: [{ type: ViewChild, args: ['carousel',] }],
+    items: [{ type: Input }],
+    dotsInside: [{ type: Input }],
+    soundEnabled: [{ type: Input }],
+    supportGif: [{ type: Input }],
+    tinyMode: [{ type: Input }],
+    currentImageChanged: [{ type: Output }],
+    onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
+};
+
+class FeatureOnboardingComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+        // translations
+        this.backButtonLabel = '';
+        this.finishButtonLabel = '';
+        this.nextButtonLabel = '';
+        this.arrowsDisplayed = false; // To display arrows to switch element on carousel
+        this.slideDisplayedIndex = 0; // The current element displayed
+    }
+    onClickNext() {
+        this.slideDisplayedIndex !== this.templates.length - 1 ? this.slideDisplayedIndex = this.slideDisplayedIndex + 1 : this.onCloseCarousel();
+    }
+    onClickPrevious() {
+        this.slideDisplayedIndex = this.slideDisplayedIndex - 1;
+    }
+    onCloseCarousel() {
+        this.dialogRef.close(true);
+    }
+}
+FeatureOnboardingComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-feature-onboarding',
+                template: "<ng-template #mainTemplate>\n    <div class=\"carousel-main-container\">\n        <div class=\"carousel-content\">\n            <div *ngFor=\"let template of templates; let i = index\"\n                 class=\"carousel-slide-element\"\n                 [class.carousel-slide-element-not-displayed]=\"i !== slideDisplayedIndex\"\n                 [class.carousel-slide-element-active]=\"i === slideDisplayedIndex\">\n                <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n                <div class=\"carousel-dots-container\">\n                    <ap-dots-stepper\n                        fxLayout=\"row\"\n                        fxLayoutAlign=\"center\"\n                        size=\"small\"\n                        *ngIf=\"templates.length > 1\"\n                        [items]=\"templates\"\n                        [index]=\"slideDisplayedIndex\"\n                        (dotClick)=\"slideDisplayedIndex = $event\"></ap-dots-stepper>\n                </div>\n            </div>\n\n            <div *ngIf=\"arrowsDisplayed\">\n                <ap-symbol *ngIf=\"slideDisplayedIndex !== 0\"\n                           class=\"nav-button prev\"\n                           [symbolId]=\"'arrow-button-left'\"\n                           (click)=\"onClickPrevious()\">\n                </ap-symbol>\n\n                <ap-symbol class=\"nav-button next\"\n                           [symbolId]=\"'arrow-button-right'\"\n                           (click)=\"onClickNext(); $event.stopPropagation();\">\n                </ap-symbol>\n            </div>\n        </div>\n\n        <div class=\"carousel-footer\">\n            <div class=\"button-container\">\n                <button *ngIf=\"slideDisplayedIndex !== 0\"\n                        mat-flat-button\n                        class=\"carousel-previous-button\"\n                        (click)=\"onClickPrevious()\">\n                    {{backButtonLabel}}\n                </button>\n                <button mat-flat-button\n                        [color]=\"'primary'\"\n                        (click)=\"onClickNext()\">\n                    <div *ngIf=\"slideDisplayedIndex !== templates.length - 1\">{{nextButtonLabel}}</div>\n                    <div *ngIf=\"slideDisplayedIndex === templates.length - 1\">{{finishButtonLabel}}</div>\n                </button>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ap-modal class=\"design-system\"\n          [closable]=\"false\"\n          [mainTemplate]=\"mainTemplate\"\n></ap-modal>\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}ap-modal ::ng-deep .modal-wrapper{padding:0!important}ap-modal ::ng-deep .modal-wrapper .content{padding:0!important}.carousel-main-container{display:flex;flex-direction:column;overflow:hidden}.carousel-main-container .carousel-content{width:100%;height:100%;position:relative;margin:auto;justify-content:center;align-items:center}.carousel-main-container .carousel-content .carousel-slide-element,.carousel-main-container .carousel-content .carousel-slide-element.carousel-slide-element-not-displayed{display:none}.carousel-main-container .carousel-content .carousel-slide-element.carousel-slide-element-active{display:flex;flex-direction:column;justify-content:center;align-items:center}.carousel-main-container .carousel-content .nav-button{width:30px;height:30px;position:absolute;top:0;bottom:0;cursor:pointer;margin:auto;opacity:.4;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}.carousel-main-container .carousel-content .nav-button.tiny{width:20px;height:20px}.carousel-main-container .carousel-content .nav-button path{fill:#fffc}.carousel-main-container .carousel-content .nav-button.prev{left:12px}.carousel-main-container .carousel-content .nav-button.next{right:12px}.carousel-main-container .carousel-content .nav-button.disabled{display:none}.carousel-main-container .carousel-content .carousel-dots-container{height:28px;margin-bottom:16px}.carousel-main-container .carousel-footer{align-items:center;justify-content:flex-end;display:flex;padding:0 16px;height:68px;border-top:1px solid #eaecef}.carousel-main-container .carousel-footer .button-container{margin-right:24px}.carousel-main-container .carousel-footer .button-container .carousel-previous-button{margin-right:8px}"]
+            },] }
+];
+/** @nocollapse */
+FeatureOnboardingComponent.ctorParameters = () => [
+    { type: MatDialogRef }
+];
+
+class LeadModalComponent {
+    constructor(dialogRef, translatedStrings) {
+        this.dialogRef = dialogRef;
+        this.translatedStrings = translatedStrings;
+        this.plans = {
+            PRO: 'pro',
+            PREMIUM: 'premium',
+            PREMIUM_PLUS: 'premium+',
+            ENTERPRISE: 'enterprise',
+        };
+        this.orderedPlans = [
+            this.plans.PRO,
+            this.plans.PREMIUM,
+            this.plans.PREMIUM_PLUS,
+            this.plans.ENTERPRISE,
+        ];
+        dialogRef.disableClose = true;
+    }
+    onValidate(qualifiedProfilePlan, qualifiedTeamPlan, profileType) {
+        const qualifiedPlan = this.orderedPlans.indexOf(qualifiedProfilePlan) > this.orderedPlans.indexOf(qualifiedTeamPlan)
+            ? qualifiedProfilePlan
+            : qualifiedTeamPlan;
+        return {
+            language: window.navigator && window.navigator.language ? window.navigator.language : '',
+            qualifiedPlan: qualifiedPlan,
+            qualifiedProfilePlan: qualifiedProfilePlan,
+            qualifiedTeamPlan: qualifiedTeamPlan,
+            profileType: profileType
+        };
+    }
+}
+LeadModalComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-lead-modal',
+                template: "<ng-template #headerTemplate>\n    <h1 mat-dialog-title>\n        {{translatedStrings.title}}\n    </h1>\n</ng-template>\n\n<ng-template #mainTemplate>\n    <div mat-dialog-content>\n            <div class=\"form-field\">\n                <label for=\"profileField\">\n                    {{translatedStrings.profileFieldLabel}}\n                </label>\n                <mat-button-toggle-group\n                    [(ngModel)]=\"qualifiedProfilePlan\"\n                    id=\"profileField\"\n                    name=\"qualifiedProfilePlan\">\n                    <mat-button-toggle [value]=\"plans.PRO\">1 - 10</mat-button-toggle>\n                    <mat-button-toggle [value]=\"plans.PREMIUM\">11 - 25</mat-button-toggle>\n                    <mat-button-toggle [value]=\"plans.PREMIUM_PLUS\">26 - 40</mat-button-toggle>\n                    <mat-button-toggle [value]=\"plans.ENTERPRISE\">40+</mat-button-toggle>\n                </mat-button-toggle-group>\n            </div>\n            <div class=\"form-field\">\n                <label for=\"teamField\">\n                    {{translatedStrings.teamFieldLabel}}\n                </label>\n                <mat-button-toggle-group\n                    [(ngModel)]=\"qualifiedTeamPlan\"\n                    id=\"teamField\"\n                    name=\"qualifiedTeamPlan\">\n                    <mat-button-toggle [value]=\"plans.PRO\">1 - 2</mat-button-toggle>\n                    <mat-button-toggle [value]=\"plans.PREMIUM\">3 - 4</mat-button-toggle>\n                    <mat-button-toggle [value]=\"plans.PREMIUM_PLUS\">5 - 8</mat-button-toggle>\n                    <mat-button-toggle [value]=\"plans.ENTERPRISE\">8+</mat-button-toggle>\n                </mat-button-toggle-group>\n            </div>\n            <div class=\"form-field\">\n                <label for=\"agencyField\">\n                    {{translatedStrings.agencyFieldLabel}}\n                </label>\n                <mat-button-toggle-group\n                    [(ngModel)]=\"profileType\"\n                    id=\"agencyField\"\n                    class=\"agency-toggle\"\n                    name=\"profileType\">\n                    <mat-button-toggle value=\"agency\">{{translatedStrings.agencyYesLabel}}</mat-button-toggle>\n                    <mat-button-toggle value=\"none\">{{translatedStrings.agencyNoLabel}}</mat-button-toggle>\n                </mat-button-toggle-group>\n            </div>\n    </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n    <div>\n        <button mat-flat-button\n                color=\"primary\"\n                [disabled]=\"!(qualifiedProfilePlan && qualifiedTeamPlan && profileType)\"\n                [mat-dialog-close]=\"onValidate(qualifiedProfilePlan, qualifiedTeamPlan, profileType)\">\n            {{translatedStrings.validateButtonLabel}}\n        </button>\n    </div>\n</ng-template>\n\n<ap-modal\n    [headerTemplate]=\"headerTemplate\"\n    [mainTemplate]=\"mainTemplate\"\n    [footerTemplate]=\"footerTemplate\"\n></ap-modal>\n"
+            },] }
+];
+/** @nocollapse */
+LeadModalComponent.ctorParameters = () => [
+    { type: MatDialogRef },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+
+var KEY_CODE;
+(function (KEY_CODE) {
+    KEY_CODE[KEY_CODE["RIGHT_ARROW"] = 39] = "RIGHT_ARROW";
+    KEY_CODE[KEY_CODE["LEFT_ARROW"] = 37] = "LEFT_ARROW";
+})(KEY_CODE || (KEY_CODE = {}));
+class MediaDisplayOverlayDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.currentUrlIndex = 1;
+        this.urls = []; // all urls
+        this.mediaType = 'image'; // 'image', 'video'
+        this.supportGif = true;
+    }
+    ngOnInit() {
+        // const data = ModalService.getModal('media-display-overlay') || {};
+        if (this.data) {
+            if (this.data.urls && this.data.urls.length > 0) {
+                this.urls = this.data.urls;
+            }
+            if (this.data.url) {
+                if (this.urls.length === 0) {
+                    this.urls = [this.data.url];
+                }
+                this.url = this.data.url;
+                this.currentUrlIndex = this.urls.indexOf(this.data.url) + 1;
+            }
+        }
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+    onNext($event) {
+        if (this.currentUrlIndex < this.urls.length) {
+            this.currentUrlIndex += 1;
+            this.url = this.urls[this.currentUrlIndex - 1];
+        }
+        $event.stopPropagation();
+    }
+    onPrevious($event) {
+        if (this.currentUrlIndex > 1) {
+            this.currentUrlIndex -= 1;
+            this.url = this.urls[this.currentUrlIndex - 1];
+        }
+        $event.stopPropagation();
+    }
+    keyEvent(event) {
+        if (event.keyCode === KEY_CODE.RIGHT_ARROW) {
+            this.onNext(event);
+        }
+        if (event.keyCode === KEY_CODE.LEFT_ARROW) {
+            this.onPrevious(event);
+        }
+    }
+}
+MediaDisplayOverlayDialogComponent.config = {
+    position: {
+        top: '10px',
+        right: '10px',
+        left: '10px'
+    },
+    height: '100%',
+    width: '100%',
+    maxWidth: 'none',
+    panelClass: 'full-screen-modal',
+    backdropClass: 'dark-backdrop'
+};
+MediaDisplayOverlayDialogComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-media-display-overlay',
+                template: "<div class=\"full\" (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                id=\"close\"\n                color=\"white\"\n                size=\"micro\"\n                (click)=\"onClose()\">\n            </ap-symbol>\n        </header>\n        <content class=\"ap-modal-content\">\n            <div *ngIf=\"urls.length > 1\"\n                 class=\"next-prev-container left\"\n                 [class.disabled]=\"currentUrlIndex <= 1\"\n                 (click)=\"onPrevious($event)\">\n                <div class=\"icon-container\">\n                    <ap-symbol\n                        id=\"arrow-left-1\"\n                        [color]=\"currentUrlIndex <= 1  ? 'grey-blue' : 'white'\"\n                        size=\"small\">\n                    </ap-symbol>\n                </div>\n            </div>\n            <div class=\"media-container\">\n                <img *ngIf=\"url && mediaType =='image'\" apFrozenGif [apFrozen]=\"!supportGif\" [src]=\"url\" (click)=\"$event.stopPropagation()\">\n            </div>\n            <div *ngIf=\"urls.length > 1\"\n                 class=\"next-prev-container right\"\n                 [class.disabled]=\"currentUrlIndex >= urls.length\"\n                 (click)=\"onNext($event)\">\n                <div class=\"icon-container\">\n                    <ap-symbol\n                        id=\"arrow-right-1\"\n                        [color]=\"currentUrlIndex >= urls.length ? 'grey-blue' : 'white'\"\n                        size=\"small\">\n                    </ap-symbol>\n                </div>\n            </div>\n        </content>\n        <footer *ngIf=\"urls && urls.length > 1\"\n                class=\"ap-modal-footer\">\n            <div class=\"index-container\">\n                {{currentUrlIndex}} / {{urls.length}}\n            </div>\n        </footer>\n    </div>\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}:host{width:100%;height:100%}.full,.media-display{height:100%;width:100%}.media-display{background:#0000;display:flex;flex-direction:column}.media-display .media-container{margin:auto;flex:1;align-items:center;flex-direction:column;display:flex}.media-display .media-container img{max-width:80%}.media-display .ap-modal-content{padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:#0000;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:#0000;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}"]
+            },] }
+];
+/** @nocollapse */
+MediaDisplayOverlayDialogComponent.ctorParameters = () => [
+    { type: MatDialogRef },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
+];
+MediaDisplayOverlayDialogComponent.propDecorators = {
+    keyEvent: [{ type: HostListener, args: ['window:keyup', ['$event'],] }]
+};
+
+class OverlayDialogRef {
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+    }
+    close() {
+        this.overlayRef.dispose();
+    }
+}
+const OVERLAY_DATA = new InjectionToken('OVERLAY_DATA');
+class OverlayDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    close() {
+        this.dialogRef.close();
+    }
+}
+OverlayDialogComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ap-overlay',
+                template: "<div class=\"header-overlay\">\n    <ap-symbol\n        id=\"close\"\n        color=\"#858fa1\"\n        size=\"18\"\n        (click)=\"close()\"\n        class=\"\">\n\n    </ap-symbol>\n</div>\n\n<div class=\"container-overlay\">\n    <ng-container *ngTemplateOutlet=\"data\"></ng-container>\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}:host{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh}:host .header-overlay{width:100vw;flex-direction:row-reverse;display:flex;position:absolute;top:0;right:0;padding-right:48px;padding-top:48px}:host .header-overlay ap-symbol:hover{cursor:pointer}:host ::ng-deep img{max-height:325px}"]
+            },] }
+];
+/** @nocollapse */
+OverlayDialogComponent.ctorParameters = () => [
+    { type: OverlayDialogRef },
+    { type: undefined, decorators: [{ type: Inject, args: [OVERLAY_DATA,] }] }
+];
+
+class OverlayInDivComponent {
+    constructor() {
+        this.closable = true;
+        this.close = new EventEmitter();
+    }
+}
+OverlayInDivComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-overlay-in-div',
+                template: "<div class=\"header-overlay\" *ngIf=\"closable\">\n    <ap-symbol\n        id=\"close\"\n        color=\"#858fa1\"\n        size=\"18\"\n        (click)=\"this.close.emit('close')\"\n        class=\"\">\n    </ap-symbol>\n</div>\n\n<div class=\"splash-screen\">\n    <img *ngIf=\"imgPath\" [src]=\"imgPath\"/>\n    <h2 class=\"padding-y-l\">{{ title }}</h2>\n    <h3 class=\"label\"> {{ subtitle }}</h3>\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}.splash-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;padding-right:20%}.splash-screen img{width:480px}.splash-screen .label{max-width:500px;justify-content:center}:host{background:radial-gradient(#f5f7f8,#f5f7f880);position:absolute;width:100%;height:100%;top:0;left:0;z-index:99999999}:host .header-overlay{width:100vw;flex-direction:row-reverse;display:flex;position:absolute;top:0;right:0;padding-right:48px;padding-top:48px}:host .header-overlay ap-symbol:hover{cursor:pointer}"]
+            },] }
+];
+OverlayInDivComponent.propDecorators = {
+    title: [{ type: Input }],
+    subtitle: [{ type: Input }],
+    imgPath: [{ type: Input }],
+    closable: [{ type: Input }],
+    close: [{ type: Output }]
+};
+
+class PlaceComponent {
+}
+PlaceComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-place',
+                template: "<div class=\"place\">\n    <ap-symbol\n        [symbolId]=\"service + '-official'\"\n        [size]=\"'micro'\">\n    </ap-symbol>\n    <ng-content></ng-content>\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}.place{margin-right:16px;padding-bottom:4px;color:#344563;text-wrap:none;display:flex}.place ap-symbol{margin-right:8px}"]
+            },] }
+];
+PlaceComponent.propDecorators = {
+    service: [{ type: Input }]
+};
+
+class PlaceListComponent {
+}
+PlaceListComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-place-list',
+                template: "<div class=\"place-list\">\n    <ng-content></ng-content>\n</div>\n",
+                styles: [".place-list{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:-4px;margin-right:-16px}"]
+            },] }
+];
+
+const defaultOptions = {
+    'apPopmenuBorder': true,
+    'apPopmenuDisabled': false,
+    'apPopmenuBackground': true,
+    'hasBackdrop': true,
+    'placement': 'top',
+    'rounded': true,
+    'showDelay': 0,
+    'hideDelay': 10,
+    'hideDelayMobile': 0,
+    'shadow': true,
+    'theme': 'dark',
+    'offset': 8,
+    'maxWidth': '600',
+};
+
+/**
+ * This is not a real service, but it looks like it from the outside.
+ * It's just an InjectionToken used to import the config (initOptions) object, provided from the outside
+ */
+const PopmenuOptionsService = new InjectionToken('PopmenuOptions');
+
+class PopmenuComponent {
+    constructor(renderer, elementRef, changeDetectorRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
+        this.events = new EventEmitter();
+        this.arrowTopPosition = '50%';
+        this.arrowBottomPosition = '50%';
+        this.menuClosed = new EventEmitter();
+        this.menuOpened = new EventEmitter();
+        this.viewInit = false;
+        this._show = false;
+    }
+    get show() {
+        return this._show;
+    }
+    set show(value) {
+        if (value) {
+            this.setPosition();
+        }
+        this._show = value;
+    }
+    set close(value) {
+        if (value) {
+            this.trigger.closeMenu();
+        }
+    }
+    get arrow() {
+        return this.data.options.arrow && this.border;
+    }
+    get arrowOffset() {
+        return this.data.options.arrowOffset;
+    }
+    get arrowPosition() {
+        return this.data.options.arrowPosition;
+    }
+    get autoPlacement() {
+        return this.data.options.autoPlacement;
+    }
+    get background() {
+        return this.data.options.apPopmenuBackground;
+    }
+    get border() {
+        return this.data.options.apPopmenuBorder;
+    }
+    get element() {
+        return this.data.element;
+    }
+    get elementPosition() {
+        return this.data.elementPosition;
+    }
+    get hasBackdrop() {
+        return this.data.options.hasBackdrop;
+    }
+    get isThemeLight() {
+        return this.options['theme'] === 'light';
+    }
+    get options() {
+        return this.data.options;
+    }
+    get placement() {
+        return this.data.options.placement;
+    }
+    get rounded() {
+        return this.data.options.rounded;
+    }
+    get shadow() {
+        return this.data.options.shadow;
+    }
+    get tooltipOffset() {
+        return Number(this.data.options.offset);
+    }
+    get value() {
+        return this.data.value;
+    }
+    ngAfterViewInit() {
+        this.viewInit = true;
+    }
+    onMenuClosed() {
+        // we set a timeout to wait for the menu to be really closed
+        setTimeout(() => this.menuClosed.emit(), 200);
+    }
+    onMenuOpened() {
+        // we set a timeout to wait for the menu to be really opened
+        setTimeout(() => this.menuOpened.emit(), 100);
+    }
+    setHostStyle(placement) {
+        const isSvg = this.element instanceof SVGElement;
+        const tooltip = this.elementRef.nativeElement;
+        const isCustomPosition = !this.elementPosition.x;
+        let elementHeight = !this.element.offsetHeight ? this.element.getBoundingClientRect().height : this.element.offsetHeight;
+        let elementWidth = !this.element.offsetWidth ? this.element.getBoundingClientRect().width : this.element.offsetWidth;
+        const tooltipHeight = tooltip.clientHeight;
+        const tooltipWidth = tooltip.clientWidth;
+        const scrollY = window.pageYOffset;
+        let topStyle;
+        let leftStyle;
+        if (isCustomPosition) {
+            if (placement && placement.split(' ')[0] === 'top') {
+                this.below = false;
+            }
+            if (placement && placement.split(' ')[0] === 'bottom') {
+                this.below = true;
+            }
+            elementHeight = 0;
+            elementWidth = 0;
+            topStyle = this.elementPosition.top;
+            leftStyle = this.elementPosition.left;
+            if (this.arrow && this.arrowPosition) {
+                this.arrowClass = 'arrow-' + this.arrowPosition;
+                switch (this.arrowPosition) {
+                    case 'left':
+                    case 'right':
+                        this.arrowLeftPosition = undefined;
+                        this.arrowRightPosition = undefined;
+                        this.arrowBottomPosition = 'auto';
+                        this.arrowTopPosition = this.arrowOffset + '%';
+                        break;
+                    case 'top':
+                    case 'bottom':
+                        this.arrowLeftPosition = this.arrowOffset + '%';
+                        this.arrowRightPosition = 'auto';
+                        this.arrowBottomPosition = undefined;
+                        this.arrowTopPosition = undefined;
+                        break;
+                }
+            }
+        }
+        else {
+            if (placement.split(' ')[0] === 'top') {
+                this.below = false;
+                topStyle = this.elementPosition.top - this.tooltipOffset;
+                topStyle += 8;
+            }
+            if (placement.split(' ')[0] === 'bottom') {
+                this.below = true;
+                topStyle = this.elementPosition.bottom + this.tooltipOffset;
+                // We remove 8px due to the margin-top we put to display the arrow.
+                topStyle -= 8;
+            }
+            if (placement.split(' ')[0] === 'left') {
+                leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
+            }
+            if (placement.split(' ')[0] === 'right') {
+                leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
+            }
+            if (placement.split(' ')[0] === 'left' || placement.split(' ')[0] === 'right') {
+                topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltip.clientHeight / 2;
+            }
+            if (placement === 'right bottom') {
+                this.below = true;
+                this.before = false;
+                this.arrowClass = 'arrow-left';
+                topStyle = (this.elementPosition.top + scrollY);
+                this.arrowRightPosition = undefined;
+                this.arrowLeftPosition = undefined;
+                this.arrowBottomPosition = 'auto';
+                this.arrowTopPosition = this.arrowOffset ? (this.arrowOffset + '%') : (elementHeight / 2 + 'px');
+            }
+            if (placement === 'left bottom') {
+                this.below = true;
+                this.before = true;
+                this.arrowClass = 'arrow-right';
+                topStyle = (this.elementPosition.top + scrollY);
+                this.arrowLeftPosition = undefined;
+                this.arrowRightPosition = undefined;
+                this.arrowBottomPosition = 'auto';
+                this.arrowTopPosition = this.arrowOffset ? (this.arrowOffset + '%') : (elementHeight / 2 + 'px');
+            }
+            if (placement === 'right top') {
+                this.below = false;
+                this.before = false;
+                this.arrowClass = 'arrow-left';
+                topStyle = (this.elementPosition.top + elementHeight + scrollY);
+                this.arrowLeftPosition = undefined;
+                this.arrowRightPosition = undefined;
+                this.arrowTopPosition = 'auto';
+                this.arrowBottomPosition = this.arrowOffset ? (this.arrowOffset + '%') : (-(tooltip.clientHeight - elementHeight / 2) + 'px');
+            }
+            if (placement === 'left top') {
+                this.below = false;
+                this.before = true;
+                this.arrowClass = 'arrow-right';
+                topStyle = (this.elementPosition.top + elementHeight + scrollY);
+                this.arrowRightPosition = undefined;
+                this.arrowLeftPosition = undefined;
+                this.arrowTopPosition = 'auto';
+                this.arrowBottomPosition = this.arrowOffset ? (this.arrowOffset + '%') : (-(tooltip.clientHeight - elementHeight / 2) + 'px');
+            }
+            if (placement === 'bottom right') {
+                this.before = false;
+                this.below = true;
+                this.arrowClass = 'arrow-top';
+                leftStyle = this.elementPosition.left;
+                this.arrowTopPosition = undefined;
+                this.arrowRightPosition = 'auto';
+                this.arrowLeftPosition = this.arrowOffset ? (this.arrowOffset + '%') : (((elementWidth / 2) - 4.5) + 'px');
+            }
+            if (placement === 'bottom left') {
+                this.before = true;
+                this.below = true;
+                this.arrowClass = 'arrow-top';
+                leftStyle = this.elementPosition.right;
+                this.arrowTopPosition = undefined;
+                this.arrowLeftPosition = 'auto';
+                this.arrowRightPosition = this.arrowOffset ? (this.arrowOffset + '%') : (((elementWidth / 2) - 2.5) + 'px');
+            }
+            if (placement === 'top right') {
+                this.before = false;
+                this.below = false;
+                this.arrowClass = 'arrow-bottom';
+                leftStyle = this.elementPosition.left;
+                this.arrowBottomPosition = undefined;
+                this.arrowTopPosition = undefined;
+                this.arrowRightPosition = 'auto';
+                this.arrowLeftPosition = this.arrowOffset ? (this.arrowOffset + '%') : (((elementWidth / 2) - 4.5) + 'px');
+            }
+            if (placement === 'top left') {
+                this.before = true;
+                this.below = false;
+                this.arrowClass = 'arrow-bottom';
+                leftStyle = this.elementPosition.right;
+                this.arrowBottomPosition = undefined;
+                this.arrowTopPosition = undefined;
+                this.arrowLeftPosition = 'auto';
+                this.arrowRightPosition = this.arrowOffset ? (this.arrowOffset + '%') : (((elementWidth / 2) - 2.5) + 'px');
+            }
+        }
+        // This line is PURE MAGIC and super important. It allows to force mat-menu
+        // to reposition the menu with the new xPosition / yPosition.
+        this.changeDetectorRef.detectChanges();
+        const topEdge = topStyle;
+        const bottomEdge = topStyle + tooltipHeight;
+        const leftEdge = leftStyle;
+        const rightEdge = leftStyle + tooltipWidth;
+        if ((topEdge < 0 || bottomEdge > document.body.clientHeight ||
+            leftEdge < 0 || rightEdge > document.body.clientWidth) && this.autoPlacement) {
+            return false;
+        }
+        this.hostStyleTop = topStyle + 'px';
+        this.hostStyleLeft = leftStyle + 'px';
+        return true;
+    }
+    setPlacementClass(placement) {
+        this.renderer.addClass(this.elementRef.nativeElement, 'tooltip-' + (placement ? placement.split(' ')[0] : placement));
+        this.renderer.addClass(this.elementRef.nativeElement, 'yPosition-' +
+            (placement && placement.split(' ').length === 2 ? placement.split(' ')[1] : 'center'));
+        if (this.elementRef.nativeElement.children && this.elementRef.nativeElement.children.length > 1) {
+            const tooltipArrow = Array.from(this.elementRef.nativeElement.children).filter((child) => child.getAttribute('id') === 'tooltipArrow');
+            if (tooltipArrow && tooltipArrow.length === 1) {
+                if (placement && placement.split(' ').length === 2 && placement.split(' ')[1] === 'bottom') {
+                    this.renderer.setStyle(tooltipArrow[0], 'top', this.arrowTopPosition);
+                }
+                else if (placement && placement.split(' ').length === 2 && placement.split(' ')[1] === 'top') {
+                    this.renderer.setStyle(tooltipArrow[0], 'top', this.arrowBottomPosition);
+                }
+            }
+        }
+    }
+    setPosition() {
+        if (this.setHostStyle(this.placement)) {
+            this.setPlacementClass(this.placement);
+            if (this.viewInit) {
+                // We did this in order to reset overlayRef (multi web component needed with matmenu and cdk overlay)
+                if (this.trigger["_overlayRef"]) {
+                    this.trigger["_overlayRef"].dispose();
+                    this.trigger["_overlayRef"] = null;
+                }
+                this.trigger.openMenu();
+            }
+            return;
+        }
+        else {
+            const placements = ['top', 'right', 'bottom', 'left'];
+            for (const placement of placements) {
+                if (this.setHostStyle(placement)) {
+                    this.setPlacementClass(placement);
+                    if (this.viewInit) {
+                        this.trigger.openMenu();
+                    }
+                    return;
+                }
+            }
+        }
+    }
+}
+PopmenuComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-popmenu',
+                template: "<button id=\"menuTrigger\" class=\"button-trigger\" mat-button\n        [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n</button>\n<mat-menu #menu=\"matMenu\" [yPosition]=\"!below ? 'above': 'below'\" [xPosition]=\"!before? 'after': 'before'\" [overlapTrigger]=\"false\"\n          [hasBackdrop]=\"hasBackdrop\"\n          class=\"pop-menu {{arrow ? 'arrow-before ' + arrowClass : ''}} {{shadow ? 'shadow' : ''}} {{border ? '' : (shadow ? 'shadow-no-border' : '')}} {{rounded ? 'rounded-component' : ''}} {{ background ? '' : 'no-background'}}\">\n\n    <div *ngIf=\"arrow\" class=\"{{arrow ? 'arrow-before ' + arrowClass : ''}}\" [ngStyle]=\"{'left': arrowLeftPosition, 'right': arrowRightPosition, 'top': arrowTopPosition, 'bottom': arrowBottomPosition}\"></div>\n    <div (click)=\"$event.stopPropagation()\" class=\"{{rounded ? 'rounded-component' : ''}} outline-none\">\n        <div class=\"{{border ? 'popover-content ' : ''}} {{rounded ? 'rounded-component' : ''}}\">\n            <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n        </div>\n    </div>\n</mat-menu>\n\n\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}.mat-menu-content{padding:0}.mat-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px 0 #0000001c}.mat-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-menu-item-highlighted:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item:hover:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .rounded-component .mat-menu-content{border-radius:4px}::ng-deep .rounded-component{border-radius:4px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}"]
+            },] }
+];
+/** @nocollapse */
+PopmenuComponent.ctorParameters = () => [
+    { type: Renderer2 },
+    { type: ElementRef },
+    { type: ChangeDetectorRef }
+];
+PopmenuComponent.propDecorators = {
+    data: [{ type: Input }],
+    menuClosed: [{ type: Output }],
+    menuOpened: [{ type: Output }],
+    trigger: [{ type: ViewChild, args: [MatMenuTrigger,] }],
+    hostStyleTop: [{ type: HostBinding, args: ['style.top',] }],
+    hostStyleBorderRadius: [{ type: HostBinding, args: ['style.border-radius',] }],
+    hostStyleLeft: [{ type: HostBinding, args: ['style.left',] }],
+    hostStyleZIndex: [{ type: HostBinding, args: ['style.z-index',] }],
+    hostStyleTransition: [{ type: HostBinding, args: ['style.transition',] }],
+    hostStyleWidth: [{ type: HostBinding, args: ['style.width',] }],
+    hostStyleMaxWidth: [{ type: HostBinding, args: ['style.max-width',] }],
+    hostStylePointerEvents: [{ type: HostBinding, args: ['style.pointer-events',] }],
+    hostClassShow: [{ type: HostBinding, args: ['class.tooltip-show',] }],
+    hostClassShadow: [{ type: HostBinding, args: ['class.tooltip-shadow',] }],
+    hostClassLight: [{ type: HostBinding, args: ['class.tooltip-light',] }],
+    show: [{ type: Input }],
+    close: [{ type: Input }]
+};
+
+class PopmenuDirective {
+    constructor(initOptions, renderer, elementRef, componentFactoryResolver, appRef, injector) {
+        this.initOptions = initOptions;
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.appRef = appRef;
+        this.injector = injector;
+        this.apPopmenuBackground = true;
+        this.close = false;
+        this.hasBackdrop = true;
+        this.pointer = true;
+        this.menuClosed = new EventEmitter();
+        this.menuOpened = new EventEmitter();
+        this._options = {};
+    }
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        if (value && defaultOptions) {
+            this._options = value;
+        }
+    }
+    get destroyDelay() {
+        return Number(this.getHideDelay()) + Number(this.options['animationDuration']);
+    }
+    get isDisplayOnHover() {
+        if (this.options['display'] === false) {
+            return false;
+        }
+        if (this.options['displayTouchscreen'] === false) {
+            return false;
+        }
+        if (this.options['trigger'] !== 'hover') {
+            return false;
+        }
+        return true;
+    }
+    get isTooltipDestroyed() {
+        return this.componentRef && this.componentRef.hostView.destroyed;
+    }
+    get tooltipPosition() {
+        if (this.options['position']) {
+            return this.options['position'];
+        }
+        else {
+            return this.elementPosition;
+        }
+    }
+    appendComponentToBody(component, data = {}) {
+        this.componentRef = this.componentFactoryResolver
+            .resolveComponentFactory(component)
+            .create(this.injector);
+        this.componentRef.instance.data = {
+            value: this.popMenuValue,
+            element: this.elementRef.nativeElement,
+            elementPosition: this.tooltipPosition,
+            options: this.options
+        };
+        this.appRef.attachView(this.componentRef.hostView);
+        const domElem = this.componentRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+        this.componentSubscribe = this.componentRef.instance.menuClosed.subscribe((event) => {
+            this.handleClose(event);
+        });
+        this.componentSubscribe = this.componentRef.instance.menuOpened.subscribe((event) => {
+            this.handleOpen(event);
+        });
+    }
+    handleClose(event) {
+        this.menuClosed.emit();
+    }
+    handleOpen(event) {
+        this.menuOpened.emit();
+    }
+    applyOptionsDefault(defaultOptions, options) {
+        this.options = Object.assign({}, defaultOptions, this.initOptions || {}, options);
+    }
+    clearTimeouts() {
+        if (this.createTimeoutId) {
+            clearTimeout(this.createTimeoutId);
+        }
+        if (this.showTimeoutId) {
+            clearTimeout(this.showTimeoutId);
+        }
+        if (this.hideTimeoutId) {
+            clearTimeout(this.hideTimeoutId);
+        }
+        if (this.destroyTimeoutId) {
+            clearTimeout(this.destroyTimeoutId);
+        }
+    }
+    createPopMenu() {
+        this.clearTimeouts();
+        this.createTimeoutId = window.setTimeout(() => {
+            this.appendComponentToBody(PopmenuComponent);
+        }, this.getShowDelay());
+        this.showTimeoutId = window.setTimeout(() => {
+            this.showTooltipElem();
+        }, this.getShowDelay());
+    }
+    getElementPosition() {
+        this.elementPosition = this.elementRef.nativeElement.getBoundingClientRect();
+    }
+    getHideDelay() {
+        return this.options['hideDelay'];
+    }
+    getProperties(changes) {
+        let properties = {};
+        for (const prop in changes) {
+            if (prop !== 'options' && prop !== 'tooltipValue') {
+                properties[prop] = changes[prop].currentValue;
+            }
+            if (prop === 'options') {
+                properties = changes[prop].currentValue;
+            }
+        }
+        return properties;
+    }
+    getShowDelay() {
+        return this.options['showDelay'];
+    }
+    ngOnChanges(changes) {
+        if (changes.pointer) {
+            if (!this.pointer) {
+                this.renderer.removeStyle(this.elementRef.nativeElement, 'cursor');
+            }
+            else {
+                this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
+            }
+        }
+        if (changes.close && changes.close.currentValue) {
+            this.hideTooltipElem();
+        }
+        const changedOptions = this.getProperties(changes);
+        this.applyOptionsDefault(this.options && Object.keys(this.options).length > 0 ? this.options : defaultOptions, changedOptions);
+    }
+    ngOnInit() {
+        if (this.pointer) {
+            this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
+        }
+    }
+    onClick() {
+        if (this.apPopmenuDisabled) {
+            return;
+        }
+        this.show();
+        this.close = false;
+    }
+    show() {
+        this.getElementPosition();
+        if (!this.componentRef || this.isTooltipDestroyed) {
+            this.createPopMenu();
+        }
+        else if (!this.isTooltipDestroyed) {
+            this.showTooltipElem();
+        }
+    }
+    showTooltipElem() {
+        this.componentRef.instance.data = {
+            value: this.popMenuValue,
+            element: this.elementRef.nativeElement,
+            elementPosition: this.tooltipPosition,
+            options: this.options
+        };
+        this.clearTimeouts();
+        this.componentRef.instance.show = true;
+    }
+    hideTooltipElem() {
+        if (this.componentRef) {
+            this.componentRef.instance.close = true;
+        }
+    }
+}
+PopmenuDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[apPopmenu]'
+            },] }
+];
+/** @nocollapse */
+PopmenuDirective.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [PopmenuOptionsService,] }] },
+    { type: Renderer2 },
+    { type: ElementRef },
+    { type: ComponentFactoryResolver },
+    { type: ApplicationRef },
+    { type: Injector }
+];
+PopmenuDirective.propDecorators = {
+    apPopmenuBorder: [{ type: Input }],
+    apPopmenuDisabled: [{ type: Input }],
+    apPopmenuBackground: [{ type: Input }],
+    arrow: [{ type: Input }],
+    arrowOffset: [{ type: Input }],
+    arrowPosition: [{ type: Input }],
+    close: [{ type: Input }],
+    hasBackdrop: [{ type: Input }],
+    offset: [{ type: Input }],
+    placement: [{ type: Input }],
+    pointer: [{ type: Input }],
+    popMenuValue: [{ type: Input, args: ['apPopmenu',] }],
+    position: [{ type: Input }],
+    rounded: [{ type: Input }],
+    shadow: [{ type: Input }],
+    menuClosed: [{ type: Output }],
+    menuOpened: [{ type: Output }],
+    options: [{ type: Input, args: ['options',] }],
+    onClick: [{ type: HostListener, args: ['click',] }]
+};
+
+class PopmenuModule {
+    static forRoot(initOptions) {
+        return {
+            ngModule: PopmenuModule,
+            providers: [
+                {
+                    provide: PopmenuOptionsService,
+                    useValue: initOptions
+                }
+            ]
+        };
+    }
+}
+PopmenuModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    PopmenuDirective,
+                    PopmenuComponent
+                ],
+                imports: [
+                    CommonModule,
+                    MatMenuModule,
+                ],
+                entryComponents: [
+                    PopmenuComponent
+                ],
+                exports: [
+                    PopmenuDirective
+                ]
+            },] }
+];
+
+class SplashscreenComponent {
+    constructor() {
+        this.cardLabels = [];
+        this.cardDirection = 'horizontal';
+        this.disposition = 'row';
+        this.imgHeight = 150;
+        this.imgPaths = [];
+        this.imgWidth = 150;
+        this.title = '';
+        /**
+         * The container and the cards width. All:
+         * - 100% of parent width
+         * - default: 750px for the container and 50% of the container for each card
+         */
+        this.width = 'default';
+    }
+}
+SplashscreenComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-splashscreen',
+                template: "<div class=\"main-container ap-new {{width}}-width\">\n    <h1>{{title}}</h1>\n    <div class=\"info-container {{cardDirection}} {{width}}-width\">\n        <ng-container *ngFor=\"let label of cardLabels; let i = index\">\n            <div class=\"info-card {{width}}-width\">\n                <div class=\"info-card-content {{disposition}}\">\n                    <div class=\"img-container\">\n                        <img src=\"{{imgPaths[i]}}\" height=\"{{imgHeight}}\" width=\"{{imgWidth}}\" />\n                    </div>\n                    <div class=\"text-container\">\n                        <p>{{label}}</p>\n                    </div>\n                </div>\n                <div class=\"button-container\" *ngIf=\"i == 0\">\n                    <ng-content select=\"ap-button.first\"></ng-content>\n                </div>\n                <div class=\"button-container\" *ngIf=\"i == 1\">\n                    <ng-content select=\"ap-button.second\"></ng-content>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n    <ng-content select=\"footer\"></ng-content>\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}.main-container{align-items:center;justify-content:center;text-align:center}.main-container.default-width{width:750px}.main-container.all-width{width:100%}.main-container .info-container{align-items:center;display:flex;justify-content:center;min-height:250px;flex-wrap:wrap}.main-container .info-container.vertical{flex-direction:column}.main-container .info-container.horizontal{flex-direction:row}.main-container .info-container .info-card{flex:1 0 33%;background-color:#fff;display:flex;flex-direction:column;min-height:80%;margin:32px 16px 16px;padding:12px}.main-container .info-container .info-card.default-width{width:50%}.main-container .info-container .info-card.all-width{width:100%}.main-container .info-container .info-card .info-card-content{padding:12px;align-items:center;display:flex;height:70%;justify-content:center;text-align:left}.main-container .info-container .info-card .info-card-content.column{flex-direction:column}.main-container .info-container .info-card .info-card-content.row{flex-direction:row}.main-container .info-container .info-card .img-container{padding:12px}.main-container .info-container .info-card .img-container img{float:left;position:relative;vertical-align:middle}.main-container .info-container .info-card .button-container{align-items:flex-end;display:flex;flex:1;justify-content:center;padding:12px}:host ::ng-deep button{color:#fff!important;display:block}:host-context(.resize-splashscreen) .main-container{width:100%}"]
+            },] }
+];
+SplashscreenComponent.propDecorators = {
+    cardLabels: [{ type: Input }],
+    cardDirection: [{ type: Input }],
+    disposition: [{ type: Input }],
+    imgHeight: [{ type: Input }],
+    imgPaths: [{ type: Input }],
+    imgWidth: [{ type: Input }],
+    title: [{ type: Input }],
+    width: [{ type: Input }]
+};
+
+class TagComponent {
+    constructor() {
+        this.color = '';
+        this.onlyText = false;
+    }
+}
+TagComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-tag',
+                template: "<div class=\"tag\"\n    [ngClass]=\"color\"\n    [class.big-padding]=\"onlyText\">\n    <ng-content></ng-content>\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}.tag{padding:4px 8px;color:#344563;align-self:center;background:#e8f4ff;border-radius:25px;text-wrap:none}.tag.blue{background-color:#e8f4ff;color:#178dfe}.tag.red{background-color:#fde7e7;color:#e81313}.tag.purple{background-color:#efedf8;color:#6554c0}.tag.orange{background-color:#ffefe9;color:#ff6726}.tag.yellow{background-color:#fffde9;color:#ffe91f}.tag.green{background-color:#ecf7ed;color:#45b854}.tag.big-padding{padding:8px 16px}"]
+            },] }
+];
+TagComponent.propDecorators = {
+    color: [{ type: Input }],
+    onlyText: [{ type: Input }]
+};
+
+class TagListComponent {
+}
+TagListComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-tag-list',
+                template: "<div class=\"tags-list\">\n    <ng-content></ng-content>\n</div>\n",
+                styles: [".tags-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin-bottom:-4px;margin-right:-8px}"]
+            },] }
+];
+
+class TryPopupComponent {
+    constructor() {
+        this.trialClicked = new EventEmitter();
+        this.closeClicked = new EventEmitter();
+        this.tryAgorapulsePopupVisible = true;
+        this.logoUrl = 'assets/img/style/logos/logo-blue.svg';
+    }
+    onClose() {
+        this.tryAgorapulsePopupVisible = false;
+        this.closeClicked.emit();
+    }
+    onButtonClick() {
+        this.trialClicked.emit();
+        this.onClose();
+        window.open(this.trialUrl, '_blank');
+    }
+}
+TryPopupComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-try-popup',
+                template: "<ng-template [ngIf]=\"tryAgorapulsePopupVisible\">\n    <div class=\"try-popup\">\n        <button (click)=\"onClose()\" class=\"close-button\" id=\"try-button\" mat-flat-button>\n            <mat-icon>close</mat-icon>\n        </button>\n\n        <div class=\"row\">\n            <div class=\"col s6\">\n                <img class=\"agorapulse-logo\" [src]=\"logoUrl\" alt=\"Agorapulse\">\n                <p class=\"subtitle\">\n                    {{texts.description}}\n                </p>\n            </div>\n\n            <div class=\"col s6 button-container\">\n                <button (click)=\"onButtonClick()\"\n                        color=\"primary\"\n                        mat-flat-button>\n                    {{texts.tryButtonLabel}}\n                </button>\n            </div>\n        </div>\n    </div>\n</ng-template>\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}.try-popup{background-color:#fff;border-radius:8px;bottom:16px;box-shadow:0 8px 14px 0 #e0e5ee80;height:92px;padding:24px 10px;position:fixed;right:16px;width:336px;z-index:10}.close-button{position:absolute;right:1px;top:0;background:#0000}.agorapulse-logo{height:28px}.button-container{text-align:end;margin-top:30px}"]
+            },] }
+];
+TryPopupComponent.propDecorators = {
+    texts: [{ type: Input }],
+    trialUrl: [{ type: Input }],
+    trialClicked: [{ type: Output }],
+    closeClicked: [{ type: Output }]
+};
+
+class TagsSelectorComponent {
+    constructor() {
+        this.INFINITY = Number.MAX_SAFE_INTEGER;
+        this.addTagEnabled = true;
+        this.disabled = false;
+        this.initialTags = [];
+        this.loadingOnSearch = true;
+        this.multipleEnabled = true;
+        this.selectTags = new EventEmitter();
+        this.searchErrorMessage = new EventEmitter();
+        this.tags = [];
+        this.tagsInput$ = new Subject();
+        this.tagsLoading = false;
+    }
+    ngOnInit() {
+        this.tags = this.initialTags;
+        this.setSearchFunction();
+    }
+    ngOnChanges(changes) {
+        var _a;
+        if ((_a = changes === null || changes === void 0 ? void 0 : changes.initialTags) === null || _a === void 0 ? void 0 : _a.currentValue) {
+            this.tags = this.initialTags;
+        }
+    }
+    onAdd() {
+        this.tags$ = of([]);
+        this.setSearchFunction();
+    }
+    onOpen() {
+        this.tagsInput$.next('');
+    }
+    onTagsChange() {
+        this.selectTags.emit(this.tags);
+    }
+    setSearchFunction() {
+        this.tags$ = this.tagsInput$.pipe(debounceTime(this.loadingOnSearch ? 400 : 0), distinctUntilChanged(), tap(() => {
+            this.tagsLoading = true;
+        }), switchMap((term) => this.searchTagsFunction(term).pipe(catchError((response) => {
+            this.searchErrorMessage.emit(response.error ? response.error.message : 'Error');
+            return [];
+        }), map(response => {
+            this.tagsLoading = false;
+            if (!response || Object.keys(response).length == 0) {
+                return [];
+            }
+            return response;
+        }))));
+    }
+}
+TagsSelectorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ap-tags-selector',
+                template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select class=\"tags-select\"\n           [disabled]=\"disabled\"\n           [addTag]=\"addTagEnabled\"\n           [maxSelectedItems]=\"multipleEnabled ? INFINITY : 1\"\n           [multiple]=\"true\"\n           [hideSelected]=\"true\"\n           [placeholder]=\"labels.placeholder\"\n           [loading]=\"tagsLoading\"\n           [items]=\"tags$ | async\"\n           [typeahead]=\"tagsInput$\"\n           [minTermLength]=\"0\"\n           [clearable]=\"false\"\n           [(ngModel)]=\"tags\"\n           (open)=\"onOpen()\"\n           (change)=\"onTagsChange()\"\n           (add)=\"onAdd()\"\n           appendTo=\"body\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n        <div class=\"tag-item\" *ngFor=\"let item of items\">\n            <div class=\"selected-tag\">\n                <div class=\"selected-tag-label\">{{item}}</div>\n                <div class=\"selected-tag-cross-container\" *ngIf=\"!disabled\" (click)=\"clear(item)\">\n                    <ap-symbol class=\"selected-tag-cross\"\n                               [symbolId]=\"'remove-bold'\"\n                               [size]=\"'pico'\"\n                    ></ap-symbol>\n                </div>\n            </div>\n        </div>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n        <div *ngIf=\"search\"><b>{{item.substring(0, search.length)}}</b>{{item.substring(search.length, item.length)}}</div>\n        <div *ngIf=\"!search\">{{item}}</div>\n    </ng-template>\n    <ng-template ng-tag-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n        <div class=\"add-tag\">\n            <ap-symbol class=\"add-tag-icon\"\n                       [symbolId]=\"'add-circle-bold-alternate'\"\n                       [size]=\"'micro'\"\n            ></ap-symbol>\n            <div class=\"add-tag-preview\">{{labels.createTag}} \"{{search}}\"</div>\n        </div>\n    </ng-template>\n</ng-select>\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}:host{max-width:260px;display:flex}.tags-select{width:260px}.tags-select .tag-item{max-width:228px}.tags-select .tag-item .selected-tag{border-radius:100px;background-color:#e8f4ff;padding-left:8px;margin-bottom:4px;margin-right:4px;display:flex;align-items:center}.tags-select .tag-item .selected-tag .selected-tag-label{padding-right:4px;color:#344563;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tags-select .tag-item .selected-tag .selected-tag-cross-container{width:20px;height:20px;border-radius:100px;display:flex;align-items:center;justify-content:center;margin:2px;cursor:pointer}.tags-select .tag-item .selected-tag .selected-tag-cross-container:hover{background-color:#d1e8ff}.tags-select .tag-item .selected-tag .selected-tag-cross-container:hover ::ng-deep ap-symbol *{color:#178dfe}.tags-select .tag-item .selected-tag .selected-tag-cross-container ::ng-deep .selected-tag-cross *{color:#858fa1}::ng-deep .tags-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:64px;padding-left:6px!important}.ng-option ap-symbol{color:#858fa1}.add-tag{display:flex;align-items:center}.add-tag .add-tag-icon{padding-right:8px}.add-tag-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}"]
+            },] }
+];
+/** @nocollapse */
+TagsSelectorComponent.ctorParameters = () => [];
+TagsSelectorComponent.propDecorators = {
+    addTagEnabled: [{ type: Input }],
+    disabled: [{ type: Input }],
+    initialTags: [{ type: Input }],
+    labels: [{ type: Input }],
+    loadingOnSearch: [{ type: Input }],
+    multipleEnabled: [{ type: Input }],
+    searchTagsFunction: [{ type: Input }],
+    selectTags: [{ type: Output }],
+    searchErrorMessage: [{ type: Output }]
+};
+
+var TimeFormat;
+(function (TimeFormat) {
+    TimeFormat["Meridian"] = "Meridian";
+    TimeFormat["Default"] = "Default";
+})(TimeFormat || (TimeFormat = {}));
+class TimepickerComponent {
+    constructor(changeDetectorRef, overlayContainer, renderer) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.overlayContainer = overlayContainer;
+        this.renderer = renderer;
+        this.disabled = false;
+        this.format = TimeFormat.Default;
+        this.invalid = false;
+        this.period = 15;
+        this.placement = 'bottom';
+        this.timeModelChange = new EventEmitter();
+        this.closeMenu = false;
+        this.openedMenu = false;
+        this.position = null;
+        this.previousTime = null;
+        this.TimeFormat = TimeFormat;
+        this.timeFormat12 = /(^[01]?\d)(:)([0-5]\d)(am|pm)+?$/i;
+        this.timeFormat12anySeparator = /(^[01]?\d)([^0-9])([0-5]\d)(am|pm)+?$/i;
+        this.timeFormat12WithoutMinute = /(^[01]?\d)(am|pm)+?$/i;
+        this.timeFormat24 = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
+        this.timeFormat24anySeparator = /^([01]?[0-9]|2[0-3])([^0-9])([0-5][0-9])$/;
+        this.times = [];
+        this.validated = false;
+        this.listFocus = false;
+        this.validationStarted = false;
+        const disableAnimations = true;
+        // get overlay container to set property that disables animations
+        const overlayContainerElement = this.overlayContainer.getContainerElement();
+        // angular animations renderer hooks up the logic to disable animations into setProperty
+        this.renderer.setProperty(overlayContainerElement, "@.disabled", disableAnimations);
+    }
+    ngOnInit() {
+        this.generateTimeSlots();
+    }
+    ngOnChanges(changes) {
+        this.generateTimeSlots();
+        if (changes.placement && changes.placement.currentValue) {
+            if (changes.placement.currentValue === 'top') {
+                this.position = {
+                    top: 179,
+                    left: this.inputBox.nativeElement.getBoundingClientRect().left
+                };
+            }
+            else {
+                this.position = { top: this.inputBox.nativeElement.getBoundingClientRect().top +
+                        this.inputBox.nativeElement.getBoundingClientRect().height,
+                    left: this.inputBox.nativeElement.getBoundingClientRect().left };
+            }
+            setTimeout(() => {
+                this.changeDetectorRef.markForCheck();
+            }, 200);
+        }
+    }
+    emitChanges() {
+        const time24Format = this.format === TimeFormat.Default ? this.timeModel : TimepickerComponent.convert12To24(this.timeModel);
+        const time = {
+            hours: this.getHoursFrom24(time24Format),
+            minutes: this.getMinutesFrom24(time24Format),
+            best: false,
+        };
+        this.timeModelChange.emit(time);
+        this.closeMenu = true;
+        this.changeDetectorRef.detectChanges();
+        this.inputBox.nativeElement.focus();
+    }
+    getHoursFrom24(time24Format) {
+        return +(time24Format.split(':')[0]);
+    }
+    getMinutesFrom24(time24Format) {
+        return +(time24Format.split(':')[1]);
+    }
+    generateTimeSlots() {
+        this.changeDetectorRef.detectChanges();
+        this.times = Object.assign([], []);
+        if (!this.timeModel) {
+            this.timeModel = moment().format('HH:mm');
+        }
+        if (this.format === TimeFormat.Meridian) {
+            if (!this.timeModel.includes('am') && !this.timeModel.includes('pm')) {
+                this.timeModel = TimepickerComponent.convert24To12(this.timeModel);
+            }
+        }
+        else {
+            if (this.timeModel.includes('am') || this.timeModel.includes('pm')) {
+                this.timeModel = TimepickerComponent.convert12To24(this.timeModel);
+            }
+        }
+        for (let i = 0; i < 24; i++) {
+            let hour = i;
+            let meridian = '';
+            if (this.format === TimeFormat.Meridian) {
+                meridian = 'am';
+                if (hour >= 12) {
+                    meridian = 'pm';
+                    if (hour > 12) {
+                        hour = hour - 12;
+                    }
+                }
+                if (hour === 0) {
+                    hour = 12;
+                }
+            }
+            for (let j = 0; j < 60; j += this.period) {
+                const time = hour + ':' + TimepickerComponent.toFixed(j, 10) + meridian;
+                this.times = [...this.times, time];
+            }
+        }
+        if (!this.timeModel) {
+            this.timeModel = moment().format('HH:mm');
+            if (this.format === TimeFormat.Meridian) {
+                this.timeModel = moment().format('hh:mma');
+            }
+        }
+        this.changeDetectorRef.detectChanges();
+    }
+    focusOnList(focusEnabled) {
+        this.listFocus = focusEnabled;
+    }
+    onMenuClosed() {
+        this.closeMenu = true;
+        this.openedMenu = false;
+        this.listFocus = false;
+        if (!this.validationStarted) {
+            this.validate(this.timeModel);
+        }
+        this.viewPort.setRenderedContentOffset(0);
+        this.viewPort.scrollToIndex(0);
+        this.validated = false;
+        this.validationStarted = false;
+    }
+    onModelChange(time) {
+        this.timeActive = null;
+        if (!this.validated) {
+            for (let i = 0; i < this.times.length; i++) {
+                const checkTime = this.checkTime(time, this.times[i]);
+                if (checkTime.match) {
+                    this.scrollToIndex(i);
+                    if (checkTime.exactMatch) {
+                        this.timeActive = i;
+                    }
+                    break;
+                }
+            }
+        }
+        this.validated = false;
+    }
+    openTimePicker() {
+        this.previousTime = this.timeModel;
+        this.closeMenu = false;
+        if (this.placement === 'top') {
+            this.position = {
+                top: 179,
+                left: this.inputBox.nativeElement.getBoundingClientRect().left
+            };
+        }
+        else {
+            this.position = { top: (this.inputBox.nativeElement.getBoundingClientRect().top - 1),
+                left: this.inputBox.nativeElement.getBoundingClientRect().left };
+        }
+        if (!this.openedMenu && !this.validated) {
+            this.openedMenu = true;
+            setTimeout(() => {
+                var _a, _b;
+                this.onModelChange(this.timeModel);
+                (_a = this.inputTime) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+                (_b = this.inputTime) === null || _b === void 0 ? void 0 : _b.nativeElement.select();
+            }, 50);
+        }
+        this.validated = false;
+        return false;
+    }
+    selectTime(time) {
+        this.timeModel = time;
+        this.emitChanges();
+    }
+    validate(time) {
+        this.validationStarted = true;
+        if (!this.listFocus) {
+            if (this.timeFormat24anySeparator.test(time)) {
+                time = time.replace(this.timeFormat24anySeparator, '$1:$3');
+            }
+            else if (this.timeFormat12anySeparator.test(time)) {
+                time = time.replace(this.timeFormat12anySeparator, '$1:$3$4');
+            }
+            this.validated = true;
+            let timeFound = false;
+            for (let i = 0; i < this.times.length; i++) {
+                const checkTime = this.checkTime(time, this.times[i]);
+                if (checkTime.match && checkTime.exactMatch) {
+                    this.selectTime(this.times[i]);
+                    timeFound = true;
+                    break;
+                }
+            }
+            if (!timeFound) {
+                let validTime;
+                if (this.format === TimeFormat.Meridian) {
+                    validTime = this.timeFormat12.test(time);
+                    if (!validTime) {
+                        validTime = this.timeFormat24.test(time);
+                        if (validTime) {
+                            time = TimepickerComponent.convert24To12(time);
+                        }
+                        else {
+                            validTime = this.timeFormat12WithoutMinute.test(time);
+                            if (validTime) {
+                                time = time.replace(this.timeFormat12WithoutMinute, '$1:00$2');
+                            }
+                        }
+                    }
+                }
+                else {
+                    validTime = this.timeFormat24.test(time);
+                    if (!validTime) {
+                        validTime = this.timeFormat12.test(time);
+                        if (validTime) {
+                            time = TimepickerComponent.convert12To24(time);
+                        }
+                    }
+                }
+                if (validTime) {
+                    this.selectTime(time);
+                }
+                else {
+                    this.selectTime(this.previousTime);
+                }
+            }
+        }
+    }
+    scrollToIndex(i) {
+        this.viewPort.scrollToIndex(i, 'smooth');
+    }
+    static formatTime(time, format) {
+        let timeString = `${time.hours}` + ':' + `${time.minutes}`.padStart(2, '0');
+        if (format === TimeFormat.Meridian) {
+            timeString = TimepickerComponent.convert24To12(timeString);
+        }
+        return timeString;
+    }
+    checkTime(term, termToMatch) {
+        var _a;
+        let exactMatch = true;
+        if (this.timeFormat24anySeparator.test(term)) {
+            term = term.replace(this.timeFormat24anySeparator, '$1:$3');
+        }
+        else if (this.timeFormat12anySeparator.test(term)) {
+            term = term.replace(this.timeFormat12anySeparator, '$1:$3$4');
+        }
+        if (term === '') {
+            return { match: false, exactMatch: false };
+        }
+        const terms = term.split(':');
+        if ((!isNaN(parseInt(terms[0]))) && ((_a = terms[1]) === null || _a === void 0 ? void 0 : _a.length) >= 2 && !isNaN(parseInt(terms[1].substring(0, 2)))) {
+            const hour = parseInt(terms[0]);
+            let newHour = hour;
+            let newMinutes = terms[1].substring(0, 2);
+            const minutes = parseInt(newMinutes);
+            if (minutes !== 0) {
+                if (minutes <= 15) {
+                    newMinutes = '15';
+                }
+                else if (minutes <= 30) {
+                    newMinutes = '30';
+                }
+                else if (minutes <= 45) {
+                    newMinutes = '45';
+                }
+                else {
+                    newHour += 1;
+                    newMinutes = '00';
+                }
+            }
+            if (parseInt(newMinutes) !== minutes || newHour !== hour) {
+                exactMatch = false;
+            }
+            term = newHour + ':' + newMinutes + terms[1].substring(2, terms[1].length);
+        }
+        let meridian = '';
+        if (this.format === TimeFormat.Meridian) {
+            if (terms[0]) {
+                if (!isNaN(parseInt(terms[0]))) {
+                    let hour = parseInt(terms[0]);
+                    if (hour > 12) {
+                        hour = hour - 12;
+                        term = hour + ':' + (terms[1] ? terms[1].substring(0, 2) : '00');
+                        meridian = 'pm';
+                    }
+                    if (!term.endsWith('am') && !term.endsWith('pm')) {
+                        term += meridian;
+                    }
+                }
+            }
+            if (this.timeFormat12WithoutMinute.test(term)) {
+                term = term.substring(0, term.length - 2) + ':00' + term.substring(term.length - 2, term.length);
+            }
+        }
+        return { match: termToMatch.startsWith(term), exactMatch };
+    }
+    static convert12To24(time) {
+        const terms = time.split(':');
+        const minutes = terms[1].substring(0, 2);
+        const meridian = terms[1].substring(2, 4);
+        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]);
+        if (!isNaN(parseInt(terms[0]))) {
+            if (hour >= 12) {
+                meridian = 'pm';
+                if (hour > 12) {
+                    hour = hour - 12;
+                }
+            }
+            if (hour === 0) {
+                hour = 12;
+            }
+        }
+        return hour + ':' + terms[1] + meridian;
+    }
+    static toFixed(num, fix) {
+        let fixedNum = num;
+        if (num < fix) {
+            fixedNum = '0' + fixedNum;
+        }
+        return fixedNum;
+    }
+}
+TimepickerComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-timepicker',
+                template: "<div class=\"display-flex\" [class.meridian]=\"format === TimeFormat.Meridian\">\n    <ng-template #timeOptionsTemplate >\n        <input #inputTime\n               *ngIf=\"placement == 'bottom'\"\n               class=\"time-input menu\"\n               type=\"text\"\n               [(ngModel)]=\"timeModel\"\n               (ngModelChange)=\"onModelChange($event)\"\n               (blur)=\"validate($event?.target?.value)\"\n               (keydown.enter)=\"validate($event?.target?.value)\"\n               (mouseenter)=\"focusOnList(false)\">\n        <div class=\"time-options-container {{placement}}\"\n             (mouseenter)=\"focusOnList(true)\"\n             (mouseleave)=\"focusOnList(false)\">\n            <cdk-virtual-scroll-viewport style=\"height: 100%\" itemSize=\"33\" class=\"scroll\" minBufferPx=\"200\" maxBufferPx=\"200\" autofocus>\n                <div style=\"visibility: hidden;max-height: 0\">\u20AC</div>\n                <div *cdkVirtualFor=\"let item of times;let i = index\"  (click)=\"selectTime(item)\" id=\"_apTime_{{i}}\" class=\"time-line\" [class.selected]=\"timeActive === i\">\n                    <span class=\"hour\">{{item}}</span>\n                </div>\n            </cdk-virtual-scroll-viewport>\n        </div>\n        <input #inputTime\n               *ngIf=\"placement == 'top'\"\n               class=\"time-input menu\"\n               type=\"text\"\n               [(ngModel)]=\"timeModel\"\n               (ngModelChange)=\"onModelChange($event)\"\n               (blur)=\"validate($event?.target?.value)\"\n               (keydown.enter)=\"validate($event?.target?.value)\"\n               (mouseenter)=\"focusOnList(false)\">\n\n    </ng-template>\n\n    <input #inputBox\n           class=\"time-input\"\n           [ngClass]=\"{'invalid': invalid}\"\n           type=\"text\"\n           [(ngModel)]=\"timeModel\"\n           (click)=\"openTimePicker()\"\n           [disabled]=\"disabled\"\n           [apPopmenu]=\"timeOptionsTemplate\"\n           [apTooltipNeo]=\"{content: invalidationMessage, display: invalidationMessage && invalid}\"\n           [shadow]=\"false\"\n           [apPopmenuBorder]=\"false\"\n           [apPopmenuBackground]=\"false\"\n           [hasBackdrop]=\"true\"\n           [close]=\"closeMenu\"\n           [pointer]=\"true\"\n           [position]=\"position\"\n           [placement]=\"placement\"\n           [rounded]=\"true\"\n           (menuClosed)=\"onMenuClosed()\"\n           placement=\"bottom right\"\n           color=\"secondary\"\n           readonly>\n\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-options-container{background-color:#fff;border-radius:4px;box-shadow:0 7px 50px #00000014;z-index:999999;pointer-events:all;height:173px;width:170px;overflow-y:hidden;text-align:left;color:#344563}.time-options-container.bottom{margin-top:5px}.time-options-container.top{margin-bottom:5px}.time-options-container .scroll{overflow-x:hidden}.time-options-container .time-line{height:33px;min-width:165px;cursor:pointer;display:flex;align-items:center}.time-options-container .time-line.selected,.time-options-container .time-line:hover{background-color:#e8f4ff!important;color:#178dfe}.time-options-container .time-line span{padding-left:16px}.hidden{display:none!important}.time-input{color:#344563;font-family:inherit;font-weight:400;height:36px;line-height:24px;margin:0;min-width:0;width:80px;outline:none;z-index:0;cursor:text;border-radius:4px;border:1px solid #d6dae0;text-align:center;padding:0}.time-input.invalid{border:1px solid #e81313;border-radius:4px}.time-input[disabled]{color:#aeb5c1}.time-input[disabled]:hover{cursor:auto!important}.time-input:hover:not([disabled]){cursor:text}.time-input.menu,.time-input:active:not([disabled]),.time-input:focus:not([disabled]){border:1px solid #178dfe}.time-input.menu.top{padding-bottom:0}"]
+            },] }
+];
+/** @nocollapse */
+TimepickerComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef },
+    { type: OverlayContainer },
+    { type: Renderer2 }
+];
+TimepickerComponent.propDecorators = {
+    inputBox: [{ type: ViewChild, args: ['inputBox',] }],
+    inputTime: [{ type: ViewChild, args: ['inputTime',] }],
+    viewPort: [{ type: ViewChild, args: [CdkVirtualScrollViewport,] }],
+    disabled: [{ type: Input }],
+    format: [{ type: Input }],
+    invalid: [{ type: Input }],
+    invalidationMessage: [{ type: Input }],
+    period: [{ type: Input }],
+    placement: [{ type: Input }],
+    timeModel: [{ type: Input }],
+    timeModelChange: [{ type: Output }]
+};
+
+class NotificationComponent {
+    constructor() {
+        this.type = 'info';
+    }
+}
+NotificationComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ap-notification',
+                template: "<div\n    class=\"main\"\n    [ngClass]=\"{'warning': type === 'warning', 'error': type === 'error', 'success': type === 'success'}\">\n    <span class=\"border\"></span>\n    <span class=\"icon\">\n        <ng-content select=\"[icon]\"></ng-content>\n    </span>\n    <ng-content select=\"[text]\"></ng-content>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                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}:host{display:block}.main{display:flex;font-size:14px;line-height:17px;align-items:center;background:#eff5fc;color:#178dfe;padding:8px 16px 8px 8px;border-radius:4px}.main .border{align-self:stretch;border:2px solid #178dfe;border-radius:4px}.main .border,.main .icon{margin-right:8px}.main.warning{background-color:#fffde9;color:#858fa1}.main.warning .border{border-color:#ffe91f}.main.error{background-color:#fde7e7;color:#e81313}.main.error .border{border-color:#e81313}.main.success{background-color:#ecf7ed;color:#45b854}.main.success .border{border-color:#45b854}.main.full-width{width:100%}"]
+            },] }
+];
+NotificationComponent.propDecorators = {
+    type: [{ type: Input }]
+};
+
+class StepperComponent {
+    constructor() {
+        this.steps = []; // Immutable after init.
+        this.stepClicked = new EventEmitter();
+        this.stepTexts = {};
+        this.currentIndex = 0;
+    }
+    ngOnChanges(changes) {
+        var _a;
+        if (((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.currentStep) {
+            this.currentIndex = this.steps.findIndex(step => step.id === this.currentStep.id);
+        }
+        else {
+            this.currentIndex = 0;
+        }
+    }
+    clickCurrentStep(step) {
+        this.stepClicked.emit(step);
+    }
+}
+StepperComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-stepper',
+                template: "<div class=\"main\">\n    <span class=\"item\"\n          *ngFor=\"let step of steps; let index=index; let last=last\" >\n        <span [ngClass]=\" {\n                'number': true,\n                'active': index === currentIndex,\n                'no-more-active': currentIndex > index,\n                'not-yet-active': currentIndex < index}\">\n            {{index + 1}}\n        </span>\n        <span class=\"text\" [ngClass]=\"{'clickable': step.clickable}\" (click)=\"step.clickable ? clickCurrentStep(step) : false\">\n        {{step.name}}\n        </span>\n        <ap-symbol\n            *ngIf=\"!last\"\n            [id]=\"'arrow-right-1'\"\n            [size]=\"'12px'\">\n        </ap-symbol>\n    </span>\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}.active{font-weight:700}.main{display:flex}.main .item{height:-moz-fit-content;height:fit-content}.main .item .number{border-radius:24px;width:24px;height:24px;display:inline-block;text-align:center;vertical-align:middle;line-height:24px;box-sizing:border-box}.main .item .number.active{box-shadow:0 0 0 1.5px #e8f4ff;border:1.5px solid #e8f4ff;line-height:21px;background-color:#178dfe;color:#fff}.main .item .number.no-more-active{background-color:#e8f4ff;color:#178dfe}.main .item .number.not-yet-active{border:1px solid #e8f4ff;line-height:22px;background-color:initial;color:#178dfe}.main .item .text{padding-left:8px;height:-moz-fit-content;height:fit-content;margin:auto;line-height:24px;vertical-align:middle}.main .item .text.clickable:hover{color:#178dfe;cursor:pointer}.main .item ap-symbol{color:#858fa1;margin:auto 10px;vertical-align:middle;display:inline-block}"]
+            },] }
+];
+/** @nocollapse */
+StepperComponent.ctorParameters = () => [];
+StepperComponent.propDecorators = {
+    currentStep: [{ type: Input }],
+    steps: [{ type: Input }],
+    stepClicked: [{ type: Output }]
+};
+
+class SnackBarComponent {
+    constructor(snackBarRef, data) {
+        this.snackBarRef = snackBarRef;
+        this.data = data;
+    }
+}
+SnackBarComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-snackbar',
+                template: "<div class=\"snackbar-content\">\n    <div class=\"snackbar-text\" [innerHTML]=\"data.message\">\n    </div>\n    <ap-symbol\n        class=\"snackbar-close\"\n        symbolId=\"close\"\n        size=\"12\"\n        (click)=\"snackBarRef.dismiss()\">\n    </ap-symbol>\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}.snackbar-content{display:flex;margin-top:4px}.snackbar-content .snackbar-close{margin-top:2px;margin-left:32px;cursor:pointer;color:#d6dae0}.snackbar-content .snackbar-text{flex:1}:host-context(.warning) .snackbar-content .snackbar-close{color:#858fa1}"]
+            },] }
+];
+/** @nocollapse */
+SnackBarComponent.ctorParameters = () => [
+    { type: MatSnackBarRef },
+    { type: undefined, decorators: [{ type: Inject, args: [MAT_SNACK_BAR_DATA,] }] }
+];
+
+class PaginatorComponent {
+    constructor() {
+        this.itemCount = 0;
+        this.itemCountPerPage = 10;
+        this.edgeSize = 5;
+        this.middleSize = 3;
+        this.currentPageIndex = 0;
+        this.currentPageIndexChange = new EventEmitter();
+        this.pageCount = 0;
+        this.firstPageDisplayed = true;
+        this.lastPageDisplayed = true;
+    }
+    ngOnChanges(changes) {
+        // make sure middle size is an odd number
+        if (changes.middleSize && this.middleSize % 2 === 0) {
+            this.middleSize++;
+        }
+        if (this.itemCountPerPage && (changes.itemCount || changes.itemCountPerPage) || changes.currentPageIndex) {
+            this.pageCount = Math.ceil(this.itemCount / this.itemCountPerPage);
+            // make sure page index is between min and max page index
+            this.currentPageIndex = Math.max(0, Math.min(this.pageCount - 1, this.currentPageIndex));
+            this.firstPageDisplayed = this.currentPageIndex === 0;
+            this.lastPageDisplayed = this.currentPageIndex === this.pageCount - 1;
+        }
+    }
+    onSelectPage(pageIndex) {
+        this.currentPageIndexChange.emit(pageIndex);
+    }
+}
+PaginatorComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ap-paginator',
+                template: "<div class=\"item-index-overview\">\n    {{(currentPageIndex * itemCountPerPage) + 1}}\n    -{{lastPageDisplayed ? itemCount : (currentPageIndex + 1) * itemCountPerPage}}\n    of {{itemCount}}\n</div>\n\n<div class=\"pages\">\n    <button class=\"square\"\n            mat-flat-button\n            [disabled]=\"firstPageDisplayed\"\n            (click)=\"onSelectPage(currentPageIndex - 1)\">\n        <ap-symbol symbolId=\"arrow-left-1\"></ap-symbol>\n    </button>\n    <ng-container *ngIf=\"pageCount > edgeSize + 1; else allPagesDisplayed\">\n        <ng-container *ngIf=\"currentPageIndex >= edgeSize - 1; else oneOfFirstPagesDisplayed\">\n            <ng-container *ngIf=\"currentPageIndex <= pageCount - edgeSize; else oneOfLastPagesDisplayed\">\n                <ap-paginator-button [pageIndex]=\"0\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n                <span class=\"ellipsis\">...</span>\n                <ng-container *ngFor=\"let dummy of [].constructor(middleSize); let i = index\">\n                    <ap-paginator-button [pageIndex]=\"currentPageIndex + i - (middleSize - 1) / 2\"\n                                         [selectedPageIndex]=\"currentPageIndex\"\n                                         (selectPage)=\"onSelectPage($event)\">\n                    </ap-paginator-button>\n                </ng-container>\n                <span class=\"ellipsis\">...</span>\n                <ap-paginator-button [pageIndex]=\"pageCount - 1\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n        </ng-container>\n        <ng-template #oneOfFirstPagesDisplayed>\n            <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n                <ap-paginator-button [pageIndex]=\"i\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n            <span class=\"ellipsis\">...</span>\n            <ap-paginator-button [pageIndex]=\"pageCount - 1\"\n                                 [selectedPageIndex]=\"currentPageIndex\"\n                                 (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n        </ng-template>\n        <ng-template #oneOfLastPagesDisplayed>\n            <ap-paginator-button [pageIndex]=\"0\"\n                                 [selectedPageIndex]=\"currentPageIndex\"\n                                 (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n            <span class=\"ellipsis\">...</span>\n            <ng-container *ngFor=\"let dummy of [].constructor(edgeSize); let i = index\">\n                <ap-paginator-button [pageIndex]=\"pageCount - edgeSize + i\"\n                                     [selectedPageIndex]=\"currentPageIndex\"\n                                     (selectPage)=\"onSelectPage($event)\">\n                </ap-paginator-button>\n            </ng-container>\n        </ng-template>\n    </ng-container>\n    <ng-template #allPagesDisplayed>\n        <ng-container *ngFor=\"let dummy of [].constructor(pageCount); let i = index\">\n            <ap-paginator-button [pageIndex]=\"i\"\n                                 [selectedPageIndex]=\"currentPageIndex\"\n                                 (selectPage)=\"onSelectPage($event)\">\n            </ap-paginator-button>\n        </ng-container>\n    </ng-template>\n    <button class=\"square\"\n            mat-flat-button\n            [disabled]=\"lastPageDisplayed\"\n            (click)=\"onSelectPage(currentPageIndex + 1)\">\n        <ap-symbol symbolId=\"arrow-right-1\"></ap-symbol>\n    </button>\n</div>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                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}.item-index-overview{position:absolute;line-height:36px}.pages{display:flex;justify-content:center;color:#178dfe}.pages ap-paginator-button,.pages button.mat-flat-button{vertical-align:middle}.pages button.mat-flat-button:not(.mat-accent):not([disabled]){color:#178dfe}.pages button.mat-flat-button:not(.mat-accent):not([disabled]):hover{background-color:#e8f4ff}.pages .ellipsis{display:inline-block;width:36px;line-height:36px;text-align:center;vertical-align:bottom}"]
+            },] }
+];
+PaginatorComponent.propDecorators = {
+    itemCount: [{ type: Input }],
+    itemCountPerPage: [{ type: Input }],
+    edgeSize: [{ type: Input }],
+    middleSize: [{ type: Input }],
+    currentPageIndex: [{ type: Input }],
+    currentPageIndexChange: [{ type: Output }]
+};
+
+class PaginatorButtonComponent {
+    constructor() {
+        this.pageIndex = 0;
+        this.selectedPageIndex = 0;
+        this.selectPage = new EventEmitter();
+    }
+}
+PaginatorButtonComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ap-paginator-button',
+                template: "<button class=\"square\"\n        mat-flat-button\n        [color]=\"selectedPageIndex === pageIndex ? 'accent' : undefined\"\n        (click)=\" selectPage.emit(pageIndex)\">\n    {{pageIndex + 1}}\n</button>\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                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}button.mat-flat-button{color:#178dfe}button.mat-flat-button:not(.mat-accent):not([disabled]):hover{background-color:#e8f4ff}"]
+            },] }
+];
+PaginatorButtonComponent.propDecorators = {
+    pageIndex: [{ type: Input }],
+    selectedPageIndex: [{ type: Input }],
+    selectPage: [{ type: Output }]
+};
+
+class PhoneNumberInputComponent {
+    constructor() {
+        this.changePhoneNumber = new EventEmitter();
+        this.changePhoneNumberCode = new EventEmitter();
+        this.currentPhoneNumberCode = '';
+        this.currentPhoneNumber = '';
+        this.codeValid = false;
+        this.numberValid = false;
+        this.valid = false;
+        this.onTouched = () => { };
+        this.onChanged = () => { };
+    }
+    set phoneNumber(phoneNumber) {
+        this.updatePhone(undefined, phoneNumber, false);
+    }
+    set phoneNumberCode(phoneNumberCode) {
+        this.updatePhone(phoneNumberCode, undefined, false);
+    }
+    ngOnChanges(changes) {
+        this.checkValidation();
+    }
+    ngOnInit() {
+        this.checkValidation();
+    }
+    filterChars(event) {
+        const pattern = /[0-9]/;
+        const inputChar = String.fromCharCode(event.charCode);
+        if (!pattern.test(inputChar)) {
+            event.preventDefault();
+        }
+    }
+    onChangePhoneNumberCode(code) {
+        this.updatePhone(code, undefined);
+    }
+    onChangePhoneNumber(phoneNumber) {
+        this.updatePhone(undefined, phoneNumber);
+    }
+    updatePhone(code, phoneNumber, emitOnChange = true) {
+        let updated = false;
+        if (code !== undefined && code !== this.currentPhoneNumberCode) {
+            this.currentPhoneNumberCode = code;
+            this.changePhoneNumberCode.emit(code);
+            updated = true;
+        }
+        if (phoneNumber !== undefined && phoneNumber !== this.currentPhoneNumber) {
+            this.currentPhoneNumber = phoneNumber;
+            this.changePhoneNumber.emit(phoneNumber);
+            updated = true;
+        }
+        if (updated) {
+            this.checkValidation();
+            if (emitOnChange) {
+                this.onChanged({
+                    phoneNumber: this.currentPhoneNumber,
+                    phoneNumberCode: this.currentPhoneNumberCode
+                });
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChanged = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    validate(control) {
+        return (!this.required || this.valid) ? null : { phoneNumber: 'invalid' };
+    }
+    writeValue(phone) {
+        if (!phone) {
+            this.updatePhone('', '', false);
+        }
+        else if ('phoneNumber' in phone && 'phoneNumberCode' in phone) {
+            this.updatePhone(phone.phoneNumberCode, phone.phoneNumber, false);
+        }
+        else {
+            console.error('Phone number input ignored, wrong format: ' + JSON.stringify(phone));
+        }
+    }
+    phoneNumberCodeSearchFn(term, item) {
+        term = term.toLocaleLowerCase();
+        return item.countryName.toLocaleLowerCase().indexOf(term) > -1 || item.phoneNumberCode.toLocaleLowerCase().indexOf(term) > -1;
+    }
+    checkValidation() {
+        this.codeValid = !this.required || (this.currentPhoneNumberCode && this.currentPhoneNumberCode.length > 0);
+        this.numberValid = !this.required || (this.currentPhoneNumber && this.currentPhoneNumber.length > 0);
+        this.valid = this.codeValid && this.numberValid;
+    }
+}
+PhoneNumberInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ap-phone-number-input',
+                template: "<div class=\"main-container\">\n    <ng-select\n        #phoneNumberCodeInput=\"ngModel\"\n        name=\"phoneNumberCodeInput\"\n        class=\"phone-select\"\n        [ngClass]=\"{ 'invalid': (!codeValid) && (submitted || phoneNumberCodeInput.touched), 'valid' : statusOk && codeValid && phoneNumberCodeInput.touched}\"\n        [items]=\"phoneNumberInfos\"\n        bindLabel=\"countryName\"\n        bindValue=\"phoneNumberCode\"\n        [clearable]=\"false\"\n        [searchable]=\"true\"\n        [searchFn]=\"phoneNumberCodeSearchFn\"\n        (ngModelChange)=\"onChangePhoneNumberCode($event)\"\n        (focusin)=\"this.onTouched()\"\n        [ngModel]=\"currentPhoneNumberCode\">\n        <ng-template\n            ng-label-tmp\n            let-item=\"item\">\n            <div\n                *ngIf=\"item && item.countryCode\"\n                class=\"flag\">\n                <img *ngIf=\"!!flagsBucketUrl\" [src]=\"flagsBucketUrl+'/' + item.countryCode.toUpperCase() + '.png'\" width=\"24\" alt=\"flag\">\n                <span *ngIf=\"!flagsBucketUrl\">{{ item.countryCode }}</span>\n            </div>\n        </ng-template>\n        <ng-template\n            ng-option-tmp\n            let-item=\"item\">\n            <div> {{ item.countryName }} - {{item.phoneNumberCode}}</div>\n        </ng-template>\n    </ng-select>\n    <div\n        class=\"code-container\"\n        [ngClass]=\"{ 'invalid': (!numberValid) && (submitted || phoneNumberInput.touched), 'valid' : statusOk && numberValid && phoneNumberInput.touched }\">\n        <span *ngIf=\"currentPhoneNumberCode\">\n            ({{currentPhoneNumberCode}})\n        </span>\n    </div>\n    <div\n        class=\"separator-container\"\n        [ngClass]=\"{ 'invalid': (!numberValid) && (submitted || phoneNumberInput.touched), 'valid' : statusOk && numberValid && phoneNumberInput.touched }\">\n        <div class=\"separator\"></div>\n    </div>\n    <div\n        class=\"input-wrapper\"\n        [ngClass]=\"{ 'invalid': (!numberValid) && (submitted || phoneNumberInput.touched), 'valid' : statusOk && numberValid && phoneNumberInput.touched}\">\n        <input\n            #phoneNumberInput=\"ngModel\"\n            name=\"phoneNumberInput\"\n            type=\"tel\"\n            data-recurly=\"phone\"\n            class=\"flex-2 phone-field\"\n            [ngModel]=\"currentPhoneNumber\"\n            (keypress)=\"filterChars($event)\"\n            (ngModelChange)=\"onChangePhoneNumber($event)\"\n            (focusin)=\"onTouched()\">\n    </div>\n</div>\n<div class=\"form-field-message invalid\"\n     [hidden]=\"!(!valid && (submitted || phoneNumberInput.touched))\">\n    {{ requiredLabel }}\n</div>\n",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => PhoneNumberInputComponent),
+                        multi: true
+                    },
+                    {
+                        provide: NG_VALIDATORS,
+                        useExisting: forwardRef(() => PhoneNumberInputComponent),
+                        multi: true
+                    }
+                ],
+                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}.main-container{display:flex}.main-container div.code-container{border-top:1px solid #d6dae0;border-left:1px solid #d6dae0;border-bottom:1px solid #d6dae0;border-right-width:0;border-top-left-radius:4px;border-bottom-left-radius:4px;color:#344563;flex:1 0 auto;display:flex;font-weight:400;font-size:14px;justify-content:center;margin-left:8px;min-width:32px;padding:8px 0 8px 16px;text-align:center;background-color:#fff}.main-container div.code-container.invalid{border-top-color:#e81313;border-left-color:#e81313;border-bottom-color:#e81313}.main-container div.code-container.valid{border-top-color:#45b854;border-left-color:#45b854;border-bottom-color:#45b854}.main-container div.code-container span{margin-top:auto;margin-bottom:auto}.main-container div.separator-container{display:flex;flex-direction:column;justify-content:center;align-content:center;background-color:#fff;border-bottom:1px solid #d6dae0;border-top:1px solid #d6dae0;min-height:30px;padding-right:8px;padding-left:6px;width:4px}.main-container div.separator-container.invalid{border-bottom-color:#e81313;border-top-color:#e81313}.main-container div.separator-container.valid{border-bottom-color:#45b854;border-top-color:#45b854}.main-container div.separator-container div.separator{border-right:1px solid #f5f5f7;height:16px}.main-container .input-wrapper{background-color:#fff;border-top:1px solid #d6dae0;border-right:1px solid #d6dae0;border-bottom:1px solid #d6dae0;border-left-width:0;border-radius:0 4px 4px 0;padding:8px 0;width:100%}.main-container .input-wrapper.invalid{border-bottom-color:#e81313;border-top-color:#e81313;border-right-color:#e81313}.main-container .input-wrapper.valid{border-bottom-color:#45b854;border-top-color:#45b854;border-right-color:#45b854}.main-container .input-wrapper input.phone-field{border:none;color:#344563;font-style:normal;font-weight:400;font-size:14px;height:100%;padding:0;width:inherit}.main-container .phone-select{flex:1 0 auto;width:70px}.main-container .phone-select ::ng-deep .ng-input{padding:2px 16px}.main-container .phone-select ::ng-deep .ng-dropdown-panel{width:auto}.main-container .phone-select .flag{display:flex}"]
+            },] }
+];
+PhoneNumberInputComponent.propDecorators = {
+    flagsBucketUrl: [{ type: Input }],
+    phoneNumberInfos: [{ type: Input }],
+    phoneNumber: [{ type: Input }],
+    phoneNumberCode: [{ type: Input }],
+    required: [{ type: Input }],
+    requiredLabel: [{ type: Input }],
+    submitted: [{ type: Input }],
+    statusOk: [{ type: Input }],
+    changePhoneNumber: [{ type: Output }],
+    changePhoneNumberCode: [{ type: Output }]
+};
+
+class SlideToggleComponent {
+    constructor() {
+        this._checked = false;
+        this.disabled = false;
+        this.checkedChange = new EventEmitter();
+        this.onTouched = () => {
+        };
+        this.onChanged = () => {
+        };
+    }
+    set checked(status) {
+        this._checked = status;
+        this.onChanged(status);
+    }
+    get checked() {
+        return this._checked;
+    }
+    checkManuallyChange(checked) {
+        if (this._checked !== checked) {
+            this.checkedChange.emit(checked);
+        }
+    }
+    onClick() {
+        if (!this.disabled) {
+            this.checkedChange.emit(!this.checked);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChanged = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    writeValue(status) {
+        this.checked = status;
+    }
+}
+SlideToggleComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ap-slide-toggle',
+                template: "<label\n    class=\"switch\"\n    [ngClass]=\"{checked:checked, enabled: !disabled}\"\n    (click)=\"onClick()\">\n    <span\n        [ngClass]=\"{checked:checked}\"\n        class=\"slider\">\n    </span>\n</label>\n",
+                providers: [
+                    {
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => SlideToggleComponent),
+                        multi: true
+                    }
+                ],
+                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}.switch{position:relative;display:inline-block;width:34px;height:16px;background-color:#ccc;border-radius:14px}.switch.enabled{cursor:pointer}.switch.checked{background-color:#00aeef}.slider{position:absolute;top:1px;left:1px;right:0;bottom:0;transition:.2s;content:\"\";height:14px;width:14px;border-radius:50%;background-color:#fff}.slider.checked{transform:translateX(18px)}"]
+            },] }
+];
+SlideToggleComponent.propDecorators = {
+    checked: [{ type: Input }],
+    disabled: [{ type: Input }],
+    checkedChange: [{ type: Output }]
+};
+
+class PasswordStrengthBarComponent {
+    constructor() {
+        this.defaultStrength = ['weak', 'fair', 'good', 'strong', 'excellent'];
+        this.labels = ['Weak', 'Fair', 'Good', 'Strong', 'Excellent'];
+    }
+    getStrengthIndexAndColor(password) {
+        return this.getColor(PasswordStrengthBarComponent.measureStrength(password));
+    }
+    ngOnChanges(changes) {
+        var _a;
+        const password = (_a = changes.passwordToCheck) === null || _a === void 0 ? void 0 : _a.currentValue;
+        if (password) {
+            const idx = this.getStrengthIndexAndColor(password);
+            this.passwordStrength = this.defaultStrength[idx - 1];
+            this.label = this.labels[idx - 1];
+        }
+    }
+    ngOnInit() {
+        this.labels = [this.labelWeak, this.labelFair, this.labelGood, this.labelStrong, this.labelExcellent];
+    }
+    static measureStrength(p) {
+        let force = 0;
+        const regex = /[$-/:-?{-~!"^_`\[\]]/g; // "
+        const lowerLetters = /[a-z]+/.test(p);
+        const upperLetters = /[A-Z]+/.test(p);
+        const numbers = /[0-9]+/.test(p);
+        const symbols = regex.test(p);
+        const flags = [lowerLetters, upperLetters, numbers, symbols];
+        let passedMatches = 0;
+        for (let flag of flags) {
+            passedMatches += flag === true ? 1 : 0;
+        }
+        force += 2 * p.length + ((p.length >= 10) ? 1 : 0);
+        force += passedMatches * 10;
+        // penality (short password)
+        force = (p.length <= 5) ? Math.min(force, 10) : force;
+        // penality (poor variety of characters)
+        force = (passedMatches === 1) ? Math.min(force, 10) : force;
+        force = (passedMatches === 2) ? Math.min(force, 20) : force;
+        force = (passedMatches === 3) ? Math.min(force, 40) : force;
+        return force;
+    }
+    getColor(strength) {
+        let idx = 0;
+        if (strength <= 10) {
+            idx = 0;
+        }
+        else if (strength <= 20) {
+            idx = 1;
+        }
+        else if (strength <= 30) {
+            idx = 2;
+        }
+        else if (strength <= 40) {
+            idx = 3;
+        }
+        else {
+            idx = 4;
+        }
+        return idx + 1;
+    }
+}
+PasswordStrengthBarComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-password-strength-bar',
+                template: "<div id=\"managerPasswordStrength\">\n    <div class=\"managerPasswordStrengthBar\">\n        <span [className]=\"'security-bar ' + passwordStrength\"\n              *ngIf=\"!!passwordStrength\">\n        </span>\n    </div>\n    <div class=\"managerPasswordStrengthLabel\">\n        <span class=\"password-strength-label caption\"\n              *ngIf=\"!!passwordStrength\">\n            {{ label }}\n        </span>\n    </div>\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}.managerPasswordStrengthLabel{display:flex;width:100%}.managerPasswordStrengthLabel .password-strength-label{font-size:12px;margin-top:4px}div.managerPasswordStrengthBar{display:flex;width:100%;background:#f5f5f7;border-radius:4px;height:4px}div.managerPasswordStrengthBar span.security-bar{border-radius:5px}div.managerPasswordStrengthBar span.weak{background:#f17171;width:20%}div.managerPasswordStrengthBar span.fair{background:#ffa47d;width:40%}div.managerPasswordStrengthBar span.good{background:#ffa47d;width:60%}div.managerPasswordStrengthBar span.strong{background:#8fd498;width:80%}div.managerPasswordStrengthBar span.excellent{background:#8fd498;width:100%}"]
+            },] }
+];
+/** @nocollapse */
+PasswordStrengthBarComponent.ctorParameters = () => [];
+PasswordStrengthBarComponent.propDecorators = {
+    passwordToCheck: [{ type: Input }],
+    labelWeak: [{ type: Input }],
+    labelFair: [{ type: Input }],
+    labelGood: [{ type: Input }],
+    labelStrong: [{ type: Input }],
+    labelExcellent: [{ type: Input }]
+};
+
+class PasswordStrengthDisplayBarComponent {
+    constructor() {
+        this.defaultLabels = ['weak', 'fair', 'good', 'strong', 'excellent'];
+        this.labels = this.defaultLabels;
+    }
+    set strength(strength) {
+        if (strength === null) {
+            this.passwordStrength = null;
+            return;
+        }
+        try {
+            this.passwordStrength = this.defaultLabels[strength];
+            this.label = this.labels[strength];
+        }
+        catch (e) {
+            this.passwordStrength = null;
+            console.error("PasswordStrengthBar - Invalid strength value min0/max4 got " + strength);
+        }
+    }
+    ngOnInit() {
+        this.labels = [this.labelWeak, this.labelFair, this.labelGood, this.labelStrong, this.labelExcellent];
+    }
+}
+PasswordStrengthDisplayBarComponent.decorators = [
+    { type: Component, args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                selector: 'ap-password-strength-display-bar',
+                template: "<div id=\"managerPasswordStrength\">\n    <div class=\"managerPasswordStrengthBar\">\n        <span\n        *ngIf=\"!!passwordStrength\"\n        [className]=\"'security-bar ' + passwordStrength\">\n        </span>\n    </div>\n    <div class=\"managerPasswordStrengthLabel\">\n        <span\n        *ngIf=\"!!passwordStrength\"\n        class=\"password-strength-label caption\">\n            {{ label }}\n        </span>\n    </div>\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}.managerPasswordStrengthLabel{display:flex;width:100%}.managerPasswordStrengthLabel .password-strength-label{font-size:12px;margin-top:4px}div.managerPasswordStrengthBar{display:flex;width:100%;background:#f5f5f7;border-radius:4px;height:4px}div.managerPasswordStrengthBar span.security-bar{border-radius:5px}div.managerPasswordStrengthBar span.weak{background:#f17171;width:20%}div.managerPasswordStrengthBar span.fair{background:#ffa47d;width:40%}div.managerPasswordStrengthBar span.good{background:#ffa47d;width:60%}div.managerPasswordStrengthBar span.strong{background:#8fd498;width:80%}div.managerPasswordStrengthBar span.excellent{background:#8fd498;width:100%}"]
+            },] }
+];
+PasswordStrengthDisplayBarComponent.propDecorators = {
+    labelWeak: [{ type: Input }],
+    labelFair: [{ type: Input }],
+    labelGood: [{ type: Input }],
+    labelStrong: [{ type: Input }],
+    labelExcellent: [{ type: Input }],
+    strength: [{ type: Input }]
+};
+
+class SnackbarsThreadService {
+    constructor(domSanitizer) {
+        this.domSanitizer = domSanitizer;
+        this._list = [];
+        this.snackbarList = new BehaviorSubject([]);
+    }
+    _emit() {
+        this.snackbarList.next(this._list);
+    }
+    add(elem) {
+        const notification = {
+            id: Math.random().toString(36).substring(7) + Date.now().toString(),
+            snackbarType: elem.snackbarType,
+            snackbarText: this.domSanitizer.bypassSecurityTrustHtml(elem.snackbarText)
+        };
+        this._list.unshift(notification);
+        while (this._list.length > 3) {
+            this.remove(this._list.slice(-1).pop().id);
+        }
+        this._emit();
+        setTimeout(() => this.remove(notification.id), 5000);
+    }
+    remove(id) {
+        const index = this._list.findIndex(el => el.id === id);
+        index > -1 && this._list.splice(index, 1);
+        this._emit();
+    }
+}
+/** @nocollapse */ SnackbarsThreadService.ɵprov = i0.ɵɵdefineInjectable({ factory: function SnackbarsThreadService_Factory() { return new SnackbarsThreadService(i0.ɵɵinject(i1.DomSanitizer)); }, token: SnackbarsThreadService, providedIn: "root" });
+SnackbarsThreadService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root"
+            },] }
+];
+/** @nocollapse */
+SnackbarsThreadService.ctorParameters = () => [
+    { type: DomSanitizer }
+];
+
+const snackbarTypesMap = {
+    0: "info",
+    1: "success",
+    2: "warning",
+    3: "error"
+};
+const snackbarIconsMap = {
+    0: "messages-bubble-dot",
+    1: "check-circle",
+    2: "alert-circle",
+    3: "remove-circle"
+};
+
+class SnackbarsThreadComponent {
+    constructor(snackbarsThreadService) {
+        this.snackbarsThreadService = snackbarsThreadService;
+        this.SnackbarTypesMap = snackbarTypesMap;
+        this.SnackbarIconsMap = snackbarIconsMap;
+    }
+    remove(id) {
+        this.snackbarsThreadService.remove(id);
+    }
+}
+SnackbarsThreadComponent.decorators = [
+    { type: Component, args: [{
+                selector: "app-snackbars-thread",
+                template: "<div class=\"thread-container\">\n    <div @fadeAnimation\n         *ngFor=\"let el of snackbarsThreadService.snackbarList | async\"\n         class=\"item {{SnackbarTypesMap[el.snackbarType]}}\"\n    >\n        <div class=\"left\">\n            <div class=\"icon {{SnackbarTypesMap[el.snackbarType]}}\">\n                <ap-symbol\n                    [symbolId]=\"SnackbarIconsMap[el.snackbarType]\"\n                    [color]=\"'white'\"\n                    [size]=\"'mini'\">\n                </ap-symbol>\n            </div>\n            <div class=\"text\">\n                <div [innerHTML]=\"el.snackbarText\"></div>\n            </div>\n        </div>\n        <div class=\"close\" (click)=\"remove(el.id)\">\n            <div class=\"{{SnackbarTypesMap[el.snackbarType]}}\">\n                <ap-symbol\n                    [symbolId]=\"'close'\"\n                    [size]=\"'12'\">\n                </ap-symbol>\n            </div>\n        </div>\n    </div>\n</div>\n",
+                animations: [
+                    trigger("fadeAnimation", [
+                        transition(":enter", [
+                            style({
+                                height: 0,
+                                minHeight: 0,
+                                opacity: 0,
+                                transform: "translateY(-5%)",
+                                padding: 0
+                            }),
+                            // padding and min-height should be the same as in scss file
+                            animate("300ms ease-in", style({ height: "*", minHeight: "72px", padding: "7px 3px 7px 7px" })),
+                            animate("200ms ease-in", style({ opacity: 0.5, transform: "translateY(0%)" })),
+                            animate("200ms ease-in", style({ opacity: 1 }))
+                        ]),
+                        transition(":leave", [
+                            animate("300ms ease-out", style({
+                                opacity: 0,
+                                transform: "translateY(-5%)"
+                            })),
+                            animate("300ms ease-out", style({ height: 0, minHeight: 0 }))
+                        ])
+                    ])
+                ],
+                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}.thread-container{position:absolute;top:60px;right:16px;width:357px;z-index:999}.thread-container .item{min-height:72px;height:auto;padding:7px 3px 7px 7px;box-sizing:border-box;box-shadow:0 25px 50px #0000000a;border:1px solid;border-radius:8px;display:flex;flex-direction:row;justify-content:space-between;align-content:flex-start}.thread-container .item:not(:last-child){margin-bottom:8px}.thread-container .item.info{background-color:#e8f4ff;border-color:#74bbfe}.thread-container .item.success{background-color:#ecf7ed;border-color:#8fd498}.thread-container .item.warning{background-color:#fff8e6;border-color:#fdd366}.thread-container .item.error{background-color:#fde7e7;border-color:#f17171}.thread-container .item>div{display:flex}.thread-container .item>div .icon{height:56px;width:56px;border-radius:4px;margin:0 16px 0 0;display:flex;justify-content:center;align-items:center}.thread-container .item>div .icon.info{background-color:#178dfe}.thread-container .item>div .icon.success{background-color:#45b854}.thread-container .item>div .icon.warning{background-color:#fbb500}.thread-container .item>div .icon.error{background-color:#e81313}.thread-container .item>div .text{width:221px;font-size:14px;display:flex;justify-content:flex-start;align-items:center;overflow-wrap:anywhere;color:#344563}.thread-container .item .close{height:56px;width:36px;display:flex;justify-content:center;align-items:center}.thread-container .item .close>div{height:36px;width:36px;display:flex;justify-content:center;align-items:center}.thread-container .item .close>div ap-symbol{color:#858fa1}.thread-container .item .close>div:hover{border-radius:50%;cursor:pointer}.thread-container .item .close>div:hover ap-symbol{color:#5d6a82}.thread-container .item .close>div:hover.info{background-color:#d1e8ff}.thread-container .item .close>div:hover.success{background-color:#daf1dd}.thread-container .item .close>div:hover.warning{background-color:#fef0cc}.thread-container .item .close>div:hover.error{background-color:#fad0d0}"]
+            },] }
+];
+/** @nocollapse */
+SnackbarsThreadComponent.ctorParameters = () => [
+    { type: SnackbarsThreadService }
+];
+
+class StarRatingComponent {
+    constructor() {
+        this.score = 0;
+        this.maxScore = 5;
+        this.size = 'nano';
+        this.colorOn = '#FBBC04';
+        this.colorOff = '#DADCE0';
+        this.filledStars = [];
+    }
+    ngOnChanges(changes) {
+        if (changes.score) {
+            if (this.score >= 0) {
+                for (let i = 0; i < this.maxScore; i++) {
+                    this.filledStars[i] = i < this.score;
+                }
+            }
+            else {
+                this.filledStars.length = 0;
+            }
+        }
+    }
+}
+StarRatingComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ap-star-rating',
+                template: "<span class=\"star-rating\">\n    <ap-symbol *ngFor=\"let activeStar of filledStars\"\n               [color]=\"activeStar ? colorOn: colorOff\"\n               [symbolId]=\"'rating-star'\"\n               [size]=\"size\">\n    </ap-symbol>\n</span>\n",
+                styles: [".star-rating ap-symbol{display:inline-block}.star-rating ap-symbol:not(:first-child){padding-left:3px}"]
+            },] }
+];
+StarRatingComponent.propDecorators = {
+    score: [{ type: Input }],
+    maxScore: [{ type: Input }],
+    size: [{ type: Input }],
+    colorOn: [{ type: Input }],
+    colorOff: [{ type: Input }]
+};
+
+/**
+ * expand textarea to fit content. Doesn't shrink.
+ */
+class AutosizeTextareaDirective {
+    constructor(element) {
+        this.element = element;
+    }
+    onInput() {
+        this.resize();
+    }
+    ngAfterContentChecked() {
+        this.resize();
+    }
+    resize() {
+        const style = this.element.nativeElement.style;
+        const scrollHeight = this.element.nativeElement.scrollHeight;
+        const actualHeight = this.element.nativeElement.offsetHeight;
+        if (AutosizeTextareaDirective.maxHeight < scrollHeight) {
+            // we arrived at the max
+            style.overflow = 'auto';
+            style.height = `${AutosizeTextareaDirective.maxHeight}px`;
+        }
+        else if (actualHeight < scrollHeight) {
+            style.overflow = 'hidden';
+            style.height = `${scrollHeight}px`;
+        }
+    }
+}
+AutosizeTextareaDirective.maxHeight = 200;
+AutosizeTextareaDirective.decorators = [
+    { type: Directive, args: [{
+                selector: 'textarea[ap-autosize]'
+            },] }
+];
+/** @nocollapse */
+AutosizeTextareaDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+AutosizeTextareaDirective.propDecorators = {
+    onInput: [{ type: HostListener, args: ['input',] }]
+};
+
+class DefaultImageDirective {
+    updateUrl() {
+        if (this.default) {
+            this.src = this.default;
+        }
+        else {
+            this.src = 'assets/lib-ui/img/default-avatar.png';
+        }
+    }
+}
+DefaultImageDirective.decorators = [
+    { type: Directive, args: [{
+                selector: 'img[default]',
+                host: {
+                    '(error)': 'updateUrl()',
+                    '[src]': 'src'
+                }
+            },] }
+];
+DefaultImageDirective.propDecorators = {
+    src: [{ type: Input }],
+    default: [{ type: Input }]
+};
+
+/**
+ * Removes excess text from element until it fits in elements
+ * and appends a ellipsis symbol to end of text. This requires that
+ * the elements height be fixed
+ *
+ * @example
+ * ```html
+ * <p apEllipsis>Ullamco esse laborum</p>
+ * ```
+ *
+ */
+class EllipsisDirective {
+    constructor(el) {
+        this.el = el;
+        this.apEllipsisClip = false;
+        this.apEllipsisChar = '...';
+        this.apEllipsisClickable = false;
+        this.apEllipsisRemovedElementsCount = new EventEmitter();
+        this.apEllipsisRemovedText = new EventEmitter();
+    }
+    get hasOverflow() {
+        const el = this.el.nativeElement;
+        return (el.scrollHeight > el.offsetHeight) || (el.scrollWidth > el.offsetWidth);
+    }
+    ngAfterContentChecked() {
+        this.clipText();
+    }
+    clipText() {
+        const el = this.el.nativeElement;
+        let text = el.innerText;
+        let removedText = '';
+        if (this.apEllipsisIndex > -1) {
+            removedText = text.substring(this.apEllipsisIndex, text.length - 1) + removedText;
+            text = text.substring(0, this.apEllipsisIndex);
+            el.innerText = `${text}${this.apEllipsisChar}`;
+            if (this.apEllipsisClickable) {
+                el.addEventListener('click', () => {
+                    el.innerText = `${text}${removedText}`;
+                });
+            }
+        }
+        else {
+            while (this.hasOverflow && text.length > 0) {
+                removedText = text[text.length - 1] + removedText;
+                text = text.substring(0, text.length - 1);
+                el.innerText = `${text}${this.apEllipsisChar}`;
+            }
+        }
+        if (this.apEllipsisSeparator) {
+            const removedElementsCount = removedText.split(this.apEllipsisSeparator)
+                .filter(element => !!element && element.length > 0).length;
+            if (removedElementsCount > 0) {
+                this.apEllipsisRemovedElementsCount.emit(removedElementsCount);
+            }
+        }
+        if (removedText && removedText.length > 0) {
+            this.apEllipsisRemovedText.emit(removedText);
+        }
+    }
+    handleReadmore() {
+    }
+}
+EllipsisDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[apEllipsis]',
+            },] }
+];
+/** @nocollapse */
+EllipsisDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+EllipsisDirective.propDecorators = {
+    apEllipsisSeparator: [{ type: Input }],
+    apEllipsisClip: [{ type: Input }],
+    apEllipsisIndex: [{ type: Input }],
+    apEllipsisChar: [{ type: Input }],
+    apEllipsisClickable: [{ type: Input }],
+    apEllipsisRemovedElementsCount: [{ type: Output }],
+    apEllipsisRemovedText: [{ type: Output }]
+};
+
+class GifService {
+    static isGif(src) {
+        return src && src.split('?')[0].endsWith('.gif');
+    }
+}
+/**
+ * If the image is a GIF then replace the img element by a canvas containing a frozen gif.
+ * Note 1: if the image is displayed under a condition, the condition must be applied on the parent of the image, so the
+ * new canvas element will have the same condition.
+ * Note 2: the image must not have the properties "display" and "visibility" in its style. Since they are used to frozen
+ * the GIF. You need to apply this properties on the parent element.
+ * Note 3: If the GIF is frozen, all the event are propagated to the image. However, all events are dispatched
+ * with an Event instance. Ex: click event is not dispatched with a MouseEvent instance.
+ */
+class FrozenGifDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.frozen = true;
+        // Add all the events that need to be propagated.
+        this.events = ['click'];
+        const element = this.elementRef.nativeElement;
+        if (!(element instanceof HTMLImageElement)) {
+            return;
+        }
+        this.element = element;
+    }
+    ngOnChanges(changes) {
+        let freeze = false;
+        if (changes.src) {
+            freeze = true;
+        }
+        if (changes.frozen) {
+            if (changes.frozen.currentValue) {
+                freeze = true;
+            }
+            else {
+                this.unfreeze();
+            }
+        }
+        if (freeze) {
+            this.freeze();
+        }
+    }
+    freeze() {
+        if (!GifService.isGif(this.src) || !this.frozen) {
+            this.unfreeze();
+            return;
+        }
+        // hack to avoid displaying the GIF before replacing it by the canvas
+        this.element.style.visibility = 'hidden';
+        this.element.addEventListener('load', () => this.addCanvas());
+    }
+    addCanvas() {
+        if (this.canvas) {
+            this.canvas.remove();
+        }
+        this.canvas = document.createElement('canvas');
+        this.canvas.width = this.element.width;
+        this.canvas.height = this.element.height;
+        this.canvas.getContext('2d').drawImage(this.element, 0, 0, this.canvas.width, this.canvas.height);
+        for (let i = 0; i < this.element.attributes.length; i++) {
+            const attr = this.element.attributes[i];
+            if (attr.name === 'id') { // avoid two elements with the same id
+                this.canvas.setAttribute('id', attr.value + '_frozenGif');
+            }
+            else if (attr.name === 'style' && attr.value.includes('visibility: hidden;') || attr.value.includes('display: none;')) {
+                // remove the added 'visibility: hidden' and 'display: none'
+                const styleValue = attr.value;
+                this.canvas.setAttribute('style', styleValue.replace('visibility: hidden;', '').replace('display: none;', ''));
+            }
+            else if (attr.name !== '"') { // test for invalid attributes
+                this.canvas.setAttribute(attr.name, attr.value);
+            }
+        }
+        this.addEvents();
+        this.element.parentNode.insertBefore(this.canvas, this.element);
+        this.element.style.display = 'none';
+    }
+    addEvents() {
+        this.events.forEach((eventName) => {
+            this.canvas.addEventListener(eventName, (ev) => this.element.dispatchEvent(
+            // wm: find a way to dispatch the right event type
+            new Event(ev.type, ev)));
+        });
+    }
+    unfreeze() {
+        if (this.canvas) {
+            this.canvas.remove();
+            this.canvas = null;
+        }
+        this.element.style.visibility = 'inherit';
+        this.element.style.display = 'inherit';
+    }
+}
+FrozenGifDirective.decorators = [
+    { type: Directive, args: [{
+                selector: 'img[apFrozenGif]',
+                host: {
+                    '[src]': 'src'
+                }
+            },] }
+];
+/** @nocollapse */
+FrozenGifDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+FrozenGifDirective.propDecorators = {
+    src: [{ type: Input }],
+    frozen: [{ type: Input, args: ['apFrozen',] }],
+    events: [{ type: Input, args: ['apGifEvents',] }]
+};
+
+// Based on https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2
+class EqualValidatorDirective {
+    constructor(validateEqual, validateEqualReference) {
+        this.validateEqual = validateEqual;
+        this.validateEqualReference = validateEqualReference;
+    }
+    validate(self) {
+        let other = self.root.get(this.validateEqual);
+        if (other) {
+            if (this.isReference()) {
+                if (self.value === other.value) {
+                    delete other.errors['validateEqual'];
+                    if (!Object.keys(other.errors).length) {
+                        other.setErrors(null);
+                    }
+                }
+                else {
+                    other.setErrors({ validateEqual: false });
+                }
+            }
+            else if (self.value !== other.value) {
+                return { validateEqual: false };
+            }
+        }
+        return null;
+    }
+    isReference() {
+        if (!this.validateEqualReference) {
+            return false;
+        }
+        return this.validateEqualReference === 'true';
+    }
+}
+EqualValidatorDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[validateEqual][formControlName],[validateEqual][formControl],[validateEqual][ngModel]',
+                providers: [
+                    {
+                        provide: NG_VALIDATORS,
+                        useExisting: forwardRef(() => EqualValidatorDirective),
+                        multi: true
+                    }
+                ]
+            },] }
+];
+/** @nocollapse */
+EqualValidatorDirective.ctorParameters = () => [
+    { type: String, decorators: [{ type: Attribute, args: ['validateEqual',] }] },
+    { type: String, decorators: [{ type: Attribute, args: ['validateEqualReference',] }] }
+];
+
+const PART_START = '<ng-container data-mst="';
+const PARSE_MIDDLE = '">';
+const PARSE_END = '</ng-container>';
+const CLASS_SEPARATOR = ',';
+/**
+ * This directive aims to parse simple string to extract some specific tags and to turn them into SPAN with styling classes attributes.
+ * The specific tags must this schema: <ng-container data-mst="STYLING-CLASSES>TEXT</ng-container>.
+ * Example: 'Lorem <ng-container data-mst="my-style">ipsum</ng-container> dolor sit amet'.
+ */
+class MultiStyleTextDirective {
+    constructor(elRef, renderer) {
+        this.elRef = elRef;
+        this.renderer = renderer;
+        this.childrenCreated = [];
+    }
+    set multiStyleText(fullText) {
+        // First remove previously added children (on update).
+        for (const child of this.childrenCreated) {
+            this.renderer.removeChild(this.elRef.nativeElement, child);
+        }
+        const parts = MultiStyleTextDirective.parse(fullText);
+        for (const part of parts) {
+            if (part.clazz) {
+                const span = this.renderer.createElement('span');
+                const text = this.renderer.createText(part.content);
+                this.renderer.appendChild(span, text);
+                part.clazz.forEach(clazz => this.renderer.addClass(span, clazz));
+                this.renderer.appendChild(this.elRef.nativeElement, span);
+                this.childrenCreated.push(span);
+            }
+            else {
+                const text = this.renderer.createText(part.content);
+                this.renderer.appendChild(this.elRef.nativeElement, text);
+                this.childrenCreated.push(text);
+            }
+        }
+    }
+    static parse(toParse) {
+        const parts = [];
+        let startIndex = toParse.indexOf(PART_START);
+        while (startIndex >= 0) {
+            if (startIndex > 0) {
+                // Optional start before parser start.
+                parts.push({ content: toParse.substr(0, startIndex) });
+            }
+            const elem = this.cutFirstGroup(toParse.substr(startIndex));
+            if (elem === 'invalid') {
+                return [];
+            }
+            else if (elem) {
+                parts.push({ content: elem.content, clazz: elem.classes });
+                toParse = elem.rest;
+                startIndex = toParse.indexOf(PART_START);
+            }
+            else {
+                parts.push({ content: toParse });
+            }
+        }
+        // Very end
+        if (toParse.length > 0) {
+            parts.push({ content: toParse });
+        }
+        return parts;
+    }
+    static cutFirstGroup(toCut) {
+        if (!toCut.startsWith(PART_START)) {
+            // String doesnt start with expected parser start.
+            return null;
+        }
+        const afterParserStart = toCut.substr(PART_START.length);
+        let index = afterParserStart.indexOf(PARSE_MIDDLE);
+        if (index <= 0) {
+            console.error('Not able to parse invalid string: ' + toCut);
+            return 'invalid';
+        }
+        const classes = afterParserStart.substr(0, index);
+        let rest = afterParserStart.substr(index + PARSE_MIDDLE.length);
+        index = rest.indexOf(PARSE_END);
+        if (index <= 0) {
+            console.error('Not able to parse invalid string: ' + toCut);
+            return 'invalid';
+        }
+        const content = rest.substr(0, index);
+        rest = rest.substr(index + PARSE_END.length);
+        return { content, classes: classes.split(CLASS_SEPARATOR), rest };
+    }
+}
+MultiStyleTextDirective.decorators = [
+    { type: Directive, args: [{
+                // tslint:disable-next-line:directive-selector
+                selector: '[multiStyleText]'
+            },] }
+];
+/** @nocollapse */
+MultiStyleTextDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+MultiStyleTextDirective.propDecorators = {
+    multiStyleText: [{ type: Input }]
+};
+
+const topLeftPosition = {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    offsetY: -12
+};
+const topPosition = {
+    originX: 'center',
+    originY: 'top',
+    overlayX: 'center',
+    overlayY: 'bottom',
+    offsetY: -12
+};
+const topRightPosition = {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    offsetY: -12
+};
+const bottomLeftPosition = {
+    originX: 'start',
+    originY: 'bottom',
+    overlayX: 'start',
+    overlayY: 'top',
+    offsetY: 12
+};
+const bottomPosition = {
+    originX: 'center',
+    originY: 'bottom',
+    overlayX: 'center',
+    overlayY: 'top',
+    offsetY: 12
+};
+const bottomRightPosition = {
+    originX: 'end',
+    originY: 'bottom',
+    overlayX: 'end',
+    overlayY: 'top',
+    offsetY: 12
+};
+const leftPostion = {
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'end',
+    overlayY: 'center',
+    offsetX: -12
+};
+const rightPosition = {
+    originX: 'end',
+    originY: 'center',
+    overlayX: 'start',
+    overlayY: 'center',
+    offsetX: 12
+};
+const tooltipNeoPositions = {
+    topLeft: topLeftPosition,
+    top: topPosition,
+    topRight: topRightPosition,
+    left: leftPostion,
+    right: rightPosition,
+    bottomLeft: bottomLeftPosition,
+    bottom: bottomPosition,
+    bottomRight: bottomRightPosition
+};
+
+class TooltipNeoService {
+    constructor() {
+        this.clickOutside$ = new Subject();
+    }
+}
+/** @nocollapse */ TooltipNeoService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TooltipNeoService_Factory() { return new TooltipNeoService(); }, token: TooltipNeoService, providedIn: "root" });
+TooltipNeoService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+
+class TooltipNeoComponent {
+    constructor(_elementRef, _tooltipNeoService) {
+        this._elementRef = _elementRef;
+        this._tooltipNeoService = _tooltipNeoService;
+    }
+    ngOnInit() {
+        this.params.borderColor
+            ? this.border = `solid 1px ${this.params.borderColor}`
+            : this.border = undefined;
+    }
+    onClickOutside(event) {
+        if (!this._elementRef.nativeElement.contains(event.target)) {
+            this._tooltipNeoService.clickOutside$.next();
+        }
+    }
+}
+TooltipNeoComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ap-tooltip-neo',
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: "<div @neoTooltip [ngSwitch]=\"params.contentType\"\n     class=\"tooltip {{params.maxWidth}}\"\n     [style.background]=\"params.backgroundColor\"\n     [style.border]=\"border\"\n    >\n    <div *ngIf=\"params.displayArrow\"\n         class=\"arrow-tooltip {{params.position}}\"\n         [class.border]=\"!!params.borderColor\"\n         [style.background]=\"params.backgroundColor\"\n         [style.borderTop]=\"border\"\n         [style.borderRight]=\"border\"\n    ></div>\n    <ng-container *ngIf=\"params.title\">\n        <div class=\"text title\">{{params.title}}</div>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'text'\">\n        <ng-container *ngIf=\"params.content\">\n            <div class=\"text content\">{{params.content}}</div>\n        </ng-container>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'template'\">\n        <ng-container *ngTemplateOutlet=\"params.content\">\n        </ng-container>\n    </ng-container>\n</div>\n",
+                animations: [
+                    trigger('neoTooltip', [
+                        transition(':enter', [
+                            style({ opacity: 0 }),
+                            animate(200, style({ opacity: 1 }))
+                        ]),
+                        transition(':leave', [animate(200, style({ opacity: 0 }))])
+                    ])
+                ],
+                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}.tooltip{border-radius:8px;filter:drop-shadow(0 0 10px rgba(0,0,0,.08));position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:18px}.tooltip .arrow-tooltip{position:absolute;height:12px;width:12px;border-top-right-radius:2px}.tooltip .arrow-tooltip.topLeft{left:12px;top:calc(100% - 6px);transform:rotate(135deg)}.tooltip .arrow-tooltip.top{left:calc(50% - 6px);top:calc(100% - 6px);transform:rotate(135deg)}.tooltip .arrow-tooltip.topRight{right:12px;top:calc(100% - 6px);transform:rotate(135deg)}.tooltip .arrow-tooltip.left{top:calc(50% - 6px);transform:rotate(45deg)}.tooltip .arrow-tooltip.left:not(.border){right:-6px}.tooltip .arrow-tooltip.left.border{right:-7px}.tooltip .arrow-tooltip.right{top:calc(50% - 6px);transform:rotate(-135deg)}.tooltip .arrow-tooltip.right:not(.border){left:-6px}.tooltip .arrow-tooltip.right.border{left:-7px}.tooltip .arrow-tooltip.bottomLeft{left:12px;transform:rotate(-45deg)}.tooltip .arrow-tooltip.bottomLeft:not(.border){top:-6px}.tooltip .arrow-tooltip.bottomLeft.border{top:-7px}.tooltip .arrow-tooltip.bottom{left:calc(50% - 6px);transform:rotate(-45deg)}.tooltip .arrow-tooltip.bottom:not(.border){top:-6px}.tooltip .arrow-tooltip.bottom.border{top:-7px}.tooltip .arrow-tooltip.bottomRight{right:12px;transform:rotate(-45deg)}.tooltip .arrow-tooltip.bottomRight:not(.border){top:-6px}.tooltip .arrow-tooltip.bottomRight.border{top:-7px}.tooltip.full{max-width:350px}.tooltip.medium{max-width:300px}.tooltip .text{font-size:14px;color:#212e44}.tooltip .title{align-items:flex-start;font-weight:700;margin:8px 16px 0}.tooltip .content{padding:8px 16px;overflow-wrap:anywhere}"]
+            },] }
+];
+/** @nocollapse */
+TooltipNeoComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: TooltipNeoService }
+];
+TooltipNeoComponent.propDecorators = {
+    params: [{ type: Input }],
+    onClickOutside: [{ type: HostListener, args: ['document:click', ['$event'],] }]
+};
+
+class TooltipNeoDirective {
+    constructor(_elementRef, _overlay, _overlayPositionBuilder, _tooltipNeoService) {
+        this._elementRef = _elementRef;
+        this._overlay = _overlay;
+        this._overlayPositionBuilder = _overlayPositionBuilder;
+        this._tooltipNeoService = _tooltipNeoService;
+        this._destroy$ = new Subject();
+        this._hide$ = new Subject();
+        this._mouseEntered = false;
+        this._show$ = new Subject();
+    }
+    static enableTooltip(content, contentType, display) {
+        return !!content && !!contentType && !!display;
+    }
+    ngOnChanges(changes) {
+        var _a, _b, _c, _d;
+        if ((((_b = (_a = changes === null || changes === void 0 ? void 0 : changes.apTooltipNeo) === null || _a === void 0 ? void 0 : _a.currentValue) === null || _b === void 0 ? void 0 : _b.display) || ((_d = (_c = changes === null || changes === void 0 ? void 0 : changes.apTooltipNeo) === null || _c === void 0 ? void 0 : _c.currentValue) === null || _d === void 0 ? void 0 : _d.position)) && this._mouseEntered) {
+            this._setSettings();
+            this._allowDisplay ? this._show$.next(true) : this._hide$.next(false);
+        }
+    }
+    ngOnInit() {
+        this._initiateTooltip();
+    }
+    ngOnDestroy() {
+        this._detach();
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    _setSettings() {
+        if (typeof this.apTooltipNeo === 'object') {
+            const { content = undefined, backgroundColor = '#ffffff', borderColor = undefined, contentType = 'text', display = true, displayArrow = true, maxWidth = 'full', position = 'top', title = '' } = this.apTooltipNeo;
+            this._params = { content, backgroundColor, borderColor, contentType, display, displayArrow, maxWidth, position, title };
+            this._allowDisplay = TooltipNeoDirective.enableTooltip(content, contentType, display);
+        }
+        if (typeof this.apTooltipNeo === 'string') {
+            const content = this.apTooltipNeo, backgroundColor = '#ffffff', borderColor = undefined, contentType = 'text', display = true, displayArrow = true, maxWidth = 'full', position = 'top', title = '';
+            this._params = { content, backgroundColor, borderColor, contentType, position, display, displayArrow, title, maxWidth };
+            this._allowDisplay = TooltipNeoDirective.enableTooltip(content, contentType, display);
+        }
+    }
+    _initiateTooltip() {
+        merge(this._hide$, this._show$)
+            .pipe(switchMap(bool => {
+            if (!bool) {
+                return of(bool);
+            }
+            return of(bool).pipe(delay(200));
+        }), takeUntil(this._destroy$))
+            .subscribe(bool => {
+            if (bool) {
+                this._elementRefMouseLeave$ = fromEvent(this._elementRef.nativeElement, 'mouseleave')
+                    .subscribe(() => this._detach());
+                const positionStrategy = this._overlayPositionBuilder
+                    .flexibleConnectedTo(this._elementRef)
+                    .withPositions([tooltipNeoPositions[this._params.position]]);
+                const scrollStrategy = this._overlay.scrollStrategies.close();
+                this._overlayRef = this._overlay.create({ positionStrategy, scrollStrategy });
+                const tooltipRef = this._overlayRef.attach(new ComponentPortal(TooltipNeoComponent));
+                tooltipRef.instance.params = this._params;
+            }
+            else {
+                this._detach();
+            }
+        });
+        this._tooltipNeoService.clickOutside$
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => this._hide$.next());
+    }
+    _detach() {
+        this._overlayRef && this._overlayRef.hasAttached() && this._overlayRef.detach();
+        this._elementRefMouseLeave$ && this._elementRefMouseLeave$.unsubscribe();
+    }
+    onMouseEnter() {
+        this._setSettings();
+        this._mouseEntered = true;
+        this._allowDisplay && this._params && this._show$.next(true);
+    }
+    onMouseLeave() {
+        this._mouseEntered = false;
+        this._hide$.next(false);
+    }
+}
+TooltipNeoDirective.decorators = [
+    { type: Directive, args: [{ selector: '[apTooltipNeo]' },] }
+];
+/** @nocollapse */
+TooltipNeoDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Overlay },
+    { type: OverlayPositionBuilder },
+    { type: TooltipNeoService }
+];
+TooltipNeoDirective.propDecorators = {
+    apTooltipNeo: [{ type: Input }],
+    onMouseEnter: [{ type: HostListener, args: ['mouseenter',] }],
+    onMouseLeave: [{ type: HostListener, args: ['mouseleave',] }]
+};
+
+// Agorapulse
+class TruncateTooltipDirective {
+    constructor(tooltipNeo, elementRef) {
+        this.tooltipNeo = tooltipNeo;
+        this.elementRef = elementRef;
+    }
+    updateTruncateState() {
+        const element = this.elementRef.nativeElement;
+        const truncated = element.scrollWidth > element.clientWidth;
+        this.tooltipNeo.apTooltipNeo = truncated ? this.truncateTooltip : '';
+    }
+    ngOnInit() {
+        this.elementRefMouseOver$ = fromEvent(this.elementRef.nativeElement, 'mouseover')
+            .subscribe(() => this.updateTruncateState());
+    }
+    ngOnDestroy() {
+        this.elementRefMouseOver$.unsubscribe();
+    }
+}
+TruncateTooltipDirective.decorators = [
+    { type: Directive, args: [{ selector: '[apTooltipNeo][truncateTooltip]' },] }
+];
+/** @nocollapse */
+TruncateTooltipDirective.ctorParameters = () => [
+    { type: TooltipNeoDirective },
+    { type: ElementRef }
+];
+TruncateTooltipDirective.propDecorators = {
+    truncateTooltip: [{ type: Input }]
+};
+
+const PASSWORD_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => PasswordInputComponent),
+    multi: true
+};
+class PasswordInputComponent {
+    constructor() {
+        this.inputType = PasswordInputComponent.type[1];
+        this.fullWidth = false;
+        this.disabled = false;
+        this.controler = new FormControl('');
+        this.onChange = (password) => { };
+        this.onTouch = () => { };
+    }
+    /**
+     * Change between visible and hidden password
+     */
+    toggleInputType() {
+        this.inputType = PasswordInputComponent.type[PasswordInputComponent.type.indexOf(this.inputType) == 0 ? 1 : 0];
+    }
+    writeValue(obj) {
+        this.controler.setValue(obj);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    ngOnInit() {
+        this.changes = this.controler.valueChanges.subscribe((val) => {
+            if (this.onChange) {
+                this.onChange(val);
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this.changes) {
+            this.changes.unsubscribe();
+        }
+    }
+}
+PasswordInputComponent.type = ['text', 'password'];
+PasswordInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'ap-password-input',
+                template: "<div class=\"input-group\"\n    [ngClass]=\"{'disabled': disabled, 'full-width': fullWidth}\">\n    <input \n        #passwordInput\n        [type]=\"inputType\"\n        [name]=\"name\"\n        autocomplete=\"password\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [formControl]=\"controler\"\n        (blur)=\"onTouch && onTouch()\">\n    <ap-symbol\n        (click)=\"toggleInputType()\"\n        class=\"input-group-append\"\n        [symbolId]=\"inputType === 'text' ? 'view-on' : 'view-off'\"\n        size=\"micro\"\n        state=\"full\">\n    </ap-symbol>\n</div>\n",
+                providers: [PASSWORD_CONTROL_VALUE_ACCESSOR],
+                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}:host{display:flex}:host.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent)>.input-group{border:1px solid #e81313}:host.valid:not([disabled]):not(.transparent)>.input-group{border:1px solid #45b854}.input-group-append{cursor:pointer}"]
+            },] }
+];
+/** @nocollapse */
+PasswordInputComponent.ctorParameters = () => [];
+PasswordInputComponent.propDecorators = {
+    name: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    fullWidth: [{ type: Input }],
+    passwordInput: [{ type: ViewChild, args: ['passwordInput',] }]
+};
+
+const globalRippleConfig = { disabled: true };
+const ɵ0 = { animationDuration: '0ms' };
+class AgorapulseUiComponentsModule {
+}
+AgorapulseUiComponentsModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    // Components
+                    AddCommentComponent,
+                    AvatarComponent,
+                    AutosizeTextareaDirective,
+                    StepperComponent,
+                    ConfirmModalComponent,
+                    DatepickerComponent,
+                    DotsStepperComponent,
+                    EditTagsModalComponent,
+                    EllipsisDirective,
+                    ImageCarouselComponent,
+                    FeatureOnboardingComponent,
+                    LeadModalComponent,
+                    MediaDisplayOverlayDialogComponent,
+                    ModalComponent,
+                    OverlayDialogComponent,
+                    OverlayInDivComponent,
+                    PasswordInputComponent,
+                    PasswordStrengthBarComponent,
+                    PasswordStrengthDisplayBarComponent,
+                    PhoneNumberInputComponent,
+                    PlaceComponent,
+                    PlaceListComponent,
+                    SnackBarComponent,
+                    SplashscreenComponent,
+                    StarRatingComponent,
+                    TagComponent,
+                    TagListComponent,
+                    TagsSelectorComponent,
+                    TimepickerComponent,
+                    TryPopupComponent,
+                    NotificationComponent,
+                    PaginatorComponent,
+                    PaginatorButtonComponent,
+                    SlideToggleComponent,
+                    SnackbarsThreadComponent,
+                    TooltipNeoComponent,
+                    // Directives
+                    AutosizeTextareaDirective,
+                    DefaultImageDirective,
+                    FrozenGifDirective,
+                    SlideToggleComponent,
+                    EqualValidatorDirective,
+                    MultiStyleTextDirective,
+                    TruncateTooltipDirective,
+                    TooltipNeoDirective,
+                ],
+                imports: [
+                    AgorapulseUiSymbolModule,
+                    CommonModule,
+                    NgxDaterangepickerMd,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    NgSelectModule,
+                    PopmenuModule,
+                    OverlayModule,
+                    // Components
+                    MatBadgeModule,
+                    MatButtonModule,
+                    MatButtonToggleModule,
+                    MatChipsModule,
+                    MatExpansionModule,
+                    // MatFormFieldModule,
+                    MatCheckboxModule,
+                    MatIconModule,
+                    // MatInputModule,
+                    MatProgressBarModule,
+                    MatProgressSpinnerModule,
+                    MatRadioModule,
+                    MatSliderModule,
+                    MatSlideToggleModule,
+                    // Navigation
+                    MatMenuModule,
+                    MatSidenavModule,
+                    MatToolbarModule,
+                    // Layout
+                    MatCardModule,
+                    MatDividerModule,
+                    // MatExpansionModule,
+                    MatGridListModule,
+                    MatListModule,
+                    MatTabsModule,
+                    MatStepperModule,
+                    FlexLayoutModule,
+                    // Popups & Modals
+                    MatBottomSheetModule,
+                    MatDialogModule,
+                    MatSnackBarModule,
+                    // Table
+                    MatTableModule,
+                ],
+                exports: [
+                    FormsModule,
+                    ReactiveFormsModule,
+                    // Components
+                    AddCommentComponent,
+                    AvatarComponent,
+                    StepperComponent,
+                    ConfirmModalComponent,
+                    DatepickerComponent,
+                    DotsStepperComponent,
+                    EditTagsModalComponent,
+                    EllipsisDirective,
+                    ImageCarouselComponent,
+                    FeatureOnboardingComponent,
+                    LeadModalComponent,
+                    MediaDisplayOverlayDialogComponent,
+                    ModalComponent,
+                    OverlayDialogComponent,
+                    OverlayInDivComponent,
+                    PhoneNumberInputComponent,
+                    PasswordInputComponent,
+                    PasswordStrengthBarComponent,
+                    PasswordStrengthDisplayBarComponent,
+                    PlaceComponent,
+                    PlaceListComponent,
+                    SnackBarComponent,
+                    SplashscreenComponent,
+                    StarRatingComponent,
+                    TagComponent,
+                    TagListComponent,
+                    TagsSelectorComponent,
+                    TimepickerComponent,
+                    TryPopupComponent,
+                    NotificationComponent,
+                    PaginatorComponent,
+                    PaginatorButtonComponent,
+                    SlideToggleComponent,
+                    SnackbarsThreadComponent,
+                    // Directives
+                    AutosizeTextareaDirective,
+                    DefaultImageDirective,
+                    FrozenGifDirective,
+                    EqualValidatorDirective,
+                    MultiStyleTextDirective,
+                    TruncateTooltipDirective,
+                    TooltipNeoDirective,
+                    // Modules
+                    NgSelectModule,
+                    PopmenuModule,
+                    // Components
+                    MatBadgeModule,
+                    MatButtonModule,
+                    MatButtonToggleModule,
+                    MatCheckboxModule,
+                    MatChipsModule,
+                    MatExpansionModule,
+                    // MatFormFieldModule,
+                    MatIconModule,
+                    // MatInputModule,
+                    MatProgressBarModule,
+                    MatProgressSpinnerModule,
+                    MatRadioModule,
+                    MatSliderModule,
+                    MatSlideToggleModule,
+                    // Navigation
+                    MatMenuModule,
+                    MatSidenavModule,
+                    MatToolbarModule,
+                    // Layout
+                    MatCardModule,
+                    MatDividerModule,
+                    // MatExpansionModule,
+                    MatGridListModule,
+                    MatListModule,
+                    MatTabsModule,
+                    MatStepperModule,
+                    // Popups & Modals
+                    MatBottomSheetModule,
+                    MatDialogModule,
+                    MatSnackBarModule,
+                    // Table
+                    MatTableModule
+                ],
+                entryComponents: [
+                    ConfirmModalComponent,
+                    LeadModalComponent,
+                    TryPopupComponent,
+                    MediaDisplayOverlayDialogComponent,
+                    ModalComponent,
+                    FeatureOnboardingComponent,
+                    OverlayDialogComponent,
+                    SnackBarComponent
+                ],
+                providers: [
+                    // Disable ripple effect
+                    // {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: {disabled: true}},
+                    // Disable tabs animation
+                    { provide: MAT_TABS_CONFIG, useValue: ɵ0 }
+                ]
+            },] }
+];
+
+const DEFAULT_CONFIG = {
+    hasBackdrop: true,
+    backdropClass: 'dark-backdrop',
+    panelClass: 'tm-file-preview-dialog-panel',
+    template: null
+};
+class OverlayDialogService {
+    constructor(injector, overlay) {
+        this.injector = injector;
+        this.overlay = overlay;
+    }
+    open(config = {}) {
+        const dialogConfig = Object.assign(Object.assign({}, DEFAULT_CONFIG), config);
+        const overlayRef = this.createOverlay(dialogConfig);
+        const dialogRef = new OverlayDialogRef(overlayRef);
+        const overlayComponent = this.attachDialogContainer(overlayRef, dialogConfig, dialogRef);
+        return dialogRef;
+    }
+    createOverlay(config) {
+        const overlayConfig = this.getOverlayConfig(config);
+        return this.overlay.create(overlayConfig);
+    }
+    attachDialogContainer(overlayRef, config, dialogRef) {
+        const injector = this.createInjector(config, dialogRef);
+        const containerPortal = new ComponentPortal(OverlayDialogComponent, null, injector);
+        const containerRef = overlayRef.attach(containerPortal);
+        return containerRef.instance;
+    }
+    createInjector(config, dialogRef) {
+        const injectionTokens = new WeakMap();
+        injectionTokens.set(OverlayDialogRef, dialogRef);
+        injectionTokens.set(OVERLAY_DATA, config.template);
+        return new PortalInjector(this.injector, injectionTokens);
+    }
+    getOverlayConfig(config) {
+        const positionStrategy = this.overlay.position()
+            .global()
+            .centerHorizontally()
+            .centerVertically();
+        const overlayConfig = new OverlayConfig({
+            hasBackdrop: config.hasBackdrop,
+            backdropClass: config.backdropClass,
+            panelClass: config.panelClass,
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            positionStrategy
+        });
+        return overlayConfig;
+    }
+}
+OverlayDialogService.decorators = [
+    { type: Injectable }
+];
+/** @nocollapse */
+OverlayDialogService.ctorParameters = () => [
+    { type: Injector },
+    { type: Overlay }
+];
+
+class CodeStatus {
+    constructor(snackbarText, snackbarType) {
+        this.snackbarText = snackbarText;
+        this.snackbarType = snackbarType;
+    }
+}
+class CodeStatusInfo extends CodeStatus {
+    constructor(snackbarText) {
+        super(snackbarText, 0);
+    }
+}
+class CodeStatusSuccess extends CodeStatus {
+    constructor(snackbarText) {
+        super(snackbarText, 1);
+    }
+}
+class CodeStatusWarning extends CodeStatus {
+    constructor(snackbarText) {
+        super(snackbarText, 2);
+    }
+}
+class CodeStatusError extends CodeStatus {
+    constructor(snackbarText) {
+        super(snackbarText, 3);
+    }
+}
+function generateCodeStatus(text, type) {
+    switch (type) {
+        case 'info':
+            return new CodeStatusInfo(text);
+        case 'success':
+            return new CodeStatusSuccess(text);
+        case 'warning':
+            return new CodeStatusWarning(text);
+        case 'error':
+            return new CodeStatusError(text);
+        default:
+            return new CodeStatusInfo(text);
+    }
+}
+
+/*
+ * Public API Surface of ui
+ */
+
+/**
+ * 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 };
+//# sourceMappingURL=agorapulse-ui-components.js.map