@agorapulse/ui-components 13.1.6 → 13.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agorapulse-ui-components-13.1.7.tgz +0 -0
- package/esm2020/index.mjs +4 -4
- package/esm2020/src/lib/agorapulse-ui-components.module.mjs +16 -16
- package/esm2020/src/lib/labels/label-list.component.mjs +97 -0
- package/esm2020/src/lib/labels/label.component.mjs +53 -0
- package/esm2020/src/lib/labels-selector/labels-selector.component.mjs +89 -0
- package/fesm2015/agorapulse-ui-components.mjs +1178 -1164
- package/fesm2015/agorapulse-ui-components.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components.mjs +1092 -1078
- package/fesm2020/agorapulse-ui-components.mjs.map +1 -1
- package/index.d.ts +3 -3
- package/package.json +1 -1
- package/src/lib/agorapulse-ui-components.module.d.ts +15 -15
- package/src/lib/labels/label-list.component.d.ts +30 -0
- package/src/lib/{tags/tag.component.d.ts → labels/label.component.d.ts} +6 -5
- package/src/lib/labels-selector/labels-selector.component.d.ts +34 -0
- package/agorapulse-ui-components-13.1.6.tgz +0 -0
- package/esm2020/src/lib/tags/tag-list.component.mjs +0 -96
- package/esm2020/src/lib/tags/tag.component.mjs +0 -47
- package/esm2020/src/lib/tags-selector/tags-selector.component.mjs +0 -82
- package/src/lib/tags/tag-list.component.d.ts +0 -30
- package/src/lib/tags-selector/tags-selector.component.d.ts +0 -32
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, HostListener, EventEmitter, forwardRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, Inject, InjectionToken, HostBinding, Optional, NgModule,
|
|
2
|
+
import { Directive, HostListener, EventEmitter, forwardRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, Injectable, Inject, InjectionToken, HostBinding, Optional, NgModule, Attribute } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as i1$
|
|
5
|
+
import * as i1$4 from '@angular/cdk/overlay';
|
|
6
6
|
import { OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
|
|
7
7
|
import * as i4 from '@angular/forms';
|
|
8
8
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
@@ -23,7 +23,7 @@ import { MatGridListModule } from '@angular/material/grid-list';
|
|
|
23
23
|
import * as i2$2 from '@angular/material/icon';
|
|
24
24
|
import { MatIconModule } from '@angular/material/icon';
|
|
25
25
|
import { MatListModule } from '@angular/material/list';
|
|
26
|
-
import * as i1$
|
|
26
|
+
import * as i1$5 from '@angular/material/menu';
|
|
27
27
|
import { MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
|
|
28
28
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
29
29
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
@@ -988,384 +988,778 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
988
988
|
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"] }]
|
|
989
989
|
}], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }]; } });
|
|
990
990
|
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
991
|
+
const topLeftPosition = {
|
|
992
|
+
originX: 'start',
|
|
993
|
+
originY: 'top',
|
|
994
|
+
overlayX: 'start',
|
|
995
|
+
overlayY: 'bottom',
|
|
996
|
+
offsetY: -12
|
|
997
|
+
};
|
|
998
|
+
const topPosition = {
|
|
999
|
+
originX: 'center',
|
|
1000
|
+
originY: 'top',
|
|
1001
|
+
overlayX: 'center',
|
|
1002
|
+
overlayY: 'bottom',
|
|
1003
|
+
offsetY: -12
|
|
1004
|
+
};
|
|
1005
|
+
const topRightPosition = {
|
|
1006
|
+
originX: 'end',
|
|
1007
|
+
originY: 'top',
|
|
1008
|
+
overlayX: 'end',
|
|
1009
|
+
overlayY: 'bottom',
|
|
1010
|
+
offsetY: -12
|
|
1011
|
+
};
|
|
1012
|
+
const bottomLeftPosition = {
|
|
1013
|
+
originX: 'start',
|
|
1014
|
+
originY: 'bottom',
|
|
1015
|
+
overlayX: 'start',
|
|
1016
|
+
overlayY: 'top',
|
|
1017
|
+
offsetY: 12
|
|
1018
|
+
};
|
|
1019
|
+
const bottomPosition = {
|
|
1020
|
+
originX: 'center',
|
|
1021
|
+
originY: 'bottom',
|
|
1022
|
+
overlayX: 'center',
|
|
1023
|
+
overlayY: 'top',
|
|
1024
|
+
offsetY: 12
|
|
1025
|
+
};
|
|
1026
|
+
const bottomRightPosition = {
|
|
1027
|
+
originX: 'end',
|
|
1028
|
+
originY: 'bottom',
|
|
1029
|
+
overlayX: 'end',
|
|
1030
|
+
overlayY: 'top',
|
|
1031
|
+
offsetY: 12
|
|
1032
|
+
};
|
|
1033
|
+
const leftPostion = {
|
|
1034
|
+
originX: 'start',
|
|
1035
|
+
originY: 'center',
|
|
1036
|
+
overlayX: 'end',
|
|
1037
|
+
overlayY: 'center',
|
|
1038
|
+
offsetX: -12
|
|
1039
|
+
};
|
|
1040
|
+
const rightPosition = {
|
|
1041
|
+
originX: 'end',
|
|
1042
|
+
originY: 'center',
|
|
1043
|
+
overlayX: 'start',
|
|
1044
|
+
overlayY: 'center',
|
|
1045
|
+
offsetX: 12
|
|
1046
|
+
};
|
|
1047
|
+
const tooltipNeoPositions = {
|
|
1048
|
+
topLeft: topLeftPosition,
|
|
1049
|
+
top: topPosition,
|
|
1050
|
+
topRight: topRightPosition,
|
|
1051
|
+
left: leftPostion,
|
|
1052
|
+
right: rightPosition,
|
|
1053
|
+
bottomLeft: bottomLeftPosition,
|
|
1054
|
+
bottom: bottomPosition,
|
|
1055
|
+
bottomRight: bottomRightPosition
|
|
1056
|
+
};
|
|
1057
|
+
|
|
1058
|
+
class TooltipNeoService {
|
|
1059
|
+
constructor() {
|
|
1060
|
+
this.clickOutside$ = new Subject();
|
|
1020
1061
|
}
|
|
1021
1062
|
}
|
|
1022
|
-
/** @nocollapse */ /** @nocollapse */
|
|
1023
|
-
/** @nocollapse */ /** @nocollapse */
|
|
1024
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type:
|
|
1025
|
-
type:
|
|
1026
|
-
args: [{
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
}] }]; } });
|
|
1063
|
+
/** @nocollapse */ /** @nocollapse */ TooltipNeoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1064
|
+
/** @nocollapse */ /** @nocollapse */ TooltipNeoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, providedIn: 'root' });
|
|
1065
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, decorators: [{
|
|
1066
|
+
type: Injectable,
|
|
1067
|
+
args: [{
|
|
1068
|
+
providedIn: 'root'
|
|
1069
|
+
}]
|
|
1070
|
+
}] });
|
|
1031
1071
|
|
|
1032
|
-
|
|
1033
|
-
(
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
})(KEY_CODE || (KEY_CODE = {}));
|
|
1037
|
-
class MediaDisplayOverlayDialogComponent {
|
|
1038
|
-
constructor(dialogRef, data) {
|
|
1039
|
-
this.dialogRef = dialogRef;
|
|
1040
|
-
this.data = data;
|
|
1041
|
-
this.currentUrlIndex = 1;
|
|
1042
|
-
this.urls = []; // all urls
|
|
1043
|
-
this.mediaType = 'image'; // 'image', 'video'
|
|
1044
|
-
this.supportGif = true;
|
|
1072
|
+
class TooltipNeoComponent {
|
|
1073
|
+
constructor(_elementRef, _tooltipNeoService) {
|
|
1074
|
+
this._elementRef = _elementRef;
|
|
1075
|
+
this._tooltipNeoService = _tooltipNeoService;
|
|
1045
1076
|
}
|
|
1046
1077
|
ngOnInit() {
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
this.urls = this.data.urls;
|
|
1051
|
-
}
|
|
1052
|
-
if (this.data.url) {
|
|
1053
|
-
if (this.urls.length === 0) {
|
|
1054
|
-
this.urls = [this.data.url];
|
|
1055
|
-
}
|
|
1056
|
-
this.url = this.data.url;
|
|
1057
|
-
this.currentUrlIndex = this.urls.indexOf(this.data.url) + 1;
|
|
1058
|
-
}
|
|
1059
|
-
}
|
|
1060
|
-
}
|
|
1061
|
-
onClose() {
|
|
1062
|
-
this.dialogRef.close();
|
|
1063
|
-
}
|
|
1064
|
-
onNext($event) {
|
|
1065
|
-
if (this.currentUrlIndex < this.urls.length) {
|
|
1066
|
-
this.currentUrlIndex += 1;
|
|
1067
|
-
this.url = this.urls[this.currentUrlIndex - 1];
|
|
1068
|
-
}
|
|
1069
|
-
$event.stopPropagation();
|
|
1070
|
-
}
|
|
1071
|
-
onPrevious($event) {
|
|
1072
|
-
if (this.currentUrlIndex > 1) {
|
|
1073
|
-
this.currentUrlIndex -= 1;
|
|
1074
|
-
this.url = this.urls[this.currentUrlIndex - 1];
|
|
1075
|
-
}
|
|
1076
|
-
$event.stopPropagation();
|
|
1078
|
+
this.params.borderColor
|
|
1079
|
+
? this.border = `solid 1px ${this.params.borderColor}`
|
|
1080
|
+
: this.border = undefined;
|
|
1077
1081
|
}
|
|
1078
|
-
|
|
1079
|
-
if (event.
|
|
1080
|
-
this.
|
|
1081
|
-
}
|
|
1082
|
-
if (event.keyCode === KEY_CODE.LEFT_ARROW) {
|
|
1083
|
-
this.onPrevious(event);
|
|
1082
|
+
onClickOutside(event) {
|
|
1083
|
+
if (!this._elementRef.nativeElement.contains(event.target)) {
|
|
1084
|
+
this._tooltipNeoService.clickOutside$.next();
|
|
1084
1085
|
}
|
|
1085
1086
|
}
|
|
1086
1087
|
}
|
|
1087
|
-
|
|
1088
|
-
position: {
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
};
|
|
1099
|
-
/** @nocollapse */ /** @nocollapse */ MediaDisplayOverlayDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MediaDisplayOverlayDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
1100
|
-
/** @nocollapse */ /** @nocollapse */ MediaDisplayOverlayDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: MediaDisplayOverlayDialogComponent, selector: "ap-media-display-overlay", host: { listeners: { "window:keyup": "keyEvent($event)" } }, ngImport: i0, template: "<div class=\"full\" (click)=\"onClose()\">\n <div class=\"media-display ap-new\">\n <header class=\"ap-modal-header\">\n <ap-symbol\n id=\"close\"\n color=\"white\"\n size=\"micro\"\n (click)=\"onClose()\">\n </ap-symbol>\n </header>\n <content class=\"ap-modal-content\">\n <div *ngIf=\"urls.length > 1\"\n class=\"next-prev-container left\"\n [class.disabled]=\"currentUrlIndex <= 1\"\n (click)=\"onPrevious($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n id=\"arrow-left-1\"\n [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\"\n size=\"small\">\n </ap-symbol>\n </div>\n </div>\n <div class=\"media-container\">\n <img *ngIf=\"url && mediaType =='image'\" apFrozenGif [apFrozen]=\"!supportGif\" [src]=\"url\" (click)=\"$event.stopPropagation()\">\n </div>\n <div *ngIf=\"urls.length > 1\"\n class=\"next-prev-container right\"\n [class.disabled]=\"currentUrlIndex >= urls.length\"\n (click)=\"onNext($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n id=\"arrow-right-1\"\n [color]=\"currentUrlIndex >= urls.length ? 'grey-blue' : 'white'\"\n size=\"small\">\n </ap-symbol>\n </div>\n </div>\n </content>\n <footer *ngIf=\"urls && urls.length > 1\"\n class=\"ap-modal-footer\">\n <div class=\"index-container\">\n {{currentUrlIndex}} / {{urls.length}}\n </div>\n </footer>\n </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #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{width:100%;height:100%}.full{height:100%;width:100%}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%}.media-display .media-container{margin:auto;flex:1;align-items:center;flex-direction:column;display:flex}.media-display .media-container img{max-width:80%}.media-display .ap-modal-content{padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\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"] }, { type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: ["src", "apFrozen", "apGifEvents"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MediaDisplayOverlayDialogComponent, decorators: [{
|
|
1088
|
+
/** @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 });
|
|
1089
|
+
/** @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: [
|
|
1090
|
+
trigger('neoTooltip', [
|
|
1091
|
+
transition(':enter', [
|
|
1092
|
+
style({ opacity: 0 }),
|
|
1093
|
+
animate(200, style({ opacity: 1 }))
|
|
1094
|
+
]),
|
|
1095
|
+
transition(':leave', [animate(200, style({ opacity: 0 }))])
|
|
1096
|
+
])
|
|
1097
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1098
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoComponent, decorators: [{
|
|
1102
1099
|
type: Component,
|
|
1103
|
-
args: [{
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1100
|
+
args: [{ selector: 'ap-tooltip-neo', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
1101
|
+
trigger('neoTooltip', [
|
|
1102
|
+
transition(':enter', [
|
|
1103
|
+
style({ opacity: 0 }),
|
|
1104
|
+
animate(200, style({ opacity: 1 }))
|
|
1105
|
+
]),
|
|
1106
|
+
transition(':leave', [animate(200, style({ opacity: 0 }))])
|
|
1107
|
+
])
|
|
1108
|
+
], 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"] }]
|
|
1109
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TooltipNeoService }]; }, propDecorators: { params: [{
|
|
1110
|
+
type: Input
|
|
1111
|
+
}], onClickOutside: [{
|
|
1108
1112
|
type: HostListener,
|
|
1109
|
-
args: ['
|
|
1113
|
+
args: ['document:click', ['$event']]
|
|
1110
1114
|
}] } });
|
|
1111
1115
|
|
|
1112
|
-
class
|
|
1113
|
-
constructor(
|
|
1114
|
-
this.
|
|
1116
|
+
class TooltipNeoDirective {
|
|
1117
|
+
constructor(elementRef, overlay, overlayPositionBuilder, tooltipNeoService) {
|
|
1118
|
+
this.elementRef = elementRef;
|
|
1119
|
+
this.overlay = overlay;
|
|
1120
|
+
this.overlayPositionBuilder = overlayPositionBuilder;
|
|
1121
|
+
this.tooltipNeoService = tooltipNeoService;
|
|
1122
|
+
this.destroy$ = new Subject();
|
|
1123
|
+
this.hide$ = new Subject();
|
|
1124
|
+
this.mouseEntered = false;
|
|
1125
|
+
this.show$ = new Subject();
|
|
1115
1126
|
}
|
|
1116
|
-
|
|
1117
|
-
|
|
1127
|
+
static enableTooltip(content, contentType, display) {
|
|
1128
|
+
return !!content && !!contentType && !!display;
|
|
1118
1129
|
}
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
this.data = data;
|
|
1130
|
+
ngOnChanges(changes) {
|
|
1131
|
+
if ((changes?.apTooltipNeo?.currentValue?.display || changes?.apTooltipNeo?.currentValue?.position) && this.mouseEntered) {
|
|
1132
|
+
this.setSettings();
|
|
1133
|
+
this.allowDisplay ? this.show$.next(true) : this.hide$.next(false);
|
|
1134
|
+
}
|
|
1125
1135
|
}
|
|
1126
|
-
|
|
1127
|
-
this.
|
|
1136
|
+
ngOnInit() {
|
|
1137
|
+
this.initiateTooltip();
|
|
1128
1138
|
}
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
+
ngOnDestroy() {
|
|
1140
|
+
this.detach();
|
|
1141
|
+
this.destroy$.next();
|
|
1142
|
+
this.destroy$.complete();
|
|
1143
|
+
}
|
|
1144
|
+
setSettings() {
|
|
1145
|
+
if (typeof this.apTooltipNeo === 'object') {
|
|
1146
|
+
const { content, backgroundColor = '#ffffff', borderColor, contentType = 'text', display = true, displayArrow = true, maxWidth = 'full', position = 'top', title = '' } = this.apTooltipNeo;
|
|
1147
|
+
this.params = { content, backgroundColor, borderColor, contentType, display, displayArrow, maxWidth, position, title };
|
|
1148
|
+
this.allowDisplay = TooltipNeoDirective.enableTooltip(content, contentType, display);
|
|
1149
|
+
}
|
|
1150
|
+
if (typeof this.apTooltipNeo === 'string') {
|
|
1151
|
+
const content = this.apTooltipNeo;
|
|
1152
|
+
const backgroundColor = '#ffffff';
|
|
1153
|
+
const borderColor = undefined;
|
|
1154
|
+
const contentType = 'text';
|
|
1155
|
+
const display = true;
|
|
1156
|
+
const displayArrow = true;
|
|
1157
|
+
const maxWidth = 'full';
|
|
1158
|
+
const position = 'top';
|
|
1159
|
+
const title = '';
|
|
1160
|
+
this.params = { content, backgroundColor, borderColor, contentType, position, display, displayArrow, title, maxWidth };
|
|
1161
|
+
this.allowDisplay = TooltipNeoDirective.enableTooltip(content, contentType, display);
|
|
1162
|
+
}
|
|
1163
|
+
}
|
|
1164
|
+
initiateTooltip() {
|
|
1165
|
+
merge(this.hide$, this.show$)
|
|
1166
|
+
.pipe(switchMap(bool => {
|
|
1167
|
+
if (!bool) {
|
|
1168
|
+
return of(bool);
|
|
1169
|
+
}
|
|
1170
|
+
return of(bool).pipe(delay(200));
|
|
1171
|
+
}), takeUntil(this.destroy$))
|
|
1172
|
+
.subscribe(bool => {
|
|
1173
|
+
if (bool) {
|
|
1174
|
+
this.elementRefMouseLeave$ = fromEvent(this.elementRef.nativeElement, 'mouseleave')
|
|
1175
|
+
.subscribe(() => this.detach());
|
|
1176
|
+
const positionStrategy = this.overlayPositionBuilder
|
|
1177
|
+
.flexibleConnectedTo(this.elementRef)
|
|
1178
|
+
.withPositions([tooltipNeoPositions[this.params.position]]);
|
|
1179
|
+
const scrollStrategy = this.overlay.scrollStrategies.close();
|
|
1180
|
+
this.overlayRef = this.overlay.create({ positionStrategy, scrollStrategy });
|
|
1181
|
+
const tooltipRef = this.overlayRef.attach(new ComponentPortal(TooltipNeoComponent));
|
|
1182
|
+
tooltipRef.instance.params = this.params;
|
|
1183
|
+
}
|
|
1184
|
+
else {
|
|
1185
|
+
this.detach();
|
|
1186
|
+
}
|
|
1187
|
+
});
|
|
1188
|
+
this.tooltipNeoService.clickOutside$
|
|
1189
|
+
.pipe(takeUntil(this.destroy$))
|
|
1190
|
+
.subscribe(() => this.hide$.next(false));
|
|
1191
|
+
}
|
|
1192
|
+
detach() {
|
|
1193
|
+
this.overlayRef && this.overlayRef.hasAttached() && this.overlayRef.detach();
|
|
1194
|
+
this.elementRefMouseLeave$ && this.elementRefMouseLeave$.unsubscribe();
|
|
1195
|
+
}
|
|
1196
|
+
onMouseEnter() {
|
|
1197
|
+
this.setSettings();
|
|
1198
|
+
this.mouseEntered = true;
|
|
1199
|
+
this.allowDisplay && this.params && this.show$.next(true);
|
|
1200
|
+
}
|
|
1201
|
+
onMouseLeave() {
|
|
1202
|
+
this.mouseEntered = false;
|
|
1203
|
+
this.hide$.next(false);
|
|
1204
|
+
}
|
|
1205
|
+
}
|
|
1206
|
+
/** @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 });
|
|
1207
|
+
/** @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 });
|
|
1208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoDirective, decorators: [{
|
|
1209
|
+
type: Directive,
|
|
1210
|
+
args: [{ selector: '[apTooltipNeo]' }]
|
|
1211
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$4.Overlay }, { type: i1$4.OverlayPositionBuilder }, { type: TooltipNeoService }]; }, propDecorators: { apTooltipNeo: [{
|
|
1212
|
+
type: Input
|
|
1213
|
+
}], onMouseEnter: [{
|
|
1214
|
+
type: HostListener,
|
|
1215
|
+
args: ['mouseenter']
|
|
1216
|
+
}], onMouseLeave: [{
|
|
1217
|
+
type: HostListener,
|
|
1218
|
+
args: ['mouseleave']
|
|
1219
|
+
}] } });
|
|
1139
1220
|
|
|
1140
|
-
class
|
|
1141
|
-
constructor() {
|
|
1142
|
-
this.
|
|
1143
|
-
this.
|
|
1221
|
+
class LabelComponent {
|
|
1222
|
+
constructor(elementRef, zone) {
|
|
1223
|
+
this.elementRef = elementRef;
|
|
1224
|
+
this.zone = zone;
|
|
1225
|
+
this.color = 'default';
|
|
1226
|
+
this.onlyText = false;
|
|
1227
|
+
this.selectorWidth = 0; //Width of the selector input, if applicable
|
|
1228
|
+
this.removable = false;
|
|
1229
|
+
this.remove = new EventEmitter();
|
|
1230
|
+
this.tooltipEnabled = false;
|
|
1231
|
+
}
|
|
1232
|
+
ngAfterViewInit() {
|
|
1233
|
+
this.observer = new ResizeObserver(entries => {
|
|
1234
|
+
this.zone.run(() => {
|
|
1235
|
+
const containerWidth = this.elementRef.nativeElement.clientWidth > 0 ? this.elementRef.nativeElement.clientWidth : this.selectorWidth;
|
|
1236
|
+
if (containerWidth > 0) {
|
|
1237
|
+
this.tooltipEnabled = entries[0].target.scrollWidth > containerWidth;
|
|
1238
|
+
}
|
|
1239
|
+
});
|
|
1240
|
+
});
|
|
1241
|
+
this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('label-content')[0]);
|
|
1242
|
+
}
|
|
1243
|
+
ngOnDestroy() {
|
|
1244
|
+
this.observer.unobserve(this.elementRef.nativeElement.children[0]);
|
|
1245
|
+
}
|
|
1246
|
+
onRemoveLabel() {
|
|
1247
|
+
this.remove.emit(this.content);
|
|
1144
1248
|
}
|
|
1145
1249
|
}
|
|
1146
|
-
/** @nocollapse */ /** @nocollapse */
|
|
1147
|
-
/** @nocollapse */ /** @nocollapse */
|
|
1148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type:
|
|
1250
|
+
/** @nocollapse */ /** @nocollapse */ LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1251
|
+
/** @nocollapse */ /** @nocollapse */ LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LabelComponent, selector: "ap-label", inputs: { color: "color", content: "content", onlyText: "onlyText", selectorWidth: "selectorWidth", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"label\"\n [ngClass]=\"color\"\n [class.big-padding]=\"onlyText\"\n [class.removable]=\"removable\"\n [apTooltipNeo]=\"tooltipEnabled ? content : ''\" >\n <div class=\"label-content\">{{content}}</div>\n <div *ngIf=\"removable\"\n class=\"delete-cross\"\n (click)=\"onRemoveLabel()\">\n <ap-symbol symbolId=\"remove-bold\"\n size=\"pico\">\n </ap-symbol>\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}.label{padding:4px 8px;color:#344563;align-self:center;background:#e8f4ff;border-radius:25px;text-wrap:none;display:flex;align-items:center;border:none}.label.default{padding:0 8px;border:1px solid #74bbfe;height:24px;box-sizing:border-box;max-width:100%;text-overflow:ellipsis}.label.blue{background-color:#e8f4ff;color:#178dfe}.label.red{background-color:#fde7e7;color:#e81313}.label.purple{background-color:#efedf8;color:#6554c0}.label.orange{background-color:#ffefe9;color:#ff6726}.label.yellow{background-color:#fffde9;color:#ffe91f}.label.green{background-color:#ecf7ed;color:#45b854}.label.big-padding{padding:8px 16px}.label.removable{padding:0 0 0 8px}.label .label-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-cross{align-self:center;cursor:pointer;min-width:20px;height:20px;border-radius:100px;display:flex;align-items:center;justify-content:center;margin:1px 1px 1px 4px}.delete-cross:hover{background-color:#d1e8ff}.delete-cross:hover ::ng-deep ap-symbol *{color:#178dfe}.delete-cross ::ng-deep ap-symbol *{color:#858fa1}\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: TooltipNeoDirective, selector: "[apTooltipNeo]", inputs: ["apTooltipNeo"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelComponent, decorators: [{
|
|
1149
1253
|
type: Component,
|
|
1150
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-
|
|
1151
|
-
}], propDecorators: {
|
|
1254
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label', template: "<div class=\"label\"\n [ngClass]=\"color\"\n [class.big-padding]=\"onlyText\"\n [class.removable]=\"removable\"\n [apTooltipNeo]=\"tooltipEnabled ? content : ''\" >\n <div class=\"label-content\">{{content}}</div>\n <div *ngIf=\"removable\"\n class=\"delete-cross\"\n (click)=\"onRemoveLabel()\">\n <ap-symbol symbolId=\"remove-bold\"\n size=\"pico\">\n </ap-symbol>\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}.label{padding:4px 8px;color:#344563;align-self:center;background:#e8f4ff;border-radius:25px;text-wrap:none;display:flex;align-items:center;border:none}.label.default{padding:0 8px;border:1px solid #74bbfe;height:24px;box-sizing:border-box;max-width:100%;text-overflow:ellipsis}.label.blue{background-color:#e8f4ff;color:#178dfe}.label.red{background-color:#fde7e7;color:#e81313}.label.purple{background-color:#efedf8;color:#6554c0}.label.orange{background-color:#ffefe9;color:#ff6726}.label.yellow{background-color:#fffde9;color:#ffe91f}.label.green{background-color:#ecf7ed;color:#45b854}.label.big-padding{padding:8px 16px}.label.removable{padding:0 0 0 8px}.label .label-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.delete-cross{align-self:center;cursor:pointer;min-width:20px;height:20px;border-radius:100px;display:flex;align-items:center;justify-content:center;margin:1px 1px 1px 4px}.delete-cross:hover{background-color:#d1e8ff}.delete-cross:hover ::ng-deep ap-symbol *{color:#178dfe}.delete-cross ::ng-deep ap-symbol *{color:#858fa1}\n"] }]
|
|
1255
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { color: [{
|
|
1152
1256
|
type: Input
|
|
1153
|
-
}],
|
|
1257
|
+
}], content: [{
|
|
1154
1258
|
type: Input
|
|
1155
|
-
}],
|
|
1259
|
+
}], onlyText: [{
|
|
1156
1260
|
type: Input
|
|
1157
|
-
}],
|
|
1261
|
+
}], selectorWidth: [{
|
|
1158
1262
|
type: Input
|
|
1159
|
-
}],
|
|
1160
|
-
type: Output
|
|
1161
|
-
}] } });
|
|
1162
|
-
|
|
1163
|
-
class PlaceComponent {
|
|
1164
|
-
}
|
|
1165
|
-
/** @nocollapse */ /** @nocollapse */ PlaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1166
|
-
/** @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 });
|
|
1167
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceComponent, decorators: [{
|
|
1168
|
-
type: Component,
|
|
1169
|
-
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"] }]
|
|
1170
|
-
}], propDecorators: { service: [{
|
|
1263
|
+
}], removable: [{
|
|
1171
1264
|
type: Input
|
|
1265
|
+
}], remove: [{
|
|
1266
|
+
type: Output
|
|
1172
1267
|
}] } });
|
|
1173
1268
|
|
|
1174
|
-
class
|
|
1269
|
+
class TextMeasurementService {
|
|
1270
|
+
constructor() {
|
|
1271
|
+
const lDiv = document.createElement('div');
|
|
1272
|
+
document.body.appendChild(lDiv);
|
|
1273
|
+
lDiv.style.position = "absolute";
|
|
1274
|
+
lDiv.style.left = '-1000';
|
|
1275
|
+
lDiv.style.top = '-1000';
|
|
1276
|
+
this.textDiv = lDiv;
|
|
1277
|
+
}
|
|
1278
|
+
calculateTextWidth(text, fontSize, fontFamily) {
|
|
1279
|
+
this.textDiv.textContent = text;
|
|
1280
|
+
this.textDiv.style.fontSize = fontSize + "px";
|
|
1281
|
+
this.textDiv.style.fontFamily = fontFamily;
|
|
1282
|
+
return this.textDiv.clientWidth;
|
|
1283
|
+
}
|
|
1175
1284
|
}
|
|
1176
|
-
/** @nocollapse */ /** @nocollapse */
|
|
1177
|
-
/** @nocollapse */ /** @nocollapse */
|
|
1178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type:
|
|
1179
|
-
type:
|
|
1180
|
-
args: [{
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
'apPopmenuBorder': true,
|
|
1185
|
-
'apPopmenuDisabled': false,
|
|
1186
|
-
'apPopmenuBackground': true,
|
|
1187
|
-
'hasBackdrop': true,
|
|
1188
|
-
'placement': 'top',
|
|
1189
|
-
'rounded': true,
|
|
1190
|
-
'showDelay': 0,
|
|
1191
|
-
'hideDelay': 10,
|
|
1192
|
-
'hideDelayMobile': 0,
|
|
1193
|
-
'shadow': true,
|
|
1194
|
-
'theme': 'dark',
|
|
1195
|
-
'offset': 8,
|
|
1196
|
-
'maxWidth': '600',
|
|
1197
|
-
};
|
|
1198
|
-
|
|
1199
|
-
/**
|
|
1200
|
-
* This is not a real service, but it looks like it from the outside.
|
|
1201
|
-
* It's just an InjectionToken used to import the config (initOptions) object, provided from the outside
|
|
1202
|
-
*/
|
|
1203
|
-
const PopmenuOptionsService = new InjectionToken('PopmenuOptions');
|
|
1285
|
+
/** @nocollapse */ /** @nocollapse */ TextMeasurementService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TextMeasurementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1286
|
+
/** @nocollapse */ /** @nocollapse */ TextMeasurementService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TextMeasurementService, providedIn: 'root' });
|
|
1287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TextMeasurementService, decorators: [{
|
|
1288
|
+
type: Injectable,
|
|
1289
|
+
args: [{
|
|
1290
|
+
providedIn: 'root'
|
|
1291
|
+
}]
|
|
1292
|
+
}], ctorParameters: function () { return []; } });
|
|
1204
1293
|
|
|
1205
|
-
class
|
|
1206
|
-
constructor(
|
|
1207
|
-
this.renderer = renderer;
|
|
1208
|
-
this.elementRef = elementRef;
|
|
1294
|
+
class LabelListComponent {
|
|
1295
|
+
constructor(changeDetectorRef, elementRef, textMeasurementService, zone) {
|
|
1209
1296
|
this.changeDetectorRef = changeDetectorRef;
|
|
1210
|
-
this.
|
|
1211
|
-
this.
|
|
1212
|
-
this.
|
|
1213
|
-
this.
|
|
1214
|
-
this.
|
|
1215
|
-
this.
|
|
1216
|
-
this.
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1297
|
+
this.elementRef = elementRef;
|
|
1298
|
+
this.textMeasurementService = textMeasurementService;
|
|
1299
|
+
this.zone = zone;
|
|
1300
|
+
this.removeLabelsEnabled = false;
|
|
1301
|
+
this.responsive = false;
|
|
1302
|
+
this.seeLessTranslation = 'See less';
|
|
1303
|
+
this.removeLabel = new EventEmitter();
|
|
1304
|
+
this.expanded = false;
|
|
1305
|
+
this.howManyItemsLeft = 0;
|
|
1306
|
+
this.responsiveLabels = [];
|
|
1307
|
+
this.width$ = new BehaviorSubject(0);
|
|
1220
1308
|
}
|
|
1221
|
-
|
|
1222
|
-
if (
|
|
1223
|
-
this.
|
|
1309
|
+
ngAfterViewInit() {
|
|
1310
|
+
if (this.responsive) {
|
|
1311
|
+
this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);
|
|
1312
|
+
this.observer = new ResizeObserver(entries => {
|
|
1313
|
+
this.zone.run(() => {
|
|
1314
|
+
this.width$.next(entries[0].contentRect.width);
|
|
1315
|
+
});
|
|
1316
|
+
});
|
|
1317
|
+
this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);
|
|
1318
|
+
this.width$.subscribe(width => {
|
|
1319
|
+
this.generateResponsiveLabels(width);
|
|
1320
|
+
});
|
|
1224
1321
|
}
|
|
1225
|
-
this._show = value;
|
|
1226
1322
|
}
|
|
1227
|
-
|
|
1228
|
-
if (
|
|
1229
|
-
this.
|
|
1323
|
+
ngOnChanges(changes) {
|
|
1324
|
+
if (changes.labels.currentValue && this.responsive) {
|
|
1325
|
+
this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);
|
|
1230
1326
|
}
|
|
1231
1327
|
}
|
|
1232
|
-
|
|
1233
|
-
|
|
1328
|
+
ngOnDestroy() {
|
|
1329
|
+
this.observer.unobserve(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);
|
|
1234
1330
|
}
|
|
1235
|
-
|
|
1236
|
-
|
|
1331
|
+
onExpand() {
|
|
1332
|
+
this.expanded = !this.expanded;
|
|
1237
1333
|
}
|
|
1238
|
-
|
|
1239
|
-
|
|
1334
|
+
onRemoveLabel(label) {
|
|
1335
|
+
this.labels.splice(this.labels.indexOf(label), 1);
|
|
1336
|
+
this.removeLabel.emit(this.labels);
|
|
1337
|
+
this.changeDetectorRef.markForCheck();
|
|
1240
1338
|
}
|
|
1241
|
-
|
|
1242
|
-
|
|
1339
|
+
onResize() {
|
|
1340
|
+
this.generateResponsiveLabels(this.elementRef.nativeElement.children[0].offsetWidth);
|
|
1243
1341
|
}
|
|
1244
|
-
|
|
1245
|
-
return
|
|
1342
|
+
trackByLabelContent(index, entry) {
|
|
1343
|
+
return entry;
|
|
1246
1344
|
}
|
|
1247
|
-
|
|
1248
|
-
|
|
1345
|
+
generateResponsiveLabels(width) {
|
|
1346
|
+
let seeMoreElementWidth = this.textMeasurementService.calculateTextWidth('+'.concat(this.labels.length.toString()), 14, 'Averta');
|
|
1347
|
+
seeMoreElementWidth += 1 + 8 + 8 + 1; // border-left + padding-left + padding-right + border-right
|
|
1348
|
+
let elementWidth = width;
|
|
1349
|
+
elementWidth -= seeMoreElementWidth;
|
|
1350
|
+
let currentIndex = 0;
|
|
1351
|
+
for (let index = 0; index < this.labels.length; index++) {
|
|
1352
|
+
let textWidth = this.textMeasurementService.calculateTextWidth(this.labels[index], 14, 'Averta');
|
|
1353
|
+
textWidth += 1 + 8 + (this.removeLabelsEnabled ? 25 : 8) + 1 + 4; // border-left + padding-left + padding-right + border-right + label spacing
|
|
1354
|
+
elementWidth -= textWidth;
|
|
1355
|
+
if (elementWidth <= 0) {
|
|
1356
|
+
break;
|
|
1357
|
+
}
|
|
1358
|
+
currentIndex = index;
|
|
1359
|
+
}
|
|
1360
|
+
if (currentIndex + 1 === (this.labels.length)) {
|
|
1361
|
+
this.expanded = false;
|
|
1362
|
+
}
|
|
1363
|
+
this.howManyItemsLeft = this.labels.length - (currentIndex + 1);
|
|
1364
|
+
this.responsiveLabels = this.labels.slice(0, currentIndex + 1);
|
|
1365
|
+
this.changeDetectorRef.markForCheck();
|
|
1249
1366
|
}
|
|
1250
|
-
|
|
1251
|
-
|
|
1367
|
+
}
|
|
1368
|
+
/** @nocollapse */ /** @nocollapse */ LabelListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: TextMeasurementService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1369
|
+
/** @nocollapse */ /** @nocollapse */ LabelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LabelListComponent, selector: "ap-label-list", inputs: { labels: "labels", removeLabelsEnabled: "removeLabelsEnabled", responsive: "responsive", seeLessTranslation: "seeLessTranslation" }, outputs: { removeLabel: "removeLabel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"labels-list\" (window:resize)=\"onResize()\">\n <ng-container *ngIf=\"responsive; else defaultLabels\">\n <ng-container *ngFor=\"let label of expanded ? labels : responsiveLabels\">\n <ap-label [content]=\"label\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\"></ap-label>\n </ng-container>\n <button *ngIf=\"!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0\"\n class=\"label-expand\"\n (click)=\"onExpand()\">\n +{{howManyItemsLeft}}\n </button>\n <button *ngIf=\"expanded\"\n class=\"label-retract\"\n (click)=\"onExpand()\">\n {{seeLessTranslation}}\n </button>\n </ng-container>\n\n <ng-template #defaultLabels>\n <ng-container *ngFor=\"let label of labels; trackBy: trackByLabelContent;\">\n <ap-label [content]=\"label\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\"></ap-label>\n </ng-container>\n </ng-template>\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}.labels-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px;max-width:100%;padding:9px 16px;margin:0}.labels-list>*{max-width:100%}.label-expand{box-sizing:border-box;padding:0 8px;line-height:22px;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis}.label-expand:hover{cursor:pointer;text-decoration:underline}.label-retract{box-sizing:border-box;border:0;background-color:transparent;line-height:24px;color:#178dfe}.label-retract:hover{cursor:pointer;text-decoration:underline}\n"], components: [{ type: LabelComponent, selector: "ap-label", inputs: ["color", "content", "onlyText", "selectorWidth", "removable"], outputs: ["remove"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelListComponent, decorators: [{
|
|
1371
|
+
type: Component,
|
|
1372
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label-list', template: "<div class=\"labels-list\" (window:resize)=\"onResize()\">\n <ng-container *ngIf=\"responsive; else defaultLabels\">\n <ng-container *ngFor=\"let label of expanded ? labels : responsiveLabels\">\n <ap-label [content]=\"label\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\"></ap-label>\n </ng-container>\n <button *ngIf=\"!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0\"\n class=\"label-expand\"\n (click)=\"onExpand()\">\n +{{howManyItemsLeft}}\n </button>\n <button *ngIf=\"expanded\"\n class=\"label-retract\"\n (click)=\"onExpand()\">\n {{seeLessTranslation}}\n </button>\n </ng-container>\n\n <ng-template #defaultLabels>\n <ng-container *ngFor=\"let label of labels; trackBy: trackByLabelContent;\">\n <ap-label [content]=\"label\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\"></ap-label>\n </ng-container>\n </ng-template>\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}.labels-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px;max-width:100%;padding:9px 16px;margin:0}.labels-list>*{max-width:100%}.label-expand{box-sizing:border-box;padding:0 8px;line-height:22px;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis}.label-expand:hover{cursor:pointer;text-decoration:underline}.label-retract{box-sizing:border-box;border:0;background-color:transparent;line-height:24px;color:#178dfe}.label-retract:hover{cursor:pointer;text-decoration:underline}\n"] }]
|
|
1373
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: TextMeasurementService }, { type: i0.NgZone }]; }, propDecorators: { labels: [{
|
|
1374
|
+
type: Input
|
|
1375
|
+
}], removeLabelsEnabled: [{
|
|
1376
|
+
type: Input
|
|
1377
|
+
}], responsive: [{
|
|
1378
|
+
type: Input
|
|
1379
|
+
}], seeLessTranslation: [{
|
|
1380
|
+
type: Input
|
|
1381
|
+
}], removeLabel: [{
|
|
1382
|
+
type: Output
|
|
1383
|
+
}] } });
|
|
1384
|
+
|
|
1385
|
+
class LeadModalComponent {
|
|
1386
|
+
constructor(dialogRef, translatedStrings) {
|
|
1387
|
+
this.dialogRef = dialogRef;
|
|
1388
|
+
this.translatedStrings = translatedStrings;
|
|
1389
|
+
this.plans = {
|
|
1390
|
+
PRO: 'pro',
|
|
1391
|
+
PREMIUM: 'premium',
|
|
1392
|
+
PREMIUM_PLUS: 'premium+',
|
|
1393
|
+
ENTERPRISE: 'enterprise',
|
|
1394
|
+
};
|
|
1395
|
+
this.orderedPlans = [
|
|
1396
|
+
this.plans.PRO,
|
|
1397
|
+
this.plans.PREMIUM,
|
|
1398
|
+
this.plans.PREMIUM_PLUS,
|
|
1399
|
+
this.plans.ENTERPRISE,
|
|
1400
|
+
];
|
|
1401
|
+
dialogRef.disableClose = true;
|
|
1252
1402
|
}
|
|
1253
|
-
|
|
1254
|
-
|
|
1403
|
+
onValidate(qualifiedProfilePlan, qualifiedTeamPlan, profileType) {
|
|
1404
|
+
const qualifiedPlan = this.orderedPlans.indexOf(qualifiedProfilePlan) > this.orderedPlans.indexOf(qualifiedTeamPlan)
|
|
1405
|
+
? qualifiedProfilePlan
|
|
1406
|
+
: qualifiedTeamPlan;
|
|
1407
|
+
return {
|
|
1408
|
+
language: window.navigator && window.navigator.language ? window.navigator.language : '',
|
|
1409
|
+
qualifiedPlan: qualifiedPlan,
|
|
1410
|
+
qualifiedProfilePlan: qualifiedProfilePlan,
|
|
1411
|
+
qualifiedTeamPlan: qualifiedTeamPlan,
|
|
1412
|
+
profileType: profileType
|
|
1413
|
+
};
|
|
1255
1414
|
}
|
|
1256
|
-
|
|
1257
|
-
|
|
1415
|
+
}
|
|
1416
|
+
/** @nocollapse */ /** @nocollapse */ LeadModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LeadModalComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
1417
|
+
/** @nocollapse */ /** @nocollapse */ LeadModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LeadModalComponent, selector: "ap-lead-modal", ngImport: i0, template: "<ng-template #headerTemplate>\n <h1 mat-dialog-title>\n {{translatedStrings.title}}\n </h1>\n</ng-template>\n\n<ng-template #mainTemplate>\n <div mat-dialog-content>\n <div class=\"form-field\">\n <label for=\"profileField\">\n {{translatedStrings.profileFieldLabel}}\n </label>\n <mat-button-toggle-group\n [(ngModel)]=\"qualifiedProfilePlan\"\n id=\"profileField\"\n name=\"qualifiedProfilePlan\">\n <mat-button-toggle [value]=\"plans.PRO\">1 - 10</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.PREMIUM\">11 - 25</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.PREMIUM_PLUS\">26 - 40</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.ENTERPRISE\">40+</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n <div class=\"form-field\">\n <label for=\"teamField\">\n {{translatedStrings.teamFieldLabel}}\n </label>\n <mat-button-toggle-group\n [(ngModel)]=\"qualifiedTeamPlan\"\n id=\"teamField\"\n name=\"qualifiedTeamPlan\">\n <mat-button-toggle [value]=\"plans.PRO\">1 - 2</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.PREMIUM\">3 - 4</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.PREMIUM_PLUS\">5 - 8</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.ENTERPRISE\">8+</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n <div class=\"form-field\">\n <label for=\"agencyField\">\n {{translatedStrings.agencyFieldLabel}}\n </label>\n <mat-button-toggle-group\n [(ngModel)]=\"profileType\"\n id=\"agencyField\"\n class=\"agency-toggle\"\n name=\"profileType\">\n <mat-button-toggle value=\"agency\">{{translatedStrings.agencyYesLabel}}</mat-button-toggle>\n <mat-button-toggle value=\"none\">{{translatedStrings.agencyNoLabel}}</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div>\n <button mat-flat-button\n color=\"primary\"\n [disabled]=\"!(qualifiedProfilePlan && qualifiedTeamPlan && profileType)\"\n [mat-dialog-close]=\"onValidate(qualifiedProfilePlan, qualifiedTeamPlan, profileType)\">\n {{translatedStrings.validateButtonLabel}}\n </button>\n </div>\n</ng-template>\n\n<ap-modal\n [headerTemplate]=\"headerTemplate\"\n [mainTemplate]=\"mainTemplate\"\n [footerTemplate]=\"footerTemplate\"\n></ap-modal>\n", components: [{ type: i2$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { 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: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i2$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { 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$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LeadModalComponent, decorators: [{
|
|
1419
|
+
type: Component,
|
|
1420
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-lead-modal', template: "<ng-template #headerTemplate>\n <h1 mat-dialog-title>\n {{translatedStrings.title}}\n </h1>\n</ng-template>\n\n<ng-template #mainTemplate>\n <div mat-dialog-content>\n <div class=\"form-field\">\n <label for=\"profileField\">\n {{translatedStrings.profileFieldLabel}}\n </label>\n <mat-button-toggle-group\n [(ngModel)]=\"qualifiedProfilePlan\"\n id=\"profileField\"\n name=\"qualifiedProfilePlan\">\n <mat-button-toggle [value]=\"plans.PRO\">1 - 10</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.PREMIUM\">11 - 25</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.PREMIUM_PLUS\">26 - 40</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.ENTERPRISE\">40+</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n <div class=\"form-field\">\n <label for=\"teamField\">\n {{translatedStrings.teamFieldLabel}}\n </label>\n <mat-button-toggle-group\n [(ngModel)]=\"qualifiedTeamPlan\"\n id=\"teamField\"\n name=\"qualifiedTeamPlan\">\n <mat-button-toggle [value]=\"plans.PRO\">1 - 2</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.PREMIUM\">3 - 4</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.PREMIUM_PLUS\">5 - 8</mat-button-toggle>\n <mat-button-toggle [value]=\"plans.ENTERPRISE\">8+</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n <div class=\"form-field\">\n <label for=\"agencyField\">\n {{translatedStrings.agencyFieldLabel}}\n </label>\n <mat-button-toggle-group\n [(ngModel)]=\"profileType\"\n id=\"agencyField\"\n class=\"agency-toggle\"\n name=\"profileType\">\n <mat-button-toggle value=\"agency\">{{translatedStrings.agencyYesLabel}}</mat-button-toggle>\n <mat-button-toggle value=\"none\">{{translatedStrings.agencyNoLabel}}</mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n </div>\n</ng-template>\n\n<ng-template #footerTemplate>\n <div>\n <button mat-flat-button\n color=\"primary\"\n [disabled]=\"!(qualifiedProfilePlan && qualifiedTeamPlan && profileType)\"\n [mat-dialog-close]=\"onValidate(qualifiedProfilePlan, qualifiedTeamPlan, profileType)\">\n {{translatedStrings.validateButtonLabel}}\n </button>\n </div>\n</ng-template>\n\n<ap-modal\n [headerTemplate]=\"headerTemplate\"\n [mainTemplate]=\"mainTemplate\"\n [footerTemplate]=\"footerTemplate\"\n></ap-modal>\n" }]
|
|
1421
|
+
}], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
|
|
1422
|
+
type: Inject,
|
|
1423
|
+
args: [MAT_DIALOG_DATA]
|
|
1424
|
+
}] }]; } });
|
|
1425
|
+
|
|
1426
|
+
var KEY_CODE;
|
|
1427
|
+
(function (KEY_CODE) {
|
|
1428
|
+
KEY_CODE[KEY_CODE["RIGHT_ARROW"] = 39] = "RIGHT_ARROW";
|
|
1429
|
+
KEY_CODE[KEY_CODE["LEFT_ARROW"] = 37] = "LEFT_ARROW";
|
|
1430
|
+
})(KEY_CODE || (KEY_CODE = {}));
|
|
1431
|
+
class MediaDisplayOverlayDialogComponent {
|
|
1432
|
+
constructor(dialogRef, data) {
|
|
1433
|
+
this.dialogRef = dialogRef;
|
|
1434
|
+
this.data = data;
|
|
1435
|
+
this.currentUrlIndex = 1;
|
|
1436
|
+
this.urls = []; // all urls
|
|
1437
|
+
this.mediaType = 'image'; // 'image', 'video'
|
|
1438
|
+
this.supportGif = true;
|
|
1258
1439
|
}
|
|
1259
|
-
|
|
1260
|
-
|
|
1440
|
+
ngOnInit() {
|
|
1441
|
+
// const data = ModalService.getModal('media-display-overlay') || {};
|
|
1442
|
+
if (this.data) {
|
|
1443
|
+
if (this.data.urls && this.data.urls.length > 0) {
|
|
1444
|
+
this.urls = this.data.urls;
|
|
1445
|
+
}
|
|
1446
|
+
if (this.data.url) {
|
|
1447
|
+
if (this.urls.length === 0) {
|
|
1448
|
+
this.urls = [this.data.url];
|
|
1449
|
+
}
|
|
1450
|
+
this.url = this.data.url;
|
|
1451
|
+
this.currentUrlIndex = this.urls.indexOf(this.data.url) + 1;
|
|
1452
|
+
}
|
|
1453
|
+
}
|
|
1261
1454
|
}
|
|
1262
|
-
|
|
1263
|
-
|
|
1455
|
+
onClose() {
|
|
1456
|
+
this.dialogRef.close();
|
|
1264
1457
|
}
|
|
1265
|
-
|
|
1266
|
-
|
|
1458
|
+
onNext($event) {
|
|
1459
|
+
if (this.currentUrlIndex < this.urls.length) {
|
|
1460
|
+
this.currentUrlIndex += 1;
|
|
1461
|
+
this.url = this.urls[this.currentUrlIndex - 1];
|
|
1462
|
+
}
|
|
1463
|
+
$event.stopPropagation();
|
|
1267
1464
|
}
|
|
1268
|
-
|
|
1269
|
-
|
|
1465
|
+
onPrevious($event) {
|
|
1466
|
+
if (this.currentUrlIndex > 1) {
|
|
1467
|
+
this.currentUrlIndex -= 1;
|
|
1468
|
+
this.url = this.urls[this.currentUrlIndex - 1];
|
|
1469
|
+
}
|
|
1470
|
+
$event.stopPropagation();
|
|
1270
1471
|
}
|
|
1271
|
-
|
|
1272
|
-
|
|
1472
|
+
keyEvent(event) {
|
|
1473
|
+
if (event.keyCode === KEY_CODE.RIGHT_ARROW) {
|
|
1474
|
+
this.onNext(event);
|
|
1475
|
+
}
|
|
1476
|
+
if (event.keyCode === KEY_CODE.LEFT_ARROW) {
|
|
1477
|
+
this.onPrevious(event);
|
|
1478
|
+
}
|
|
1273
1479
|
}
|
|
1274
|
-
|
|
1275
|
-
|
|
1480
|
+
}
|
|
1481
|
+
MediaDisplayOverlayDialogComponent.config = {
|
|
1482
|
+
position: {
|
|
1483
|
+
top: '10px',
|
|
1484
|
+
right: '10px',
|
|
1485
|
+
left: '10px'
|
|
1486
|
+
},
|
|
1487
|
+
height: '100%',
|
|
1488
|
+
width: '100%',
|
|
1489
|
+
maxWidth: 'none',
|
|
1490
|
+
panelClass: 'full-screen-modal',
|
|
1491
|
+
backdropClass: 'dark-backdrop'
|
|
1492
|
+
};
|
|
1493
|
+
/** @nocollapse */ /** @nocollapse */ MediaDisplayOverlayDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MediaDisplayOverlayDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
1494
|
+
/** @nocollapse */ /** @nocollapse */ MediaDisplayOverlayDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: MediaDisplayOverlayDialogComponent, selector: "ap-media-display-overlay", host: { listeners: { "window:keyup": "keyEvent($event)" } }, ngImport: i0, template: "<div class=\"full\" (click)=\"onClose()\">\n <div class=\"media-display ap-new\">\n <header class=\"ap-modal-header\">\n <ap-symbol\n id=\"close\"\n color=\"white\"\n size=\"micro\"\n (click)=\"onClose()\">\n </ap-symbol>\n </header>\n <content class=\"ap-modal-content\">\n <div *ngIf=\"urls.length > 1\"\n class=\"next-prev-container left\"\n [class.disabled]=\"currentUrlIndex <= 1\"\n (click)=\"onPrevious($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n id=\"arrow-left-1\"\n [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\"\n size=\"small\">\n </ap-symbol>\n </div>\n </div>\n <div class=\"media-container\">\n <img *ngIf=\"url && mediaType =='image'\" apFrozenGif [apFrozen]=\"!supportGif\" [src]=\"url\" (click)=\"$event.stopPropagation()\">\n </div>\n <div *ngIf=\"urls.length > 1\"\n class=\"next-prev-container right\"\n [class.disabled]=\"currentUrlIndex >= urls.length\"\n (click)=\"onNext($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n id=\"arrow-right-1\"\n [color]=\"currentUrlIndex >= urls.length ? 'grey-blue' : 'white'\"\n size=\"small\">\n </ap-symbol>\n </div>\n </div>\n </content>\n <footer *ngIf=\"urls && urls.length > 1\"\n class=\"ap-modal-footer\">\n <div class=\"index-container\">\n {{currentUrlIndex}} / {{urls.length}}\n </div>\n </footer>\n </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #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{width:100%;height:100%}.full{height:100%;width:100%}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%}.media-display .media-container{margin:auto;flex:1;align-items:center;flex-direction:column;display:flex}.media-display .media-container img{max-width:80%}.media-display .ap-modal-content{padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\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"] }, { type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: ["src", "apFrozen", "apGifEvents"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1495
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: MediaDisplayOverlayDialogComponent, decorators: [{
|
|
1496
|
+
type: Component,
|
|
1497
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-media-display-overlay', template: "<div class=\"full\" (click)=\"onClose()\">\n <div class=\"media-display ap-new\">\n <header class=\"ap-modal-header\">\n <ap-symbol\n id=\"close\"\n color=\"white\"\n size=\"micro\"\n (click)=\"onClose()\">\n </ap-symbol>\n </header>\n <content class=\"ap-modal-content\">\n <div *ngIf=\"urls.length > 1\"\n class=\"next-prev-container left\"\n [class.disabled]=\"currentUrlIndex <= 1\"\n (click)=\"onPrevious($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n id=\"arrow-left-1\"\n [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\"\n size=\"small\">\n </ap-symbol>\n </div>\n </div>\n <div class=\"media-container\">\n <img *ngIf=\"url && mediaType =='image'\" apFrozenGif [apFrozen]=\"!supportGif\" [src]=\"url\" (click)=\"$event.stopPropagation()\">\n </div>\n <div *ngIf=\"urls.length > 1\"\n class=\"next-prev-container right\"\n [class.disabled]=\"currentUrlIndex >= urls.length\"\n (click)=\"onNext($event)\">\n <div class=\"icon-container\">\n <ap-symbol\n id=\"arrow-right-1\"\n [color]=\"currentUrlIndex >= urls.length ? 'grey-blue' : 'white'\"\n size=\"small\">\n </ap-symbol>\n </div>\n </div>\n </content>\n <footer *ngIf=\"urls && urls.length > 1\"\n class=\"ap-modal-footer\">\n <div class=\"index-container\">\n {{currentUrlIndex}} / {{urls.length}}\n </div>\n </footer>\n </div>\n</div>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #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{width:100%;height:100%}.full{height:100%;width:100%}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%}.media-display .media-container{margin:auto;flex:1;align-items:center;flex-direction:column;display:flex}.media-display .media-container img{max-width:80%}.media-display .ap-modal-content{padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"] }]
|
|
1498
|
+
}], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
|
|
1499
|
+
type: Inject,
|
|
1500
|
+
args: [MAT_DIALOG_DATA]
|
|
1501
|
+
}] }]; }, propDecorators: { keyEvent: [{
|
|
1502
|
+
type: HostListener,
|
|
1503
|
+
args: ['window:keyup', ['$event']]
|
|
1504
|
+
}] } });
|
|
1505
|
+
|
|
1506
|
+
class OverlayDialogRef {
|
|
1507
|
+
constructor(overlayRef) {
|
|
1508
|
+
this.overlayRef = overlayRef;
|
|
1276
1509
|
}
|
|
1277
|
-
|
|
1278
|
-
|
|
1510
|
+
close() {
|
|
1511
|
+
this.overlayRef.dispose();
|
|
1279
1512
|
}
|
|
1280
|
-
|
|
1281
|
-
|
|
1513
|
+
}
|
|
1514
|
+
const OVERLAY_DATA = new InjectionToken('OVERLAY_DATA');
|
|
1515
|
+
class OverlayDialogComponent {
|
|
1516
|
+
constructor(dialogRef, data) {
|
|
1517
|
+
this.dialogRef = dialogRef;
|
|
1518
|
+
this.data = data;
|
|
1282
1519
|
}
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
setTimeout(() => this.menuClosed.emit(), 200);
|
|
1520
|
+
close() {
|
|
1521
|
+
this.dialogRef.close();
|
|
1286
1522
|
}
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1523
|
+
}
|
|
1524
|
+
/** @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 });
|
|
1525
|
+
/** @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"] }] });
|
|
1526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OverlayDialogComponent, decorators: [{
|
|
1527
|
+
type: Component,
|
|
1528
|
+
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"] }]
|
|
1529
|
+
}], ctorParameters: function () { return [{ type: OverlayDialogRef }, { type: undefined, decorators: [{
|
|
1530
|
+
type: Inject,
|
|
1531
|
+
args: [OVERLAY_DATA]
|
|
1532
|
+
}] }]; } });
|
|
1533
|
+
|
|
1534
|
+
class OverlayInDivComponent {
|
|
1535
|
+
constructor() {
|
|
1536
|
+
this.closable = true;
|
|
1537
|
+
this.close = new EventEmitter();
|
|
1290
1538
|
}
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
}
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1539
|
+
}
|
|
1540
|
+
/** @nocollapse */ /** @nocollapse */ OverlayInDivComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OverlayInDivComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1541
|
+
/** @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 });
|
|
1542
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OverlayInDivComponent, decorators: [{
|
|
1543
|
+
type: Component,
|
|
1544
|
+
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"] }]
|
|
1545
|
+
}], propDecorators: { title: [{
|
|
1546
|
+
type: Input
|
|
1547
|
+
}], subtitle: [{
|
|
1548
|
+
type: Input
|
|
1549
|
+
}], imgPath: [{
|
|
1550
|
+
type: Input
|
|
1551
|
+
}], closable: [{
|
|
1552
|
+
type: Input
|
|
1553
|
+
}], close: [{
|
|
1554
|
+
type: Output
|
|
1555
|
+
}] } });
|
|
1556
|
+
|
|
1557
|
+
class PlaceComponent {
|
|
1558
|
+
}
|
|
1559
|
+
/** @nocollapse */ /** @nocollapse */ PlaceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1560
|
+
/** @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 });
|
|
1561
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceComponent, decorators: [{
|
|
1562
|
+
type: Component,
|
|
1563
|
+
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"] }]
|
|
1564
|
+
}], propDecorators: { service: [{
|
|
1565
|
+
type: Input
|
|
1566
|
+
}] } });
|
|
1567
|
+
|
|
1568
|
+
class PlaceListComponent {
|
|
1569
|
+
}
|
|
1570
|
+
/** @nocollapse */ /** @nocollapse */ PlaceListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1571
|
+
/** @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 });
|
|
1572
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PlaceListComponent, decorators: [{
|
|
1573
|
+
type: Component,
|
|
1574
|
+
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"] }]
|
|
1575
|
+
}] });
|
|
1576
|
+
|
|
1577
|
+
const defaultOptions = {
|
|
1578
|
+
'apPopmenuBorder': true,
|
|
1579
|
+
'apPopmenuDisabled': false,
|
|
1580
|
+
'apPopmenuBackground': true,
|
|
1581
|
+
'hasBackdrop': true,
|
|
1582
|
+
'placement': 'top',
|
|
1583
|
+
'rounded': true,
|
|
1584
|
+
'showDelay': 0,
|
|
1585
|
+
'hideDelay': 10,
|
|
1586
|
+
'hideDelayMobile': 0,
|
|
1587
|
+
'shadow': true,
|
|
1588
|
+
'theme': 'dark',
|
|
1589
|
+
'offset': 8,
|
|
1590
|
+
'maxWidth': '600',
|
|
1591
|
+
};
|
|
1592
|
+
|
|
1593
|
+
/**
|
|
1594
|
+
* This is not a real service, but it looks like it from the outside.
|
|
1595
|
+
* It's just an InjectionToken used to import the config (initOptions) object, provided from the outside
|
|
1596
|
+
*/
|
|
1597
|
+
const PopmenuOptionsService = new InjectionToken('PopmenuOptions');
|
|
1598
|
+
|
|
1599
|
+
class PopmenuComponent {
|
|
1600
|
+
constructor(renderer, elementRef, changeDetectorRef) {
|
|
1601
|
+
this.renderer = renderer;
|
|
1602
|
+
this.elementRef = elementRef;
|
|
1603
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
1604
|
+
this.events = new EventEmitter();
|
|
1605
|
+
this.arrowTopPosition = '50%';
|
|
1606
|
+
this.arrowBottomPosition = '50%';
|
|
1607
|
+
this.menuClosed = new EventEmitter();
|
|
1608
|
+
this.menuOpened = new EventEmitter();
|
|
1609
|
+
this.viewInit = false;
|
|
1610
|
+
this._show = false;
|
|
1611
|
+
}
|
|
1612
|
+
get show() {
|
|
1613
|
+
return this._show;
|
|
1614
|
+
}
|
|
1615
|
+
set show(value) {
|
|
1616
|
+
if (value) {
|
|
1617
|
+
this.setPosition();
|
|
1618
|
+
}
|
|
1619
|
+
this._show = value;
|
|
1620
|
+
}
|
|
1621
|
+
set close(value) {
|
|
1622
|
+
if (value) {
|
|
1623
|
+
this.trigger.closeMenu();
|
|
1624
|
+
}
|
|
1625
|
+
}
|
|
1626
|
+
get arrow() {
|
|
1627
|
+
return this.data.options.arrow && this.border;
|
|
1628
|
+
}
|
|
1629
|
+
get arrowOffset() {
|
|
1630
|
+
return this.data.options.arrowOffset;
|
|
1631
|
+
}
|
|
1632
|
+
get arrowPosition() {
|
|
1633
|
+
return this.data.options.arrowPosition;
|
|
1634
|
+
}
|
|
1635
|
+
get autoPlacement() {
|
|
1636
|
+
return this.data.options.autoPlacement;
|
|
1637
|
+
}
|
|
1638
|
+
get background() {
|
|
1639
|
+
return this.data.options.apPopmenuBackground;
|
|
1640
|
+
}
|
|
1641
|
+
get border() {
|
|
1642
|
+
return this.data.options.apPopmenuBorder;
|
|
1643
|
+
}
|
|
1644
|
+
get element() {
|
|
1645
|
+
return this.data.element;
|
|
1646
|
+
}
|
|
1647
|
+
get elementPosition() {
|
|
1648
|
+
return this.data.elementPosition;
|
|
1649
|
+
}
|
|
1650
|
+
get hasBackdrop() {
|
|
1651
|
+
return this.data.options.hasBackdrop;
|
|
1652
|
+
}
|
|
1653
|
+
get isThemeLight() {
|
|
1654
|
+
return this.options['theme'] === 'light';
|
|
1655
|
+
}
|
|
1656
|
+
get options() {
|
|
1657
|
+
return this.data.options;
|
|
1658
|
+
}
|
|
1659
|
+
get placement() {
|
|
1660
|
+
return this.data.options.placement;
|
|
1661
|
+
}
|
|
1662
|
+
get rounded() {
|
|
1663
|
+
return this.data.options.rounded;
|
|
1664
|
+
}
|
|
1665
|
+
get shadow() {
|
|
1666
|
+
return this.data.options.shadow;
|
|
1667
|
+
}
|
|
1668
|
+
get tooltipOffset() {
|
|
1669
|
+
return Number(this.data.options.offset);
|
|
1670
|
+
}
|
|
1671
|
+
get value() {
|
|
1672
|
+
return this.data.value;
|
|
1673
|
+
}
|
|
1674
|
+
ngAfterViewInit() {
|
|
1675
|
+
this.viewInit = true;
|
|
1676
|
+
}
|
|
1677
|
+
onMenuClosed() {
|
|
1678
|
+
// we set a timeout to wait for the menu to be really closed
|
|
1679
|
+
setTimeout(() => this.menuClosed.emit(), 200);
|
|
1680
|
+
}
|
|
1681
|
+
onMenuOpened() {
|
|
1682
|
+
// we set a timeout to wait for the menu to be really opened
|
|
1683
|
+
setTimeout(() => this.menuOpened.emit(), 100);
|
|
1684
|
+
}
|
|
1685
|
+
setHostStyle(placement) {
|
|
1686
|
+
const isSvg = this.element instanceof SVGElement;
|
|
1687
|
+
const tooltip = this.elementRef.nativeElement;
|
|
1688
|
+
const isCustomPosition = !this.elementPosition.x;
|
|
1689
|
+
let elementHeight = !this.element.offsetHeight ? this.element.getBoundingClientRect().height : this.element.offsetHeight;
|
|
1690
|
+
let elementWidth = !this.element.offsetWidth ? this.element.getBoundingClientRect().width : this.element.offsetWidth;
|
|
1691
|
+
const tooltipHeight = tooltip.clientHeight;
|
|
1692
|
+
const tooltipWidth = tooltip.clientWidth;
|
|
1693
|
+
const scrollY = window.pageYOffset;
|
|
1694
|
+
let topStyle;
|
|
1695
|
+
let leftStyle;
|
|
1696
|
+
if (isCustomPosition) {
|
|
1697
|
+
if (placement && placement.split(' ')[0] === 'top') {
|
|
1698
|
+
this.below = false;
|
|
1699
|
+
}
|
|
1700
|
+
if (placement && placement.split(' ')[0] === 'bottom') {
|
|
1701
|
+
this.below = true;
|
|
1702
|
+
}
|
|
1703
|
+
elementHeight = 0;
|
|
1704
|
+
elementWidth = 0;
|
|
1705
|
+
topStyle = this.elementPosition.top;
|
|
1706
|
+
leftStyle = this.elementPosition.left;
|
|
1707
|
+
if (this.arrow && this.arrowPosition) {
|
|
1708
|
+
this.arrowClass = 'arrow-' + this.arrowPosition;
|
|
1709
|
+
switch (this.arrowPosition) {
|
|
1710
|
+
case 'left':
|
|
1711
|
+
case 'right':
|
|
1712
|
+
this.arrowLeftPosition = undefined;
|
|
1713
|
+
this.arrowRightPosition = undefined;
|
|
1714
|
+
this.arrowBottomPosition = 'auto';
|
|
1715
|
+
this.arrowTopPosition = this.arrowOffset + '%';
|
|
1716
|
+
break;
|
|
1717
|
+
case 'top':
|
|
1718
|
+
case 'bottom':
|
|
1719
|
+
this.arrowLeftPosition = this.arrowOffset + '%';
|
|
1720
|
+
this.arrowRightPosition = 'auto';
|
|
1721
|
+
this.arrowBottomPosition = undefined;
|
|
1722
|
+
this.arrowTopPosition = undefined;
|
|
1723
|
+
break;
|
|
1724
|
+
}
|
|
1725
|
+
}
|
|
1726
|
+
}
|
|
1727
|
+
else {
|
|
1728
|
+
if (placement.split(' ')[0] === 'top') {
|
|
1729
|
+
this.below = false;
|
|
1730
|
+
topStyle = this.elementPosition.top - this.tooltipOffset;
|
|
1731
|
+
topStyle += 8;
|
|
1732
|
+
}
|
|
1733
|
+
if (placement.split(' ')[0] === 'bottom') {
|
|
1734
|
+
this.below = true;
|
|
1735
|
+
topStyle = this.elementPosition.bottom + this.tooltipOffset;
|
|
1736
|
+
// We remove 8px due to the margin-top we put to display the arrow.
|
|
1737
|
+
topStyle -= 8;
|
|
1738
|
+
}
|
|
1739
|
+
if (placement.split(' ')[0] === 'left') {
|
|
1740
|
+
leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
|
|
1741
|
+
}
|
|
1742
|
+
if (placement.split(' ')[0] === 'right') {
|
|
1743
|
+
leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
|
|
1744
|
+
}
|
|
1745
|
+
if (placement.split(' ')[0] === 'left' || placement.split(' ')[0] === 'right') {
|
|
1746
|
+
topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltip.clientHeight / 2;
|
|
1747
|
+
}
|
|
1748
|
+
if (placement === 'right bottom') {
|
|
1749
|
+
this.below = true;
|
|
1750
|
+
this.before = false;
|
|
1751
|
+
this.arrowClass = 'arrow-left';
|
|
1752
|
+
topStyle = (this.elementPosition.top + scrollY);
|
|
1753
|
+
this.arrowRightPosition = undefined;
|
|
1754
|
+
this.arrowLeftPosition = undefined;
|
|
1755
|
+
this.arrowBottomPosition = 'auto';
|
|
1756
|
+
this.arrowTopPosition = this.arrowOffset ? (this.arrowOffset + '%') : (elementHeight / 2 + 'px');
|
|
1757
|
+
}
|
|
1758
|
+
if (placement === 'left bottom') {
|
|
1759
|
+
this.below = true;
|
|
1760
|
+
this.before = true;
|
|
1761
|
+
this.arrowClass = 'arrow-right';
|
|
1762
|
+
topStyle = (this.elementPosition.top + scrollY);
|
|
1369
1763
|
this.arrowLeftPosition = undefined;
|
|
1370
1764
|
this.arrowRightPosition = undefined;
|
|
1371
1765
|
this.arrowBottomPosition = 'auto';
|
|
@@ -1485,755 +1879,368 @@ class PopmenuComponent {
|
|
|
1485
1879
|
return;
|
|
1486
1880
|
}
|
|
1487
1881
|
}
|
|
1488
|
-
}
|
|
1489
|
-
}
|
|
1490
|
-
}
|
|
1491
|
-
/** @nocollapse */ /** @nocollapse */ PopmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1492
|
-
/** @nocollapse */ /** @nocollapse */ PopmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PopmenuComponent, selector: "ap-popmenu", inputs: { data: "data", show: "show", close: "close" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { properties: { "style.top": "this.hostStyleTop", "style.border-radius": "this.hostStyleBorderRadius", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button id=\"menuTrigger\" class=\"button-trigger\" mat-button\n [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n</button>\n<mat-menu #menu=\"matMenu\" [yPosition]=\"!below ? 'above': 'below'\" [xPosition]=\"!before? 'after': 'before'\" [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n class=\"pop-menu {{arrow ? 'arrow-before ' + arrowClass : ''}} {{shadow ? 'shadow' : ''}} {{border ? '' : (shadow ? 'shadow-no-border' : '')}} {{rounded ? 'rounded-component' : ''}} {{ background ? '' : 'no-background'}}\">\n\n <div *ngIf=\"arrow\" class=\"{{arrow ? 'arrow-before ' + arrowClass : ''}}\" [ngStyle]=\"{'left': arrowLeftPosition, 'right': arrowRightPosition, 'top': arrowTopPosition, 'bottom': arrowBottomPosition}\"></div>\n <div (click)=\"$event.stopPropagation()\" class=\"{{rounded ? 'rounded-component' : ''}} outline-none\">\n <div class=\"{{border ? 'popover-content ' : ''}} {{rounded ? 'rounded-component' : ''}}\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n </div>\n </div>\n</mat-menu>\n\n\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #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}.mat-menu-content{padding:0}.mat-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .rounded-component .mat-menu-content{border-radius:4px}::ng-deep .rounded-component{border-radius:4px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"], components: [{ type: i1$
|
|
1493
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuComponent, decorators: [{
|
|
1494
|
-
type: Component,
|
|
1495
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-popmenu', template: "<button id=\"menuTrigger\" class=\"button-trigger\" mat-button\n [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n</button>\n<mat-menu #menu=\"matMenu\" [yPosition]=\"!below ? 'above': 'below'\" [xPosition]=\"!before? 'after': 'before'\" [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n class=\"pop-menu {{arrow ? 'arrow-before ' + arrowClass : ''}} {{shadow ? 'shadow' : ''}} {{border ? '' : (shadow ? 'shadow-no-border' : '')}} {{rounded ? 'rounded-component' : ''}} {{ background ? '' : 'no-background'}}\">\n\n <div *ngIf=\"arrow\" class=\"{{arrow ? 'arrow-before ' + arrowClass : ''}}\" [ngStyle]=\"{'left': arrowLeftPosition, 'right': arrowRightPosition, 'top': arrowTopPosition, 'bottom': arrowBottomPosition}\"></div>\n <div (click)=\"$event.stopPropagation()\" class=\"{{rounded ? 'rounded-component' : ''}} outline-none\">\n <div class=\"{{border ? 'popover-content ' : ''}} {{rounded ? 'rounded-component' : ''}}\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n </div>\n </div>\n</mat-menu>\n\n\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #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}.mat-menu-content{padding:0}.mat-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .rounded-component .mat-menu-content{border-radius:4px}::ng-deep .rounded-component{border-radius:4px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"] }]
|
|
1496
|
-
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
1497
|
-
type: Input
|
|
1498
|
-
}], menuClosed: [{
|
|
1499
|
-
type: Output
|
|
1500
|
-
}], menuOpened: [{
|
|
1501
|
-
type: Output
|
|
1502
|
-
}], trigger: [{
|
|
1503
|
-
type: ViewChild,
|
|
1504
|
-
args: [MatMenuTrigger]
|
|
1505
|
-
}], hostStyleTop: [{
|
|
1506
|
-
type: HostBinding,
|
|
1507
|
-
args: ['style.top']
|
|
1508
|
-
}], hostStyleBorderRadius: [{
|
|
1509
|
-
type: HostBinding,
|
|
1510
|
-
args: ['style.border-radius']
|
|
1511
|
-
}], hostStyleLeft: [{
|
|
1512
|
-
type: HostBinding,
|
|
1513
|
-
args: ['style.left']
|
|
1514
|
-
}], hostStyleZIndex: [{
|
|
1515
|
-
type: HostBinding,
|
|
1516
|
-
args: ['style.z-index']
|
|
1517
|
-
}], hostStyleTransition: [{
|
|
1518
|
-
type: HostBinding,
|
|
1519
|
-
args: ['style.transition']
|
|
1520
|
-
}], hostStyleWidth: [{
|
|
1521
|
-
type: HostBinding,
|
|
1522
|
-
args: ['style.width']
|
|
1523
|
-
}], hostStyleMaxWidth: [{
|
|
1524
|
-
type: HostBinding,
|
|
1525
|
-
args: ['style.max-width']
|
|
1526
|
-
}], hostStylePointerEvents: [{
|
|
1527
|
-
type: HostBinding,
|
|
1528
|
-
args: ['style.pointer-events']
|
|
1529
|
-
}], hostClassShow: [{
|
|
1530
|
-
type: HostBinding,
|
|
1531
|
-
args: ['class.tooltip-show']
|
|
1532
|
-
}], hostClassShadow: [{
|
|
1533
|
-
type: HostBinding,
|
|
1534
|
-
args: ['class.tooltip-shadow']
|
|
1535
|
-
}], hostClassLight: [{
|
|
1536
|
-
type: HostBinding,
|
|
1537
|
-
args: ['class.tooltip-light']
|
|
1538
|
-
}], show: [{
|
|
1539
|
-
type: Input
|
|
1540
|
-
}], close: [{
|
|
1541
|
-
type: Input
|
|
1542
|
-
}] } });
|
|
1543
|
-
|
|
1544
|
-
class PopmenuDirective {
|
|
1545
|
-
constructor(initOptions, renderer, elementRef, componentFactoryResolver, appRef, injector) {
|
|
1546
|
-
this.initOptions = initOptions;
|
|
1547
|
-
this.renderer = renderer;
|
|
1548
|
-
this.elementRef = elementRef;
|
|
1549
|
-
this.componentFactoryResolver = componentFactoryResolver;
|
|
1550
|
-
this.appRef = appRef;
|
|
1551
|
-
this.injector = injector;
|
|
1552
|
-
this.apPopmenuBackground = true;
|
|
1553
|
-
this.close = false;
|
|
1554
|
-
this.hasBackdrop = true;
|
|
1555
|
-
this.pointer = true;
|
|
1556
|
-
this.menuClosed = new EventEmitter();
|
|
1557
|
-
this.menuOpened = new EventEmitter();
|
|
1558
|
-
this._options = {};
|
|
1559
|
-
}
|
|
1560
|
-
get options() {
|
|
1561
|
-
return this._options;
|
|
1562
|
-
}
|
|
1563
|
-
set options(value) {
|
|
1564
|
-
if (value && defaultOptions) {
|
|
1565
|
-
this._options = value;
|
|
1566
|
-
}
|
|
1567
|
-
}
|
|
1568
|
-
get destroyDelay() {
|
|
1569
|
-
return Number(this.getHideDelay()) + Number(this.options['animationDuration']);
|
|
1570
|
-
}
|
|
1571
|
-
get isDisplayOnHover() {
|
|
1572
|
-
if (this.options['display'] === false) {
|
|
1573
|
-
return false;
|
|
1574
|
-
}
|
|
1575
|
-
if (this.options['displayTouchscreen'] === false) {
|
|
1576
|
-
return false;
|
|
1577
|
-
}
|
|
1578
|
-
if (this.options['trigger'] !== 'hover') {
|
|
1579
|
-
return false;
|
|
1580
|
-
}
|
|
1581
|
-
return true;
|
|
1582
|
-
}
|
|
1583
|
-
get isTooltipDestroyed() {
|
|
1584
|
-
return this.componentRef && this.componentRef.hostView.destroyed;
|
|
1585
|
-
}
|
|
1586
|
-
get tooltipPosition() {
|
|
1587
|
-
if (this.options['position']) {
|
|
1588
|
-
return this.options['position'];
|
|
1589
|
-
}
|
|
1590
|
-
else {
|
|
1591
|
-
return this.elementPosition;
|
|
1592
|
-
}
|
|
1593
|
-
}
|
|
1594
|
-
appendComponentToBody(component, data = {}) {
|
|
1595
|
-
this.componentRef = this.componentFactoryResolver
|
|
1596
|
-
.resolveComponentFactory(component)
|
|
1597
|
-
.create(this.injector);
|
|
1598
|
-
this.componentRef.instance.data = {
|
|
1599
|
-
value: this.popMenuValue,
|
|
1600
|
-
element: this.elementRef.nativeElement,
|
|
1601
|
-
elementPosition: this.tooltipPosition,
|
|
1602
|
-
options: this.options
|
|
1603
|
-
};
|
|
1604
|
-
this.appRef.attachView(this.componentRef.hostView);
|
|
1605
|
-
const domElem = this.componentRef.hostView.rootNodes[0];
|
|
1606
|
-
document.body.appendChild(domElem);
|
|
1607
|
-
this.componentSubscribe = this.componentRef.instance.menuClosed.subscribe((event) => {
|
|
1608
|
-
this.handleClose(event);
|
|
1609
|
-
});
|
|
1610
|
-
this.componentSubscribe = this.componentRef.instance.menuOpened.subscribe((event) => {
|
|
1611
|
-
this.handleOpen(event);
|
|
1612
|
-
});
|
|
1613
|
-
}
|
|
1614
|
-
handleClose(event) {
|
|
1615
|
-
this.menuClosed.emit();
|
|
1616
|
-
}
|
|
1617
|
-
handleOpen(event) {
|
|
1618
|
-
this.menuOpened.emit();
|
|
1619
|
-
}
|
|
1620
|
-
applyOptionsDefault(defaultOptions, options) {
|
|
1621
|
-
this.options = Object.assign({}, defaultOptions, this.initOptions || {}, options);
|
|
1622
|
-
}
|
|
1623
|
-
clearTimeouts() {
|
|
1624
|
-
if (this.createTimeoutId) {
|
|
1625
|
-
clearTimeout(this.createTimeoutId);
|
|
1626
|
-
}
|
|
1627
|
-
if (this.showTimeoutId) {
|
|
1628
|
-
clearTimeout(this.showTimeoutId);
|
|
1629
|
-
}
|
|
1630
|
-
if (this.hideTimeoutId) {
|
|
1631
|
-
clearTimeout(this.hideTimeoutId);
|
|
1632
|
-
}
|
|
1633
|
-
if (this.destroyTimeoutId) {
|
|
1634
|
-
clearTimeout(this.destroyTimeoutId);
|
|
1635
|
-
}
|
|
1636
|
-
}
|
|
1637
|
-
createPopMenu() {
|
|
1638
|
-
this.clearTimeouts();
|
|
1639
|
-
this.createTimeoutId = window.setTimeout(() => {
|
|
1640
|
-
this.appendComponentToBody(PopmenuComponent);
|
|
1641
|
-
}, this.getShowDelay());
|
|
1642
|
-
this.showTimeoutId = window.setTimeout(() => {
|
|
1643
|
-
this.showTooltipElem();
|
|
1644
|
-
}, this.getShowDelay());
|
|
1645
|
-
}
|
|
1646
|
-
getElementPosition() {
|
|
1647
|
-
this.elementPosition = this.elementRef.nativeElement.getBoundingClientRect();
|
|
1648
|
-
}
|
|
1649
|
-
getHideDelay() {
|
|
1650
|
-
return this.options['hideDelay'];
|
|
1651
|
-
}
|
|
1652
|
-
getProperties(changes) {
|
|
1653
|
-
let properties = {};
|
|
1654
|
-
for (const prop in changes) {
|
|
1655
|
-
if (prop !== 'options' && prop !== 'tooltipValue') {
|
|
1656
|
-
properties[prop] = changes[prop].currentValue;
|
|
1657
|
-
}
|
|
1658
|
-
if (prop === 'options') {
|
|
1659
|
-
properties = changes[prop].currentValue;
|
|
1660
|
-
}
|
|
1661
|
-
}
|
|
1662
|
-
return properties;
|
|
1663
|
-
}
|
|
1664
|
-
getShowDelay() {
|
|
1665
|
-
return this.options['showDelay'];
|
|
1666
|
-
}
|
|
1667
|
-
ngOnChanges(changes) {
|
|
1668
|
-
if (changes.pointer) {
|
|
1669
|
-
if (!this.pointer) {
|
|
1670
|
-
this.renderer.removeStyle(this.elementRef.nativeElement, 'cursor');
|
|
1671
|
-
}
|
|
1672
|
-
else {
|
|
1673
|
-
this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
|
|
1674
|
-
}
|
|
1675
|
-
}
|
|
1676
|
-
if (changes.close && changes.close.currentValue) {
|
|
1677
|
-
this.hideTooltipElem();
|
|
1678
|
-
}
|
|
1679
|
-
const changedOptions = this.getProperties(changes);
|
|
1680
|
-
this.applyOptionsDefault(this.options && Object.keys(this.options).length > 0 ? this.options : defaultOptions, changedOptions);
|
|
1681
|
-
}
|
|
1682
|
-
ngOnInit() {
|
|
1683
|
-
if (this.pointer) {
|
|
1684
|
-
this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
|
|
1685
|
-
}
|
|
1686
|
-
}
|
|
1687
|
-
onClick() {
|
|
1688
|
-
if (this.apPopmenuDisabled) {
|
|
1689
|
-
return;
|
|
1690
|
-
}
|
|
1691
|
-
this.show();
|
|
1692
|
-
this.close = false;
|
|
1693
|
-
}
|
|
1694
|
-
show() {
|
|
1695
|
-
this.getElementPosition();
|
|
1696
|
-
if (!this.componentRef || this.isTooltipDestroyed) {
|
|
1697
|
-
this.createPopMenu();
|
|
1698
|
-
}
|
|
1699
|
-
else if (!this.isTooltipDestroyed) {
|
|
1700
|
-
this.showTooltipElem();
|
|
1701
|
-
}
|
|
1702
|
-
}
|
|
1703
|
-
showTooltipElem() {
|
|
1704
|
-
this.componentRef.instance.data = {
|
|
1705
|
-
value: this.popMenuValue,
|
|
1706
|
-
element: this.elementRef.nativeElement,
|
|
1707
|
-
elementPosition: this.tooltipPosition,
|
|
1708
|
-
options: this.options
|
|
1709
|
-
};
|
|
1710
|
-
this.clearTimeouts();
|
|
1711
|
-
this.componentRef.instance.show = true;
|
|
1712
|
-
}
|
|
1713
|
-
hideTooltipElem() {
|
|
1714
|
-
if (this.componentRef) {
|
|
1715
|
-
this.componentRef.instance.close = true;
|
|
1716
|
-
}
|
|
1717
|
-
}
|
|
1718
|
-
}
|
|
1719
|
-
/** @nocollapse */ /** @nocollapse */ PopmenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuDirective, deps: [{ token: PopmenuOptionsService, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1720
|
-
/** @nocollapse */ /** @nocollapse */ PopmenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: PopmenuDirective, selector: "[apPopmenu]", inputs: { apPopmenuBorder: "apPopmenuBorder", apPopmenuDisabled: "apPopmenuDisabled", apPopmenuBackground: "apPopmenuBackground", arrow: "arrow", arrowOffset: "arrowOffset", arrowPosition: "arrowPosition", close: "close", hasBackdrop: "hasBackdrop", offset: "offset", placement: "placement", pointer: "pointer", popMenuValue: ["apPopmenu", "popMenuValue"], position: "position", rounded: "rounded", shadow: "shadow", options: "options" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
|
|
1721
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuDirective, decorators: [{
|
|
1722
|
-
type: Directive,
|
|
1723
|
-
args: [{
|
|
1724
|
-
selector: '[apPopmenu]'
|
|
1725
|
-
}]
|
|
1726
|
-
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1727
|
-
type: Optional
|
|
1728
|
-
}, {
|
|
1729
|
-
type: Inject,
|
|
1730
|
-
args: [PopmenuOptionsService]
|
|
1731
|
-
}] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }]; }, propDecorators: { apPopmenuBorder: [{
|
|
1732
|
-
type: Input
|
|
1733
|
-
}], apPopmenuDisabled: [{
|
|
1734
|
-
type: Input
|
|
1735
|
-
}], apPopmenuBackground: [{
|
|
1736
|
-
type: Input
|
|
1737
|
-
}], arrow: [{
|
|
1738
|
-
type: Input
|
|
1739
|
-
}], arrowOffset: [{
|
|
1740
|
-
type: Input
|
|
1741
|
-
}], arrowPosition: [{
|
|
1742
|
-
type: Input
|
|
1743
|
-
}], close: [{
|
|
1744
|
-
type: Input
|
|
1745
|
-
}], hasBackdrop: [{
|
|
1746
|
-
type: Input
|
|
1747
|
-
}], offset: [{
|
|
1748
|
-
type: Input
|
|
1749
|
-
}], placement: [{
|
|
1750
|
-
type: Input
|
|
1751
|
-
}], pointer: [{
|
|
1752
|
-
type: Input
|
|
1753
|
-
}], popMenuValue: [{
|
|
1754
|
-
type: Input,
|
|
1755
|
-
args: ['apPopmenu']
|
|
1756
|
-
}], position: [{
|
|
1757
|
-
type: Input
|
|
1758
|
-
}], rounded: [{
|
|
1759
|
-
type: Input
|
|
1760
|
-
}], shadow: [{
|
|
1761
|
-
type: Input
|
|
1762
|
-
}], menuClosed: [{
|
|
1763
|
-
type: Output
|
|
1764
|
-
}], menuOpened: [{
|
|
1765
|
-
type: Output
|
|
1766
|
-
}], options: [{
|
|
1767
|
-
type: Input,
|
|
1768
|
-
args: ['options']
|
|
1769
|
-
}], onClick: [{
|
|
1770
|
-
type: HostListener,
|
|
1771
|
-
args: ['click']
|
|
1772
|
-
}] } });
|
|
1773
|
-
|
|
1774
|
-
class PopmenuModule {
|
|
1775
|
-
static forRoot(initOptions) {
|
|
1776
|
-
return {
|
|
1777
|
-
ngModule: PopmenuModule,
|
|
1778
|
-
providers: [
|
|
1779
|
-
{
|
|
1780
|
-
provide: PopmenuOptionsService,
|
|
1781
|
-
useValue: initOptions
|
|
1782
|
-
}
|
|
1783
|
-
]
|
|
1784
|
-
};
|
|
1785
|
-
}
|
|
1786
|
-
}
|
|
1787
|
-
/** @nocollapse */ /** @nocollapse */ PopmenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1788
|
-
/** @nocollapse */ /** @nocollapse */ PopmenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuModule, declarations: [PopmenuDirective,
|
|
1789
|
-
PopmenuComponent], imports: [CommonModule,
|
|
1790
|
-
MatMenuModule], exports: [PopmenuDirective] });
|
|
1791
|
-
/** @nocollapse */ /** @nocollapse */ PopmenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuModule, imports: [[
|
|
1792
|
-
CommonModule,
|
|
1793
|
-
MatMenuModule,
|
|
1794
|
-
]] });
|
|
1795
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuModule, decorators: [{
|
|
1796
|
-
type: NgModule,
|
|
1797
|
-
args: [{
|
|
1798
|
-
declarations: [
|
|
1799
|
-
PopmenuDirective,
|
|
1800
|
-
PopmenuComponent
|
|
1801
|
-
],
|
|
1802
|
-
imports: [
|
|
1803
|
-
CommonModule,
|
|
1804
|
-
MatMenuModule,
|
|
1805
|
-
],
|
|
1806
|
-
exports: [
|
|
1807
|
-
PopmenuDirective
|
|
1808
|
-
]
|
|
1809
|
-
}]
|
|
1810
|
-
}] });
|
|
1811
|
-
|
|
1812
|
-
class SplashscreenComponent {
|
|
1813
|
-
constructor() {
|
|
1814
|
-
this.cardLabels = [];
|
|
1815
|
-
this.cardDirection = 'horizontal';
|
|
1816
|
-
this.disposition = 'row';
|
|
1817
|
-
this.imgHeight = 150;
|
|
1818
|
-
this.imgPaths = [];
|
|
1819
|
-
this.imgWidth = 150;
|
|
1820
|
-
this.title = '';
|
|
1821
|
-
/**
|
|
1822
|
-
* The container and the cards width. All:
|
|
1823
|
-
* - 100% of parent width
|
|
1824
|
-
* - default: 750px for the container and 50% of the container for each card
|
|
1825
|
-
*/
|
|
1826
|
-
this.width = 'default';
|
|
1827
|
-
}
|
|
1828
|
-
}
|
|
1829
|
-
/** @nocollapse */ /** @nocollapse */ SplashscreenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SplashscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1830
|
-
/** @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 });
|
|
1831
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SplashscreenComponent, decorators: [{
|
|
1832
|
-
type: Component,
|
|
1833
|
-
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"] }]
|
|
1834
|
-
}], propDecorators: { cardLabels: [{
|
|
1835
|
-
type: Input
|
|
1836
|
-
}], cardDirection: [{
|
|
1837
|
-
type: Input
|
|
1838
|
-
}], disposition: [{
|
|
1839
|
-
type: Input
|
|
1840
|
-
}], imgHeight: [{
|
|
1841
|
-
type: Input
|
|
1842
|
-
}], imgPaths: [{
|
|
1843
|
-
type: Input
|
|
1844
|
-
}], imgWidth: [{
|
|
1845
|
-
type: Input
|
|
1846
|
-
}], title: [{
|
|
1847
|
-
type: Input
|
|
1848
|
-
}], width: [{
|
|
1849
|
-
type: Input
|
|
1850
|
-
}] } });
|
|
1851
|
-
|
|
1852
|
-
const topLeftPosition = {
|
|
1853
|
-
originX: 'start',
|
|
1854
|
-
originY: 'top',
|
|
1855
|
-
overlayX: 'start',
|
|
1856
|
-
overlayY: 'bottom',
|
|
1857
|
-
offsetY: -12
|
|
1858
|
-
};
|
|
1859
|
-
const topPosition = {
|
|
1860
|
-
originX: 'center',
|
|
1861
|
-
originY: 'top',
|
|
1862
|
-
overlayX: 'center',
|
|
1863
|
-
overlayY: 'bottom',
|
|
1864
|
-
offsetY: -12
|
|
1865
|
-
};
|
|
1866
|
-
const topRightPosition = {
|
|
1867
|
-
originX: 'end',
|
|
1868
|
-
originY: 'top',
|
|
1869
|
-
overlayX: 'end',
|
|
1870
|
-
overlayY: 'bottom',
|
|
1871
|
-
offsetY: -12
|
|
1872
|
-
};
|
|
1873
|
-
const bottomLeftPosition = {
|
|
1874
|
-
originX: 'start',
|
|
1875
|
-
originY: 'bottom',
|
|
1876
|
-
overlayX: 'start',
|
|
1877
|
-
overlayY: 'top',
|
|
1878
|
-
offsetY: 12
|
|
1879
|
-
};
|
|
1880
|
-
const bottomPosition = {
|
|
1881
|
-
originX: 'center',
|
|
1882
|
-
originY: 'bottom',
|
|
1883
|
-
overlayX: 'center',
|
|
1884
|
-
overlayY: 'top',
|
|
1885
|
-
offsetY: 12
|
|
1886
|
-
};
|
|
1887
|
-
const bottomRightPosition = {
|
|
1888
|
-
originX: 'end',
|
|
1889
|
-
originY: 'bottom',
|
|
1890
|
-
overlayX: 'end',
|
|
1891
|
-
overlayY: 'top',
|
|
1892
|
-
offsetY: 12
|
|
1893
|
-
};
|
|
1894
|
-
const leftPostion = {
|
|
1895
|
-
originX: 'start',
|
|
1896
|
-
originY: 'center',
|
|
1897
|
-
overlayX: 'end',
|
|
1898
|
-
overlayY: 'center',
|
|
1899
|
-
offsetX: -12
|
|
1900
|
-
};
|
|
1901
|
-
const rightPosition = {
|
|
1902
|
-
originX: 'end',
|
|
1903
|
-
originY: 'center',
|
|
1904
|
-
overlayX: 'start',
|
|
1905
|
-
overlayY: 'center',
|
|
1906
|
-
offsetX: 12
|
|
1907
|
-
};
|
|
1908
|
-
const tooltipNeoPositions = {
|
|
1909
|
-
topLeft: topLeftPosition,
|
|
1910
|
-
top: topPosition,
|
|
1911
|
-
topRight: topRightPosition,
|
|
1912
|
-
left: leftPostion,
|
|
1913
|
-
right: rightPosition,
|
|
1914
|
-
bottomLeft: bottomLeftPosition,
|
|
1915
|
-
bottom: bottomPosition,
|
|
1916
|
-
bottomRight: bottomRightPosition
|
|
1917
|
-
};
|
|
1918
|
-
|
|
1919
|
-
class TooltipNeoService {
|
|
1920
|
-
constructor() {
|
|
1921
|
-
this.clickOutside$ = new Subject();
|
|
1922
|
-
}
|
|
1923
|
-
}
|
|
1924
|
-
/** @nocollapse */ /** @nocollapse */ TooltipNeoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1925
|
-
/** @nocollapse */ /** @nocollapse */ TooltipNeoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, providedIn: 'root' });
|
|
1926
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, decorators: [{
|
|
1927
|
-
type: Injectable,
|
|
1928
|
-
args: [{
|
|
1929
|
-
providedIn: 'root'
|
|
1930
|
-
}]
|
|
1931
|
-
}] });
|
|
1932
|
-
|
|
1933
|
-
class TooltipNeoComponent {
|
|
1934
|
-
constructor(_elementRef, _tooltipNeoService) {
|
|
1935
|
-
this._elementRef = _elementRef;
|
|
1936
|
-
this._tooltipNeoService = _tooltipNeoService;
|
|
1937
|
-
}
|
|
1938
|
-
ngOnInit() {
|
|
1939
|
-
this.params.borderColor
|
|
1940
|
-
? this.border = `solid 1px ${this.params.borderColor}`
|
|
1941
|
-
: this.border = undefined;
|
|
1942
|
-
}
|
|
1943
|
-
onClickOutside(event) {
|
|
1944
|
-
if (!this._elementRef.nativeElement.contains(event.target)) {
|
|
1945
|
-
this._tooltipNeoService.clickOutside$.next();
|
|
1946
|
-
}
|
|
1947
|
-
}
|
|
1948
|
-
}
|
|
1949
|
-
/** @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 });
|
|
1950
|
-
/** @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: [
|
|
1951
|
-
trigger('neoTooltip', [
|
|
1952
|
-
transition(':enter', [
|
|
1953
|
-
style({ opacity: 0 }),
|
|
1954
|
-
animate(200, style({ opacity: 1 }))
|
|
1955
|
-
]),
|
|
1956
|
-
transition(':leave', [animate(200, style({ opacity: 0 }))])
|
|
1957
|
-
])
|
|
1958
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1959
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoComponent, decorators: [{
|
|
1882
|
+
}
|
|
1883
|
+
}
|
|
1884
|
+
}
|
|
1885
|
+
/** @nocollapse */ /** @nocollapse */ PopmenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1886
|
+
/** @nocollapse */ /** @nocollapse */ PopmenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: PopmenuComponent, selector: "ap-popmenu", inputs: { data: "data", show: "show", close: "close" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { properties: { "style.top": "this.hostStyleTop", "style.border-radius": "this.hostStyleBorderRadius", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button id=\"menuTrigger\" class=\"button-trigger\" mat-button\n [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n</button>\n<mat-menu #menu=\"matMenu\" [yPosition]=\"!below ? 'above': 'below'\" [xPosition]=\"!before? 'after': 'before'\" [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n class=\"pop-menu {{arrow ? 'arrow-before ' + arrowClass : ''}} {{shadow ? 'shadow' : ''}} {{border ? '' : (shadow ? 'shadow-no-border' : '')}} {{rounded ? 'rounded-component' : ''}} {{ background ? '' : 'no-background'}}\">\n\n <div *ngIf=\"arrow\" class=\"{{arrow ? 'arrow-before ' + arrowClass : ''}}\" [ngStyle]=\"{'left': arrowLeftPosition, 'right': arrowRightPosition, 'top': arrowTopPosition, 'bottom': arrowBottomPosition}\"></div>\n <div (click)=\"$event.stopPropagation()\" class=\"{{rounded ? 'rounded-component' : ''}} outline-none\">\n <div class=\"{{border ? 'popover-content ' : ''}} {{rounded ? 'rounded-component' : ''}}\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n </div>\n </div>\n</mat-menu>\n\n\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #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}.mat-menu-content{padding:0}.mat-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .rounded-component .mat-menu-content{border-radius:4px}::ng-deep .rounded-component{border-radius:4px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"], components: [{ type: i1$5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }], directives: [{ type: i1$5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuComponent, decorators: [{
|
|
1960
1888
|
type: Component,
|
|
1961
|
-
args: [{ selector: 'ap-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1889
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-popmenu', template: "<button id=\"menuTrigger\" class=\"button-trigger\" mat-button\n [matMenuTriggerFor]=\"menu\" (menuClosed)=\"onMenuClosed()\" (menuOpened)=\"onMenuOpened()\">\n</button>\n<mat-menu #menu=\"matMenu\" [yPosition]=\"!below ? 'above': 'below'\" [xPosition]=\"!before? 'after': 'before'\" [overlapTrigger]=\"false\"\n [hasBackdrop]=\"hasBackdrop\"\n class=\"pop-menu {{arrow ? 'arrow-before ' + arrowClass : ''}} {{shadow ? 'shadow' : ''}} {{border ? '' : (shadow ? 'shadow-no-border' : '')}} {{rounded ? 'rounded-component' : ''}} {{ background ? '' : 'no-background'}}\">\n\n <div *ngIf=\"arrow\" class=\"{{arrow ? 'arrow-before ' + arrowClass : ''}}\" [ngStyle]=\"{'left': arrowLeftPosition, 'right': arrowRightPosition, 'top': arrowTopPosition, 'bottom': arrowBottomPosition}\"></div>\n <div (click)=\"$event.stopPropagation()\" class=\"{{rounded ? 'rounded-component' : ''}} outline-none\">\n <div class=\"{{border ? 'popover-content ' : ''}} {{rounded ? 'rounded-component' : ''}}\">\n <ng-container *ngTemplateOutlet=\"value\"></ng-container>\n </div>\n </div>\n</mat-menu>\n\n\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #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}.mat-menu-content{padding:0}.mat-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .rounded-component .mat-menu-content{border-radius:4px}::ng-deep .rounded-component{border-radius:4px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"] }]
|
|
1890
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
|
|
1891
|
+
type: Input
|
|
1892
|
+
}], menuClosed: [{
|
|
1893
|
+
type: Output
|
|
1894
|
+
}], menuOpened: [{
|
|
1895
|
+
type: Output
|
|
1896
|
+
}], trigger: [{
|
|
1897
|
+
type: ViewChild,
|
|
1898
|
+
args: [MatMenuTrigger]
|
|
1899
|
+
}], hostStyleTop: [{
|
|
1900
|
+
type: HostBinding,
|
|
1901
|
+
args: ['style.top']
|
|
1902
|
+
}], hostStyleBorderRadius: [{
|
|
1903
|
+
type: HostBinding,
|
|
1904
|
+
args: ['style.border-radius']
|
|
1905
|
+
}], hostStyleLeft: [{
|
|
1906
|
+
type: HostBinding,
|
|
1907
|
+
args: ['style.left']
|
|
1908
|
+
}], hostStyleZIndex: [{
|
|
1909
|
+
type: HostBinding,
|
|
1910
|
+
args: ['style.z-index']
|
|
1911
|
+
}], hostStyleTransition: [{
|
|
1912
|
+
type: HostBinding,
|
|
1913
|
+
args: ['style.transition']
|
|
1914
|
+
}], hostStyleWidth: [{
|
|
1915
|
+
type: HostBinding,
|
|
1916
|
+
args: ['style.width']
|
|
1917
|
+
}], hostStyleMaxWidth: [{
|
|
1918
|
+
type: HostBinding,
|
|
1919
|
+
args: ['style.max-width']
|
|
1920
|
+
}], hostStylePointerEvents: [{
|
|
1921
|
+
type: HostBinding,
|
|
1922
|
+
args: ['style.pointer-events']
|
|
1923
|
+
}], hostClassShow: [{
|
|
1924
|
+
type: HostBinding,
|
|
1925
|
+
args: ['class.tooltip-show']
|
|
1926
|
+
}], hostClassShadow: [{
|
|
1927
|
+
type: HostBinding,
|
|
1928
|
+
args: ['class.tooltip-shadow']
|
|
1929
|
+
}], hostClassLight: [{
|
|
1930
|
+
type: HostBinding,
|
|
1931
|
+
args: ['class.tooltip-light']
|
|
1932
|
+
}], show: [{
|
|
1933
|
+
type: Input
|
|
1934
|
+
}], close: [{
|
|
1971
1935
|
type: Input
|
|
1972
|
-
}], onClickOutside: [{
|
|
1973
|
-
type: HostListener,
|
|
1974
|
-
args: ['document:click', ['$event']]
|
|
1975
1936
|
}] } });
|
|
1976
1937
|
|
|
1977
|
-
class
|
|
1978
|
-
constructor(elementRef,
|
|
1938
|
+
class PopmenuDirective {
|
|
1939
|
+
constructor(initOptions, renderer, elementRef, componentFactoryResolver, appRef, injector) {
|
|
1940
|
+
this.initOptions = initOptions;
|
|
1941
|
+
this.renderer = renderer;
|
|
1979
1942
|
this.elementRef = elementRef;
|
|
1980
|
-
this.
|
|
1981
|
-
this.
|
|
1982
|
-
this.
|
|
1983
|
-
this.
|
|
1984
|
-
this.
|
|
1985
|
-
this.
|
|
1986
|
-
this.
|
|
1943
|
+
this.componentFactoryResolver = componentFactoryResolver;
|
|
1944
|
+
this.appRef = appRef;
|
|
1945
|
+
this.injector = injector;
|
|
1946
|
+
this.apPopmenuBackground = true;
|
|
1947
|
+
this.close = false;
|
|
1948
|
+
this.hasBackdrop = true;
|
|
1949
|
+
this.pointer = true;
|
|
1950
|
+
this.menuClosed = new EventEmitter();
|
|
1951
|
+
this.menuOpened = new EventEmitter();
|
|
1952
|
+
this._options = {};
|
|
1987
1953
|
}
|
|
1988
|
-
|
|
1989
|
-
return
|
|
1954
|
+
get options() {
|
|
1955
|
+
return this._options;
|
|
1990
1956
|
}
|
|
1991
|
-
|
|
1992
|
-
if (
|
|
1993
|
-
this.
|
|
1994
|
-
this.allowDisplay ? this.show$.next(true) : this.hide$.next(false);
|
|
1957
|
+
set options(value) {
|
|
1958
|
+
if (value && defaultOptions) {
|
|
1959
|
+
this._options = value;
|
|
1995
1960
|
}
|
|
1996
1961
|
}
|
|
1997
|
-
|
|
1998
|
-
this.
|
|
1962
|
+
get destroyDelay() {
|
|
1963
|
+
return Number(this.getHideDelay()) + Number(this.options['animationDuration']);
|
|
1999
1964
|
}
|
|
2000
|
-
|
|
2001
|
-
this.
|
|
2002
|
-
|
|
2003
|
-
|
|
1965
|
+
get isDisplayOnHover() {
|
|
1966
|
+
if (this.options['display'] === false) {
|
|
1967
|
+
return false;
|
|
1968
|
+
}
|
|
1969
|
+
if (this.options['displayTouchscreen'] === false) {
|
|
1970
|
+
return false;
|
|
1971
|
+
}
|
|
1972
|
+
if (this.options['trigger'] !== 'hover') {
|
|
1973
|
+
return false;
|
|
1974
|
+
}
|
|
1975
|
+
return true;
|
|
2004
1976
|
}
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
1977
|
+
get isTooltipDestroyed() {
|
|
1978
|
+
return this.componentRef && this.componentRef.hostView.destroyed;
|
|
1979
|
+
}
|
|
1980
|
+
get tooltipPosition() {
|
|
1981
|
+
if (this.options['position']) {
|
|
1982
|
+
return this.options['position'];
|
|
2010
1983
|
}
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
const backgroundColor = '#ffffff';
|
|
2014
|
-
const borderColor = undefined;
|
|
2015
|
-
const contentType = 'text';
|
|
2016
|
-
const display = true;
|
|
2017
|
-
const displayArrow = true;
|
|
2018
|
-
const maxWidth = 'full';
|
|
2019
|
-
const position = 'top';
|
|
2020
|
-
const title = '';
|
|
2021
|
-
this.params = { content, backgroundColor, borderColor, contentType, position, display, displayArrow, title, maxWidth };
|
|
2022
|
-
this.allowDisplay = TooltipNeoDirective.enableTooltip(content, contentType, display);
|
|
1984
|
+
else {
|
|
1985
|
+
return this.elementPosition;
|
|
2023
1986
|
}
|
|
2024
1987
|
}
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
.
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
.
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
1988
|
+
appendComponentToBody(component, data = {}) {
|
|
1989
|
+
this.componentRef = this.componentFactoryResolver
|
|
1990
|
+
.resolveComponentFactory(component)
|
|
1991
|
+
.create(this.injector);
|
|
1992
|
+
this.componentRef.instance.data = {
|
|
1993
|
+
value: this.popMenuValue,
|
|
1994
|
+
element: this.elementRef.nativeElement,
|
|
1995
|
+
elementPosition: this.tooltipPosition,
|
|
1996
|
+
options: this.options
|
|
1997
|
+
};
|
|
1998
|
+
this.appRef.attachView(this.componentRef.hostView);
|
|
1999
|
+
const domElem = this.componentRef.hostView.rootNodes[0];
|
|
2000
|
+
document.body.appendChild(domElem);
|
|
2001
|
+
this.componentSubscribe = this.componentRef.instance.menuClosed.subscribe((event) => {
|
|
2002
|
+
this.handleClose(event);
|
|
2003
|
+
});
|
|
2004
|
+
this.componentSubscribe = this.componentRef.instance.menuOpened.subscribe((event) => {
|
|
2005
|
+
this.handleOpen(event);
|
|
2006
|
+
});
|
|
2007
|
+
}
|
|
2008
|
+
handleClose(event) {
|
|
2009
|
+
this.menuClosed.emit();
|
|
2010
|
+
}
|
|
2011
|
+
handleOpen(event) {
|
|
2012
|
+
this.menuOpened.emit();
|
|
2013
|
+
}
|
|
2014
|
+
applyOptionsDefault(defaultOptions, options) {
|
|
2015
|
+
this.options = Object.assign({}, defaultOptions, this.initOptions || {}, options);
|
|
2016
|
+
}
|
|
2017
|
+
clearTimeouts() {
|
|
2018
|
+
if (this.createTimeoutId) {
|
|
2019
|
+
clearTimeout(this.createTimeoutId);
|
|
2020
|
+
}
|
|
2021
|
+
if (this.showTimeoutId) {
|
|
2022
|
+
clearTimeout(this.showTimeoutId);
|
|
2023
|
+
}
|
|
2024
|
+
if (this.hideTimeoutId) {
|
|
2025
|
+
clearTimeout(this.hideTimeoutId);
|
|
2026
|
+
}
|
|
2027
|
+
if (this.destroyTimeoutId) {
|
|
2028
|
+
clearTimeout(this.destroyTimeoutId);
|
|
2029
|
+
}
|
|
2030
|
+
}
|
|
2031
|
+
createPopMenu() {
|
|
2032
|
+
this.clearTimeouts();
|
|
2033
|
+
this.createTimeoutId = window.setTimeout(() => {
|
|
2034
|
+
this.appendComponentToBody(PopmenuComponent);
|
|
2035
|
+
}, this.getShowDelay());
|
|
2036
|
+
this.showTimeoutId = window.setTimeout(() => {
|
|
2037
|
+
this.showTooltipElem();
|
|
2038
|
+
}, this.getShowDelay());
|
|
2039
|
+
}
|
|
2040
|
+
getElementPosition() {
|
|
2041
|
+
this.elementPosition = this.elementRef.nativeElement.getBoundingClientRect();
|
|
2042
|
+
}
|
|
2043
|
+
getHideDelay() {
|
|
2044
|
+
return this.options['hideDelay'];
|
|
2045
|
+
}
|
|
2046
|
+
getProperties(changes) {
|
|
2047
|
+
let properties = {};
|
|
2048
|
+
for (const prop in changes) {
|
|
2049
|
+
if (prop !== 'options' && prop !== 'tooltipValue') {
|
|
2050
|
+
properties[prop] = changes[prop].currentValue;
|
|
2044
2051
|
}
|
|
2045
|
-
|
|
2046
|
-
|
|
2052
|
+
if (prop === 'options') {
|
|
2053
|
+
properties = changes[prop].currentValue;
|
|
2047
2054
|
}
|
|
2048
|
-
}
|
|
2049
|
-
|
|
2050
|
-
.pipe(takeUntil(this.destroy$))
|
|
2051
|
-
.subscribe(() => this.hide$.next(false));
|
|
2055
|
+
}
|
|
2056
|
+
return properties;
|
|
2052
2057
|
}
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
this.elementRefMouseLeave$ && this.elementRefMouseLeave$.unsubscribe();
|
|
2058
|
+
getShowDelay() {
|
|
2059
|
+
return this.options['showDelay'];
|
|
2056
2060
|
}
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
+
ngOnChanges(changes) {
|
|
2062
|
+
if (changes.pointer) {
|
|
2063
|
+
if (!this.pointer) {
|
|
2064
|
+
this.renderer.removeStyle(this.elementRef.nativeElement, 'cursor');
|
|
2065
|
+
}
|
|
2066
|
+
else {
|
|
2067
|
+
this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
|
|
2068
|
+
}
|
|
2069
|
+
}
|
|
2070
|
+
if (changes.close && changes.close.currentValue) {
|
|
2071
|
+
this.hideTooltipElem();
|
|
2072
|
+
}
|
|
2073
|
+
const changedOptions = this.getProperties(changes);
|
|
2074
|
+
this.applyOptionsDefault(this.options && Object.keys(this.options).length > 0 ? this.options : defaultOptions, changedOptions);
|
|
2061
2075
|
}
|
|
2062
|
-
|
|
2063
|
-
this.
|
|
2064
|
-
|
|
2076
|
+
ngOnInit() {
|
|
2077
|
+
if (this.pointer) {
|
|
2078
|
+
this.renderer.setStyle(this.elementRef.nativeElement, 'cursor', 'pointer');
|
|
2079
|
+
}
|
|
2065
2080
|
}
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$5.Overlay }, { type: i1$5.OverlayPositionBuilder }, { type: TooltipNeoService }]; }, propDecorators: { apTooltipNeo: [{
|
|
2073
|
-
type: Input
|
|
2074
|
-
}], onMouseEnter: [{
|
|
2075
|
-
type: HostListener,
|
|
2076
|
-
args: ['mouseenter']
|
|
2077
|
-
}], onMouseLeave: [{
|
|
2078
|
-
type: HostListener,
|
|
2079
|
-
args: ['mouseleave']
|
|
2080
|
-
}] } });
|
|
2081
|
-
|
|
2082
|
-
class TagComponent {
|
|
2083
|
-
constructor(elementRef, zone) {
|
|
2084
|
-
this.elementRef = elementRef;
|
|
2085
|
-
this.zone = zone;
|
|
2086
|
-
this.color = 'default';
|
|
2087
|
-
this.onlyText = false;
|
|
2088
|
-
this.removable = false;
|
|
2089
|
-
this.deleteTag = new EventEmitter();
|
|
2090
|
-
this.tooltipEnabled = false;
|
|
2081
|
+
onClick() {
|
|
2082
|
+
if (this.apPopmenuDisabled) {
|
|
2083
|
+
return;
|
|
2084
|
+
}
|
|
2085
|
+
this.show();
|
|
2086
|
+
this.close = false;
|
|
2091
2087
|
}
|
|
2092
|
-
|
|
2093
|
-
this.
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2088
|
+
show() {
|
|
2089
|
+
this.getElementPosition();
|
|
2090
|
+
if (!this.componentRef || this.isTooltipDestroyed) {
|
|
2091
|
+
this.createPopMenu();
|
|
2092
|
+
}
|
|
2093
|
+
else if (!this.isTooltipDestroyed) {
|
|
2094
|
+
this.showTooltipElem();
|
|
2095
|
+
}
|
|
2099
2096
|
}
|
|
2100
|
-
|
|
2101
|
-
this.
|
|
2097
|
+
showTooltipElem() {
|
|
2098
|
+
this.componentRef.instance.data = {
|
|
2099
|
+
value: this.popMenuValue,
|
|
2100
|
+
element: this.elementRef.nativeElement,
|
|
2101
|
+
elementPosition: this.tooltipPosition,
|
|
2102
|
+
options: this.options
|
|
2103
|
+
};
|
|
2104
|
+
this.clearTimeouts();
|
|
2105
|
+
this.componentRef.instance.show = true;
|
|
2102
2106
|
}
|
|
2103
|
-
|
|
2104
|
-
|
|
2107
|
+
hideTooltipElem() {
|
|
2108
|
+
if (this.componentRef) {
|
|
2109
|
+
this.componentRef.instance.close = true;
|
|
2110
|
+
}
|
|
2105
2111
|
}
|
|
2106
2112
|
}
|
|
2107
|
-
/** @nocollapse */ /** @nocollapse */
|
|
2108
|
-
/** @nocollapse */ /** @nocollapse */
|
|
2109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type:
|
|
2110
|
-
type:
|
|
2111
|
-
args: [{
|
|
2112
|
-
|
|
2113
|
+
/** @nocollapse */ /** @nocollapse */ PopmenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuDirective, deps: [{ token: PopmenuOptionsService, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
|
|
2114
|
+
/** @nocollapse */ /** @nocollapse */ PopmenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: PopmenuDirective, selector: "[apPopmenu]", inputs: { apPopmenuBorder: "apPopmenuBorder", apPopmenuDisabled: "apPopmenuDisabled", apPopmenuBackground: "apPopmenuBackground", arrow: "arrow", arrowOffset: "arrowOffset", arrowPosition: "arrowPosition", close: "close", hasBackdrop: "hasBackdrop", offset: "offset", placement: "placement", pointer: "pointer", popMenuValue: ["apPopmenu", "popMenuValue"], position: "position", rounded: "rounded", shadow: "shadow", options: "options" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
|
|
2115
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuDirective, decorators: [{
|
|
2116
|
+
type: Directive,
|
|
2117
|
+
args: [{
|
|
2118
|
+
selector: '[apPopmenu]'
|
|
2119
|
+
}]
|
|
2120
|
+
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
2121
|
+
type: Optional
|
|
2122
|
+
}, {
|
|
2123
|
+
type: Inject,
|
|
2124
|
+
args: [PopmenuOptionsService]
|
|
2125
|
+
}] }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: i0.Injector }]; }, propDecorators: { apPopmenuBorder: [{
|
|
2113
2126
|
type: Input
|
|
2114
|
-
}],
|
|
2127
|
+
}], apPopmenuDisabled: [{
|
|
2115
2128
|
type: Input
|
|
2116
|
-
}],
|
|
2129
|
+
}], apPopmenuBackground: [{
|
|
2117
2130
|
type: Input
|
|
2118
|
-
}],
|
|
2131
|
+
}], arrow: [{
|
|
2132
|
+
type: Input
|
|
2133
|
+
}], arrowOffset: [{
|
|
2134
|
+
type: Input
|
|
2135
|
+
}], arrowPosition: [{
|
|
2136
|
+
type: Input
|
|
2137
|
+
}], close: [{
|
|
2138
|
+
type: Input
|
|
2139
|
+
}], hasBackdrop: [{
|
|
2140
|
+
type: Input
|
|
2141
|
+
}], offset: [{
|
|
2142
|
+
type: Input
|
|
2143
|
+
}], placement: [{
|
|
2119
2144
|
type: Input
|
|
2120
|
-
}],
|
|
2145
|
+
}], pointer: [{
|
|
2146
|
+
type: Input
|
|
2147
|
+
}], popMenuValue: [{
|
|
2148
|
+
type: Input,
|
|
2149
|
+
args: ['apPopmenu']
|
|
2150
|
+
}], position: [{
|
|
2151
|
+
type: Input
|
|
2152
|
+
}], rounded: [{
|
|
2153
|
+
type: Input
|
|
2154
|
+
}], shadow: [{
|
|
2155
|
+
type: Input
|
|
2156
|
+
}], menuClosed: [{
|
|
2121
2157
|
type: Output
|
|
2158
|
+
}], menuOpened: [{
|
|
2159
|
+
type: Output
|
|
2160
|
+
}], options: [{
|
|
2161
|
+
type: Input,
|
|
2162
|
+
args: ['options']
|
|
2163
|
+
}], onClick: [{
|
|
2164
|
+
type: HostListener,
|
|
2165
|
+
args: ['click']
|
|
2122
2166
|
}] } });
|
|
2123
2167
|
|
|
2124
|
-
class
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
this.textDiv.style.fontSize = fontSize + "px";
|
|
2136
|
-
this.textDiv.style.fontFamily = fontFamily;
|
|
2137
|
-
return this.textDiv.clientWidth;
|
|
2168
|
+
class PopmenuModule {
|
|
2169
|
+
static forRoot(initOptions) {
|
|
2170
|
+
return {
|
|
2171
|
+
ngModule: PopmenuModule,
|
|
2172
|
+
providers: [
|
|
2173
|
+
{
|
|
2174
|
+
provide: PopmenuOptionsService,
|
|
2175
|
+
useValue: initOptions
|
|
2176
|
+
}
|
|
2177
|
+
]
|
|
2178
|
+
};
|
|
2138
2179
|
}
|
|
2139
2180
|
}
|
|
2140
|
-
/** @nocollapse */ /** @nocollapse */
|
|
2141
|
-
/** @nocollapse */ /** @nocollapse */
|
|
2142
|
-
|
|
2143
|
-
|
|
2181
|
+
/** @nocollapse */ /** @nocollapse */ PopmenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2182
|
+
/** @nocollapse */ /** @nocollapse */ PopmenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuModule, declarations: [PopmenuDirective,
|
|
2183
|
+
PopmenuComponent], imports: [CommonModule,
|
|
2184
|
+
MatMenuModule], exports: [PopmenuDirective] });
|
|
2185
|
+
/** @nocollapse */ /** @nocollapse */ PopmenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuModule, imports: [[
|
|
2186
|
+
CommonModule,
|
|
2187
|
+
MatMenuModule,
|
|
2188
|
+
]] });
|
|
2189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: PopmenuModule, decorators: [{
|
|
2190
|
+
type: NgModule,
|
|
2144
2191
|
args: [{
|
|
2145
|
-
|
|
2192
|
+
declarations: [
|
|
2193
|
+
PopmenuDirective,
|
|
2194
|
+
PopmenuComponent
|
|
2195
|
+
],
|
|
2196
|
+
imports: [
|
|
2197
|
+
CommonModule,
|
|
2198
|
+
MatMenuModule,
|
|
2199
|
+
],
|
|
2200
|
+
exports: [
|
|
2201
|
+
PopmenuDirective
|
|
2202
|
+
]
|
|
2146
2203
|
}]
|
|
2147
|
-
}]
|
|
2204
|
+
}] });
|
|
2148
2205
|
|
|
2149
|
-
class
|
|
2150
|
-
constructor(
|
|
2151
|
-
this.
|
|
2152
|
-
this.
|
|
2153
|
-
this.
|
|
2154
|
-
this.
|
|
2155
|
-
this.
|
|
2156
|
-
this.
|
|
2157
|
-
this.
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
ngAfterViewInit() {
|
|
2165
|
-
if (this.responsive) {
|
|
2166
|
-
this.generateResponsiveTags(this.elementRef.nativeElement.getElementsByClassName('tags-list')[0].offsetWidth);
|
|
2167
|
-
this.observer = new ResizeObserver(entries => {
|
|
2168
|
-
this.zone.run(() => {
|
|
2169
|
-
this.width$.next(entries[0].contentRect.width);
|
|
2170
|
-
});
|
|
2171
|
-
});
|
|
2172
|
-
this.observer.observe(this.elementRef.nativeElement.getElementsByClassName('tags-list')[0]);
|
|
2173
|
-
this.width$.subscribe(width => {
|
|
2174
|
-
this.generateResponsiveTags(width);
|
|
2175
|
-
});
|
|
2176
|
-
}
|
|
2177
|
-
}
|
|
2178
|
-
ngOnChanges(changes) {
|
|
2179
|
-
if (changes.tags.currentValue) {
|
|
2180
|
-
this.generateResponsiveTags(this.elementRef.nativeElement.getElementsByClassName('tags-list')[0].offsetWidth);
|
|
2181
|
-
}
|
|
2182
|
-
}
|
|
2183
|
-
ngOnDestroy() {
|
|
2184
|
-
this.observer.unobserve(this.elementRef.nativeElement.getElementsByClassName('tags-list')[0]);
|
|
2185
|
-
}
|
|
2186
|
-
onExpand() {
|
|
2187
|
-
this.expanded = !this.expanded;
|
|
2188
|
-
}
|
|
2189
|
-
onDeleteTag(tag) {
|
|
2190
|
-
this.tags.splice(this.tags.indexOf(tag), 1);
|
|
2191
|
-
this.deleteTag.emit(this.tags);
|
|
2192
|
-
}
|
|
2193
|
-
onResize() {
|
|
2194
|
-
this.generateResponsiveTags(this.elementRef.nativeElement.children[0].offsetWidth);
|
|
2195
|
-
}
|
|
2196
|
-
trackByTagContent(index, entry) {
|
|
2197
|
-
return entry;
|
|
2198
|
-
}
|
|
2199
|
-
generateResponsiveTags(width) {
|
|
2200
|
-
let seeMoreElementWidth = this.textMeasurementService.calculateTextWidth('+'.concat(this.tags.length.toString()), 14, 'Averta');
|
|
2201
|
-
seeMoreElementWidth += 1 + 8 + 8 + 1; // border-left + padding-left + padding-right + border-right
|
|
2202
|
-
let elementWidth = width;
|
|
2203
|
-
elementWidth -= seeMoreElementWidth;
|
|
2204
|
-
let currentIndex = 0;
|
|
2205
|
-
for (let index = 0; index < this.tags.length; index++) {
|
|
2206
|
-
let textWidth = this.textMeasurementService.calculateTextWidth(this.tags[index], 14, 'Averta');
|
|
2207
|
-
textWidth += 1 + 8 + (this.removeTagsEnabled ? 25 : 8) + 1 + 4; // border-left + padding-left + padding-right + border-right + tag spacing
|
|
2208
|
-
elementWidth -= textWidth;
|
|
2209
|
-
if (elementWidth <= 0) {
|
|
2210
|
-
break;
|
|
2211
|
-
}
|
|
2212
|
-
currentIndex = index;
|
|
2213
|
-
}
|
|
2214
|
-
if (currentIndex + 1 === (this.tags.length)) {
|
|
2215
|
-
this.expanded = false;
|
|
2216
|
-
}
|
|
2217
|
-
this.howManyItemsLeft = this.tags.length - (currentIndex + 1);
|
|
2218
|
-
this.responsiveTags = this.tags.slice(0, currentIndex + 1);
|
|
2219
|
-
this.changeDetectorRef.markForCheck();
|
|
2206
|
+
class SplashscreenComponent {
|
|
2207
|
+
constructor() {
|
|
2208
|
+
this.cardLabels = [];
|
|
2209
|
+
this.cardDirection = 'horizontal';
|
|
2210
|
+
this.disposition = 'row';
|
|
2211
|
+
this.imgHeight = 150;
|
|
2212
|
+
this.imgPaths = [];
|
|
2213
|
+
this.imgWidth = 150;
|
|
2214
|
+
this.title = '';
|
|
2215
|
+
/**
|
|
2216
|
+
* The container and the cards width. All:
|
|
2217
|
+
* - 100% of parent width
|
|
2218
|
+
* - default: 750px for the container and 50% of the container for each card
|
|
2219
|
+
*/
|
|
2220
|
+
this.width = 'default';
|
|
2220
2221
|
}
|
|
2221
2222
|
}
|
|
2222
|
-
/** @nocollapse */ /** @nocollapse */
|
|
2223
|
-
/** @nocollapse */ /** @nocollapse */
|
|
2224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type:
|
|
2223
|
+
/** @nocollapse */ /** @nocollapse */ SplashscreenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SplashscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2224
|
+
/** @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 });
|
|
2225
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: SplashscreenComponent, decorators: [{
|
|
2225
2226
|
type: Component,
|
|
2226
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-
|
|
2227
|
-
}],
|
|
2227
|
+
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"] }]
|
|
2228
|
+
}], propDecorators: { cardLabels: [{
|
|
2228
2229
|
type: Input
|
|
2229
|
-
}],
|
|
2230
|
+
}], cardDirection: [{
|
|
2230
2231
|
type: Input
|
|
2231
|
-
}],
|
|
2232
|
+
}], disposition: [{
|
|
2232
2233
|
type: Input
|
|
2233
|
-
}],
|
|
2234
|
+
}], imgHeight: [{
|
|
2235
|
+
type: Input
|
|
2236
|
+
}], imgPaths: [{
|
|
2237
|
+
type: Input
|
|
2238
|
+
}], imgWidth: [{
|
|
2239
|
+
type: Input
|
|
2240
|
+
}], title: [{
|
|
2241
|
+
type: Input
|
|
2242
|
+
}], width: [{
|
|
2234
2243
|
type: Input
|
|
2235
|
-
}], deleteTag: [{
|
|
2236
|
-
type: Output
|
|
2237
2244
|
}] } });
|
|
2238
2245
|
|
|
2239
2246
|
class TryPopupComponent {
|
|
@@ -2268,47 +2275,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
2268
2275
|
type: Output
|
|
2269
2276
|
}] } });
|
|
2270
2277
|
|
|
2271
|
-
class
|
|
2272
|
-
constructor() {
|
|
2278
|
+
class LabelsSelectorComponent {
|
|
2279
|
+
constructor(changeDetectorRef) {
|
|
2280
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
2273
2281
|
this.INFINITY = Number.MAX_SAFE_INTEGER;
|
|
2274
|
-
this.
|
|
2282
|
+
this.addLabelEnabled = true;
|
|
2275
2283
|
this.disabled = false;
|
|
2276
|
-
this.
|
|
2284
|
+
this.initialLabels = [];
|
|
2277
2285
|
this.loadingOnSearch = true;
|
|
2278
2286
|
this.multipleEnabled = true;
|
|
2279
|
-
this.
|
|
2287
|
+
this.createLabel = new EventEmitter();
|
|
2288
|
+
this.selectLabels = new EventEmitter();
|
|
2280
2289
|
this.searchErrorMessage = new EventEmitter();
|
|
2281
|
-
this.
|
|
2282
|
-
this.
|
|
2283
|
-
this.
|
|
2290
|
+
this.labels = [];
|
|
2291
|
+
this.labelsInput$ = new Subject();
|
|
2292
|
+
this.labelsLoading = false;
|
|
2284
2293
|
}
|
|
2285
2294
|
ngOnInit() {
|
|
2286
|
-
this.
|
|
2295
|
+
this.labels = this.initialLabels;
|
|
2287
2296
|
this.setSearchFunction();
|
|
2288
2297
|
}
|
|
2289
2298
|
ngOnChanges(changes) {
|
|
2290
|
-
if (changes?.
|
|
2291
|
-
this.
|
|
2299
|
+
if (changes?.initialLabels?.currentValue) {
|
|
2300
|
+
this.labels = this.initialLabels;
|
|
2292
2301
|
}
|
|
2293
2302
|
}
|
|
2294
|
-
|
|
2295
|
-
this.
|
|
2296
|
-
this.setSearchFunction();
|
|
2303
|
+
onCreateLabel(label) {
|
|
2304
|
+
// this.labels$ = of([]);
|
|
2305
|
+
// this.setSearchFunction();
|
|
2306
|
+
console.log("new", label);
|
|
2307
|
+
this.createLabel.emit(label);
|
|
2297
2308
|
}
|
|
2298
2309
|
onOpen() {
|
|
2299
|
-
this.
|
|
2310
|
+
this.labelsInput$.next('');
|
|
2300
2311
|
}
|
|
2301
|
-
|
|
2302
|
-
this.
|
|
2312
|
+
onLabelsChange() {
|
|
2313
|
+
this.selectLabels.emit(this.labels);
|
|
2314
|
+
this.changeDetectorRef.markForCheck();
|
|
2303
2315
|
}
|
|
2304
2316
|
setSearchFunction() {
|
|
2305
|
-
this.
|
|
2306
|
-
this.
|
|
2307
|
-
}), switchMap((term) => this.
|
|
2317
|
+
this.labels$ = this.labelsInput$.pipe(debounceTime(this.loadingOnSearch ? 400 : 0), distinctUntilChanged(), tap(() => {
|
|
2318
|
+
this.labelsLoading = true;
|
|
2319
|
+
}), switchMap((term) => this.searchLabelsFunction(term).pipe(catchError((response) => {
|
|
2308
2320
|
this.searchErrorMessage.emit(response.error ? response.error.message : 'Error');
|
|
2309
2321
|
return [];
|
|
2310
2322
|
}), map(response => {
|
|
2311
|
-
this.
|
|
2323
|
+
this.labelsLoading = false;
|
|
2312
2324
|
if (!response || Object.keys(response).length == 0) {
|
|
2313
2325
|
return [];
|
|
2314
2326
|
}
|
|
@@ -2316,26 +2328,28 @@ class TagsSelectorComponent {
|
|
|
2316
2328
|
}))));
|
|
2317
2329
|
}
|
|
2318
2330
|
}
|
|
2319
|
-
/** @nocollapse */ /** @nocollapse */
|
|
2320
|
-
/** @nocollapse */ /** @nocollapse */ TagsSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: TagsSelectorComponent, selector: "ap-tags-selector", inputs: { addTagEnabled: "addTagEnabled", disabled: "disabled", initialTags: "initialTags", labels: "labels", loadingOnSearch: "loadingOnSearch", multipleEnabled: "multipleEnabled", searchTagsFunction: "searchTagsFunction" }, outputs: { selectTags: "selectTags", 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=\"tags-select\"\n [disabled]=\"disabled\"\n [addTag]=\"addTagEnabled\"\n [maxSelectedItems]=\"multipleEnabled ? INFINITY : 1\"\n [multiple]=\"true\"\n [hideSelected]=\"true\"\n [placeholder]=\"labels.placeholder\"\n [loading]=\"tagsLoading\"\n [items]=\"tags$ | async\"\n [typeahead]=\"tagsInput$\"\n [minTermLength]=\"0\"\n [clearable]=\"false\"\n [(ngModel)]=\"tags\"\n (open)=\"onOpen()\"\n (change)=\"onTagsChange()\"\n (add)=\"onAdd()\"\n appendTo=\"body\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of items\" class=\"tags-wrapper\">\n <ap-tag [content]=\"item\" [removable]=\"!disabled\" (deleteTag)=\"clear(item)\"></ap-tag>\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-tag\">\n <ap-symbol class=\"add-tag-icon\"\n symbolId=\"add-circle-bold-alternate\"\n size=\"micro\"\n ></ap-symbol>\n <div class=\"add-tag-preview\">{{labels.createTag}} \"{{search}}\"</div>\n </div>\n </ng-template>\n</ng-select>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #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}.tags-select{width:260px}.tags-select .tags-wrapper{margin-bottom:5px;max-width:226px}::ng-deep .tags-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:64px;padding-left:6px!important;gap:4px}.ng-option ap-symbol{color:#858fa1}.add-tag{display:flex;align-items:center}.add-tag .add-tag-icon{padding-right:8px}.add-tag-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\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: TagComponent, selector: "ap-tag", inputs: ["color", "content", "onlyText", "removable"], outputs: ["deleteTag"] }, { 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 } });
|
|
2321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type:
|
|
2331
|
+
/** @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 });
|
|
2332
|
+
/** @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 } });
|
|
2333
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelsSelectorComponent, decorators: [{
|
|
2322
2334
|
type: Component,
|
|
2323
|
-
args: [{ selector: 'ap-
|
|
2324
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
2335
|
+
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"] }]
|
|
2336
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { addLabelEnabled: [{
|
|
2325
2337
|
type: Input
|
|
2326
2338
|
}], disabled: [{
|
|
2327
2339
|
type: Input
|
|
2328
|
-
}],
|
|
2340
|
+
}], initialLabels: [{
|
|
2329
2341
|
type: Input
|
|
2330
|
-
}],
|
|
2342
|
+
}], translation: [{
|
|
2331
2343
|
type: Input
|
|
2332
2344
|
}], loadingOnSearch: [{
|
|
2333
2345
|
type: Input
|
|
2334
2346
|
}], multipleEnabled: [{
|
|
2335
2347
|
type: Input
|
|
2336
|
-
}],
|
|
2348
|
+
}], searchLabelsFunction: [{
|
|
2337
2349
|
type: Input
|
|
2338
|
-
}],
|
|
2350
|
+
}], createLabel: [{
|
|
2351
|
+
type: Output
|
|
2352
|
+
}], selectLabels: [{
|
|
2339
2353
|
type: Output
|
|
2340
2354
|
}], searchErrorMessage: [{
|
|
2341
2355
|
type: Output
|
|
@@ -2682,12 +2696,12 @@ class TimepickerComponent {
|
|
|
2682
2696
|
return fixedNum;
|
|
2683
2697
|
}
|
|
2684
2698
|
}
|
|
2685
|
-
/** @nocollapse */ /** @nocollapse */ TimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TimepickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$
|
|
2699
|
+
/** @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 });
|
|
2686
2700
|
/** @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$4.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$4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i2$4.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", "offset", "placement", "pointer", "apPopmenu", "position", "rounded", "shadow", "options"], outputs: ["menuClosed", "menuOpened"] }, { type: TooltipNeoDirective, selector: "[apTooltipNeo]", inputs: ["apTooltipNeo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2687
2701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TimepickerComponent, decorators: [{
|
|
2688
2702
|
type: Component,
|
|
2689
2703
|
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"] }]
|
|
2690
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$
|
|
2704
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.OverlayContainer }, { type: i0.Renderer2 }]; }, propDecorators: { inputBox: [{
|
|
2691
2705
|
type: ViewChild,
|
|
2692
2706
|
args: ['inputBox']
|
|
2693
2707
|
}], inputTime: [{
|
|
@@ -3409,6 +3423,8 @@ class AgorapulseUiComponentsModule {
|
|
|
3409
3423
|
EllipsisDirective,
|
|
3410
3424
|
ImageCarouselComponent,
|
|
3411
3425
|
FeatureOnboardingComponent,
|
|
3426
|
+
LabelListComponent,
|
|
3427
|
+
LabelsSelectorComponent,
|
|
3412
3428
|
LeadModalComponent,
|
|
3413
3429
|
MediaDisplayOverlayDialogComponent,
|
|
3414
3430
|
ModalComponent,
|
|
@@ -3420,9 +3436,7 @@ class AgorapulseUiComponentsModule {
|
|
|
3420
3436
|
SnackBarComponent,
|
|
3421
3437
|
SplashscreenComponent,
|
|
3422
3438
|
StarRatingComponent,
|
|
3423
|
-
|
|
3424
|
-
TagListComponent,
|
|
3425
|
-
TagsSelectorComponent,
|
|
3439
|
+
LabelComponent,
|
|
3426
3440
|
TimepickerComponent,
|
|
3427
3441
|
TryPopupComponent,
|
|
3428
3442
|
NotificationComponent,
|
|
@@ -3491,6 +3505,8 @@ class AgorapulseUiComponentsModule {
|
|
|
3491
3505
|
EllipsisDirective,
|
|
3492
3506
|
ImageCarouselComponent,
|
|
3493
3507
|
FeatureOnboardingComponent,
|
|
3508
|
+
LabelComponent,
|
|
3509
|
+
LabelListComponent,
|
|
3494
3510
|
LeadModalComponent,
|
|
3495
3511
|
MediaDisplayOverlayDialogComponent,
|
|
3496
3512
|
ModalComponent,
|
|
@@ -3502,9 +3518,7 @@ class AgorapulseUiComponentsModule {
|
|
|
3502
3518
|
SnackBarComponent,
|
|
3503
3519
|
SplashscreenComponent,
|
|
3504
3520
|
StarRatingComponent,
|
|
3505
|
-
|
|
3506
|
-
TagListComponent,
|
|
3507
|
-
TagsSelectorComponent,
|
|
3521
|
+
LabelsSelectorComponent,
|
|
3508
3522
|
TimepickerComponent,
|
|
3509
3523
|
TryPopupComponent,
|
|
3510
3524
|
NotificationComponent,
|
|
@@ -3656,6 +3670,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
3656
3670
|
EllipsisDirective,
|
|
3657
3671
|
ImageCarouselComponent,
|
|
3658
3672
|
FeatureOnboardingComponent,
|
|
3673
|
+
LabelListComponent,
|
|
3674
|
+
LabelsSelectorComponent,
|
|
3659
3675
|
LeadModalComponent,
|
|
3660
3676
|
MediaDisplayOverlayDialogComponent,
|
|
3661
3677
|
ModalComponent,
|
|
@@ -3667,9 +3683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
3667
3683
|
SnackBarComponent,
|
|
3668
3684
|
SplashscreenComponent,
|
|
3669
3685
|
StarRatingComponent,
|
|
3670
|
-
|
|
3671
|
-
TagListComponent,
|
|
3672
|
-
TagsSelectorComponent,
|
|
3686
|
+
LabelComponent,
|
|
3673
3687
|
TimepickerComponent,
|
|
3674
3688
|
TryPopupComponent,
|
|
3675
3689
|
NotificationComponent,
|
|
@@ -3744,6 +3758,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
3744
3758
|
EllipsisDirective,
|
|
3745
3759
|
ImageCarouselComponent,
|
|
3746
3760
|
FeatureOnboardingComponent,
|
|
3761
|
+
LabelComponent,
|
|
3762
|
+
LabelListComponent,
|
|
3747
3763
|
LeadModalComponent,
|
|
3748
3764
|
MediaDisplayOverlayDialogComponent,
|
|
3749
3765
|
ModalComponent,
|
|
@@ -3755,9 +3771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
3755
3771
|
SnackBarComponent,
|
|
3756
3772
|
SplashscreenComponent,
|
|
3757
3773
|
StarRatingComponent,
|
|
3758
|
-
|
|
3759
|
-
TagListComponent,
|
|
3760
|
-
TagsSelectorComponent,
|
|
3774
|
+
LabelsSelectorComponent,
|
|
3761
3775
|
TimepickerComponent,
|
|
3762
3776
|
TryPopupComponent,
|
|
3763
3777
|
NotificationComponent,
|
|
@@ -3868,11 +3882,11 @@ class OverlayDialogService {
|
|
|
3868
3882
|
return overlayConfig;
|
|
3869
3883
|
}
|
|
3870
3884
|
}
|
|
3871
|
-
/** @nocollapse */ /** @nocollapse */ OverlayDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OverlayDialogService, deps: [{ token: i0.Injector }, { token: i1$
|
|
3885
|
+
/** @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 });
|
|
3872
3886
|
/** @nocollapse */ /** @nocollapse */ OverlayDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OverlayDialogService });
|
|
3873
3887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OverlayDialogService, decorators: [{
|
|
3874
3888
|
type: Injectable
|
|
3875
|
-
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$
|
|
3889
|
+
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1$4.Overlay }]; } });
|
|
3876
3890
|
|
|
3877
3891
|
class CodeStatus {
|
|
3878
3892
|
constructor(snackbarText, snackbarType) {
|
|
@@ -3923,5 +3937,5 @@ function generateCodeStatus(text, type) {
|
|
|
3923
3937
|
* Generated bundle index. Do not edit.
|
|
3924
3938
|
*/
|
|
3925
3939
|
|
|
3926
|
-
export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, LeadModalComponent, MediaDisplayOverlayDialogComponent, ModalComponent, MultiStyleTextDirective, NotificationComponent, OverlayDialogComponent, OverlayDialogService, OverlayInDivComponent, PaginatorButtonComponent, PaginatorComponent, PasswordInputComponent, PlaceComponent, PlaceListComponent, PopmenuComponent, PopmenuDirective, PopmenuModule, SlideToggleComponent, SnackBarComponent, SnackbarsThreadComponent, SnackbarsThreadService, SplashscreenComponent, StarRatingComponent, StepperComponent,
|
|
3940
|
+
export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, LabelComponent, LabelListComponent, LabelsSelectorComponent, LeadModalComponent, 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 };
|
|
3927
3941
|
//# sourceMappingURL=agorapulse-ui-components.mjs.map
|