@agorapulse/ui-components 13.2.6 → 13.2.9

package/fesm2015/agorapulse-ui-components.mjs

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { Directive, HostListener, EventEmitter, forwardRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, Injectable, Inject, InjectionToken, HostBinding, Optional, NgModule, Attribute } from '@angular/core';
+import { Directive, HostListener, EventEmitter, forwardRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, Injectable, ViewChildren, Inject, HostBinding, InjectionToken, Optional, NgModule, Attribute } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$4 from '@angular/cdk/overlay';
-import { OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
-import * as i4 from '@angular/forms';
+import * as i1$3 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i3$2 from '@angular/forms';
 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 * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -19,7 +18,7 @@ import { MAT_DIALOG_DATA, 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 * as i2$2 from '@angular/material/icon';
+import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import * as i1$5 from '@angular/material/menu';
@@ -44,13 +43,11 @@ import { AgorapulseUiSymbolModule } from '@agorapulse/ui-symbol';
 import moment from 'moment';
 import * as i2$1 from 'ngx-daterangepicker-material';
 import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
-import * as i1$3 from '@angular/animations';
-import { animate, style, trigger, transition, keyframes } from '@angular/animations';
-import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
-import { Subject, of, fromEvent, BehaviorSubject } from 'rxjs';
+import * as i1$4 from '@angular/animations';
+import { trigger, transition, style, animate } from '@angular/animations';
 import { switchMap, delay, takeUntil, debounceTime, distinctUntilChanged, tap, catchError, map } from 'rxjs/operators';
-import * as i2$3 from '@angular/cdk/scrolling';
-import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { Subject, of, fromEvent, BehaviorSubject } from 'rxjs';
+import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1$8 from '@angular/platform-browser';
 
 /**
@@ -682,140 +679,568 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 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.
+ * 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 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;
+class EllipsisDirective {
+    constructor(el) {
+        this.el = el;
+        this.apEllipsisClip = false;
+        this.apEllipsisChar = '...';
+        this.apEllipsisClickable = false;
+        this.apEllipsisRemovedElementsCount = new EventEmitter();
+        this.apEllipsisRemovedText = new EventEmitter();
     }
-    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();
-        }
+    get hasOverflow() {
+        const el = this.el.nativeElement;
+        return (el.scrollHeight > el.offsetHeight) || (el.scrollWidth > el.offsetWidth);
     }
-    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());
+    ngAfterContentChecked() {
+        this.clipText();
     }
-    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');
+    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 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 {
+            while (this.hasOverflow && text.length > 0) {
+                removedText = text[text.length - 1] + removedText;
+                text = text.substring(0, text.length - 1);
+                el.innerText = `${text}${this.apEllipsisChar}`;
             }
-            else if (attr.name !== '"') { // test for invalid attributes
-                this.canvas.setAttribute(attr.name, attr.value);
+        }
+        if (this.apEllipsisSeparator) {
+            const removedElementsCount = removedText.split(this.apEllipsisSeparator)
+                .filter(element => !!element && element.length > 0).length;
+            if (removedElementsCount > 0) {
+                this.apEllipsisRemovedElementsCount.emit(removedElementsCount);
             }
         }
-        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;
+        if (removedText && removedText.length > 0) {
+            this.apEllipsisRemovedText.emit(removedText);
         }
-        this.element.style.visibility = 'inherit';
-        this.element.style.display = 'inherit';
+    }
+    handleReadmore() {
     }
 }
-/** @nocollapse */ /** @nocollapse */ FrozenGifDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FrozenGifDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ FrozenGifDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: { src: "src", frozen: ["apFrozen", "frozen"], events: ["apGifEvents", "events"] }, host: { properties: { "src": "src" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FrozenGifDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ EllipsisDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EllipsisDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ EllipsisDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: EllipsisDirective, selector: "[apEllipsis]", inputs: { apEllipsisSeparator: "apEllipsisSeparator", apEllipsisClip: "apEllipsisClip", apEllipsisIndex: "apEllipsisIndex", apEllipsisChar: "apEllipsisChar", apEllipsisClickable: "apEllipsisClickable" }, outputs: { apEllipsisRemovedElementsCount: "apEllipsisRemovedElementsCount", apEllipsisRemovedText: "apEllipsisRemovedText" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EllipsisDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'img[apFrozenGif]',
-                    host: {
-                        '[src]': 'src'
-                    }
+                    selector: '[apEllipsis]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { src: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { apEllipsisSeparator: [{
                 type: Input
-            }], frozen: [{
-                type: Input,
-                args: ['apFrozen']
-            }], events: [{
-                type: Input,
-                args: ['apGifEvents']
+            }], apEllipsisClip: [{
+                type: Input
+            }], apEllipsisIndex: [{
+                type: Input
+            }], apEllipsisChar: [{
+                type: Input
+            }], apEllipsisClickable: [{
+                type: Input
+            }], apEllipsisRemovedElementsCount: [{
+                type: Output
+            }], apEllipsisRemovedText: [{
+                type: Output
             }] } });
 
-class DefaultImageDirective {
-    updateUrl() {
-        if (this.default) {
-            this.src = this.default;
-        }
-        else {
-            this.src = 'assets/lib-ui-components/img/default-avatar.png';
-        }
+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.dispose$ = new Subject();
     }
 }
-/** @nocollapse */ /** @nocollapse */ DefaultImageDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ DefaultImageDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: DefaultImageDirective, selector: "img[default]", inputs: { src: "src", default: "default" }, host: { listeners: { "error": "updateUrl()" }, properties: { "src": "src" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultImageDirective, decorators: [{
-            type: Directive,
+/** @nocollapse */ /** @nocollapse */ TooltipNeoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ TooltipNeoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, decorators: [{
+            type: Injectable,
             args: [{
-                    selector: 'img[default]',
-                    host: {
-                        '(error)': 'updateUrl()',
-                        '[src]': 'src'
-                    }
+                    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.dispose$.next();
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TooltipNeoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoComponent, deps: [{ token: i0.ElementRef }, { token: TooltipNeoService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ TooltipNeoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TooltipNeoComponent, selector: "ap-tooltip-neo", inputs: { params: "params" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, 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", 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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(0px 0px 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}\n"], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+        trigger('neoTooltip', [
+            transition(':enter', [
+                style({ opacity: 0 }),
+                animate(200, style({ opacity: 1 }))
+            ]),
+            transition(':leave', [animate(200, style({ opacity: 0 }))])
+        ])
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-tooltip-neo', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('neoTooltip', [
+                            transition(':enter', [
+                                style({ opacity: 0 }),
+                                animate(200, style({ opacity: 1 }))
+                            ]),
+                            transition(':leave', [animate(200, style({ opacity: 0 }))])
+                        ])
+                    ], 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", 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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(0px 0px 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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TooltipNeoService }]; }, 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.display$ = new Subject();
+        this.mouseEntered = false;
+    }
+    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.display$.next(this.allowDisplay);
+        }
+    }
+    ngOnInit() {
+        this.initiateTooltip();
+    }
+    ngOnDestroy() {
+        this.dispose();
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /**
+     * To fix issue on inbox virtual scroller, it's a manual cleaner at DOM level
+     * It checks the route and also the DOM element where it's called
+     * @private
+     */
+    cleanUpPersistentTooltip() {
+        if (window.location.href.includes('inbox') && this.elementRef.nativeElement.parentElement.className.includes('item-button-actions')) {
+            const tooltips = document.getElementsByTagName('ap-tooltip-neo');
+            if (tooltips) {
+                Array.from(tooltips).forEach(tooltip => {
+                    tooltip.parentElement.parentElement.remove();
+                });
+            }
+        }
+    }
+    setSettings() {
+        if (typeof this.apTooltipNeo === 'object') {
+            const { content, backgroundColor = '#ffffff', borderColor, 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;
+            const backgroundColor = '#ffffff';
+            const borderColor = undefined;
+            const contentType = 'text';
+            const display = true;
+            const displayArrow = true;
+            const maxWidth = 'full';
+            const position = 'top';
+            const title = '';
+            this.params = { content, backgroundColor, borderColor, contentType, display, displayArrow, maxWidth, position, title };
+            this.allowDisplay = TooltipNeoDirective.enableTooltip(content, contentType, display);
+        }
+    }
+    initiateTooltip() {
+        this.display$
+            .pipe(switchMap(bool => {
+            if (!bool) {
+                return of(bool);
+            }
+            return of(bool).pipe(delay(400));
+        }), takeUntil(this.destroy$))
+            .subscribe(bool => {
+            if (bool) {
+                this.elementRefMouseLeave$ = fromEvent(this.elementRef.nativeElement, 'mouseleave')
+                    .subscribe(() => this.dispose());
+                this.cleanUpPersistentTooltip();
+                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.dispose();
+            }
+        });
+        this.tooltipNeoService.dispose$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.display$.next(false);
+        });
+    }
+    dispose() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+        }
+        if (this.elementRefMouseLeave$) {
+            this.elementRefMouseLeave$.unsubscribe();
+        }
+    }
+    onMouseEnter() {
+        this.setSettings();
+        this.mouseEntered = true;
+        if (this.allowDisplay && this.params) {
+            this.display$.next(true);
+        }
+    }
+    onMouseLeave() {
+        this.mouseEntered = false;
+        this.display$.next(false);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ TooltipNeoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoDirective, deps: [{ token: i0.ElementRef }, { token: i1$3.Overlay }, { token: i1$3.OverlayPositionBuilder }, { token: TooltipNeoService }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ TooltipNeoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: TooltipNeoDirective, selector: "[apTooltipNeo]", inputs: { apTooltipNeo: "apTooltipNeo" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[apTooltipNeo]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.Overlay }, { type: i1$3.OverlayPositionBuilder }, { type: TooltipNeoService }]; }, propDecorators: { apTooltipNeo: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class InstagramUserTag {
+}
+const MIDDLE_IMAGE = 0.5;
+const TOOLTIP_INFO_PIXEL_CORRECTION = 8;
+const ARROW_HEIGHT = 7;
+const INSTAGRAM_WEBSITE_URL = 'http://www.instagram.com';
+class UsersTagComponent {
+    constructor(changeDetectorRef, elementRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.elementRef = elementRef;
+        this.userTags = [];
+        this.tagOverlayShown = true;
+        this.toggleTagItems = false;
+        this.destroyed = new Subject();
+        this.THRESHOLD_VALUE = 0.5;
+    }
+    ngAfterViewInit() {
+        this.tagItems.changes.pipe(takeUntil(this.destroyed)).subscribe(() => {
+            this.updateUserTagsPosition(this.userTags);
+        });
+        this.changeDetectorRef.markForCheck();
+        this.updateUserTagsPosition(this.userTags);
+    }
+    ngOnDestroy() {
+        this.destroyed.next();
+    }
+    toggleTagsOverlay() {
+        this.toggleTagItems = !this.toggleTagItems;
+    }
+    updateUserTagsPosition(userTags) {
+        if (userTags) {
+            userTags.forEach(userTag => {
+                var _a;
+                const id = 'tagPreview-' + userTag.username;
+                const tagDivs = (_a = this.tagItems) === null || _a === void 0 ? void 0 : _a.map(directive => directive.nativeElement);
+                const div = tagDivs === null || tagDivs === void 0 ? void 0 : tagDivs.find(tag => tag.id === id);
+                if (div) {
+                    this.updateDOM(id, userTags, div);
+                }
+            });
+        }
+    }
+    updateDOM(id, userTags, element) {
+        const userName = id.split('-')[1];
+        const selectedUserTag = userTags.find(userTag => userTag.username === userName);
+        if (selectedUserTag) {
+            const x = selectedUserTag.x;
+            const y = selectedUserTag.y;
+            const imagePreview = this.elementRef.nativeElement.parentElement.querySelector('#imagePreview');
+            const imageContainer = this.elementRef.nativeElement.parentElement.querySelector('#imageContainer');
+            if (this.tooltipInformation) {
+                this.tooltipOffsetTop = imageContainer.offsetHeight + imageContainer.offsetTop - this.tooltipInformation.nativeElement.offsetHeight - TOOLTIP_INFO_PIXEL_CORRECTION;
+                this.tooltipOffsetLeft = (imageContainer.offsetWidth - this.tooltipInformation.nativeElement.offsetWidth) / 2;
+            }
+            const left = (x * imagePreview.offsetWidth) + imagePreview.offsetLeft - (element.offsetWidth / 2);
+            let top = (y * imagePreview.offsetHeight) + imagePreview.offsetTop;
+            top = y > MIDDLE_IMAGE ? top - element.offsetHeight + ARROW_HEIGHT : top - ARROW_HEIGHT;
+            element.style.left = left + 'px';
+            element.style.top = top + 'px';
+        }
+        this.changeDetectorRef.markForCheck();
+    }
+    openInstagramLink(tagName) {
+        window.open(INSTAGRAM_WEBSITE_URL + '/' + tagName, '_blank', 'noopener,noreferrer');
+    }
+    userTagsTrackByFn(index, userTag) {
+        return userTag.username;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ UsersTagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UsersTagComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ UsersTagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: UsersTagComponent, selector: "ap-users-tag", inputs: { userTags: "userTags", tagOverlayShown: "tagOverlayShown" }, viewQueries: [{ propertyName: "popMenuDiv", first: true, predicate: ["popMenuDiv"], descendants: true }, { propertyName: "tooltipInformation", first: true, predicate: ["tooltipInformation"], descendants: true }, { propertyName: "tagItems", predicate: ["tagItems"], descendants: true }], ngImport: i0, template: "<div class=\"tag-overlay\"\n     [hidden]=\"!tagOverlayShown\"\n     (click)=\"toggleTagsOverlay()\">\n\n    <button class=\"toggle-button\">\n        <ap-symbol\n            symbolId=\"custom-instagram-tags\"\n            color=\"white\"\n            size=\"nano\">\n        </ap-symbol>\n    </button>\n    <div *ngFor=\"let userTag of userTags; trackBy: userTagsTrackByFn\"\n         [class.hide-tags]=\"toggleTagItems\"\n         [id]=\"'tagPreview-'+ userTag.username\" class=\"mention-user-tag\"\n         [class.mention-user-tag-column-direction]=\"userTag.y < THRESHOLD_VALUE\"\n         [class.mention-user-tag-column-reverse-direction]=\"userTag.y > THRESHOLD_VALUE\" #tagItems>\n        <div class=\"triangle\"\n             [class.top-triangle]=\"userTag.y < THRESHOLD_VALUE\"\n             [class.bottom-triangle]=\"userTag.y > THRESHOLD_VALUE\"></div>\n        <div class=\"mention-content-user-tag user-tag-name\">\n                            <span class=\"user-name\"\n                                  [apTooltipNeo]=\"{content: userTag.username, position: 'bottom'}\"\n                                  (click)=\"openInstagramLink(userTag.username)\"\n                                  apEllipsis>{{userTag.username}}</span>\n        </div>\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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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-overlay{height:100%;width:100%;position:absolute;inset:0;cursor:pointer}.tag-overlay .toggle-button{bottom:12px;left:12px;position:absolute;border-radius:50px;background-color:#000;height:22px;border:none;cursor:pointer}.tag-overlay .arrow{color:#858fa1;min-width:52px;max-width:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;flex:1;border-radius:8px}.tag-overlay .arrow.arrow-right{margin-left:8px}.tag-overlay .arrow.arrow-left{margin-right:8px}.tag-overlay .arrow:hover{background:#f5f5f7}.tag-overlay .mention-user-tag{color:#fff;border-radius:4px;font-size:14px;font-weight:600;max-width:150px;min-height:29px;position:absolute;display:flex}.tag-overlay .mention-user-tag[hidden]{display:none}.tag-overlay .mention-user-tag-column-direction{flex-direction:column}.tag-overlay .mention-user-tag-column-reverse-direction{flex-direction:column-reverse}.tag-overlay .user-tag-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;background-color:#000000d9;box-sizing:border-box;color:#fff;border-radius:4px;padding:8px;font-size:14px;font-weight:600;max-width:150px;cursor:pointer;display:block}.tag-overlay .mention-content-user-tag{display:flex;justify-content:space-between}.tag-overlay .triangle{margin:0 auto;border-top:0 solid;border-left:0 solid;border-right:0 solid;border-bottom:0 solid;border-bottom-width:7px;border-top-width:7px;border-left-width:7px;border-right-width:7px;background:transparent;width:0;height:0}.tag-overlay .top-triangle{border-bottom:0 solid rgba(0,0,0,.85);border-bottom-width:7px;border-top-color:transparent;border-left-color:transparent;border-right-color:transparent}.tag-overlay .bottom-triangle{border-top:0 solid rgba(0,0,0,.85);border-top-width:7px;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}.tag-overlay .right-triangle{margin-right:10px}.tag-overlay .left-triangle{margin-left:10px}.tag-overlay .hide-tags{opacity:0}\n"], components: [{ type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: EllipsisDirective, selector: "[apEllipsis]", inputs: ["apEllipsisSeparator", "apEllipsisClip", "apEllipsisIndex", "apEllipsisChar", "apEllipsisClickable"], outputs: ["apEllipsisRemovedElementsCount", "apEllipsisRemovedText"] }, { type: TooltipNeoDirective, selector: "[apTooltipNeo]", inputs: ["apTooltipNeo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UsersTagComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-users-tag', template: "<div class=\"tag-overlay\"\n     [hidden]=\"!tagOverlayShown\"\n     (click)=\"toggleTagsOverlay()\">\n\n    <button class=\"toggle-button\">\n        <ap-symbol\n            symbolId=\"custom-instagram-tags\"\n            color=\"white\"\n            size=\"nano\">\n        </ap-symbol>\n    </button>\n    <div *ngFor=\"let userTag of userTags; trackBy: userTagsTrackByFn\"\n         [class.hide-tags]=\"toggleTagItems\"\n         [id]=\"'tagPreview-'+ userTag.username\" class=\"mention-user-tag\"\n         [class.mention-user-tag-column-direction]=\"userTag.y < THRESHOLD_VALUE\"\n         [class.mention-user-tag-column-reverse-direction]=\"userTag.y > THRESHOLD_VALUE\" #tagItems>\n        <div class=\"triangle\"\n             [class.top-triangle]=\"userTag.y < THRESHOLD_VALUE\"\n             [class.bottom-triangle]=\"userTag.y > THRESHOLD_VALUE\"></div>\n        <div class=\"mention-content-user-tag user-tag-name\">\n                            <span class=\"user-name\"\n                                  [apTooltipNeo]=\"{content: userTag.username, position: 'bottom'}\"\n                                  (click)=\"openInstagramLink(userTag.username)\"\n                                  apEllipsis>{{userTag.username}}</span>\n        </div>\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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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-overlay{height:100%;width:100%;position:absolute;inset:0;cursor:pointer}.tag-overlay .toggle-button{bottom:12px;left:12px;position:absolute;border-radius:50px;background-color:#000;height:22px;border:none;cursor:pointer}.tag-overlay .arrow{color:#858fa1;min-width:52px;max-width:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;flex:1;border-radius:8px}.tag-overlay .arrow.arrow-right{margin-left:8px}.tag-overlay .arrow.arrow-left{margin-right:8px}.tag-overlay .arrow:hover{background:#f5f5f7}.tag-overlay .mention-user-tag{color:#fff;border-radius:4px;font-size:14px;font-weight:600;max-width:150px;min-height:29px;position:absolute;display:flex}.tag-overlay .mention-user-tag[hidden]{display:none}.tag-overlay .mention-user-tag-column-direction{flex-direction:column}.tag-overlay .mention-user-tag-column-reverse-direction{flex-direction:column-reverse}.tag-overlay .user-tag-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;background-color:#000000d9;box-sizing:border-box;color:#fff;border-radius:4px;padding:8px;font-size:14px;font-weight:600;max-width:150px;cursor:pointer;display:block}.tag-overlay .mention-content-user-tag{display:flex;justify-content:space-between}.tag-overlay .triangle{margin:0 auto;border-top:0 solid;border-left:0 solid;border-right:0 solid;border-bottom:0 solid;border-bottom-width:7px;border-top-width:7px;border-left-width:7px;border-right-width:7px;background:transparent;width:0;height:0}.tag-overlay .top-triangle{border-bottom:0 solid rgba(0,0,0,.85);border-bottom-width:7px;border-top-color:transparent;border-left-color:transparent;border-right-color:transparent}.tag-overlay .bottom-triangle{border-top:0 solid rgba(0,0,0,.85);border-top-width:7px;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}.tag-overlay .right-triangle{margin-right:10px}.tag-overlay .left-triangle{margin-left:10px}.tag-overlay .hide-tags{opacity:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { userTags: [{
+                type: Input
+            }], tagOverlayShown: [{
+                type: Input
+            }], popMenuDiv: [{
+                type: ViewChild,
+                args: ['popMenuDiv']
+            }], tooltipInformation: [{
+                type: ViewChild,
+                args: ['tooltipInformation']
+            }], tagItems: [{
+                type: ViewChildren,
+                args: ['tagItems']
+            }] } });
+
+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';
+    }
+}
+/** @nocollapse */ /** @nocollapse */ FrozenGifDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FrozenGifDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ FrozenGifDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: { src: "src", frozen: ["apFrozen", "frozen"], events: ["apGifEvents", "events"] }, host: { properties: { "src": "src" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FrozenGifDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[apFrozenGif]',
+                    host: {
+                        '[src]': 'src'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { src: [{
+                type: Input
+            }], frozen: [{
+                type: Input,
+                args: ['apFrozen']
+            }], events: [{
+                type: Input,
+                args: ['apGifEvents']
+            }] } });
+
+class DefaultImageDirective {
+    updateUrl() {
+        if (this.default) {
+            this.src = this.default;
+        }
+        else {
+            this.src = 'assets/lib-ui-components/img/default-avatar.png';
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ DefaultImageDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ DefaultImageDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: DefaultImageDirective, selector: "img[default]", inputs: { src: "src", default: "default" }, host: { listeners: { "error": "updateUrl()" }, properties: { "src": "src" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DefaultImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img[default]',
+                    host: {
+                        '(error)': 'updateUrl()',
+                        '[src]': 'src'
+                    }
                 }]
         }], propDecorators: { src: [{
                 type: Input
@@ -837,6 +1262,7 @@ class ImageCarouselComponent {
         this.soundEnabled = false;
         this.supportGif = true;
         this.tinyMode = false;
+        this.tagOverlayShown = true;
         this.currentImageChanged = new EventEmitter();
         this._selectedIndex = 0;
         this.carouselOffset = 0;
@@ -951,12 +1377,12 @@ class ImageCarouselComponent {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ ImageCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ImageCarouselComponent, deps: [{ token: i1$3.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ ImageCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ImageCarouselComponent, selector: "ap-image-carousel", inputs: { items: "items", dotsInside: "dotsInside", soundEnabled: "soundEnabled", supportGif: "supportGif", tinyMode: "tinyMode" }, outputs: { currentImageChanged: "currentImageChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true }], usesOnChanges: true, ngImport: i0, 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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:100%}\n"], components: [{ type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DotsStepperComponent, selector: "ap-dots-stepper", inputs: ["disabled", "forwardAllowed", "index", "items", "size"], outputs: ["dotClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: ["src", "apFrozen", "apGifEvents"] }, { type: DefaultImageDirective, selector: "img[default]", inputs: ["src", "default"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ /** @nocollapse */ ImageCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ImageCarouselComponent, deps: [{ token: i1$4.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ImageCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ImageCarouselComponent, selector: "ap-image-carousel", inputs: { items: "items", dotsInside: "dotsInside", soundEnabled: "soundEnabled", supportGif: "supportGif", tinyMode: "tinyMode", tagOverlayShown: "tagOverlayShown" }, outputs: { currentImageChanged: "currentImageChanged" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "carousel", first: true, predicate: ["carousel"], descendants: true }], usesOnChanges: true, ngImport: i0, 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                         id=\"imagePreview\"\n                         [apFrozen]=\"!supportGif\"\n                         [default]=\"'assets/img/default.png'\"\n                         [src]=\"item.url\">\n                    <ap-users-tag *ngIf=\"item.userTags?.length\"\n                                  [userTags]=\"item.userTags\"\n                                  [tagOverlayShown]=\"tagOverlayShown\"\n                    ></ap-users-tag>\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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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:100%}\n"], components: [{ type: UsersTagComponent, selector: "ap-users-tag", inputs: ["userTags", "tagOverlayShown"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DotsStepperComponent, selector: "ap-dots-stepper", inputs: ["disabled", "forwardAllowed", "index", "items", "size"], outputs: ["dotClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: ["src", "apFrozen", "apGifEvents"] }, { type: DefaultImageDirective, selector: "img[default]", inputs: ["src", "default"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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:100%}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$3.AnimationBuilder }]; }, propDecorators: { carousel: [{
+            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                         id=\"imagePreview\"\n                         [apFrozen]=\"!supportGif\"\n                         [default]=\"'assets/img/default.png'\"\n                         [src]=\"item.url\">\n                    <ap-users-tag *ngIf=\"item.userTags?.length\"\n                                  [userTags]=\"item.userTags\"\n                                  [tagOverlayShown]=\"tagOverlayShown\"\n                    ></ap-users-tag>\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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$4.AnimationBuilder }]; }, propDecorators: { carousel: [{
                 type: ViewChild,
                 args: ['carousel']
             }], items: [{
@@ -969,6 +1395,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }], tinyMode: [{
                 type: Input
+            }], tagOverlayShown: [{
+                type: Input
             }], currentImageChanged: [{
                 type: Output
             }], onResize: [{
@@ -977,285 +1405,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
             }] } });
 
 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);
-    }
-}
-/** @nocollapse */ /** @nocollapse */ FeatureOnboardingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FeatureOnboardingComponent, deps: [{ token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ FeatureOnboardingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FeatureOnboardingComponent, selector: "ap-feature-onboarding", ngImport: i0, 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"], components: [{ type: DotsStepperComponent, selector: "ap-dots-stepper", inputs: ["disabled", "forwardAllowed", "index", "items", "size"], outputs: ["dotClick"] }, { type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: ModalComponent, selector: "ap-modal", inputs: ["closable", "headerBottomBorderEnabled", "footerTemplate", "footerVisible", "headerTemplate", "headerVisible", "mainTemplate", "config", "containerStyle", "headerStyle", "contentStyle", "footerStyle", "defaultLayout"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }]; } });
-
-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.dispose$ = new Subject();
-    }
-}
-/** @nocollapse */ /** @nocollapse */ TooltipNeoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ TooltipNeoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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.dispose$.next();
-        }
-    }
-}
-/** @nocollapse */ /** @nocollapse */ TooltipNeoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoComponent, deps: [{ token: i0.ElementRef }, { token: TooltipNeoService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ TooltipNeoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TooltipNeoComponent, selector: "ap-tooltip-neo", inputs: { params: "params" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, 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", 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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(0px 0px 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}\n"], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
-        trigger('neoTooltip', [
-            transition(':enter', [
-                style({ opacity: 0 }),
-                animate(200, style({ opacity: 1 }))
-            ]),
-            transition(':leave', [animate(200, style({ opacity: 0 }))])
-        ])
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ap-tooltip-neo', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('neoTooltip', [
-                            transition(':enter', [
-                                style({ opacity: 0 }),
-                                animate(200, style({ opacity: 1 }))
-                            ]),
-                            transition(':leave', [animate(200, style({ opacity: 0 }))])
-                        ])
-                    ], 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", 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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(0px 0px 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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TooltipNeoService }]; }, 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.display$ = new Subject();
-        this.mouseEntered = false;
-    }
-    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.display$.next(this.allowDisplay);
-        }
-    }
-    ngOnInit() {
-        this.initiateTooltip();
-    }
-    ngOnDestroy() {
-        this.dispose();
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    /**
-     * To fix issue on inbox virtual scroller, it's a manual cleaner at DOM level
-     * It checks the route and also the DOM element where it's called
-     * @private
-     */
-    cleanUpPersistentTooltip() {
-        if (window.location.href.includes('inbox') && this.elementRef.nativeElement.parentElement.className.includes('item-button-actions')) {
-            const tooltips = document.getElementsByTagName('ap-tooltip-neo');
-            if (tooltips) {
-                Array.from(tooltips).forEach(tooltip => {
-                    tooltip.parentElement.parentElement.remove();
-                });
-            }
-        }
-    }
-    setSettings() {
-        if (typeof this.apTooltipNeo === 'object') {
-            const { content, backgroundColor = '#ffffff', borderColor, 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;
-            const backgroundColor = '#ffffff';
-            const borderColor = undefined;
-            const contentType = 'text';
-            const display = true;
-            const displayArrow = true;
-            const maxWidth = 'full';
-            const position = 'top';
-            const title = '';
-            this.params = { content, backgroundColor, borderColor, contentType, display, displayArrow, maxWidth, position, title };
-            this.allowDisplay = TooltipNeoDirective.enableTooltip(content, contentType, display);
-        }
-    }
-    initiateTooltip() {
-        this.display$
-            .pipe(switchMap(bool => {
-            if (!bool) {
-                return of(bool);
-            }
-            return of(bool).pipe(delay(400));
-        }), takeUntil(this.destroy$))
-            .subscribe(bool => {
-            if (bool) {
-                this.elementRefMouseLeave$ = fromEvent(this.elementRef.nativeElement, 'mouseleave')
-                    .subscribe(() => this.dispose());
-                this.cleanUpPersistentTooltip();
-                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.dispose();
-            }
-        });
-        this.tooltipNeoService.dispose$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-            this.display$.next(false);
-        });
+    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
     }
-    dispose() {
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-        }
-        if (this.elementRefMouseLeave$) {
-            this.elementRefMouseLeave$.unsubscribe();
-        }
+    onClickNext() {
+        this.slideDisplayedIndex !== this.templates.length - 1 ? this.slideDisplayedIndex = this.slideDisplayedIndex + 1 : this.onCloseCarousel();
     }
-    onMouseEnter() {
-        this.setSettings();
-        this.mouseEntered = true;
-        if (this.allowDisplay && this.params) {
-            this.display$.next(true);
-        }
+    onClickPrevious() {
+        this.slideDisplayedIndex = this.slideDisplayedIndex - 1;
     }
-    onMouseLeave() {
-        this.mouseEntered = false;
-        this.display$.next(false);
+    onCloseCarousel() {
+        this.dialogRef.close(true);
     }
 }
-/** @nocollapse */ /** @nocollapse */ TooltipNeoDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoDirective, deps: [{ token: i0.ElementRef }, { token: i1$4.Overlay }, { token: i1$4.OverlayPositionBuilder }, { token: TooltipNeoService }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ TooltipNeoDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: TooltipNeoDirective, selector: "[apTooltipNeo]", inputs: { apTooltipNeo: "apTooltipNeo" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[apTooltipNeo]' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.Overlay }, { type: i1$4.OverlayPositionBuilder }, { type: TooltipNeoService }]; }, propDecorators: { apTooltipNeo: [{
-                type: Input
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }] } });
+/** @nocollapse */ /** @nocollapse */ FeatureOnboardingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FeatureOnboardingComponent, deps: [{ token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FeatureOnboardingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FeatureOnboardingComponent, selector: "ap-feature-onboarding", ngImport: i0, 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"], components: [{ type: DotsStepperComponent, selector: "ap-dots-stepper", inputs: ["disabled", "forwardAllowed", "index", "items", "size"], outputs: ["dotClick"] }, { type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }, { type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: ModalComponent, selector: "ap-modal", inputs: ["closable", "headerBottomBorderEnabled", "footerTemplate", "footerVisible", "headerTemplate", "headerVisible", "mainTemplate", "config", "containerStyle", "headerStyle", "contentStyle", "footerStyle", "defaultLayout"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }]; } });
 
 class LabelComponent {
     constructor(elementRef, zone) {
@@ -1337,6 +1511,7 @@ class LabelListComponent {
         this.elementRef = elementRef;
         this.textMeasurementService = textMeasurementService;
         this.zone = zone;
+        this.labels = [];
         this.removeLabelsEnabled = false;
         this.responsive = false;
         this.seeLessTranslation = 'See less';
@@ -1362,6 +1537,7 @@ class LabelListComponent {
         }
     }
     ngOnChanges(changes) {
+        console.log(changes);
         if (changes.labels.currentValue && this.responsive) {
             this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);
         }
@@ -1373,9 +1549,7 @@ class LabelListComponent {
         this.expanded = !this.expanded;
     }
     onRemoveLabel(label) {
-        this.labels.splice(this.labels.indexOf(label), 1);
-        this.removeLabel.emit(this.labels);
-        this.changeDetectorRef.markForCheck();
+        this.removeLabel.emit(label);
     }
     onResize() {
         this.generateResponsiveLabels(this.elementRef.nativeElement.children[0].offsetWidth);
@@ -1506,102 +1680,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 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();
-    }
-}
-/** @nocollapse */ /** @nocollapse */ OverlayDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OverlayDialogComponent, deps: [{ token: OverlayDialogRef }, { token: OVERLAY_DATA }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ OverlayDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OverlayDialogComponent, selector: "ap-overlay", ngImport: i0, 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"], components: [{ type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"] }]
-        }], ctorParameters: function () {
-        return [{ type: OverlayDialogRef }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [OVERLAY_DATA]
-                    }] }];
-    } });
-
-class OverlayInDivComponent {
-    constructor() {
-        this.closable = true;
-        this.close = new EventEmitter();
-    }
-}
-/** @nocollapse */ /** @nocollapse */ OverlayInDivComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OverlayInDivComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ OverlayInDivComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OverlayInDivComponent, selector: "ap-overlay-in-div", inputs: { title: "title", subtitle: "subtitle", imgPath: "imgPath", closable: "closable" }, outputs: { close: "close" }, ngImport: i0, 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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,rgba(245,247,248,.5));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}\n"], components: [{ type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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,rgba(245,247,248,.5));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}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], imgPath: [{
-                type: Input
-            }], closable: [{
-                type: Input
-            }], close: [{
-                type: Output
-            }] } });
-
-class PlaceComponent {
-}
-/** @nocollapse */ /** @nocollapse */ PlaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ PlaceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PlaceComponent, selector: "ap-place", inputs: { service: "service" }, ngImport: i0, 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"], components: [{ type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"] }]
-        }], propDecorators: { service: [{
-                type: Input
-            }] } });
-
-class PlaceListComponent {
-}
-/** @nocollapse */ /** @nocollapse */ PlaceListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ PlaceListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PlaceListComponent, selector: "ap-place-list", ngImport: i0, 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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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}\n"] }]
-        }] });
-
-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,
-    'offsets': {},
-    '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;
@@ -1953,6 +2031,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }] } });
 
+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,
+    'offsets': {},
+    '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 PopmenuDirective {
     constructor(initOptions, renderer, elementRef, componentFactoryResolver, appRef, injector) {
         this.initOptions = initOptions;
@@ -2229,78 +2330,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 }]
         }] });
 
-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';
-    }
-}
-/** @nocollapse */ /** @nocollapse */ SplashscreenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SplashscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ SplashscreenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: SplashscreenComponent, selector: "ap-splashscreen", inputs: { cardLabels: "cardLabels", cardDirection: "cardDirection", disposition: "disposition", imgHeight: "imgHeight", imgPaths: "imgPaths", imgWidth: "imgWidth", title: "title", width: "width" }, ngImport: i0, 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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%}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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%}\n"] }]
-        }], 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 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');
-    }
-}
-/** @nocollapse */ /** @nocollapse */ TryPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TryPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ TryPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TryPopupComponent, selector: "ap-try-popup", inputs: { texts: "texts", trialUrl: "trialUrl" }, outputs: { trialClicked: "trialClicked", closeClicked: "closeClicked" }, ngImport: i0, 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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 #e0e5ee80;height:92px;padding:24px 10px;position:fixed;right:16px;width:336px;z-index:10}.close-button{position:absolute;right:1px;top:0;background:transparent}.agorapulse-logo{height:28px}.button-container{text-align:end;margin-top:30px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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 #e0e5ee80;height:92px;padding:24px 10px;position:fixed;right:16px;width:336px;z-index:10}.close-button{position:absolute;right:1px;top:0;background:transparent}.agorapulse-logo{height:28px}.button-container{text-align:end;margin-top:30px}\n"] }]
-        }], propDecorators: { texts: [{
-                type: Input
-            }], trialUrl: [{
-                type: Input
-            }], trialClicked: [{
-                type: Output
-            }], closeClicked: [{
-                type: Output
-            }] } });
-
 class LabelsSelectorComponent {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
@@ -2311,6 +2340,7 @@ class LabelsSelectorComponent {
         this.loadingOnSearch = true;
         this.multipleEnabled = true;
         this.createLabel = new EventEmitter();
+        this.deleteLabel = new EventEmitter();
         this.selectLabels = new EventEmitter();
         this.searchErrorMessage = new EventEmitter();
         this.labels = [];
@@ -2318,442 +2348,69 @@ class LabelsSelectorComponent {
         this.labelsLoading = false;
     }
     ngOnInit() {
-        this.labels = this.initialLabels;
-        this.setSearchFunction();
-    }
-    ngOnChanges(changes) {
-        var _a;
-        if ((_a = changes === null || changes === void 0 ? void 0 : changes.initialLabels) === null || _a === void 0 ? void 0 : _a.currentValue) {
-            this.labels = this.initialLabels;
-        }
-    }
-    onCreateLabel(label) {
-        // this.labels$ = of([]);
-        // this.setSearchFunction();
-        console.log("new", label);
-        this.createLabel.emit(label);
-    }
-    onOpen() {
-        this.labelsInput$.next('');
-    }
-    onLabelsChange() {
-        this.selectLabels.emit(this.labels);
-        this.changeDetectorRef.markForCheck();
-    }
-    setSearchFunction() {
-        this.labels$ = this.labelsInput$.pipe(debounceTime(this.loadingOnSearch ? 400 : 0), distinctUntilChanged(), tap(() => {
-            this.labelsLoading = true;
-        }), switchMap((term) => this.searchLabelsFunction(term).pipe(catchError((response) => {
-            this.searchErrorMessage.emit(response.error ? response.error.message : 'Error');
-            return [];
-        }), map(response => {
-            this.labelsLoading = false;
-            if (!response || Object.keys(response).length == 0) {
-                return [];
-            }
-            return response;
-        }))));
-    }
-}
-/** @nocollapse */ /** @nocollapse */ LabelsSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelsSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ LabelsSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LabelsSelectorComponent, selector: "ap-labels-selector", inputs: { addLabelEnabled: "addLabelEnabled", disabled: "disabled", initialLabels: "initialLabels", translation: "translation", loadingOnSearch: "loadingOnSearch", multipleEnabled: "multipleEnabled", searchLabelsFunction: "searchLabelsFunction" }, outputs: { createLabel: "createLabel", selectLabels: "selectLabels", searchErrorMessage: "searchErrorMessage" }, usesOnChanges: true, ngImport: i0, template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select class=\"labels-select\"\n           [addTag]=\"addLabelEnabled\"\n           [clearable]=\"false\"\n           [disabled]=\"disabled\"\n           [hideSelected]=\"true\"\n           [items]=\"labels$ | async\"\n           [loading]=\"labelsLoading\"\n           [maxSelectedItems]=\"multipleEnabled ? INFINITY : 1\"\n           [minTermLength]=\"0\"\n           [multiple]=\"true\"\n           [placeholder]=\"translation.placeholder\"\n           [typeahead]=\"labelsInput$\"\n           [(ngModel)]=\"labels\"\n           (add)=\"onCreateLabel($event)\"\n           (change)=\"onLabelsChange()\"\n           (open)=\"onOpen()\"\n           appendTo=\"body\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n        <div *ngFor=\"let item of items\" class=\"labels-wrapper\">\n            <ap-label [content]=\"item\"\n                      [selectorWidth]=\"221\"\n                      [removable]=\"!disabled\"\n                      (remove)=\"clear(item)\"></ap-label>\n        </div>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\" 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-search=\"searchTerm\">\n        <div class=\"add-label\">\n            <ap-symbol class=\"add-label-icon\"\n                       symbolId=\"add-circle-bold-alternate\"\n                       size=\"micro\"\n            ></ap-symbol>\n            <div class=\"add-label-preview\">{{translation.createLabel}} \"{{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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"], components: [{ type: i1$6.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: LabelComponent, selector: "ap-label", inputs: ["color", "content", "onlyText", "selectorWidth", "removable"], outputs: ["remove"] }, { type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }], directives: [{ type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }], pipes: { "async": i2.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelsSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ap-labels-selector', template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select class=\"labels-select\"\n           [addTag]=\"addLabelEnabled\"\n           [clearable]=\"false\"\n           [disabled]=\"disabled\"\n           [hideSelected]=\"true\"\n           [items]=\"labels$ | async\"\n           [loading]=\"labelsLoading\"\n           [maxSelectedItems]=\"multipleEnabled ? INFINITY : 1\"\n           [minTermLength]=\"0\"\n           [multiple]=\"true\"\n           [placeholder]=\"translation.placeholder\"\n           [typeahead]=\"labelsInput$\"\n           [(ngModel)]=\"labels\"\n           (add)=\"onCreateLabel($event)\"\n           (change)=\"onLabelsChange()\"\n           (open)=\"onOpen()\"\n           appendTo=\"body\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n        <div *ngFor=\"let item of items\" class=\"labels-wrapper\">\n            <ap-label [content]=\"item\"\n                      [selectorWidth]=\"221\"\n                      [removable]=\"!disabled\"\n                      (remove)=\"clear(item)\"></ap-label>\n        </div>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\" 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-search=\"searchTerm\">\n        <div class=\"add-label\">\n            <ap-symbol class=\"add-label-icon\"\n                       symbolId=\"add-circle-bold-alternate\"\n                       size=\"micro\"\n            ></ap-symbol>\n            <div class=\"add-label-preview\">{{translation.createLabel}} \"{{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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { addLabelEnabled: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], initialLabels: [{
-                type: Input
-            }], translation: [{
-                type: Input
-            }], loadingOnSearch: [{
-                type: Input
-            }], multipleEnabled: [{
-                type: Input
-            }], searchLabelsFunction: [{
-                type: Input
-            }], createLabel: [{
-                type: Output
-            }], selectLabels: [{
-                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;
+        this.labels = this.initialLabels;
+        this.setSearchFunction();
     }
-    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);
+    ngOnChanges(changes) {
+        var _a;
+        if ((_a = changes === null || changes === void 0 ? void 0 : changes.initialLabels) === null || _a === void 0 ? void 0 : _a.currentValue) {
+            this.labels = this.initialLabels;
         }
-        this.validated = false;
-        return false;
     }
-    selectTime(time) {
-        this.timeModel = time;
-        this.emitChanges();
+    onCreateLabel(label) {
+        this.createLabel.emit(label);
     }
-    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);
-                }
-            }
-        }
+    onDeleteLabel(event) {
+        this.deleteLabel.emit(event.value);
     }
-    scrollToIndex(i) {
-        this.viewPort.scrollToIndex(i, 'smooth');
+    onOpen() {
+        this.labelsInput$.next('');
     }
-    static formatTime(time, format) {
-        let timeString = `${time.hours}` + ':' + `${time.minutes}`.padStart(2, '0');
-        if (format === TimeFormat.Meridian) {
-            timeString = TimepickerComponent.convert24To12(timeString);
-        }
-        return timeString;
+    onLabelsChange() {
+        this.selectLabels.emit(this.labels);
+        this.changeDetectorRef.markForCheck();
     }
-    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;
+    setSearchFunction() {
+        this.labels$ = this.labelsInput$.pipe(debounceTime(this.loadingOnSearch ? 400 : 0), distinctUntilChanged(), tap(() => {
+            this.labelsLoading = true;
+        }), switchMap((term) => this.searchLabelsFunction(term).pipe(catchError((response) => {
+            this.searchErrorMessage.emit(response.error ? response.error.message : 'Error');
+            return [];
+        }), map(response => {
+            this.labelsLoading = false;
+            if (!response || Object.keys(response).length == 0) {
+                return [];
             }
-        }
-        return hour + ':' + terms[1] + meridian;
-    }
-    static toFixed(num, fix) {
-        let fixedNum = num;
-        if (num < fix) {
-            fixedNum = '0' + fixedNum;
-        }
-        return fixedNum;
+            return response;
+        }))));
     }
 }
-/** @nocollapse */ /** @nocollapse */ TimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TimepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.OverlayContainer }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ TimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TimepickerComponent, selector: "ap-timepicker", inputs: { disabled: "disabled", format: "format", invalid: "invalid", invalidationMessage: "invalidationMessage", period: "period", placement: "placement", timeModel: "timeModel" }, outputs: { timeModelChange: "timeModelChange" }, viewQueries: [{ propertyName: "inputBox", first: true, predicate: ["inputBox"], descendants: true }, { propertyName: "inputTime", first: true, predicate: ["inputTime"], descendants: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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:hover,.time-options-container .time-line.selected{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:active:not([disabled]),.time-input:focus:not([disabled]),.time-input.menu{border:1px solid #178dfe}.time-input.menu.top{padding-bottom:0}\n"], components: [{ type: i2$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i2$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: PopmenuDirective, selector: "[apPopmenu]", inputs: ["apPopmenuBorder", "apPopmenuDisabled", "apPopmenuBackground", "arrow", "arrowOffset", "arrowPosition", "close", "hasBackdrop", "backdropClass", "panelClass", "offset", "offsets", "placement", "pointer", "apPopmenu", "position", "rounded", "shadow", "options"], outputs: ["menuClosed", "menuOpened"] }, { type: TooltipNeoDirective, selector: "[apTooltipNeo]", inputs: ["apTooltipNeo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TimepickerComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ LabelsSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelsSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ LabelsSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LabelsSelectorComponent, selector: "ap-labels-selector", inputs: { addLabelEnabled: "addLabelEnabled", disabled: "disabled", initialLabels: "initialLabels", translation: "translation", loadingOnSearch: "loadingOnSearch", multipleEnabled: "multipleEnabled", searchLabelsFunction: "searchLabelsFunction" }, outputs: { createLabel: "createLabel", deleteLabel: "deleteLabel", selectLabels: "selectLabels", searchErrorMessage: "searchErrorMessage" }, usesOnChanges: true, ngImport: i0, template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select class=\"labels-select\"\n           [addTag]=\"addLabelEnabled\"\n           [clearable]=\"false\"\n           [disabled]=\"disabled\"\n           [hideSelected]=\"true\"\n           [items]=\"labels$ | async\"\n           [loading]=\"labelsLoading\"\n           [maxSelectedItems]=\"multipleEnabled ? INFINITY : 1\"\n           [minTermLength]=\"0\"\n           [multiple]=\"true\"\n           [placeholder]=\"translation.placeholder\"\n           [typeahead]=\"labelsInput$\"\n           [(ngModel)]=\"labels\"\n           (add)=\"onCreateLabel($event)\"\n           (change)=\"onLabelsChange()\"\n           (remove)=\"onDeleteLabel($event)\"\n           (open)=\"onOpen()\"\n           appendTo=\"body\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n        <div *ngFor=\"let item of items\" class=\"labels-wrapper\">\n            <ap-label [content]=\"item\"\n                      [selectorWidth]=\"221\"\n                      [removable]=\"!disabled\"\n                      (remove)=\"clear(item)\"></ap-label>\n        </div>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\" 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-search=\"searchTerm\">\n        <div class=\"add-label\">\n            <ap-symbol class=\"add-label-icon\"\n                       symbolId=\"add-circle-bold-alternate\"\n                       size=\"micro\"\n            ></ap-symbol>\n            <div class=\"add-label-preview\">{{translation.createLabel}} \"{{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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"], components: [{ type: i1$6.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: LabelComponent, selector: "ap-label", inputs: ["color", "content", "onlyText", "selectorWidth", "removable"], outputs: ["remove"] }, { type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }], directives: [{ type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$6.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$6.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }], pipes: { "async": i2.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelsSelectorComponent, 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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:hover,.time-options-container .time-line.selected{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:active:not([disabled]),.time-input:focus:not([disabled]),.time-input.menu{border:1px solid #178dfe}.time-input.menu.top{padding-bottom:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.OverlayContainer }, { type: i0.Renderer2 }]; }, propDecorators: { inputBox: [{
-                type: ViewChild,
-                args: ['inputBox']
-            }], inputTime: [{
-                type: ViewChild,
-                args: ['inputTime']
-            }], viewPort: [{
-                type: ViewChild,
-                args: [CdkVirtualScrollViewport]
-            }], disabled: [{
+            args: [{ selector: 'ap-labels-selector', template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select class=\"labels-select\"\n           [addTag]=\"addLabelEnabled\"\n           [clearable]=\"false\"\n           [disabled]=\"disabled\"\n           [hideSelected]=\"true\"\n           [items]=\"labels$ | async\"\n           [loading]=\"labelsLoading\"\n           [maxSelectedItems]=\"multipleEnabled ? INFINITY : 1\"\n           [minTermLength]=\"0\"\n           [multiple]=\"true\"\n           [placeholder]=\"translation.placeholder\"\n           [typeahead]=\"labelsInput$\"\n           [(ngModel)]=\"labels\"\n           (add)=\"onCreateLabel($event)\"\n           (change)=\"onLabelsChange()\"\n           (remove)=\"onDeleteLabel($event)\"\n           (open)=\"onOpen()\"\n           appendTo=\"body\">\n    <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n        <div *ngFor=\"let item of items\" class=\"labels-wrapper\">\n            <ap-label [content]=\"item\"\n                      [selectorWidth]=\"221\"\n                      [removable]=\"!disabled\"\n                      (remove)=\"clear(item)\"></ap-label>\n        </div>\n    </ng-template>\n    <ng-template ng-option-tmp let-item=\"item\" 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-search=\"searchTerm\">\n        <div class=\"add-label\">\n            <ap-symbol class=\"add-label-icon\"\n                       symbolId=\"add-circle-bold-alternate\"\n                       size=\"micro\"\n            ></ap-symbol>\n            <div class=\"add-label-preview\">{{translation.createLabel}} \"{{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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { addLabelEnabled: [{
                 type: Input
-            }], format: [{
+            }], disabled: [{
                 type: Input
-            }], invalid: [{
+            }], initialLabels: [{
                 type: Input
-            }], invalidationMessage: [{
+            }], translation: [{
                 type: Input
-            }], period: [{
+            }], loadingOnSearch: [{
                 type: Input
-            }], placement: [{
+            }], multipleEnabled: [{
                 type: Input
-            }], timeModel: [{
+            }], searchLabelsFunction: [{
                 type: Input
-            }], timeModelChange: [{
+            }], createLabel: [{
+                type: Output
+            }], deleteLabel: [{
+                type: Output
+            }], selectLabels: [{
+                type: Output
+            }], searchErrorMessage: [{
                 type: Output
             }] } });
 
@@ -3065,130 +2722,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                     ], 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", 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"] }]
         }], ctorParameters: function () { return [{ 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;
-            }
-        }
-    }
-}
-/** @nocollapse */ /** @nocollapse */ StarRatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: StarRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ StarRatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: StarRatingComponent, selector: "ap-star-rating", inputs: { score: "score", maxScore: "maxScore", size: "size", colorOn: "colorOn", colorOff: "colorOff" }, usesOnChanges: true, ngImport: i0, 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}\n"], components: [{ type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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}\n"] }]
-        }], propDecorators: { score: [{
-                type: Input
-            }], maxScore: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], colorOn: [{
-                type: Input
-            }], colorOff: [{
-                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() {
-    }
-}
-/** @nocollapse */ /** @nocollapse */ EllipsisDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EllipsisDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ EllipsisDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: EllipsisDirective, selector: "[apEllipsis]", inputs: { apEllipsisSeparator: "apEllipsisSeparator", apEllipsisClip: "apEllipsisClip", apEllipsisIndex: "apEllipsisIndex", apEllipsisChar: "apEllipsisChar", apEllipsisClickable: "apEllipsisClickable" }, outputs: { apEllipsisRemovedElementsCount: "apEllipsisRemovedElementsCount", apEllipsisRemovedText: "apEllipsisRemovedText" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: EllipsisDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[apEllipsis]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { apEllipsisSeparator: [{
-                type: Input
-            }], apEllipsisClip: [{
-                type: Input
-            }], apEllipsisIndex: [{
-                type: Input
-            }], apEllipsisChar: [{
-                type: Input
-            }], apEllipsisClickable: [{
-                type: Input
-            }], apEllipsisRemovedElementsCount: [{
-                type: Output
-            }], apEllipsisRemovedText: [{
-                type: Output
-            }] } });
-
 // Based on https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2
 class EqualValidatorDirective {
     constructor(validateEqual, validateEqualReference) {
@@ -3385,124 +2918,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Output
             }] } });
 
-const ANIMATION_STYLES = new Map([
-    ['position', 'absolute'],
-    ['bottom', '0'],
-    ['height', '5px'],
-    ['border-radius', '6px'],
-    ['animation', 'slide 1s linear infinite']
-]);
-/**
- * This directive aims to manage a slider animation.
- */
-class LoadingSliderDirective {
-    constructor(elRef, renderer, animationBuilder) {
-        this.elRef = elRef;
-        this.renderer = renderer;
-        this.animationBuilder = animationBuilder;
-        this.loadingSlider = false;
-        this.sliderWidth = '50px';
-        this.sliderColor = '#ff6726';
-        this.sliderAnimationTime = 2000;
-        this.partEvent = new EventEmitter();
-    }
-    ngOnDestroy() {
-        this.removeSlider();
-    }
-    ngOnChanges(changes) {
-        let recreate = false;
-        if (changes.sliderWidth || changes.sliderColor || changes.sliderAnimationTime) {
-            recreate = true;
-        }
-        if (this.loadingSlider) {
-            if (!this.child || recreate) {
-                this.createSlider();
-            }
-            this.showSlider();
-        }
-        else {
-            this.hideSlider();
-        }
-    }
-    createSlider() {
-        this.removeSlider();
-        const div = this.renderer.createElement('div');
-        this.renderer.setStyle(this.elRef.nativeElement, 'position', 'relative');
-        this.renderer.setStyle(this.elRef.nativeElement, 'overflow', 'hidden');
-        this.renderer.addClass(div, 'animation-slider');
-        ANIMATION_STYLES.forEach((value, key) => this.renderer.setStyle(div, key, value));
-        this.renderer.setStyle(div, 'width', this.sliderWidth);
-        this.renderer.setStyle(div, 'background-color', this.sliderColor);
-        // Animate
-        const loaderFadeOutAnimation = this.animationBuilder.build([
-            animate(this.sliderAnimationTime, keyframes([
-                style({ left: "-" + this.sliderWidth, offset: 0 }),
-                style({ left: "calc(100%)", offset: 1 })
-            ]))
-        ]);
-        this.animation = loaderFadeOutAnimation.create(div);
-        const loop = () => {
-            // Stop loop on destroy
-            if (this.animation) {
-                this.animation.reset();
-                this.animation.onDone(loop);
-                this.animation.play();
-            }
-        };
-        this.animation.onDone(loop);
-        this.animation.play();
-        // Append new element
-        this.renderer.appendChild(this.elRef.nativeElement, div);
-        this.child = div;
-    }
-    removeSlider() {
-        if (this.animation) {
-            this.animation.destroy();
-            this.animation = undefined;
-        }
-        if (this.child) {
-            this.renderer.removeChild(this.elRef.nativeElement, this.child);
-            this.child = undefined;
-        }
-    }
-    hideSlider() {
-        if (this.child) {
-            this.renderer.setProperty(this.child, 'hidden', true);
-        }
-        if (this.animation) {
-            this.animation.pause();
-        }
-    }
-    showSlider() {
-        if (this.child) {
-            this.renderer.setProperty(this.child, 'hidden', false);
-        }
-        if (this.animation) {
-            this.animation.reset();
-            this.animation.play();
-        }
-    }
-}
-/** @nocollapse */ /** @nocollapse */ LoadingSliderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoadingSliderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$3.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ LoadingSliderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: LoadingSliderDirective, selector: "[loadingSlider]", inputs: { loadingSlider: "loadingSlider", sliderWidth: "sliderWidth", sliderColor: "sliderColor", sliderAnimationTime: "sliderAnimationTime" }, outputs: { partEvent: "partEvent" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoadingSliderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // tslint:disable-next-line:directive-selector
-                    selector: '[loadingSlider]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$3.AnimationBuilder }]; }, propDecorators: { loadingSlider: [{
-                type: Input
-            }], sliderWidth: [{
-                type: Input
-            }], sliderColor: [{
-                type: Input
-            }], sliderAnimationTime: [{
-                type: Input
-            }], partEvent: [{
-                type: Output
-            }] } });
-
 // Angular
 class TruncateTooltipDirective {
     constructor(tooltipNeo, elementRef) {
@@ -3578,7 +2993,7 @@ class PasswordInputComponent {
 }
 PasswordInputComponent.type = ['text', 'password'];
 /** @nocollapse */ /** @nocollapse */ PasswordInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ PasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PasswordInputComponent, selector: "ap-password-input", inputs: { name: "name", placeholder: "placeholder", fullWidth: "fullWidth" }, providers: [PASSWORD_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "passwordInput", first: true, predicate: ["passwordInput"], descendants: true }], ngImport: i0, 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", 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"], components: [{ type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+/** @nocollapse */ /** @nocollapse */ PasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PasswordInputComponent, selector: "ap-password-input", inputs: { name: "name", placeholder: "placeholder", fullWidth: "fullWidth" }, providers: [PASSWORD_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "passwordInput", first: true, predicate: ["passwordInput"], descendants: true }], ngImport: i0, 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", 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"], components: [{ type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ap-password-input', providers: [PASSWORD_CONTROL_VALUE_ACCESSOR], 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", 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 #ff0000}[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 #ffffff}[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:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[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}\n"] }]
@@ -3613,23 +3028,16 @@ class AgorapulseUiComponentsModule {
         LabelsSelectorComponent,
         MediaDisplayOverlayDialogComponent,
         ModalComponent,
-        OverlayDialogComponent,
-        OverlayInDivComponent,
         PasswordInputComponent,
-        PlaceComponent,
-        PlaceListComponent,
         SnackBarComponent,
-        SplashscreenComponent,
-        StarRatingComponent,
         LabelComponent,
-        TimepickerComponent,
-        TryPopupComponent,
         NotificationComponent,
         PaginatorComponent,
         PaginatorButtonComponent,
         SlideToggleComponent,
         SnackbarsThreadComponent,
         TooltipNeoComponent,
+        UsersTagComponent,
         // Directives
         AutosizeTextareaDirective,
         DefaultImageDirective,
@@ -3638,8 +3046,7 @@ class AgorapulseUiComponentsModule {
         EqualValidatorDirective,
         MultiStyleTextDirective,
         TruncateTooltipDirective,
-        TooltipNeoDirective,
-        LoadingSliderDirective
+        TooltipNeoDirective
     ], imports: [AgorapulseUiSymbolModule,
         CommonModule,
         NgxDaterangepickerMd,
@@ -3676,7 +3083,6 @@ class AgorapulseUiComponentsModule {
         MatTabsModule,
         MatStepperModule,
         // Popups & Modals
-        MatBottomSheetModule,
         MatDialogModule,
         MatSnackBarModule,
         // Table
@@ -3696,17 +3102,9 @@ class AgorapulseUiComponentsModule {
         LabelListComponent,
         MediaDisplayOverlayDialogComponent,
         ModalComponent,
-        OverlayDialogComponent,
-        OverlayInDivComponent,
         PasswordInputComponent,
-        PlaceComponent,
-        PlaceListComponent,
         SnackBarComponent,
-        SplashscreenComponent,
-        StarRatingComponent,
         LabelsSelectorComponent,
-        TimepickerComponent,
-        TryPopupComponent,
         NotificationComponent,
         PaginatorComponent,
         PaginatorButtonComponent,
@@ -3720,7 +3118,6 @@ class AgorapulseUiComponentsModule {
         MultiStyleTextDirective,
         TruncateTooltipDirective,
         TooltipNeoDirective,
-        LoadingSliderDirective,
         // Modules
         NgSelectModule,
         PopmenuModule,
@@ -3731,6 +3128,7 @@ class AgorapulseUiComponentsModule {
         MatCheckboxModule,
         MatChipsModule,
         MatExpansionModule,
+        UsersTagComponent,
         // MatFormFieldModule,
         MatIconModule,
         // MatInputModule,
@@ -3752,7 +3150,6 @@ class AgorapulseUiComponentsModule {
         MatTabsModule,
         MatStepperModule,
         // Popups & Modals
-        MatBottomSheetModule,
         MatDialogModule,
         MatSnackBarModule,
         // Table
@@ -3799,7 +3196,6 @@ class AgorapulseUiComponentsModule {
             MatTabsModule,
             MatStepperModule,
             // Popups & Modals
-            MatBottomSheetModule,
             MatDialogModule,
             MatSnackBarModule,
             // Table
@@ -3837,7 +3233,6 @@ class AgorapulseUiComponentsModule {
         MatTabsModule,
         MatStepperModule,
         // Popups & Modals
-        MatBottomSheetModule,
         MatDialogModule,
         MatSnackBarModule,
         // Table
@@ -3861,23 +3256,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         LabelsSelectorComponent,
                         MediaDisplayOverlayDialogComponent,
                         ModalComponent,
-                        OverlayDialogComponent,
-                        OverlayInDivComponent,
                         PasswordInputComponent,
-                        PlaceComponent,
-                        PlaceListComponent,
                         SnackBarComponent,
-                        SplashscreenComponent,
-                        StarRatingComponent,
                         LabelComponent,
-                        TimepickerComponent,
-                        TryPopupComponent,
                         NotificationComponent,
                         PaginatorComponent,
                         PaginatorButtonComponent,
                         SlideToggleComponent,
                         SnackbarsThreadComponent,
                         TooltipNeoComponent,
+                        UsersTagComponent,
                         // Directives
                         AutosizeTextareaDirective,
                         DefaultImageDirective,
@@ -3887,7 +3275,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         MultiStyleTextDirective,
                         TruncateTooltipDirective,
                         TooltipNeoDirective,
-                        LoadingSliderDirective,
                     ],
                     imports: [
                         AgorapulseUiSymbolModule,
@@ -3926,7 +3313,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         MatTabsModule,
                         MatStepperModule,
                         // Popups & Modals
-                        MatBottomSheetModule,
                         MatDialogModule,
                         MatSnackBarModule,
                         // Table
@@ -3949,17 +3335,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         LabelListComponent,
                         MediaDisplayOverlayDialogComponent,
                         ModalComponent,
-                        OverlayDialogComponent,
-                        OverlayInDivComponent,
                         PasswordInputComponent,
-                        PlaceComponent,
-                        PlaceListComponent,
                         SnackBarComponent,
-                        SplashscreenComponent,
-                        StarRatingComponent,
                         LabelsSelectorComponent,
-                        TimepickerComponent,
-                        TryPopupComponent,
                         NotificationComponent,
                         PaginatorComponent,
                         PaginatorButtonComponent,
@@ -3973,7 +3351,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         MultiStyleTextDirective,
                         TruncateTooltipDirective,
                         TooltipNeoDirective,
-                        LoadingSliderDirective,
                         // Modules
                         NgSelectModule,
                         PopmenuModule,
@@ -3984,6 +3361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         MatCheckboxModule,
                         MatChipsModule,
                         MatExpansionModule,
+                        UsersTagComponent,
                         // MatFormFieldModule,
                         MatIconModule,
                         // MatInputModule,
@@ -4005,7 +3383,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                         MatTabsModule,
                         MatStepperModule,
                         // Popups & Modals
-                        MatBottomSheetModule,
                         MatDialogModule,
                         MatSnackBarModule,
                         // Table
@@ -4020,61 +3397,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 }]
         }] });
 
-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;
-    }
-}
-/** @nocollapse */ /** @nocollapse */ OverlayDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OverlayDialogService, deps: [{ token: i0.Injector }, { token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ /** @nocollapse */ OverlayDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OverlayDialogService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OverlayDialogService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$4.Overlay }]; } });
-
 class CodeStatus {
     constructor(snackbarText, snackbarType) {
         this.snackbarText = snackbarText;
@@ -4124,5 +3446,5 @@ function generateCodeStatus(text, type) {
  * Generated bundle index. Do not edit.
  */
 
-export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, LabelComponent, LabelListComponent, LabelsSelectorComponent, LoadingSliderDirective, MediaDisplayOverlayDialogComponent, ModalComponent, MultiStyleTextDirective, NotificationComponent, OverlayDialogComponent, OverlayDialogService, OverlayInDivComponent, PaginatorButtonComponent, PaginatorComponent, PasswordInputComponent, PlaceComponent, PlaceListComponent, PopmenuComponent, PopmenuDirective, PopmenuModule, SlideToggleComponent, SnackBarComponent, SnackbarsThreadComponent, SnackbarsThreadService, SplashscreenComponent, StarRatingComponent, StepperComponent, TimeFormat, TimepickerComponent, TooltipNeoDirective, TruncateTooltipDirective, TryPopupComponent, generateCodeStatus };
+export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, InstagramUserTag, LabelComponent, LabelListComponent, LabelsSelectorComponent, MediaDisplayOverlayDialogComponent, ModalComponent, MultiStyleTextDirective, NotificationComponent, PaginatorButtonComponent, PaginatorComponent, PasswordInputComponent, PopmenuComponent, PopmenuDirective, PopmenuModule, SlideToggleComponent, SnackBarComponent, SnackbarsThreadComponent, SnackbarsThreadService, StepperComponent, TooltipNeoDirective, TruncateTooltipDirective, UsersTagComponent, generateCodeStatus };
 //# sourceMappingURL=agorapulse-ui-components.mjs.map