@agorapulse/ui-components 13.2.4 → 13.2.5
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.5.tgz +0 -0
- package/esm2020/src/lib/labels/label-list.component.mjs +6 -22
- package/esm2020/src/lib/labels/label.component.mjs +4 -10
- package/esm2020/src/lib/labels-selector/labels-selector.component.mjs +1 -1
- package/esm2020/src/lib/tooltip-neo/tooltip-neo.directive.mjs +3 -9
- package/fesm2015/agorapulse-ui-components.mjs +11 -39
- package/fesm2015/agorapulse-ui-components.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components.mjs +11 -39
- package/fesm2020/agorapulse-ui-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/labels/label-list.component.d.ts +4 -20
- package/src/lib/labels/label.component.d.ts +2 -9
- package/src/lib/tooltip-neo/tooltip-neo.directive.d.ts +0 -1
- package/agorapulse-ui-components-13.2.4.tgz +0 -0
|
@@ -1191,7 +1191,7 @@ class TooltipNeoDirective {
|
|
|
1191
1191
|
if (!bool) {
|
|
1192
1192
|
return of(bool);
|
|
1193
1193
|
}
|
|
1194
|
-
return of(bool).pipe(delay(
|
|
1194
|
+
return of(bool).pipe(delay(400));
|
|
1195
1195
|
}), takeUntil(this.destroy$))
|
|
1196
1196
|
.subscribe(bool => {
|
|
1197
1197
|
if (bool) {
|
|
@@ -1235,12 +1235,9 @@ class TooltipNeoDirective {
|
|
|
1235
1235
|
this.mouseEntered = false;
|
|
1236
1236
|
this.display$.next(false);
|
|
1237
1237
|
}
|
|
1238
|
-
onClick() {
|
|
1239
|
-
this.display$.next(false);
|
|
1240
|
-
}
|
|
1241
1238
|
}
|
|
1242
1239
|
/** @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 });
|
|
1243
|
-
/** @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()"
|
|
1240
|
+
/** @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 });
|
|
1244
1241
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TooltipNeoDirective, decorators: [{
|
|
1245
1242
|
type: Directive,
|
|
1246
1243
|
args: [{ selector: '[apTooltipNeo]' }]
|
|
@@ -1252,9 +1249,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
1252
1249
|
}], onMouseLeave: [{
|
|
1253
1250
|
type: HostListener,
|
|
1254
1251
|
args: ['mouseleave']
|
|
1255
|
-
}], onClick: [{
|
|
1256
|
-
type: HostListener,
|
|
1257
|
-
args: ['click']
|
|
1258
1252
|
}] } });
|
|
1259
1253
|
|
|
1260
1254
|
class LabelComponent {
|
|
@@ -1266,12 +1260,8 @@ class LabelComponent {
|
|
|
1266
1260
|
this.selectorWidth = 0; //Width of the selector input, if applicable
|
|
1267
1261
|
this.removable = false;
|
|
1268
1262
|
this.remove = new EventEmitter();
|
|
1269
|
-
this.removeObject = new EventEmitter();
|
|
1270
1263
|
this.tooltipEnabled = false;
|
|
1271
1264
|
}
|
|
1272
|
-
ngOnInit() {
|
|
1273
|
-
this.label = typeof this.content === 'string' ? this.content : this.content.name;
|
|
1274
|
-
}
|
|
1275
1265
|
ngAfterViewInit() {
|
|
1276
1266
|
this.observer = new ResizeObserver(entries => {
|
|
1277
1267
|
this.zone.run(() => {
|
|
@@ -1287,14 +1277,14 @@ class LabelComponent {
|
|
|
1287
1277
|
this.observer.unobserve(this.elementRef.nativeElement.children[0]);
|
|
1288
1278
|
}
|
|
1289
1279
|
onRemoveLabel() {
|
|
1290
|
-
|
|
1280
|
+
this.remove.emit(this.content);
|
|
1291
1281
|
}
|
|
1292
1282
|
}
|
|
1293
1283
|
/** @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 });
|
|
1294
|
-
/** @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"
|
|
1284
|
+
/** @nocollapse */ /** @nocollapse */ LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LabelComponent, selector: "ap-label", inputs: { color: "color", content: "content", onlyText: "onlyText", selectorWidth: "selectorWidth", removable: "removable" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"label\"\n [ngClass]=\"color\"\n [class.big-padding]=\"onlyText\"\n [class.removable]=\"removable\"\n [apTooltipNeo]=\"tooltipEnabled ? content : ''\" >\n <div class=\"label-content\">{{content}}</div>\n <div *ngIf=\"removable\"\n class=\"delete-cross\"\n (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 });
|
|
1295
1285
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelComponent, decorators: [{
|
|
1296
1286
|
type: Component,
|
|
1297
|
-
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 ?
|
|
1287
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label', template: "<div class=\"label\"\n [ngClass]=\"color\"\n [class.big-padding]=\"onlyText\"\n [class.removable]=\"removable\"\n [apTooltipNeo]=\"tooltipEnabled ? content : ''\" >\n <div class=\"label-content\">{{content}}</div>\n <div *ngIf=\"removable\"\n class=\"delete-cross\"\n (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"] }]
|
|
1298
1288
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { color: [{
|
|
1299
1289
|
type: Input
|
|
1300
1290
|
}], content: [{
|
|
@@ -1307,8 +1297,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
1307
1297
|
type: Input
|
|
1308
1298
|
}], remove: [{
|
|
1309
1299
|
type: Output
|
|
1310
|
-
}], removeObject: [{
|
|
1311
|
-
type: Output
|
|
1312
1300
|
}] } });
|
|
1313
1301
|
|
|
1314
1302
|
class TextMeasurementService {
|
|
@@ -1343,12 +1331,10 @@ class LabelListComponent {
|
|
|
1343
1331
|
this.elementRef = elementRef;
|
|
1344
1332
|
this.textMeasurementService = textMeasurementService;
|
|
1345
1333
|
this.zone = zone;
|
|
1346
|
-
this.expandable = true;
|
|
1347
1334
|
this.removeLabelsEnabled = false;
|
|
1348
1335
|
this.responsive = false;
|
|
1349
1336
|
this.seeLessTranslation = 'See less';
|
|
1350
1337
|
this.removeLabel = new EventEmitter();
|
|
1351
|
-
this.removeLabelObject = new EventEmitter();
|
|
1352
1338
|
this.badgeWidth = 0;
|
|
1353
1339
|
this.expanded = false;
|
|
1354
1340
|
this.howManyItemsLeft = 0;
|
|
@@ -1378,19 +1364,12 @@ class LabelListComponent {
|
|
|
1378
1364
|
this.observer.unobserve(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0]);
|
|
1379
1365
|
}
|
|
1380
1366
|
onExpand() {
|
|
1381
|
-
|
|
1382
|
-
this.expanded = !this.expanded;
|
|
1383
|
-
}
|
|
1367
|
+
this.expanded = !this.expanded;
|
|
1384
1368
|
}
|
|
1385
1369
|
onRemoveLabel(label) {
|
|
1386
1370
|
this.labels.splice(this.labels.indexOf(label), 1);
|
|
1387
1371
|
this.removeLabel.emit(this.labels);
|
|
1388
|
-
this.
|
|
1389
|
-
}
|
|
1390
|
-
onRemoveLabelObject(label) {
|
|
1391
|
-
this.labels.splice(this.labels.indexOf(label), 1);
|
|
1392
|
-
this.removeLabelObject.emit(this.labels);
|
|
1393
|
-
this.onResize();
|
|
1372
|
+
this.changeDetectorRef.markForCheck();
|
|
1394
1373
|
}
|
|
1395
1374
|
onResize() {
|
|
1396
1375
|
this.generateResponsiveLabels(this.elementRef.nativeElement.children[0].offsetWidth);
|
|
@@ -1405,7 +1384,7 @@ class LabelListComponent {
|
|
|
1405
1384
|
elementWidth -= seeMoreElementWidth;
|
|
1406
1385
|
let currentIndex = 0;
|
|
1407
1386
|
for (let index = 0; index < this.labels.length; index++) {
|
|
1408
|
-
let textWidth = this.textMeasurementService.calculateTextWidth(this.
|
|
1387
|
+
let textWidth = this.textMeasurementService.calculateTextWidth(this.labels[index], 14, 'Averta');
|
|
1409
1388
|
textWidth += 1 + 8 + (this.removeLabelsEnabled ? 25 : 8) + 1 + 4; // border-left + padding-left + padding-right + border-right + label spacing
|
|
1410
1389
|
elementWidth -= textWidth;
|
|
1411
1390
|
if (elementWidth <= 0) {
|
|
@@ -1421,19 +1400,14 @@ class LabelListComponent {
|
|
|
1421
1400
|
this.responsiveLabels = this.labels.slice(0, currentIndex + 1);
|
|
1422
1401
|
this.changeDetectorRef.markForCheck();
|
|
1423
1402
|
}
|
|
1424
|
-
getLabel(label) {
|
|
1425
|
-
return typeof label === 'string' ? label : label.name;
|
|
1426
|
-
}
|
|
1427
1403
|
}
|
|
1428
1404
|
/** @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 });
|
|
1429
|
-
/** @nocollapse */ /** @nocollapse */ LabelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LabelListComponent, selector: "ap-label-list", inputs: { labels: "labels",
|
|
1405
|
+
/** @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 [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n [removable]=\"removeLabelsEnabled\"\n (remove)=\"onRemoveLabel($event)\"></ap-label>\n </ng-container>\n\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;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand:hover{cursor:pointer;text-decoration:underline}.label-retract{box-sizing:border-box;border:0;background-color:transparent;line-height:24px;color:#178dfe}.label-retract:hover{cursor:pointer;text-decoration:underline}\n"], components: [{ type: LabelComponent, selector: "ap-label", inputs: ["color", "content", "onlyText", "selectorWidth", "removable"], outputs: ["remove"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1430
1406
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelListComponent, decorators: [{
|
|
1431
1407
|
type: Component,
|
|
1432
|
-
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)\"
|
|
1408
|
+
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)\"></ap-label>\n </ng-container>\n\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;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand:hover{cursor:pointer;text-decoration:underline}.label-retract{box-sizing:border-box;border:0;background-color:transparent;line-height:24px;color:#178dfe}.label-retract:hover{cursor:pointer;text-decoration:underline}\n"] }]
|
|
1433
1409
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: TextMeasurementService }, { type: i0.NgZone }]; }, propDecorators: { labels: [{
|
|
1434
1410
|
type: Input
|
|
1435
|
-
}], expandable: [{
|
|
1436
|
-
type: Input
|
|
1437
1411
|
}], removeLabelsEnabled: [{
|
|
1438
1412
|
type: Input
|
|
1439
1413
|
}], responsive: [{
|
|
@@ -1442,8 +1416,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
1442
1416
|
type: Input
|
|
1443
1417
|
}], removeLabel: [{
|
|
1444
1418
|
type: Output
|
|
1445
|
-
}], removeLabelObject: [{
|
|
1446
|
-
type: Output
|
|
1447
1419
|
}] } });
|
|
1448
1420
|
|
|
1449
1421
|
var KEY_CODE;
|
|
@@ -2366,7 +2338,7 @@ class LabelsSelectorComponent {
|
|
|
2366
2338
|
}
|
|
2367
2339
|
}
|
|
2368
2340
|
/** @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 });
|
|
2369
|
-
/** @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 } });
|
|
2341
|
+
/** @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 } });
|
|
2370
2342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelsSelectorComponent, decorators: [{
|
|
2371
2343
|
type: Component,
|
|
2372
2344
|
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"] }]
|