@agorapulse/ui-components 13.1.9 → 13.2.1
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.2.1.tgz +0 -0
- package/esm2020/src/lib/labels/label-list.component.mjs +25 -7
- package/esm2020/src/lib/labels/label.component.mjs +10 -4
- package/esm2020/src/lib/labels-selector/labels-selector.component.mjs +1 -1
- package/esm2020/src/lib/text-measurement/text-measurement.service.mjs +3 -3
- package/esm2020/src/lib/tooltip-neo/tooltip-neo.component.mjs +6 -6
- package/esm2020/src/lib/tooltip-neo/tooltip-neo.directive.mjs +47 -18
- package/esm2020/src/lib/tooltip-neo/tooltip-neo.model.mjs +1 -1
- package/esm2020/src/lib/tooltip-neo/tooltip-neo.service.mjs +2 -2
- package/fesm2015/agorapulse-ui-components.mjs +88 -35
- package/fesm2015/agorapulse-ui-components.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components.mjs +88 -35
- package/fesm2020/agorapulse-ui-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/labels/label-list.component.d.ts +21 -4
- package/src/lib/labels/label.component.d.ts +9 -2
- package/src/lib/tooltip-neo/tooltip-neo.component.d.ts +4 -4
- package/src/lib/tooltip-neo/tooltip-neo.directive.d.ts +9 -3
- package/src/lib/tooltip-neo/tooltip-neo.model.d.ts +1 -1
- package/src/lib/tooltip-neo/tooltip-neo.service.d.ts +1 -1
- package/agorapulse-ui-components-13.1.9.tgz +0 -0
|
@@ -47,7 +47,7 @@ import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
|
|
|
47
47
|
import * as i1$3 from '@angular/animations';
|
|
48
48
|
import { animate, style, trigger, transition } from '@angular/animations';
|
|
49
49
|
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
|
|
50
|
-
import { Subject,
|
|
50
|
+
import { Subject, of, fromEvent, BehaviorSubject } from 'rxjs';
|
|
51
51
|
import { switchMap, delay, takeUntil, debounceTime, distinctUntilChanged, tap, catchError, map } from 'rxjs/operators';
|
|
52
52
|
import * as i2$3 from '@angular/cdk/scrolling';
|
|
53
53
|
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
@@ -1072,7 +1072,7 @@ const tooltipNeoPositions = {
|
|
|
1072
1072
|
|
|
1073
1073
|
class TooltipNeoService {
|
|
1074
1074
|
constructor() {
|
|
1075
|
-
this.
|
|
1075
|
+
this.dispose$ = new Subject();
|
|
1076
1076
|
}
|
|
1077
1077
|
}
|
|
1078
1078
|
/** @nocollapse */ /** @nocollapse */ TooltipNeoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
@@ -1085,9 +1085,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
1085
1085
|
}] });
|
|
1086
1086
|
|
|
1087
1087
|
class TooltipNeoComponent {
|
|
1088
|
-
constructor(
|
|
1089
|
-
this.
|
|
1090
|
-
this.
|
|
1088
|
+
constructor(elementRef, tooltipNeoService) {
|
|
1089
|
+
this.elementRef = elementRef;
|
|
1090
|
+
this.tooltipNeoService = tooltipNeoService;
|
|
1091
1091
|
}
|
|
1092
1092
|
ngOnInit() {
|
|
1093
1093
|
this.params.borderColor
|
|
@@ -1095,8 +1095,8 @@ class TooltipNeoComponent {
|
|
|
1095
1095
|
: this.border = undefined;
|
|
1096
1096
|
}
|
|
1097
1097
|
onClickOutside(event) {
|
|
1098
|
-
if (!this.
|
|
1099
|
-
this.
|
|
1098
|
+
if (!this.elementRef.nativeElement.contains(event.target)) {
|
|
1099
|
+
this.tooltipNeoService.dispose$.next();
|
|
1100
1100
|
}
|
|
1101
1101
|
}
|
|
1102
1102
|
}
|
|
@@ -1135,9 +1135,8 @@ class TooltipNeoDirective {
|
|
|
1135
1135
|
this.overlayPositionBuilder = overlayPositionBuilder;
|
|
1136
1136
|
this.tooltipNeoService = tooltipNeoService;
|
|
1137
1137
|
this.destroy$ = new Subject();
|
|
1138
|
-
this.
|
|
1138
|
+
this.display$ = new Subject();
|
|
1139
1139
|
this.mouseEntered = false;
|
|
1140
|
-
this.show$ = new Subject();
|
|
1141
1140
|
}
|
|
1142
1141
|
static enableTooltip(content, contentType, display) {
|
|
1143
1142
|
return !!content && !!contentType && !!display;
|
|
@@ -1146,17 +1145,32 @@ class TooltipNeoDirective {
|
|
|
1146
1145
|
var _a, _b, _c, _d;
|
|
1147
1146
|
if ((((_b = (_a = changes === null || changes === void 0 ? void 0 : changes.apTooltipNeo) === null || _a === void 0 ? void 0 : _a.currentValue) === null || _b === void 0 ? void 0 : _b.display) || ((_d = (_c = changes === null || changes === void 0 ? void 0 : changes.apTooltipNeo) === null || _c === void 0 ? void 0 : _c.currentValue) === null || _d === void 0 ? void 0 : _d.position)) && this.mouseEntered) {
|
|
1148
1147
|
this.setSettings();
|
|
1149
|
-
this.
|
|
1148
|
+
this.display$.next(this.allowDisplay);
|
|
1150
1149
|
}
|
|
1151
1150
|
}
|
|
1152
1151
|
ngOnInit() {
|
|
1153
1152
|
this.initiateTooltip();
|
|
1154
1153
|
}
|
|
1155
1154
|
ngOnDestroy() {
|
|
1156
|
-
this.
|
|
1155
|
+
this.dispose();
|
|
1157
1156
|
this.destroy$.next();
|
|
1158
1157
|
this.destroy$.complete();
|
|
1159
1158
|
}
|
|
1159
|
+
/**
|
|
1160
|
+
* To fix issue on inbox virtual scroller, it's a manual cleaner at DOM level
|
|
1161
|
+
* It checks the route and also the DOM element where it's called
|
|
1162
|
+
* @private
|
|
1163
|
+
*/
|
|
1164
|
+
cleanUpPersistentTooltip() {
|
|
1165
|
+
if (window.location.href.includes('inbox') && this.elementRef.nativeElement.parentElement.className.includes('item-button-actions')) {
|
|
1166
|
+
const tooltips = document.getElementsByTagName('ap-tooltip-neo');
|
|
1167
|
+
if (tooltips) {
|
|
1168
|
+
Array.from(tooltips).forEach(tooltip => {
|
|
1169
|
+
tooltip.parentElement.parentElement.remove();
|
|
1170
|
+
});
|
|
1171
|
+
}
|
|
1172
|
+
}
|
|
1173
|
+
}
|
|
1160
1174
|
setSettings() {
|
|
1161
1175
|
if (typeof this.apTooltipNeo === 'object') {
|
|
1162
1176
|
const { content, backgroundColor = '#ffffff', borderColor, contentType = 'text', display = true, displayArrow = true, maxWidth = 'full', position = 'top', title = '' } = this.apTooltipNeo;
|
|
@@ -1173,12 +1187,12 @@ class TooltipNeoDirective {
|
|
|
1173
1187
|
const maxWidth = 'full';
|
|
1174
1188
|
const position = 'top';
|
|
1175
1189
|
const title = '';
|
|
1176
|
-
this.params = { content, backgroundColor, borderColor, contentType,
|
|
1190
|
+
this.params = { content, backgroundColor, borderColor, contentType, display, displayArrow, maxWidth, position, title };
|
|
1177
1191
|
this.allowDisplay = TooltipNeoDirective.enableTooltip(content, contentType, display);
|
|
1178
1192
|
}
|
|
1179
1193
|
}
|
|
1180
1194
|
initiateTooltip() {
|
|
1181
|
-
|
|
1195
|
+
this.display$
|
|
1182
1196
|
.pipe(switchMap(bool => {
|
|
1183
1197
|
if (!bool) {
|
|
1184
1198
|
return of(bool);
|
|
@@ -1188,7 +1202,8 @@ class TooltipNeoDirective {
|
|
|
1188
1202
|
.subscribe(bool => {
|
|
1189
1203
|
if (bool) {
|
|
1190
1204
|
this.elementRefMouseLeave$ = fromEvent(this.elementRef.nativeElement, 'mouseleave')
|
|
1191
|
-
.subscribe(() => this.
|
|
1205
|
+
.subscribe(() => this.dispose());
|
|
1206
|
+
this.cleanUpPersistentTooltip();
|
|
1192
1207
|
const positionStrategy = this.overlayPositionBuilder
|
|
1193
1208
|
.flexibleConnectedTo(this.elementRef)
|
|
1194
1209
|
.withPositions([tooltipNeoPositions[this.params.position]]);
|
|
@@ -1198,29 +1213,40 @@ class TooltipNeoDirective {
|
|
|
1198
1213
|
tooltipRef.instance.params = this.params;
|
|
1199
1214
|
}
|
|
1200
1215
|
else {
|
|
1201
|
-
this.
|
|
1216
|
+
this.dispose();
|
|
1202
1217
|
}
|
|
1203
1218
|
});
|
|
1204
|
-
this.tooltipNeoService.
|
|
1219
|
+
this.tooltipNeoService.dispose$
|
|
1205
1220
|
.pipe(takeUntil(this.destroy$))
|
|
1206
|
-
.subscribe(() =>
|
|
1221
|
+
.subscribe(() => {
|
|
1222
|
+
this.display$.next(false);
|
|
1223
|
+
});
|
|
1207
1224
|
}
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1225
|
+
dispose() {
|
|
1226
|
+
if (this.overlayRef) {
|
|
1227
|
+
this.overlayRef.dispose();
|
|
1228
|
+
}
|
|
1229
|
+
if (this.elementRefMouseLeave$) {
|
|
1230
|
+
this.elementRefMouseLeave$.unsubscribe();
|
|
1231
|
+
}
|
|
1211
1232
|
}
|
|
1212
1233
|
onMouseEnter() {
|
|
1213
1234
|
this.setSettings();
|
|
1214
1235
|
this.mouseEntered = true;
|
|
1215
|
-
this.allowDisplay && this.params
|
|
1236
|
+
if (this.allowDisplay && this.params) {
|
|
1237
|
+
this.display$.next(true);
|
|
1238
|
+
}
|
|
1216
1239
|
}
|
|
1217
1240
|
onMouseLeave() {
|
|
1218
1241
|
this.mouseEntered = false;
|
|
1219
|
-
this.
|
|
1242
|
+
this.display$.next(false);
|
|
1243
|
+
}
|
|
1244
|
+
onClick() {
|
|
1245
|
+
this.display$.next(false);
|
|
1220
1246
|
}
|
|
1221
1247
|
}
|
|
1222
1248
|
/** @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 });
|
|
1223
|
-
/** @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 });
|
|
1249
|
+
/** @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()", "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
|
|
1224
1250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoDirective, decorators: [{
|
|
1225
1251
|
type: Directive,
|
|
1226
1252
|
args: [{ selector: '[apTooltipNeo]' }]
|
|
@@ -1232,6 +1258,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
1232
1258
|
}], onMouseLeave: [{
|
|
1233
1259
|
type: HostListener,
|
|
1234
1260
|
args: ['mouseleave']
|
|
1261
|
+
}], onClick: [{
|
|
1262
|
+
type: HostListener,
|
|
1263
|
+
args: ['click']
|
|
1235
1264
|
}] } });
|
|
1236
1265
|
|
|
1237
1266
|
class LabelComponent {
|
|
@@ -1243,8 +1272,12 @@ class LabelComponent {
|
|
|
1243
1272
|
this.selectorWidth = 0; //Width of the selector input, if applicable
|
|
1244
1273
|
this.removable = false;
|
|
1245
1274
|
this.remove = new EventEmitter();
|
|
1275
|
+
this.removeObject = new EventEmitter();
|
|
1246
1276
|
this.tooltipEnabled = false;
|
|
1247
1277
|
}
|
|
1278
|
+
ngOnInit() {
|
|
1279
|
+
this.label = typeof this.content === 'string' ? this.content : this.content.name;
|
|
1280
|
+
}
|
|
1248
1281
|
ngAfterViewInit() {
|
|
1249
1282
|
this.observer = new ResizeObserver(entries => {
|
|
1250
1283
|
this.zone.run(() => {
|
|
@@ -1260,14 +1293,14 @@ class LabelComponent {
|
|
|
1260
1293
|
this.observer.unobserve(this.elementRef.nativeElement.children[0]);
|
|
1261
1294
|
}
|
|
1262
1295
|
onRemoveLabel() {
|
|
1263
|
-
this.remove.emit(this.content);
|
|
1296
|
+
return typeof this.content === 'string' ? this.remove.emit(this.content) : this.removeObject.emit(this.content);
|
|
1264
1297
|
}
|
|
1265
1298
|
}
|
|
1266
1299
|
/** @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 });
|
|
1267
|
-
/** @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 ?
|
|
1300
|
+
/** @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", removeObject: "removeObject" }, ngImport: i0, template: "<div class=\"label\"\n [ngClass]=\"color\"\n [class.big-padding]=\"onlyText\"\n [class.removable]=\"removable\"\n [apTooltipNeo]=\"tooltipEnabled ? label : ''\" >\n <div class=\"label-content\">{{label}}</div>\n <div *ngIf=\"removable\"\n class=\"delete-cross\"\n (mousedown)=\"$event.stopPropagation()\"\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 });
|
|
1268
1301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelComponent, decorators: [{
|
|
1269
1302
|
type: Component,
|
|
1270
|
-
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 ?
|
|
1303
|
+
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 ? label : ''\" >\n <div class=\"label-content\">{{label}}</div>\n <div *ngIf=\"removable\"\n class=\"delete-cross\"\n (mousedown)=\"$event.stopPropagation()\"\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"] }]
|
|
1271
1304
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { color: [{
|
|
1272
1305
|
type: Input
|
|
1273
1306
|
}], content: [{
|
|
@@ -1280,13 +1313,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
1280
1313
|
type: Input
|
|
1281
1314
|
}], remove: [{
|
|
1282
1315
|
type: Output
|
|
1316
|
+
}], removeObject: [{
|
|
1317
|
+
type: Output
|
|
1283
1318
|
}] } });
|
|
1284
1319
|
|
|
1285
1320
|
class TextMeasurementService {
|
|
1286
1321
|
constructor() {
|
|
1287
1322
|
const lDiv = document.createElement('div');
|
|
1288
1323
|
document.body.appendChild(lDiv);
|
|
1289
|
-
lDiv.style.
|
|
1324
|
+
lDiv.style.color = "transparent";
|
|
1290
1325
|
lDiv.style.position = "absolute";
|
|
1291
1326
|
lDiv.style.left = '-1000';
|
|
1292
1327
|
lDiv.style.top = '-1000';
|
|
@@ -1296,7 +1331,7 @@ class TextMeasurementService {
|
|
|
1296
1331
|
this.textDiv.textContent = text;
|
|
1297
1332
|
this.textDiv.style.fontSize = fontSize + "px";
|
|
1298
1333
|
this.textDiv.style.fontFamily = fontFamily;
|
|
1299
|
-
return this.textDiv.
|
|
1334
|
+
return this.textDiv.getBoundingClientRect().width;
|
|
1300
1335
|
}
|
|
1301
1336
|
}
|
|
1302
1337
|
/** @nocollapse */ /** @nocollapse */ TextMeasurementService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TextMeasurementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
@@ -1314,10 +1349,13 @@ class LabelListComponent {
|
|
|
1314
1349
|
this.elementRef = elementRef;
|
|
1315
1350
|
this.textMeasurementService = textMeasurementService;
|
|
1316
1351
|
this.zone = zone;
|
|
1352
|
+
this.expandable = true;
|
|
1317
1353
|
this.removeLabelsEnabled = false;
|
|
1318
1354
|
this.responsive = false;
|
|
1319
1355
|
this.seeLessTranslation = 'See less';
|
|
1320
1356
|
this.removeLabel = new EventEmitter();
|
|
1357
|
+
this.removeLabelObject = new EventEmitter();
|
|
1358
|
+
this.badgeWidth = 0;
|
|
1321
1359
|
this.expanded = false;
|
|
1322
1360
|
this.howManyItemsLeft = 0;
|
|
1323
1361
|
this.responsiveLabels = [];
|
|
@@ -1346,12 +1384,19 @@ class LabelListComponent {
|
|
|
1346
1384
|
this.observer.unobserve(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);
|
|
1347
1385
|
}
|
|
1348
1386
|
onExpand() {
|
|
1349
|
-
this.
|
|
1387
|
+
if (this.expandable) {
|
|
1388
|
+
this.expanded = !this.expanded;
|
|
1389
|
+
}
|
|
1350
1390
|
}
|
|
1351
1391
|
onRemoveLabel(label) {
|
|
1352
1392
|
this.labels.splice(this.labels.indexOf(label), 1);
|
|
1353
1393
|
this.removeLabel.emit(this.labels);
|
|
1354
|
-
this.
|
|
1394
|
+
this.onResize();
|
|
1395
|
+
}
|
|
1396
|
+
onRemoveLabelObject(label) {
|
|
1397
|
+
this.labels.splice(this.labels.indexOf(label), 1);
|
|
1398
|
+
this.removeLabelObject.emit(this.labels);
|
|
1399
|
+
this.onResize();
|
|
1355
1400
|
}
|
|
1356
1401
|
onResize() {
|
|
1357
1402
|
this.generateResponsiveLabels(this.elementRef.nativeElement.children[0].offsetWidth);
|
|
@@ -1362,11 +1407,11 @@ class LabelListComponent {
|
|
|
1362
1407
|
generateResponsiveLabels(width) {
|
|
1363
1408
|
let seeMoreElementWidth = this.textMeasurementService.calculateTextWidth('+'.concat(this.labels.length.toString()), 14, 'Averta');
|
|
1364
1409
|
seeMoreElementWidth += 1 + 8 + 8 + 1; // border-left + padding-left + padding-right + border-right
|
|
1365
|
-
let elementWidth = width;
|
|
1410
|
+
let elementWidth = width - 16 - 16; // width - padding-left - padding-right
|
|
1366
1411
|
elementWidth -= seeMoreElementWidth;
|
|
1367
1412
|
let currentIndex = 0;
|
|
1368
1413
|
for (let index = 0; index < this.labels.length; index++) {
|
|
1369
|
-
let textWidth = this.textMeasurementService.calculateTextWidth(this.labels[index], 14, 'Averta');
|
|
1414
|
+
let textWidth = this.textMeasurementService.calculateTextWidth(this.getLabel(this.labels[index]), 14, 'Averta');
|
|
1370
1415
|
textWidth += 1 + 8 + (this.removeLabelsEnabled ? 25 : 8) + 1 + 4; // border-left + padding-left + padding-right + border-right + label spacing
|
|
1371
1416
|
elementWidth -= textWidth;
|
|
1372
1417
|
if (elementWidth <= 0) {
|
|
@@ -1378,17 +1423,23 @@ class LabelListComponent {
|
|
|
1378
1423
|
this.expanded = false;
|
|
1379
1424
|
}
|
|
1380
1425
|
this.howManyItemsLeft = this.labels.length - (currentIndex + 1);
|
|
1426
|
+
this.badgeWidth = this.howManyItemsLeft > 0 && currentIndex === 0 ? this.textMeasurementService.calculateTextWidth("+" + this.howManyItemsLeft, 14, 'Averta') + 22 : 0;
|
|
1381
1427
|
this.responsiveLabels = this.labels.slice(0, currentIndex + 1);
|
|
1382
1428
|
this.changeDetectorRef.markForCheck();
|
|
1383
1429
|
}
|
|
1430
|
+
getLabel(label) {
|
|
1431
|
+
return typeof label === 'string' ? label : label.name;
|
|
1432
|
+
}
|
|
1384
1433
|
}
|
|
1385
1434
|
/** @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 });
|
|
1386
|
-
/** @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;
|
|
1435
|
+
/** @nocollapse */ /** @nocollapse */ LabelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LabelListComponent, selector: "ap-label-list", inputs: { labels: "labels", expandable: "expandable", removeLabelsEnabled: "removeLabelsEnabled", responsive: "responsive", seeLessTranslation: "seeLessTranslation" }, outputs: { removeLabel: "removeLabel", removeLabelObject: "removeLabelObject" }, 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 [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\"\n (removeObject)=\"onRemoveLabelObject($event)\"></ap-label>\n </ng-container>\n\n <button *ngIf=\"!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0\"\n [class.expandable]=\"expandable\"\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)\"\n (removeObject)=\"onRemoveLabelObject($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;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#344563;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand.expandable{color:#178dfe}.label-expand.expandable: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", "removeObject"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1387
1436
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelListComponent, decorators: [{
|
|
1388
1437
|
type: Component,
|
|
1389
|
-
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;
|
|
1438
|
+
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 [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\"\n (removeObject)=\"onRemoveLabelObject($event)\"></ap-label>\n </ng-container>\n\n <button *ngIf=\"!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0\"\n [class.expandable]=\"expandable\"\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)\"\n (removeObject)=\"onRemoveLabelObject($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;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#344563;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand.expandable{color:#178dfe}.label-expand.expandable: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"] }]
|
|
1390
1439
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: TextMeasurementService }, { type: i0.NgZone }]; }, propDecorators: { labels: [{
|
|
1391
1440
|
type: Input
|
|
1441
|
+
}], expandable: [{
|
|
1442
|
+
type: Input
|
|
1392
1443
|
}], removeLabelsEnabled: [{
|
|
1393
1444
|
type: Input
|
|
1394
1445
|
}], responsive: [{
|
|
@@ -1397,6 +1448,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
1397
1448
|
type: Input
|
|
1398
1449
|
}], removeLabel: [{
|
|
1399
1450
|
type: Output
|
|
1451
|
+
}], removeLabelObject: [{
|
|
1452
|
+
type: Output
|
|
1400
1453
|
}] } });
|
|
1401
1454
|
|
|
1402
1455
|
var KEY_CODE;
|
|
@@ -2312,7 +2365,7 @@ class LabelsSelectorComponent {
|
|
|
2312
2365
|
}
|
|
2313
2366
|
}
|
|
2314
2367
|
/** @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 });
|
|
2315
|
-
/** @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 } });
|
|
2368
|
+
/** @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", "removeObject"] }, { 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 } });
|
|
2316
2369
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelsSelectorComponent, decorators: [{
|
|
2317
2370
|
type: Component,
|
|
2318
2371
|
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"] }]
|