@agorapulse/ui-components 13.2.7 → 13.2.8
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.8.tgz +0 -0
- package/esm2020/index.mjs +1 -2
- package/esm2020/src/lib/agorapulse-ui-components.module.mjs +2 -7
- package/esm2020/src/lib/labels/label-list.component.mjs +4 -4
- package/esm2020/src/lib/labels-selector/labels-selector.component.mjs +9 -6
- package/fesm2015/agorapulse-ui-components.mjs +14 -133
- package/fesm2015/agorapulse-ui-components.mjs.map +1 -1
- package/fesm2020/agorapulse-ui-components.mjs +14 -133
- package/fesm2020/agorapulse-ui-components.mjs.map +1 -1
- package/index.d.ts +0 -1
- package/package.json +1 -1
- package/src/lib/agorapulse-ui-components.module.d.ts +32 -33
- package/src/lib/labels/label-list.component.d.ts +1 -1
- package/src/lib/labels-selector/labels-selector.component.d.ts +5 -1
- package/agorapulse-ui-components-13.2.7.tgz +0 -0
- package/esm2020/src/lib/directives/loading-slider.directive.mjs +0 -122
- package/src/lib/directives/loading-slider.directive.d.ts +0 -27
|
@@ -44,7 +44,7 @@ import moment from 'moment';
|
|
|
44
44
|
import * as i2$1 from 'ngx-daterangepicker-material';
|
|
45
45
|
import { NgxDaterangepickerMd } from 'ngx-daterangepicker-material';
|
|
46
46
|
import * as i1$3 from '@angular/animations';
|
|
47
|
-
import { animate, style, trigger, transition
|
|
47
|
+
import { animate, style, trigger, transition } from '@angular/animations';
|
|
48
48
|
import { ComponentPortal, PortalInjector } from '@angular/cdk/portal';
|
|
49
49
|
import { Subject, of, fromEvent, BehaviorSubject } from 'rxjs';
|
|
50
50
|
import { switchMap, delay, takeUntil, debounceTime, distinctUntilChanged, tap, catchError, map } from 'rxjs/operators';
|
|
@@ -1328,6 +1328,7 @@ class LabelListComponent {
|
|
|
1328
1328
|
this.elementRef = elementRef;
|
|
1329
1329
|
this.textMeasurementService = textMeasurementService;
|
|
1330
1330
|
this.zone = zone;
|
|
1331
|
+
this.labels = [];
|
|
1331
1332
|
this.removeLabelsEnabled = false;
|
|
1332
1333
|
this.responsive = false;
|
|
1333
1334
|
this.seeLessTranslation = 'See less';
|
|
@@ -1353,6 +1354,7 @@ class LabelListComponent {
|
|
|
1353
1354
|
}
|
|
1354
1355
|
}
|
|
1355
1356
|
ngOnChanges(changes) {
|
|
1357
|
+
console.log(changes);
|
|
1356
1358
|
if (changes.labels.currentValue && this.responsive) {
|
|
1357
1359
|
this.generateResponsiveLabels(this.elementRef.nativeElement.getElementsByClassName('labels-list')[0].offsetWidth);
|
|
1358
1360
|
}
|
|
@@ -1364,9 +1366,7 @@ class LabelListComponent {
|
|
|
1364
1366
|
this.expanded = !this.expanded;
|
|
1365
1367
|
}
|
|
1366
1368
|
onRemoveLabel(label) {
|
|
1367
|
-
this.
|
|
1368
|
-
this.removeLabel.emit(this.labels);
|
|
1369
|
-
this.changeDetectorRef.markForCheck();
|
|
1369
|
+
this.removeLabel.emit(label);
|
|
1370
1370
|
}
|
|
1371
1371
|
onResize() {
|
|
1372
1372
|
this.generateResponsiveLabels(this.elementRef.nativeElement.children[0].offsetWidth);
|
|
@@ -2296,6 +2296,7 @@ class LabelsSelectorComponent {
|
|
|
2296
2296
|
this.loadingOnSearch = true;
|
|
2297
2297
|
this.multipleEnabled = true;
|
|
2298
2298
|
this.createLabel = new EventEmitter();
|
|
2299
|
+
this.deleteLabel = new EventEmitter();
|
|
2299
2300
|
this.selectLabels = new EventEmitter();
|
|
2300
2301
|
this.searchErrorMessage = new EventEmitter();
|
|
2301
2302
|
this.labels = [];
|
|
@@ -2312,11 +2313,11 @@ class LabelsSelectorComponent {
|
|
|
2312
2313
|
}
|
|
2313
2314
|
}
|
|
2314
2315
|
onCreateLabel(label) {
|
|
2315
|
-
// this.labels$ = of([]);
|
|
2316
|
-
// this.setSearchFunction();
|
|
2317
|
-
console.log("new", label);
|
|
2318
2316
|
this.createLabel.emit(label);
|
|
2319
2317
|
}
|
|
2318
|
+
onDeleteLabel(event) {
|
|
2319
|
+
this.deleteLabel.emit(event.value);
|
|
2320
|
+
}
|
|
2320
2321
|
onOpen() {
|
|
2321
2322
|
this.labelsInput$.next('');
|
|
2322
2323
|
}
|
|
@@ -2340,10 +2341,10 @@ class LabelsSelectorComponent {
|
|
|
2340
2341
|
}
|
|
2341
2342
|
}
|
|
2342
2343
|
/** @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 });
|
|
2343
|
-
/** @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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.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 } });
|
|
2344
|
+
/** @nocollapse */ /** @nocollapse */ LabelsSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: LabelsSelectorComponent, selector: "ap-labels-selector", inputs: { addLabelEnabled: "addLabelEnabled", disabled: "disabled", initialLabels: "initialLabels", translation: "translation", loadingOnSearch: "loadingOnSearch", multipleEnabled: "multipleEnabled", searchLabelsFunction: "searchLabelsFunction" }, outputs: { createLabel: "createLabel", deleteLabel: "deleteLabel", selectLabels: "selectLabels", searchErrorMessage: "searchErrorMessage" }, usesOnChanges: true, ngImport: i0, template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select class=\"labels-select\"\n [addTag]=\"addLabelEnabled\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [hideSelected]=\"true\"\n [items]=\"labels$ | async\"\n [loading]=\"labelsLoading\"\n [maxSelectedItems]=\"multipleEnabled ? INFINITY : 1\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (add)=\"onCreateLabel($event)\"\n (change)=\"onLabelsChange()\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\"\n appendTo=\"body\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of items\" class=\"labels-wrapper\">\n <ap-label [content]=\"item\"\n [selectorWidth]=\"221\"\n [removable]=\"!disabled\"\n (remove)=\"clear(item)\"></ap-label>\n </div>\n </ng-template>\n <ng-template ng-option-tmp let-item=\"item\" let-search=\"searchTerm\">\n <div *ngIf=\"search\"><b>{{item.substring(0, search.length)}}</b>{{item.substring(search.length, item.length)}}</div>\n <div *ngIf=\"!search\">{{item}}</div>\n </ng-template>\n <ng-template ng-tag-tmp let-search=\"searchTerm\">\n <div class=\"add-label\">\n <ap-symbol class=\"add-label-icon\"\n symbolId=\"add-circle-bold-alternate\"\n size=\"micro\"\n ></ap-symbol>\n <div class=\"add-label-preview\">{{translation.createLabel}} \"{{search}}\"</div>\n </div>\n </ng-template>\n</ng-select>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}:host{max-width:260px;display:flex}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"], components: [{ type: i1$6.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: LabelComponent, selector: "ap-label", inputs: ["color", "content", "onlyText", "selectorWidth", "removable"], outputs: ["remove"] }, { type: i1$1.SymbolComponent, selector: "ap-symbol", inputs: ["color", "id", "symbolId", "size", "state"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.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 } });
|
|
2344
2345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LabelsSelectorComponent, decorators: [{
|
|
2345
2346
|
type: Component,
|
|
2346
|
-
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"] }]
|
|
2347
|
+
args: [{ selector: 'ap-labels-selector', template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select class=\"labels-select\"\n [addTag]=\"addLabelEnabled\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [hideSelected]=\"true\"\n [items]=\"labels$ | async\"\n [loading]=\"labelsLoading\"\n [maxSelectedItems]=\"multipleEnabled ? INFINITY : 1\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (add)=\"onCreateLabel($event)\"\n (change)=\"onLabelsChange()\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\"\n appendTo=\"body\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of items\" class=\"labels-wrapper\">\n <ap-label [content]=\"item\"\n [selectorWidth]=\"221\"\n [removable]=\"!disabled\"\n (remove)=\"clear(item)\"></ap-label>\n </div>\n </ng-template>\n <ng-template ng-option-tmp let-item=\"item\" let-search=\"searchTerm\">\n <div *ngIf=\"search\"><b>{{item.substring(0, search.length)}}</b>{{item.substring(search.length, item.length)}}</div>\n <div *ngIf=\"!search\">{{item}}</div>\n </ng-template>\n <ng-template ng-tag-tmp let-search=\"searchTerm\">\n <div class=\"add-label\">\n <ap-symbol class=\"add-label-icon\"\n symbolId=\"add-circle-bold-alternate\"\n size=\"micro\"\n ></ap-symbol>\n <div class=\"add-label-preview\">{{translation.createLabel}} \"{{search}}\"</div>\n </div>\n </ng-template>\n</ng-select>\n", styles: ["[color=facebook]{color:#1877f2}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#1877f2}[border=facebook]{border:1px solid #1877f2}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #A566A5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #C7AB82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #F2713C}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #FFD006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94C5AA}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2A9D8F}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78ACD8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525A9E}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6A2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729E}:host{max-width:260px;display:flex}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"] }]
|
|
2347
2348
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { addLabelEnabled: [{
|
|
2348
2349
|
type: Input
|
|
2349
2350
|
}], disabled: [{
|
|
@@ -2360,6 +2361,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
2360
2361
|
type: Input
|
|
2361
2362
|
}], createLabel: [{
|
|
2362
2363
|
type: Output
|
|
2364
|
+
}], deleteLabel: [{
|
|
2365
|
+
type: Output
|
|
2363
2366
|
}], selectLabels: [{
|
|
2364
2367
|
type: Output
|
|
2365
2368
|
}], searchErrorMessage: [{
|
|
@@ -2989,124 +2992,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
2989
2992
|
type: Output
|
|
2990
2993
|
}] } });
|
|
2991
2994
|
|
|
2992
|
-
const ANIMATION_STYLES = new Map([
|
|
2993
|
-
['position', 'absolute'],
|
|
2994
|
-
['bottom', '0'],
|
|
2995
|
-
['height', '5px'],
|
|
2996
|
-
['border-radius', '6px'],
|
|
2997
|
-
['animation', 'slide 1s linear infinite']
|
|
2998
|
-
]);
|
|
2999
|
-
/**
|
|
3000
|
-
* This directive aims to manage a slider animation.
|
|
3001
|
-
*/
|
|
3002
|
-
class LoadingSliderDirective {
|
|
3003
|
-
constructor(elRef, renderer, animationBuilder) {
|
|
3004
|
-
this.elRef = elRef;
|
|
3005
|
-
this.renderer = renderer;
|
|
3006
|
-
this.animationBuilder = animationBuilder;
|
|
3007
|
-
this.loadingSlider = false;
|
|
3008
|
-
this.sliderWidth = '50px';
|
|
3009
|
-
this.sliderColor = '#ff6726';
|
|
3010
|
-
this.sliderAnimationTime = 2000;
|
|
3011
|
-
this.partEvent = new EventEmitter();
|
|
3012
|
-
}
|
|
3013
|
-
ngOnDestroy() {
|
|
3014
|
-
this.removeSlider();
|
|
3015
|
-
}
|
|
3016
|
-
ngOnChanges(changes) {
|
|
3017
|
-
let recreate = false;
|
|
3018
|
-
if (changes.sliderWidth || changes.sliderColor || changes.sliderAnimationTime) {
|
|
3019
|
-
recreate = true;
|
|
3020
|
-
}
|
|
3021
|
-
if (this.loadingSlider) {
|
|
3022
|
-
if (!this.child || recreate) {
|
|
3023
|
-
this.createSlider();
|
|
3024
|
-
}
|
|
3025
|
-
this.showSlider();
|
|
3026
|
-
}
|
|
3027
|
-
else {
|
|
3028
|
-
this.hideSlider();
|
|
3029
|
-
}
|
|
3030
|
-
}
|
|
3031
|
-
createSlider() {
|
|
3032
|
-
this.removeSlider();
|
|
3033
|
-
const div = this.renderer.createElement('div');
|
|
3034
|
-
this.renderer.setStyle(this.elRef.nativeElement, 'position', 'relative');
|
|
3035
|
-
this.renderer.setStyle(this.elRef.nativeElement, 'overflow', 'hidden');
|
|
3036
|
-
this.renderer.addClass(div, 'animation-slider');
|
|
3037
|
-
ANIMATION_STYLES.forEach((value, key) => this.renderer.setStyle(div, key, value));
|
|
3038
|
-
this.renderer.setStyle(div, 'width', this.sliderWidth);
|
|
3039
|
-
this.renderer.setStyle(div, 'background-color', this.sliderColor);
|
|
3040
|
-
// Animate
|
|
3041
|
-
const loaderFadeOutAnimation = this.animationBuilder.build([
|
|
3042
|
-
animate(this.sliderAnimationTime, keyframes([
|
|
3043
|
-
style({ left: "-" + this.sliderWidth, offset: 0 }),
|
|
3044
|
-
style({ left: "calc(100%)", offset: 1 })
|
|
3045
|
-
]))
|
|
3046
|
-
]);
|
|
3047
|
-
this.animation = loaderFadeOutAnimation.create(div);
|
|
3048
|
-
const loop = () => {
|
|
3049
|
-
// Stop loop on destroy
|
|
3050
|
-
if (this.animation) {
|
|
3051
|
-
this.animation.reset();
|
|
3052
|
-
this.animation.onDone(loop);
|
|
3053
|
-
this.animation.play();
|
|
3054
|
-
}
|
|
3055
|
-
};
|
|
3056
|
-
this.animation.onDone(loop);
|
|
3057
|
-
this.animation.play();
|
|
3058
|
-
// Append new element
|
|
3059
|
-
this.renderer.appendChild(this.elRef.nativeElement, div);
|
|
3060
|
-
this.child = div;
|
|
3061
|
-
}
|
|
3062
|
-
removeSlider() {
|
|
3063
|
-
if (this.animation) {
|
|
3064
|
-
this.animation.destroy();
|
|
3065
|
-
this.animation = undefined;
|
|
3066
|
-
}
|
|
3067
|
-
if (this.child) {
|
|
3068
|
-
this.renderer.removeChild(this.elRef.nativeElement, this.child);
|
|
3069
|
-
this.child = undefined;
|
|
3070
|
-
}
|
|
3071
|
-
}
|
|
3072
|
-
hideSlider() {
|
|
3073
|
-
if (this.child) {
|
|
3074
|
-
this.renderer.setProperty(this.child, 'hidden', true);
|
|
3075
|
-
}
|
|
3076
|
-
if (this.animation) {
|
|
3077
|
-
this.animation.pause();
|
|
3078
|
-
}
|
|
3079
|
-
}
|
|
3080
|
-
showSlider() {
|
|
3081
|
-
if (this.child) {
|
|
3082
|
-
this.renderer.setProperty(this.child, 'hidden', false);
|
|
3083
|
-
}
|
|
3084
|
-
if (this.animation) {
|
|
3085
|
-
this.animation.reset();
|
|
3086
|
-
this.animation.play();
|
|
3087
|
-
}
|
|
3088
|
-
}
|
|
3089
|
-
}
|
|
3090
|
-
/** @nocollapse */ /** @nocollapse */ LoadingSliderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoadingSliderDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$3.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3091
|
-
/** @nocollapse */ /** @nocollapse */ LoadingSliderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.3", type: LoadingSliderDirective, selector: "[loadingSlider]", inputs: { loadingSlider: "loadingSlider", sliderWidth: "sliderWidth", sliderColor: "sliderColor", sliderAnimationTime: "sliderAnimationTime" }, outputs: { partEvent: "partEvent" }, usesOnChanges: true, ngImport: i0 });
|
|
3092
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: LoadingSliderDirective, decorators: [{
|
|
3093
|
-
type: Directive,
|
|
3094
|
-
args: [{
|
|
3095
|
-
// tslint:disable-next-line:directive-selector
|
|
3096
|
-
selector: '[loadingSlider]'
|
|
3097
|
-
}]
|
|
3098
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$3.AnimationBuilder }]; }, propDecorators: { loadingSlider: [{
|
|
3099
|
-
type: Input
|
|
3100
|
-
}], sliderWidth: [{
|
|
3101
|
-
type: Input
|
|
3102
|
-
}], sliderColor: [{
|
|
3103
|
-
type: Input
|
|
3104
|
-
}], sliderAnimationTime: [{
|
|
3105
|
-
type: Input
|
|
3106
|
-
}], partEvent: [{
|
|
3107
|
-
type: Output
|
|
3108
|
-
}] } });
|
|
3109
|
-
|
|
3110
2995
|
// Angular
|
|
3111
2996
|
class TruncateTooltipDirective {
|
|
3112
2997
|
constructor(tooltipNeo, elementRef) {
|
|
@@ -3241,8 +3126,7 @@ class AgorapulseUiComponentsModule {
|
|
|
3241
3126
|
EqualValidatorDirective,
|
|
3242
3127
|
MultiStyleTextDirective,
|
|
3243
3128
|
TruncateTooltipDirective,
|
|
3244
|
-
TooltipNeoDirective,
|
|
3245
|
-
LoadingSliderDirective], imports: [AgorapulseUiSymbolModule,
|
|
3129
|
+
TooltipNeoDirective], imports: [AgorapulseUiSymbolModule,
|
|
3246
3130
|
CommonModule,
|
|
3247
3131
|
NgxDaterangepickerMd,
|
|
3248
3132
|
FormsModule,
|
|
@@ -3320,7 +3204,6 @@ class AgorapulseUiComponentsModule {
|
|
|
3320
3204
|
MultiStyleTextDirective,
|
|
3321
3205
|
TruncateTooltipDirective,
|
|
3322
3206
|
TooltipNeoDirective,
|
|
3323
|
-
LoadingSliderDirective,
|
|
3324
3207
|
// Modules
|
|
3325
3208
|
NgSelectModule,
|
|
3326
3209
|
PopmenuModule,
|
|
@@ -3483,7 +3366,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
3483
3366
|
MultiStyleTextDirective,
|
|
3484
3367
|
TruncateTooltipDirective,
|
|
3485
3368
|
TooltipNeoDirective,
|
|
3486
|
-
LoadingSliderDirective,
|
|
3487
3369
|
],
|
|
3488
3370
|
imports: [
|
|
3489
3371
|
AgorapulseUiSymbolModule,
|
|
@@ -3567,7 +3449,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
3567
3449
|
MultiStyleTextDirective,
|
|
3568
3450
|
TruncateTooltipDirective,
|
|
3569
3451
|
TooltipNeoDirective,
|
|
3570
|
-
LoadingSliderDirective,
|
|
3571
3452
|
// Modules
|
|
3572
3453
|
NgSelectModule,
|
|
3573
3454
|
PopmenuModule,
|
|
@@ -3717,5 +3598,5 @@ function generateCodeStatus(text, type) {
|
|
|
3717
3598
|
* Generated bundle index. Do not edit.
|
|
3718
3599
|
*/
|
|
3719
3600
|
|
|
3720
|
-
export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, LabelComponent, LabelListComponent, LabelsSelectorComponent,
|
|
3601
|
+
export { AddCommentComponent, AgorapulseUiComponentsModule, AutosizeTextareaDirective, AvatarComponent, ConfirmModalComponent, DatepickerComponent, DatepickerMode, DefaultImageDirective, DotsStepperComponent, EllipsisDirective, EqualValidatorDirective, FeatureOnboardingComponent, FrozenGifDirective, ImageCarouselComponent, InstagramCarouselItemType, LabelComponent, LabelListComponent, LabelsSelectorComponent, MediaDisplayOverlayDialogComponent, ModalComponent, MultiStyleTextDirective, NotificationComponent, OverlayDialogComponent, OverlayDialogService, OverlayInDivComponent, PaginatorButtonComponent, PaginatorComponent, PasswordInputComponent, PlaceComponent, PlaceListComponent, PopmenuComponent, PopmenuDirective, PopmenuModule, SlideToggleComponent, SnackBarComponent, SnackbarsThreadComponent, SnackbarsThreadService, SplashscreenComponent, StarRatingComponent, StepperComponent, TooltipNeoDirective, TruncateTooltipDirective, TryPopupComponent, generateCodeStatus };
|
|
3721
3602
|
//# sourceMappingURL=agorapulse-ui-components.mjs.map
|