@coreui/angular-pro 5.6.2 → 5.6.3
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.
|
@@ -1476,9 +1476,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
1476
1476
|
class MultiSelectOptionComponent {
|
|
1477
1477
|
elementRef = inject(ElementRef);
|
|
1478
1478
|
#changeDetectorRef = inject(ChangeDetectorRef);
|
|
1479
|
+
#destroyRef = inject(DestroyRef);
|
|
1479
1480
|
#focusMonitor = inject(FocusMonitor);
|
|
1480
1481
|
#multiSelectService = inject(MultiSelectService);
|
|
1481
|
-
#destroyRef = inject(DestroyRef);
|
|
1482
1482
|
/**
|
|
1483
1483
|
* Option style
|
|
1484
1484
|
* @return ('checkbox' | 'text')
|
|
@@ -1883,7 +1883,7 @@ class MultiSelectComponent {
|
|
|
1883
1883
|
userOptionsArray$ = new BehaviorSubject([]);
|
|
1884
1884
|
#options = new Map();
|
|
1885
1885
|
optionTags = signal([], ...(ngDevMode ? [{ debugName: "optionTags" }] : []));
|
|
1886
|
-
optionsSelected = new Map();
|
|
1886
|
+
optionsSelected = signal(new Map(), ...(ngDevMode ? [{ debugName: "optionsSelected" }] : []));
|
|
1887
1887
|
value$ = new BehaviorSubject([]);
|
|
1888
1888
|
#optionsContent = [];
|
|
1889
1889
|
onChange = (value) => {
|
|
@@ -2187,29 +2187,32 @@ class MultiSelectComponent {
|
|
|
2187
2187
|
return { ...prevOptions, ...currOptions };
|
|
2188
2188
|
}, ...(ngDevMode ? [{ debugName: "popperOptions" }] : []));
|
|
2189
2189
|
isDropdownVisible = signal(false, ...(ngDevMode ? [{ debugName: "isDropdownVisible" }] : []));
|
|
2190
|
-
|
|
2191
|
-
return [...this.optionsSelected.values()];
|
|
2192
|
-
}
|
|
2190
|
+
selectedOptions = computed(() => {
|
|
2191
|
+
return [...this.optionsSelected().values()];
|
|
2192
|
+
}, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
|
|
2193
2193
|
get selectedOptionsText() {
|
|
2194
|
-
return this.selectedOptions
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2194
|
+
return this.selectedOptions()
|
|
2195
|
+
.map((option) => option.label)
|
|
2196
|
+
.join(', ');
|
|
2197
|
+
}
|
|
2198
|
+
counterText = computed(() => {
|
|
2199
|
+
return `${this.selectedOptions().length} ${this.selectionTypeCounterText()}`;
|
|
2200
|
+
}, ...(ngDevMode ? [{ debugName: "counterText" }] : []));
|
|
2201
|
+
counterTextType = computed(() => {
|
|
2200
2202
|
return typeof (this.selectionTypeCounterTextPluralMap() ?? this.selectionTypeCounterText());
|
|
2201
|
-
}
|
|
2202
|
-
|
|
2203
|
-
|
|
2203
|
+
}, ...(ngDevMode ? [{ debugName: "counterTextType" }] : []));
|
|
2204
|
+
counterPlaceholderText = computed(() => {
|
|
2205
|
+
const selectedOptions = this.selectedOptions();
|
|
2206
|
+
if (selectedOptions.length === 0 || this.selectionType() !== 'counter') {
|
|
2204
2207
|
return null;
|
|
2205
2208
|
}
|
|
2206
|
-
if (this.counterTextType === 'string') {
|
|
2207
|
-
return this.counterText;
|
|
2209
|
+
if (this.counterTextType() === 'string') {
|
|
2210
|
+
return this.counterText();
|
|
2208
2211
|
}
|
|
2209
2212
|
else {
|
|
2210
|
-
return `${
|
|
2213
|
+
return `${selectedOptions.length} ${this.#i18nPlural.transform(selectedOptions.length, this.selectionTypeCounterTextPluralMap() ?? { other: this.selectionTypeCounterText() ?? '+' })}`;
|
|
2211
2214
|
}
|
|
2212
|
-
}
|
|
2215
|
+
}, ...(ngDevMode ? [{ debugName: "counterPlaceholderText" }] : []));
|
|
2213
2216
|
focusMonitorSubscription;
|
|
2214
2217
|
multiSelectOptionsContent;
|
|
2215
2218
|
multiSelectOptionsView;
|
|
@@ -2424,16 +2427,25 @@ class MultiSelectComponent {
|
|
|
2424
2427
|
}
|
|
2425
2428
|
}), combineLatestWith(this.#optionsReady$), tap(([change, ready]) => {
|
|
2426
2429
|
const { removed } = { ...change };
|
|
2427
|
-
removed
|
|
2428
|
-
this.optionsSelected.
|
|
2429
|
-
|
|
2430
|
+
removed?.length &&
|
|
2431
|
+
this.optionsSelected.update((optSelected) => {
|
|
2432
|
+
const newOptSelected = new Map(optSelected);
|
|
2433
|
+
removed.forEach((value) => {
|
|
2434
|
+
newOptSelected.delete(value);
|
|
2435
|
+
});
|
|
2436
|
+
return newOptSelected;
|
|
2437
|
+
});
|
|
2430
2438
|
this.multiSelectService.selectionModel.selected.forEach((key) => {
|
|
2431
2439
|
const value = this.#options.get(key);
|
|
2432
2440
|
if (value) {
|
|
2433
|
-
this.optionsSelected.
|
|
2441
|
+
this.optionsSelected.update((optSelected) => {
|
|
2442
|
+
const newOptSelected = new Map(optSelected);
|
|
2443
|
+
newOptSelected.set(key, value);
|
|
2444
|
+
return newOptSelected;
|
|
2445
|
+
});
|
|
2434
2446
|
}
|
|
2435
2447
|
});
|
|
2436
|
-
this.optionTags.set(Array.from(this.optionsSelected.values()));
|
|
2448
|
+
this.optionTags.set(Array.from(this.optionsSelected().values()));
|
|
2437
2449
|
this.value = [...this.multiSelectService.selectionModel.selected];
|
|
2438
2450
|
this.inputElementSize();
|
|
2439
2451
|
}), takeUntilDestroyed(this.#destroyRef))
|
|
@@ -2558,7 +2570,11 @@ class MultiSelectComponent {
|
|
|
2558
2570
|
this.searchValue = this.clearSearchOnSelect() || allowCreateOptions ? '' : this.searchValue;
|
|
2559
2571
|
this.multiSelectService.addUserOption(userOption);
|
|
2560
2572
|
this.multiSelectService.selectionModel.select(userOption.value);
|
|
2561
|
-
this.optionsSelected.
|
|
2573
|
+
this.optionsSelected.update((optSelected) => {
|
|
2574
|
+
const newOptSelected = new Map(optSelected);
|
|
2575
|
+
newOptSelected.set(userOption.value, userOption);
|
|
2576
|
+
return newOptSelected;
|
|
2577
|
+
});
|
|
2562
2578
|
this.makeOptions([...this.options, ...this.userOptions()]);
|
|
2563
2579
|
}
|
|
2564
2580
|
}
|
|
@@ -2630,7 +2646,7 @@ class MultiSelectComponent {
|
|
|
2630
2646
|
});
|
|
2631
2647
|
}
|
|
2632
2648
|
clearAllOptions($event) {
|
|
2633
|
-
const enabledOptions = Array.from(this.optionsSelected.values())
|
|
2649
|
+
const enabledOptions = Array.from(this.optionsSelected().values())
|
|
2634
2650
|
.filter((option) => !option.disabled)
|
|
2635
2651
|
.map((option) => option.value);
|
|
2636
2652
|
this.multiSelectService.selectionModel?.deselect(...enabledOptions);
|
|
@@ -2703,12 +2719,14 @@ class MultiSelectComponent {
|
|
|
2703
2719
|
this.changeDetectorRef.markForCheck();
|
|
2704
2720
|
return;
|
|
2705
2721
|
}
|
|
2706
|
-
if (this.searchValue.length || this.optionsSelected.size === 0) {
|
|
2722
|
+
if (this.searchValue.length || this.optionsSelected().size === 0) {
|
|
2707
2723
|
return;
|
|
2708
2724
|
}
|
|
2709
2725
|
if (['Backspace', 'Delete'].includes($event.key)) {
|
|
2710
2726
|
$event.stopPropagation();
|
|
2711
|
-
const last = this.selectedOptions
|
|
2727
|
+
const last = this.selectedOptions()
|
|
2728
|
+
.filter((option) => !option.disabled)
|
|
2729
|
+
.pop();
|
|
2712
2730
|
if (last) {
|
|
2713
2731
|
this.multiSelectService.selectionModel.deselect(last.value);
|
|
2714
2732
|
}
|
|
@@ -2917,7 +2935,7 @@ class MultiSelectComponent {
|
|
|
2917
2935
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
2918
2936
|
multi: true
|
|
2919
2937
|
}
|
|
2920
|
-
], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [class]=\"multiselectClasses()\"\n [popperOptions]=\"popperOptions()\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"isDisabled\" cDropdownToggle role=\"button\"\n class=\"form-multi-select-input-group\">\n <span [class]=\"multiselectSelectionClasses()\" [class.form-multi-select-selection-tags]=\"this.selectionType() === 'tags' && this.selectedOptions.length\">\n @if (selectionType() === 'tags') {\n @for (option of optionTags(); track option.value; let i = $index) {\n <c-multi-select-tag\n (remove)=\"handleTagRemove($event)\"\n [disabled]=\"isDisabled || (option.disabled ?? false)\"\n [label]=\"option.label ?? option.value?.toString()\"\n [option]=\"option\"\n [value]=\"option.value\"\n class=\"form-multi-select-tag text-truncate\"\n tabindex=\"-1\"\n />\n }\n } @else if (selectionType() === 'text' && !!selectedOptions.length) {\n @for (option of selectedOptions; track option.value; let i = $index, last = $last) {\n <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? ' ' : ', ' }}</span>\n }\n }\n @if (!searchOn) {\n <span class=\"text-placeholder text-truncate\">\n {{ optionsSelected.size === 0 ? placeholderText : counterPlaceholderText }}\n </span>\n } @else {\n <input\n #inputElement\n (keydown)=\"handleSearchKeyDown($event)\"\n (valueChange)=\"handleSearchValueChange($event)\"\n [attr.placeholder]=\"selectedOptions.length === 0 ? placeholderText : counterPlaceholderText\"\n [disabled]=\"isDisabled || !searchOn\"\n [class]=\"{ 'form-multi-select-search': true, disabled: (isDisabled || !searchOn), 'text-truncate': true }\"\n [ngModel]=\"searchValue\"\n [value]=\"searchValue\"\n autocomplete=\"off\"\n cMultiSelectSearch\n size=\"2\"\n tabindex=\"{{ isDisabled ? -1 : 0 }}\"\n type=\"text\"\n >\n }\n </span>\n <div class=\"form-multi-select-buttons\">\n @if (!!cleanerBtn && optionsSelected.size > 0 && !isDisabled) {\n <button\n (click)=\"clearAllOptions($event)\"\n [disabled]=\"isDisabled || (!isDropdownVisible() && cleanerBtn !== 'active')\"\n aria-label=\"Clear all\"\n class=\"form-multi-select-cleaner\"\n type=\"button\"\n ></button>\n }\n <button (click)=\"handleIndicatorClick($event)\"\n [disabled]=\"isDisabled\"\n class=\"form-multi-select-indicator\"\n type=\"button\">\n </button>\n </div>\n </div>\n @if (!isDisabled) {\n <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible()\" cDropdownMenu\n class=\"form-multi-select-dropdown\" role=\"menu\">\n @if (visibleOptions() && options.length > 0) {\n @if (selectAll() && multiple() && !vScroller) {\n <button\n (click)=\"selectAllOptions()\"\n class=\"form-multi-select-all\"\n type=\"button\"\n tabindex=\"0\"\n >\n {{ selectAllLabel() }}\n </button>\n }\n }\n @if ((visibleOptions() && options.length > 0) || loading()) {\n <ng-container *ngTemplateOutlet=\"vScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n } @else {\n <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel() }}</div>\n }\n @if (loading()) {\n <c-element-cover [style]=\"{'border-radius': '6px', 'z-index': 2}\" />\n }\n </div>\n }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n @let itemSizePx = itemSize();\n @let bufferPx = itemSizePx * visibleItems();\n @defer (on immediate) {\n @let optionsArray = multiSelectService?.optionsArray$ | async;\n @if (optionsArray) {\n @let optMaxHeight = optionsMaxHeight();\n @let optMinWidth = minWidth();\n <cdk-virtual-scroll-viewport\n #scrollViewport\n (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n [itemSize]=\"itemSizePx\"\n [ngStyle]=\"optMaxHeight !== 'auto' ? { 'height.px': optMaxHeight, 'maxHeight.px': optMaxHeight, 'minWidth.px': optMinWidth, overflowX: 'hidden' } : { 'minWidth.px': optMinWidth, overflowX: 'hidden'}\"\n maxBufferPx=\"{{bufferPx}}\"\n minBufferPx=\"{{bufferPx}}\"\n class=\"form-multi-select-options\"\n tabindex=\"-1\"\n >\n <ng-container\n #cdkVirtualFor\n *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n />\n </cdk-virtual-scroll-viewport>\n }\n }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n @let optMaxHeight = optionsMaxHeight();\n <div [class.form-multi-select-options]=\"visibleOptions()\" [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, overflowY: 'scroll' } : {}\">\n <ng-content />\n <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n <c-multi-select-option\n [disabled]=\"option.disabled\"\n [label]=\"option.label\"\n [text]=\"option.text\"\n [value]=\"option.value\"\n [visible]=\"option.visible\"\n >\n {{ option.text }}\n </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n <ng-container\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n />\n }\n</ng-template>\n", styles: [":host .disabled{pointer-events:none}:host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;--cui-form-multi-select-focus-box-shadow: 0 0 0 var(--cui-focus-ring-width) rgb(from var(--cui-form-multi-select-focus-border-color) r g b / var(--cui-focus-ring-opacity))}:host.cdk-focused:not(.disabled) .form-multi-select.is-valid{--cui-form-multi-select-focus-border-color: var(--cui-form-valid-border-color)}:host.cdk-focused:not(.disabled) .form-multi-select.is-invalid{--cui-form-multi-select-focus-border-color: var(--cui-form-invalid-border-color)}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-selection.form-control{border:none}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], deferBlockDependencies: [() => [NgTemplateOutlet, import('@angular/cdk/scrolling').then(m => m.CdkFixedSizeVirtualScroll), import('@angular/cdk/scrolling').then(m => m.CdkVirtualScrollViewport), import('@angular/cdk/scrolling').then(m => m.CdkVirtualForOf), NgStyle,
|
|
2938
|
+
], queries: [{ propertyName: "multiSelectOptionsContent", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "optionsElementRef", first: true, predicate: ["options"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: DropdownMenuDirective, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }, { propertyName: "dropdownToggle", first: true, predicate: DropdownToggleDirective, descendants: true, read: ElementRef }, { propertyName: "multiSelectOptionsView", predicate: MultiSelectOptionComponent, descendants: true }, { propertyName: "scrollViewportView", predicate: ["scrollViewport"], descendants: true }], exportAs: ["cMultiSelect"], usesOnChanges: true, ngImport: i0, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n@let selType = selectionType();\n@let selectedSize = optionsSelected().size;\n@let selectedOpts = selectedOptions();\n@let counterPlaceholderTxt = counterPlaceholderText();\n<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [class]=\"multiselectClasses()\"\n [popperOptions]=\"popperOptions()\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"isDisabled\" cDropdownToggle role=\"button\"\n class=\"form-multi-select-input-group\">\n <span [class]=\"multiselectSelectionClasses()\" [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\">\n @if (selType === 'tags') {\n @for (option of optionTags(); track option.value; let i = $index) {\n <c-multi-select-tag\n (remove)=\"handleTagRemove($event)\"\n [disabled]=\"isDisabled || (option.disabled ?? false)\"\n [label]=\"option.label ?? option.value?.toString()\"\n [option]=\"option\"\n [value]=\"option.value\"\n class=\"form-multi-select-tag text-truncate\"\n tabindex=\"-1\"\n />\n }\n } @else if (selType === 'text' && !!selectedOpts.length) {\n @for (option of selectedOpts; track option.value; let i = $index, last = $last) {\n <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? ' ' : ', ' }}</span>\n }\n }\n @if (!searchOn) {\n <span class=\"text-placeholder text-truncate\">\n {{ selectedSize === 0 ? placeholderText : counterPlaceholderTxt }}\n </span>\n } @else {\n <input\n #inputElement\n (keydown)=\"handleSearchKeyDown($event)\"\n (valueChange)=\"handleSearchValueChange($event)\"\n [attr.placeholder]=\"selectedOpts.length === 0 ? placeholderText : counterPlaceholderTxt\"\n [disabled]=\"isDisabled || !searchOn\"\n [class]=\"{ 'form-multi-select-search': true, disabled: (isDisabled || !searchOn), 'text-truncate': true }\"\n [ngModel]=\"searchValue\"\n [value]=\"searchValue\"\n autocomplete=\"off\"\n cMultiSelectSearch\n size=\"2\"\n tabindex=\"{{ isDisabled ? -1 : 0 }}\"\n type=\"text\"\n >\n }\n </span>\n <div class=\"form-multi-select-buttons\">\n @if (!!cleanerBtn && selectedSize > 0 && !isDisabled) {\n <button\n (click)=\"clearAllOptions($event)\"\n [disabled]=\"isDisabled || (!isDropdownVisible() && cleanerBtn !== 'active')\"\n aria-label=\"Clear all\"\n class=\"form-multi-select-cleaner\"\n type=\"button\"\n ></button>\n }\n <button (click)=\"handleIndicatorClick($event)\"\n [disabled]=\"isDisabled\"\n class=\"form-multi-select-indicator\"\n type=\"button\">\n </button>\n </div>\n </div>\n @if (!isDisabled) {\n <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible()\" cDropdownMenu\n class=\"form-multi-select-dropdown\" role=\"menu\">\n @if (visibleOptions() && options.length > 0) {\n @if (selectAll() && multiple() && !vScroller) {\n <button\n (click)=\"selectAllOptions()\"\n class=\"form-multi-select-all\"\n type=\"button\"\n tabindex=\"0\"\n >\n {{ selectAllLabel() }}\n </button>\n }\n }\n @if ((visibleOptions() && options.length > 0) || loading()) {\n <ng-container *ngTemplateOutlet=\"vScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n } @else {\n <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel() }}</div>\n }\n @if (loading()) {\n <c-element-cover [style]=\"{'border-radius': '6px', 'z-index': 2}\" />\n }\n </div>\n }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n @let itemSizePx = itemSize();\n @let bufferPx = itemSizePx * visibleItems();\n @defer (on immediate) {\n @let optionsArray = multiSelectService?.optionsArray$ | async;\n @if (optionsArray) {\n @let optMaxHeight = optionsMaxHeight();\n @let optMinWidth = minWidth();\n <cdk-virtual-scroll-viewport\n #scrollViewport\n (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n [itemSize]=\"itemSizePx\"\n [ngStyle]=\"optMaxHeight !== 'auto' ? { 'height.px': optMaxHeight, 'maxHeight.px': optMaxHeight, 'minWidth.px': optMinWidth, overflowX: 'hidden' } : { 'minWidth.px': optMinWidth, overflowX: 'hidden'}\"\n maxBufferPx=\"{{bufferPx}}\"\n minBufferPx=\"{{bufferPx}}\"\n class=\"form-multi-select-options\"\n tabindex=\"-1\"\n >\n <ng-container\n #cdkVirtualFor\n *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n />\n </cdk-virtual-scroll-viewport>\n }\n }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n @let optMaxHeight = optionsMaxHeight();\n <div [class.form-multi-select-options]=\"visibleOptions()\" [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, overflowY: 'scroll' } : {}\">\n <ng-content />\n <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n <c-multi-select-option\n [disabled]=\"option.disabled\"\n [label]=\"option.label\"\n [text]=\"option.text\"\n [value]=\"option.value\"\n [visible]=\"option.visible\"\n >\n {{ option.text }}\n </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n <ng-container\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n />\n }\n</ng-template>\n", styles: [":host .disabled{pointer-events:none}:host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;--cui-form-multi-select-focus-box-shadow: 0 0 0 var(--cui-focus-ring-width) rgb(from var(--cui-form-multi-select-focus-border-color) r g b / var(--cui-focus-ring-opacity))}:host.cdk-focused:not(.disabled) .form-multi-select.is-valid{--cui-form-multi-select-focus-border-color: var(--cui-form-valid-border-color)}:host.cdk-focused:not(.disabled) .form-multi-select.is-invalid{--cui-form-multi-select-focus-border-color: var(--cui-form-invalid-border-color)}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-selection.form-control{border:none}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MultiSelectTagComponent, selector: "c-multi-select-tag", inputs: ["option", "disabled", "label", "value"], outputs: ["remove"] }, { kind: "component", type: MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: MultiSelectSearchDirective, selector: "[cMultiSelectSearch]", inputs: ["delay", "value"], outputs: ["valueChange"], exportAs: ["cMultiSelectSearch"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "component", type: ElementCoverComponent, selector: "c-element-cover, [cElementCover]", inputs: ["boundaries", "opacity"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], deferBlockDependencies: [() => [NgTemplateOutlet, import('@angular/cdk/scrolling').then(m => m.CdkFixedSizeVirtualScroll), import('@angular/cdk/scrolling').then(m => m.CdkVirtualScrollViewport), import('@angular/cdk/scrolling').then(m => m.CdkVirtualForOf), NgStyle,
|
|
2921
2939
|
AsyncPipe]] });
|
|
2922
2940
|
}
|
|
2923
2941
|
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.5", ngImport: i0, type: MultiSelectComponent, resolveDeferredDeps: () => [import('@angular/cdk/scrolling').then(m => m.CdkFixedSizeVirtualScroll), import('@angular/cdk/scrolling').then(m => m.CdkVirtualScrollViewport), import('@angular/cdk/scrolling').then(m => m.CdkVirtualForOf)], resolveMetadata: (CdkFixedSizeVirtualScroll, CdkVirtualScrollViewport, CdkVirtualForOf) => ({ decorators: [{
|
|
@@ -2954,7 +2972,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.5", ng
|
|
|
2954
2972
|
'[attr.aria-expanded]': 'visible()',
|
|
2955
2973
|
'[attr.aria-disabled]': 'disabled()',
|
|
2956
2974
|
'[attr.tabindex]': 'tabIndex'
|
|
2957
|
-
}, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [class]=\"multiselectClasses()\"\n [popperOptions]=\"popperOptions()\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"isDisabled\" cDropdownToggle role=\"button\"\n class=\"form-multi-select-input-group\">\n <span [class]=\"multiselectSelectionClasses()\" [class.form-multi-select-selection-tags]=\"
|
|
2975
|
+
}, template: "@let isDisabled = disabled();\n@let placeholderText = placeholder();\n@let searchOn = search();\n@let cleanerBtn = cleaner();\n@let vScroller = virtualScroller();\n@let selType = selectionType();\n@let selectedSize = optionsSelected().size;\n@let selectedOpts = selectedOptions();\n@let counterPlaceholderTxt = counterPlaceholderText();\n<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [class]=\"multiselectClasses()\"\n [popperOptions]=\"popperOptions()\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"isDisabled\" cDropdownToggle role=\"button\"\n class=\"form-multi-select-input-group\">\n <span [class]=\"multiselectSelectionClasses()\" [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\">\n @if (selType === 'tags') {\n @for (option of optionTags(); track option.value; let i = $index) {\n <c-multi-select-tag\n (remove)=\"handleTagRemove($event)\"\n [disabled]=\"isDisabled || (option.disabled ?? false)\"\n [label]=\"option.label ?? option.value?.toString()\"\n [option]=\"option\"\n [value]=\"option.value\"\n class=\"form-multi-select-tag text-truncate\"\n tabindex=\"-1\"\n />\n }\n } @else if (selType === 'text' && !!selectedOpts.length) {\n @for (option of selectedOpts; track option.value; let i = $index, last = $last) {\n <span class=\"form-multi-select-text text-truncate\">{{ option.label }}{{ last ? ' ' : ', ' }}</span>\n }\n }\n @if (!searchOn) {\n <span class=\"text-placeholder text-truncate\">\n {{ selectedSize === 0 ? placeholderText : counterPlaceholderTxt }}\n </span>\n } @else {\n <input\n #inputElement\n (keydown)=\"handleSearchKeyDown($event)\"\n (valueChange)=\"handleSearchValueChange($event)\"\n [attr.placeholder]=\"selectedOpts.length === 0 ? placeholderText : counterPlaceholderTxt\"\n [disabled]=\"isDisabled || !searchOn\"\n [class]=\"{ 'form-multi-select-search': true, disabled: (isDisabled || !searchOn), 'text-truncate': true }\"\n [ngModel]=\"searchValue\"\n [value]=\"searchValue\"\n autocomplete=\"off\"\n cMultiSelectSearch\n size=\"2\"\n tabindex=\"{{ isDisabled ? -1 : 0 }}\"\n type=\"text\"\n >\n }\n </span>\n <div class=\"form-multi-select-buttons\">\n @if (!!cleanerBtn && selectedSize > 0 && !isDisabled) {\n <button\n (click)=\"clearAllOptions($event)\"\n [disabled]=\"isDisabled || (!isDropdownVisible() && cleanerBtn !== 'active')\"\n aria-label=\"Clear all\"\n class=\"form-multi-select-cleaner\"\n type=\"button\"\n ></button>\n }\n <button (click)=\"handleIndicatorClick($event)\"\n [disabled]=\"isDisabled\"\n class=\"form-multi-select-indicator\"\n type=\"button\">\n </button>\n </div>\n </div>\n @if (!isDisabled) {\n <div #dropdownMenu=\"cDropdownMenu\" [visible]=\"dropdown.visible()\" cDropdownMenu\n class=\"form-multi-select-dropdown\" role=\"menu\">\n @if (visibleOptions() && options.length > 0) {\n @if (selectAll() && multiple() && !vScroller) {\n <button\n (click)=\"selectAllOptions()\"\n class=\"form-multi-select-all\"\n type=\"button\"\n tabindex=\"0\"\n >\n {{ selectAllLabel() }}\n </button>\n }\n }\n @if ((visibleOptions() && options.length > 0) || loading()) {\n <ng-container *ngTemplateOutlet=\"vScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n } @else {\n <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel() }}</div>\n }\n @if (loading()) {\n <c-element-cover [style]=\"{'border-radius': '6px', 'z-index': 2}\" />\n }\n </div>\n }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n @let itemSizePx = itemSize();\n @let bufferPx = itemSizePx * visibleItems();\n @defer (on immediate) {\n @let optionsArray = multiSelectService?.optionsArray$ | async;\n @if (optionsArray) {\n @let optMaxHeight = optionsMaxHeight();\n @let optMinWidth = minWidth();\n <cdk-virtual-scroll-viewport\n #scrollViewport\n (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n [itemSize]=\"itemSizePx\"\n [ngStyle]=\"optMaxHeight !== 'auto' ? { 'height.px': optMaxHeight, 'maxHeight.px': optMaxHeight, 'minWidth.px': optMinWidth, overflowX: 'hidden' } : { 'minWidth.px': optMinWidth, overflowX: 'hidden'}\"\n maxBufferPx=\"{{bufferPx}}\"\n minBufferPx=\"{{bufferPx}}\"\n class=\"form-multi-select-options\"\n tabindex=\"-1\"\n >\n <ng-container\n #cdkVirtualFor\n *cdkVirtualFor=\"let option of optionsArray; trackBy: trackByFn; templateCacheSize: 0; even as even; odd as odd; index as index; count as count; first as first; last as last;\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n />\n </cdk-virtual-scroll-viewport>\n }\n }\n</ng-template>\n\n<ng-template #multiselectOptionsDiv>\n @let optMaxHeight = optionsMaxHeight();\n <div [class.form-multi-select-options]=\"visibleOptions()\" [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, overflowY: 'scroll' } : {}\">\n <ng-content />\n <ng-container [ngTemplateOutlet]=\"userOptionsTemplate\" />\n </div>\n</ng-template>\n\n<ng-template #defaultMultiSelectOptionTemplate let-option>\n <c-multi-select-option\n [disabled]=\"option.disabled\"\n [label]=\"option.label\"\n [text]=\"option.text\"\n [value]=\"option.value\"\n [visible]=\"option.visible\"\n >\n {{ option.text }}\n </c-multi-select-option>\n</ng-template>\n\n<ng-template #userOptionsTemplate>\n @for (option of userOptionsArray$ | async; track option; let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last) {\n <ng-container\n [ngTemplateOutlet]=\"templates['multiSelectOptionTemplate'] || defaultMultiSelectOptionTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: option, even, odd, index, count, first, last}\"\n />\n }\n</ng-template>\n", styles: [":host .disabled{pointer-events:none}:host{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;--cui-form-multi-select-focus-box-shadow: 0 0 0 var(--cui-focus-ring-width) rgb(from var(--cui-form-multi-select-focus-border-color) r g b / var(--cui-focus-ring-opacity))}:host.cdk-focused:not(.disabled) .form-multi-select.is-valid{--cui-form-multi-select-focus-border-color: var(--cui-form-valid-border-color)}:host.cdk-focused:not(.disabled) .form-multi-select.is-invalid{--cui-form-multi-select-focus-border-color: var(--cui-form-invalid-border-color)}:host .form-multi-select .form-multi-select-selection{display:flex;flex:1 1 auto;flex-wrap:wrap}:host .form-multi-select .form-multi-select-selection .text-placeholder,:host .form-multi-select .form-multi-select-selection .form-multi-select-search::placeholder{color:var(--cui-form-multi-select-color);opacity:.8}:host .form-multi-select .form-multi-select-selection.form-control{border:none}:host .form-multi-select .form-multi-select-search[size]{display:flex}:host ::ng-deep .cdk-virtual-scroll-content-wrapper{padding:var(--cui-form-multi-select-options-padding-y) var(--cui-form-multi-select-options-padding-x);font-size:1rem;color:var(--cui-form-multi-select-options-color)}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}\n"] }]
|
|
2958
2976
|
}], ctorParameters: () => [], propDecorators: { allowCreateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreateOptions", required: false }] }], cleaner: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleaner", required: false }] }], clearSearchOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSearchOnSelect", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], options: [{
|
|
2959
2977
|
type: Input
|
|
2960
2978
|
}], optionsMaxHeightInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsMaxHeight", required: false }] }], optionsStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsStyle", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], resetSelectionOnOptionsChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetSelectionOnOptionsChange", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchNoResultsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchNoResultsLabel", required: false }] }], searchValue: [{
|
|
@@ -11825,6 +11843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
11825
11843
|
}] });
|
|
11826
11844
|
|
|
11827
11845
|
class MultiSelectOptgroupComponent {
|
|
11846
|
+
static ngAcceptInputType_disabled;
|
|
11828
11847
|
#destroyRef = inject(DestroyRef);
|
|
11829
11848
|
#multiSelectService = inject(MultiSelectService);
|
|
11830
11849
|
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|