@coreui/angular-pro 5.0.0-alpha.2 → 5.0.0-alpha.4
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/esm2022/lib/multi-select/multi-select/multi-select.component.mjs +21 -24
- package/esm2022/lib/multi-select/multi-select-optgroup/multi-select-optgroup.component.mjs +3 -4
- package/esm2022/lib/multi-select/multi-select-option/multi-select-option.component.mjs +6 -7
- package/esm2022/lib/multi-select/multi-select-tag/multi-select-tag.component.mjs +12 -11
- package/esm2022/lib/multi-select/multi-select.type.mjs +1 -1
- package/fesm2022/coreui-angular-pro.mjs +36 -38
- package/fesm2022/coreui-angular-pro.mjs.map +1 -1
- package/lib/multi-select/multi-select/multi-select.component.d.ts +12 -12
- package/lib/multi-select/multi-select-option/multi-select-option.component.d.ts +4 -4
- package/lib/multi-select/multi-select-tag/multi-select-tag.component.d.ts +2 -4
- package/lib/multi-select/multi-select.type.d.ts +4 -4
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ import { animate, animation, style, useAnimation, state, transition, trigger, qu
|
|
|
8
8
|
import { Subject, BehaviorSubject, Observable, fromEvent, withLatestFrom, zipWith, skip, distinctUntilChanged as distinctUntilChanged$1, map as map$1, debounceTime as debounceTime$1 } from 'rxjs';
|
|
9
9
|
import * as i1$1 from '@angular/router';
|
|
10
10
|
import { RouterModule, NavigationEnd, RouterLink } from '@angular/router';
|
|
11
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
11
|
+
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
12
12
|
import { filter, tap, distinctUntilChanged, take, debounceTime, map, delay, combineLatestWith } from 'rxjs/operators';
|
|
13
13
|
import * as i1$2 from '@angular/cdk/a11y';
|
|
14
14
|
import { FocusMonitor, A11yModule, FocusKeyManager } from '@angular/cdk/a11y';
|
|
@@ -9312,7 +9312,7 @@ class MultiSelectOptionComponent {
|
|
|
9312
9312
|
* @type ('checkbox' | 'text')
|
|
9313
9313
|
* @default 'checkbox'
|
|
9314
9314
|
*/
|
|
9315
|
-
this.optionsStyle = this.multiSelectService
|
|
9315
|
+
this.optionsStyle = this.multiSelectService?.optionsStyle ?? 'checkbox';
|
|
9316
9316
|
this.#visible = signal(true);
|
|
9317
9317
|
/**
|
|
9318
9318
|
* Option disabled.
|
|
@@ -9380,7 +9380,7 @@ class MultiSelectOptionComponent {
|
|
|
9380
9380
|
#selected;
|
|
9381
9381
|
/**
|
|
9382
9382
|
* Option value.
|
|
9383
|
-
* @type string
|
|
9383
|
+
* @type string | number
|
|
9384
9384
|
* @default undefined
|
|
9385
9385
|
*/
|
|
9386
9386
|
set value(value) {
|
|
@@ -9473,7 +9473,7 @@ class MultiSelectOptionComponent {
|
|
|
9473
9473
|
}
|
|
9474
9474
|
if (this.text === undefined) {
|
|
9475
9475
|
const innerText = this.elementRef.nativeElement.textContent.trim() || this.elementRef.nativeElement.innerText.trim();
|
|
9476
|
-
this.text = innerText || this.value?.trim();
|
|
9476
|
+
this.text = innerText || this.value?.toString().trim();
|
|
9477
9477
|
}
|
|
9478
9478
|
if (this.label === undefined) {
|
|
9479
9479
|
this.label = this.text?.trim();
|
|
@@ -9525,11 +9525,11 @@ class MultiSelectOptionComponent {
|
|
|
9525
9525
|
return (this.#selected() || this.multiSelectService.selectionModel?.isSelected(value)) ?? false;
|
|
9526
9526
|
}
|
|
9527
9527
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MultiSelectOptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.FocusMonitor }, { token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9528
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: MultiSelectOptionComponent, isStandalone: true, selector: "c-multi-select-option", inputs: { optionsStyle: "optionsStyle", label: "label", text: "text", visible: ["visible", "visible", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], selected: "selected", value: "value", active: ["active", "active", booleanAttribute], role: "role" }, outputs: { selectedChange: "selectedChange", focusChange: "focusChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "blur": "onBlur()", "focus": "onFocus()", "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "role": "this.role", "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "contentDiv", first: true, predicate: ["contentDiv"], descendants: true }], exportAs: ["cMultiSelectOption"], ngImport: i0, template: "<div #contentDiv>\n <ng-content></ng-content>\n</div>\n@if (!hasContent()) {\n <div>\n {{text ?? label ?? value}}\n </div>\n}\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden}:host.active{border-radius:var(--cui-form-multi-select-option-indicator-border-radius, .375rem);box-shadow:0 0 .125rem 0 var(--cui-gray-400)}:host.focused,:host :focus-visible{box-shadow:0 0 0 .125rem #321fdb40;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9528
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: MultiSelectOptionComponent, isStandalone: true, selector: "c-multi-select-option", inputs: { optionsStyle: "optionsStyle", label: "label", text: "text", visible: ["visible", "visible", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], selected: "selected", value: "value", active: ["active", "active", booleanAttribute], role: "role" }, outputs: { selectedChange: "selectedChange", focusChange: "focusChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "blur": "onBlur()", "focus": "onFocus()", "keyup": "onKeyUp($event)", "click": "onClick($event)" }, properties: { "role": "this.role", "class": "this.hostClasses", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.ariaDisabled", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-selected": "this.ariaSelected" } }, viewQueries: [{ propertyName: "contentDiv", first: true, predicate: ["contentDiv"], descendants: true }], exportAs: ["cMultiSelectOption"], ngImport: i0, template: "<div #contentDiv>\n <ng-content></ng-content>\n</div>\n@if (!hasContent()) {\n <div>\n {{ text ?? label ?? value?.toString() }}\n </div>\n}\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden}:host.active{border-radius:var(--cui-form-multi-select-option-indicator-border-radius, .375rem);box-shadow:0 0 .125rem 0 var(--cui-gray-400)}:host.focused,:host :focus-visible{box-shadow:0 0 0 .125rem #321fdb40;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9529
9529
|
}
|
|
9530
9530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MultiSelectOptionComponent, decorators: [{
|
|
9531
9531
|
type: Component,
|
|
9532
|
-
args: [{ selector: 'c-multi-select-option', exportAs: 'cMultiSelectOption', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true,
|
|
9532
|
+
args: [{ selector: 'c-multi-select-option', exportAs: 'cMultiSelectOption', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div #contentDiv>\n <ng-content></ng-content>\n</div>\n@if (!hasContent()) {\n <div>\n {{ text ?? label ?? value?.toString() }}\n </div>\n}\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden}:host.active{border-radius:var(--cui-form-multi-select-option-indicator-border-radius, .375rem);box-shadow:0 0 .125rem 0 var(--cui-gray-400)}:host.focused,:host :focus-visible{box-shadow:0 0 0 .125rem #321fdb40;outline:none}\n"] }]
|
|
9533
9533
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.FocusMonitor }, { type: MultiSelectService }], propDecorators: { optionsStyle: [{
|
|
9534
9534
|
type: Input
|
|
9535
9535
|
}], label: [{
|
|
@@ -9633,11 +9633,11 @@ class MultiSelectOptgroupComponent {
|
|
|
9633
9633
|
}), takeUntilDestroyed(this.#destroyRef)).subscribe();
|
|
9634
9634
|
}
|
|
9635
9635
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MultiSelectOptgroupComponent, deps: [{ token: MultiSelectService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9636
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
9636
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: MultiSelectOptgroupComponent, isStandalone: true, selector: "c-multi-select-optgroup", inputs: { label: "label", disabled: "disabled" }, host: { properties: { "class": "this.hostClasses" } }, queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (label && visible()) {\n <c-multi-select-optgroup-label>{{ label }}</c-multi-select-optgroup-label>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9637
9637
|
}
|
|
9638
9638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MultiSelectOptgroupComponent, decorators: [{
|
|
9639
9639
|
type: Component,
|
|
9640
|
-
args: [{ selector: 'c-multi-select-optgroup', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MultiSelectOptgroupLabelComponent
|
|
9640
|
+
args: [{ selector: 'c-multi-select-optgroup', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MultiSelectOptgroupLabelComponent], template: "@if (label && visible()) {\n <c-multi-select-optgroup-label>{{ label }}</c-multi-select-optgroup-label>\n}\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
|
|
9641
9641
|
}], ctorParameters: () => [{ type: MultiSelectService }], propDecorators: { label: [{
|
|
9642
9642
|
type: Input
|
|
9643
9643
|
}], disabled: [{
|
|
@@ -9677,12 +9677,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
9677
9677
|
}] } });
|
|
9678
9678
|
|
|
9679
9679
|
class MultiSelectTagComponent {
|
|
9680
|
-
constructor(
|
|
9681
|
-
this
|
|
9682
|
-
this.multiselectVisible
|
|
9680
|
+
constructor() {
|
|
9681
|
+
this.#multiSelectService = inject(MultiSelectService);
|
|
9682
|
+
this.multiselectVisible = toSignal(this.#multiSelectService.multiSelectVisible$);
|
|
9683
9683
|
this.disabled = true;
|
|
9684
9684
|
this.remove = new EventEmitter();
|
|
9685
9685
|
}
|
|
9686
|
+
#multiSelectService;
|
|
9686
9687
|
get hostClasses() {
|
|
9687
9688
|
return {
|
|
9688
9689
|
'form-multi-select-tag': true
|
|
@@ -9694,13 +9695,13 @@ class MultiSelectTagComponent {
|
|
|
9694
9695
|
this.remove.emit(this.value);
|
|
9695
9696
|
}
|
|
9696
9697
|
}
|
|
9697
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MultiSelectTagComponent, deps: [
|
|
9698
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
9698
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MultiSelectTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9699
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.7", type: MultiSelectTagComponent, isStandalone: true, selector: "c-multi-select-tag", inputs: { option: "option", disabled: "disabled", label: "label", value: "value" }, outputs: { remove: "remove" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<span class=\"text-truncate\">{{ label ?? value?.toString() ?? '???' }}</span>\n@if (!disabled) {\n <button (click)=\"handleRemove($event)\"\n [disabled]=\"((multiselectVisible()) ?? true) === false\"\n aria-label=\"Clear\"\n class=\"form-multi-select-tag-delete\"\n type=\"button\">\n </button>\n}\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all;align-items:center;display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
9699
9700
|
}
|
|
9700
9701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MultiSelectTagComponent, decorators: [{
|
|
9701
9702
|
type: Component,
|
|
9702
|
-
args: [{ selector: 'c-multi-select-tag', standalone: true,
|
|
9703
|
-
}],
|
|
9703
|
+
args: [{ selector: 'c-multi-select-tag', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"text-truncate\">{{ label ?? value?.toString() ?? '???' }}</span>\n@if (!disabled) {\n <button (click)=\"handleRemove($event)\"\n [disabled]=\"((multiselectVisible()) ?? true) === false\"\n aria-label=\"Clear\"\n class=\"form-multi-select-tag-delete\"\n type=\"button\">\n </button>\n}\n", styles: [":host .btn-xs{padding-left:.125rem;padding-right:.125rem;font-size:.575rem;border-radius:.2rem}:host.form-multi-select-tag{-webkit-user-select:none;user-select:none;pointer-events:all;align-items:center;display:flex}\n"] }]
|
|
9704
|
+
}], propDecorators: { option: [{
|
|
9704
9705
|
type: Input
|
|
9705
9706
|
}], disabled: [{
|
|
9706
9707
|
type: Input
|
|
@@ -9923,7 +9924,7 @@ class MultiSelectComponent {
|
|
|
9923
9924
|
this.#value = [];
|
|
9924
9925
|
/**
|
|
9925
9926
|
* Emits valueChange
|
|
9926
|
-
* @type
|
|
9927
|
+
* @type T | T[]
|
|
9927
9928
|
*/
|
|
9928
9929
|
this.valueChange = new EventEmitter();
|
|
9929
9930
|
this._virtualScroller = false;
|
|
@@ -9973,7 +9974,7 @@ class MultiSelectComponent {
|
|
|
9973
9974
|
#options;
|
|
9974
9975
|
#optionsContent;
|
|
9975
9976
|
writeValue(value) {
|
|
9976
|
-
if (value
|
|
9977
|
+
if ((value !== undefined && value !== null)) {
|
|
9977
9978
|
this.value = Array.isArray(value) ? [...value] : [value];
|
|
9978
9979
|
}
|
|
9979
9980
|
else {
|
|
@@ -10065,10 +10066,10 @@ class MultiSelectComponent {
|
|
|
10065
10066
|
}
|
|
10066
10067
|
/**
|
|
10067
10068
|
* Initial value of multi-select
|
|
10068
|
-
* @type
|
|
10069
|
+
* @type T | T[]
|
|
10069
10070
|
*/
|
|
10070
10071
|
set value(value) {
|
|
10071
|
-
const newValue = Array.isArray(value) ? [...value] : [value
|
|
10072
|
+
const newValue = Array.isArray(value) ? [...value] : [value];
|
|
10072
10073
|
if (this.differ) {
|
|
10073
10074
|
const changes = this.differ.diff(newValue);
|
|
10074
10075
|
if (changes) {
|
|
@@ -10081,7 +10082,7 @@ class MultiSelectComponent {
|
|
|
10081
10082
|
}
|
|
10082
10083
|
get value() {
|
|
10083
10084
|
const value = this.multiSelectService.selectionModel?.selected ?? [...this.#value];
|
|
10084
|
-
return this.multiple ? [...value] : value
|
|
10085
|
+
return this.multiple ? [...value] : value;
|
|
10085
10086
|
}
|
|
10086
10087
|
#value;
|
|
10087
10088
|
/**
|
|
@@ -10140,18 +10141,15 @@ class MultiSelectComponent {
|
|
|
10140
10141
|
}
|
|
10141
10142
|
;
|
|
10142
10143
|
get counterPlaceholderText() {
|
|
10143
|
-
if (this.selectedOptions.length === 0) {
|
|
10144
|
+
if (this.selectedOptions.length === 0 || this.selectionType !== 'counter') {
|
|
10144
10145
|
return null;
|
|
10145
10146
|
}
|
|
10146
|
-
if (this.
|
|
10147
|
-
|
|
10148
|
-
|
|
10149
|
-
|
|
10150
|
-
|
|
10151
|
-
return `${this.selectedOptions.length} ${this.#i18nPlural.transform(this.selectedOptions.length, this.selectionTypeCounterTextPluralMap ?? { other: this.selectionTypeCounterText ?? '+' })}`;
|
|
10152
|
-
}
|
|
10147
|
+
if (this.counterTextType === 'string') {
|
|
10148
|
+
return this.counterText;
|
|
10149
|
+
}
|
|
10150
|
+
else {
|
|
10151
|
+
return `${this.selectedOptions.length} ${this.#i18nPlural.transform(this.selectedOptions.length, this.selectionTypeCounterTextPluralMap ?? { other: this.selectionTypeCounterText ?? '+' })}`;
|
|
10153
10152
|
}
|
|
10154
|
-
return null;
|
|
10155
10153
|
}
|
|
10156
10154
|
get hostClasses() {
|
|
10157
10155
|
return {
|
|
@@ -10425,10 +10423,10 @@ class MultiSelectComponent {
|
|
|
10425
10423
|
const key = option.value;
|
|
10426
10424
|
const value = {
|
|
10427
10425
|
value: option.value ?? option.label,
|
|
10428
|
-
label: option.label ?? option.value,
|
|
10426
|
+
label: option.label ?? option.value?.toString(),
|
|
10429
10427
|
disabled: option.disabled === true,
|
|
10430
10428
|
visible: this.search === 'external' ? true : option.custom && option.selected ? option.visible : option.visible !== false,
|
|
10431
|
-
text: option.text ?? option.label ?? option.value,
|
|
10429
|
+
text: option.text ?? option.label ?? option.value?.toString(),
|
|
10432
10430
|
selected: option.selected,
|
|
10433
10431
|
custom: option.custom
|
|
10434
10432
|
// selected: this.multiSelectService.selectionModel.isSelected(option.value),
|
|
@@ -10536,11 +10534,11 @@ class MultiSelectComponent {
|
|
|
10536
10534
|
const enabledOptions = Array.from(this.optionsSelected.values()).filter(option => !option.disabled).map(option => option.value);
|
|
10537
10535
|
this.multiSelectService.selectionModel.deselect(...enabledOptions);
|
|
10538
10536
|
this.removeAllUserOptions();
|
|
10537
|
+
this.searchValue = '';
|
|
10538
|
+
if ($event) {
|
|
10539
|
+
this.setFocus('program', 'clearAllOptions');
|
|
10540
|
+
}
|
|
10539
10541
|
});
|
|
10540
|
-
this.searchValue = '';
|
|
10541
|
-
if ($event) {
|
|
10542
|
-
this.setFocus('program', 'clearAllOptions');
|
|
10543
|
-
}
|
|
10544
10542
|
}
|
|
10545
10543
|
selectAllOptions() {
|
|
10546
10544
|
const enabledOptions = Array.from(this.#options.values()).filter(option => option.visible && !option.disabled).map(option => option.value);
|
|
@@ -10555,7 +10553,7 @@ class MultiSelectComponent {
|
|
|
10555
10553
|
if (this.disabled) {
|
|
10556
10554
|
return;
|
|
10557
10555
|
}
|
|
10558
|
-
const element = (this.inputElement
|
|
10556
|
+
const element = (this.inputElement?.nativeElement ?? this.elementRef.nativeElement);
|
|
10559
10557
|
const preventScroll = origin === 'program';
|
|
10560
10558
|
this.focusMonitor?.focusVia(element, origin, { preventScroll: preventScroll });
|
|
10561
10559
|
// console.log('setFocus', origin, methodName, 'preventScroll:', preventScroll, element.tagName, this.value);
|
|
@@ -10827,7 +10825,7 @@ class MultiSelectComponent {
|
|
|
10827
10825
|
{
|
|
10828
10826
|
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => MultiSelectComponent), multi: true
|
|
10829
10827
|
}
|
|
10830
|
-
], 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: ["dropdownMenu"], descendants: true }, { 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: "<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [ngClass]=\"multiselectClasses\"\n [popperOptions]=\"popperjsOptions\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle\n class=\"form-multi-select-input-group\">\n <span\n [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n @if (selectionType === 'tags') {\n @if (optionsSelected$ | async;as optionTags) {\n @for (option of optionTags;track option.value;let i = $index) {\n <c-multi-select-tag\n (remove)=\"handleTagRemove($event)\"\n [disabled]=\"option.disabled ?? false\"\n [label]=\"option.label ?? option.value\"\n [option]=\"option\"\n [value]=\"option.value\"\n class=\"form-multi-select-tag\"\n tabindex=\"-1\"\n />\n }\n }\n } @else if (selectionType === 'text' && !!selectedOptionsText) {\n <span>{{ selectedOptionsText }}{{ search ? ' ' : '' }}</span>\n }\n @if (!search) {\n <span class=\"text-muted\">\n {{ counterPlaceholderText ?? (selectedOptions.length === 0 ? placeholder : null) }}\n </span>\n }\n @if (search) {\n <input\n #inputElement\n (keydown)=\"handleSearchKeyDown($event)\"\n (valueChange)=\"handleSearchValueChange($event)\"\n [attr.placeholder]=\"optionsSelected.size === 0 ? placeholder : counterPlaceholderText\"\n [disabled]=\"disabled || !search\"\n [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search) }\"\n [ngModel]=\"searchValue\"\n [value]=\"searchValue\"\n autocomplete=\"off\"\n cMultiSelectSearch\n size=\"3\"\n tabindex=\"{{ disabled ? -1 : 0 }}\"\n type=\"text\"\n >\n }\n </span>\n <div class=\"form-multi-select-buttons\">\n @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n <button\n (click)=\"clearAllOptions($event)\"\n [disabled]=\"disabled || (!isDropdownVisible && cleaner !== '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]=\"disabled\"\n class=\"form-multi-select-indicator\"\n type=\"button\">\n </button>\n </div>\n </div>\n @if (!disabled) {\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 && !virtualScroller) {\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) || isLoading()) {\n <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n } @else {\n <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n }\n @if (isLoading()) {\n <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n }\n </div>\n }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n @defer {\n @if ((optionsArray$ | async);as optionsArray) {\n <cdk-virtual-scroll-viewport\n #scrollViewport\n (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n [itemSize]=\"itemSize\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n maxBufferPx=\"{{itemSize * visibleItems}}\"\n minBufferPx=\"{{itemSize * visibleItems}}\"\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 <div\n [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n >\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{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host.cdk-focused:not(.disabled) .form-multi-select .form-multi-select-search{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: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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"] }] }); }
|
|
10828
|
+
], 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: ["dropdownMenu"], descendants: true }, { 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: "<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [ngClass]=\"multiselectClasses\"\n [popperOptions]=\"popperjsOptions\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n class=\"form-multi-select-input-group\">\n <span\n [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n @if (selectionType === 'tags') {\n @if (optionsSelected$ | async;as optionTags) {\n @for (option of optionTags;track option.value;let i = $index) {\n <c-multi-select-tag\n (remove)=\"handleTagRemove($event)\"\n [disabled]=\"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 }\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 (!search) {\n <span class=\"text-placeholder text-truncate\">\n {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n </span>\n }\n @if (search) {\n <input\n #inputElement\n (keydown)=\"handleSearchKeyDown($event)\"\n (valueChange)=\"handleSearchValueChange($event)\"\n [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n [disabled]=\"disabled || !search\"\n [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n [ngModel]=\"searchValue\"\n [value]=\"searchValue\"\n autocomplete=\"off\"\n cMultiSelectSearch\n size=\"2\"\n tabindex=\"{{ disabled ? -1 : 0 }}\"\n type=\"text\"\n >\n }\n </span>\n <div class=\"form-multi-select-buttons\">\n @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n <button\n (click)=\"clearAllOptions($event)\"\n [disabled]=\"disabled || (!isDropdownVisible && cleaner !== '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]=\"disabled\"\n class=\"form-multi-select-indicator\"\n type=\"button\">\n </button>\n </div>\n </div>\n @if (!disabled) {\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 && !virtualScroller) {\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) || isLoading()) {\n <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n } @else {\n <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n }\n @if (isLoading()) {\n <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n }\n </div>\n }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n @defer {\n @if ((optionsArray$ | async);as optionsArray) {\n <cdk-virtual-scroll-viewport\n #scrollViewport\n (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n [itemSize]=\"itemSize\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n maxBufferPx=\"{{itemSize * visibleItems}}\"\n minBufferPx=\"{{itemSize * visibleItems}}\"\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 <div\n [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n >\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{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}: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-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: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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"] }] }); }
|
|
10831
10829
|
}
|
|
10832
10830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
10833
10831
|
type: Component,
|
|
@@ -10855,7 +10853,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImpor
|
|
|
10855
10853
|
DropdownMenuDirective,
|
|
10856
10854
|
DropdownToggleDirective,
|
|
10857
10855
|
ElementCoverComponent
|
|
10858
|
-
], template: "<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [ngClass]=\"multiselectClasses\"\n [popperOptions]=\"popperjsOptions\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle\n class=\"form-multi-select-input-group\">\n <span\n [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n @if (selectionType === 'tags') {\n @if (optionsSelected$ | async;as optionTags) {\n @for (option of optionTags;track option.value;let i = $index) {\n <c-multi-select-tag\n (remove)=\"handleTagRemove($event)\"\n [disabled]=\"option.disabled ?? false\"\n [label]=\"option.label ?? option.value\"\n [option]=\"option\"\n [value]=\"option.value\"\n class=\"form-multi-select-tag\"\n tabindex=\"-1\"\n />\n }\n }\n } @else if (selectionType === 'text' && !!
|
|
10856
|
+
], template: "<c-dropdown #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [ngClass]=\"multiselectClasses\"\n [popperOptions]=\"popperjsOptions\">\n <div #dropdownToggle=\"cDropdownToggle\" [caret]=\"false\" [disabled]=\"disabled\" cDropdownToggle role=\"button\"\n class=\"form-multi-select-input-group\">\n <span\n [ngClass]=\"{'form-multi-select-selection': true, 'form-multi-select-selection-tags': (selectionType === 'tags' && selectedOptions.length)}\">\n @if (selectionType === 'tags') {\n @if (optionsSelected$ | async;as optionTags) {\n @for (option of optionTags;track option.value;let i = $index) {\n <c-multi-select-tag\n (remove)=\"handleTagRemove($event)\"\n [disabled]=\"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 }\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 (!search) {\n <span class=\"text-placeholder text-truncate\">\n {{ optionsSelected.size === 0 ? placeholder : counterPlaceholderText }}\n </span>\n }\n @if (search) {\n <input\n #inputElement\n (keydown)=\"handleSearchKeyDown($event)\"\n (valueChange)=\"handleSearchValueChange($event)\"\n [attr.placeholder]=\"selectedOptions.length === 0 ? placeholder : counterPlaceholderText\"\n [disabled]=\"disabled || !search\"\n [ngClass]=\"{ 'form-multi-select-search': true, disabled: (disabled || !search), 'text-truncate': true }\"\n [ngModel]=\"searchValue\"\n [value]=\"searchValue\"\n autocomplete=\"off\"\n cMultiSelectSearch\n size=\"2\"\n tabindex=\"{{ disabled ? -1 : 0 }}\"\n type=\"text\"\n >\n }\n </span>\n <div class=\"form-multi-select-buttons\">\n @if (!!cleaner && optionsSelected.size > 0 && !disabled) {\n <button\n (click)=\"clearAllOptions($event)\"\n [disabled]=\"disabled || (!isDropdownVisible && cleaner !== '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]=\"disabled\"\n class=\"form-multi-select-indicator\"\n type=\"button\">\n </button>\n </div>\n </div>\n @if (!disabled) {\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 && !virtualScroller) {\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) || isLoading()) {\n <ng-container *ngTemplateOutlet=\"virtualScroller ? multiselectVirtualScroller : multiselectOptionsDiv\" />\n } @else {\n <div class=\"form-multi-select-options-empty\">{{ searchNoResultsLabel }}</div>\n }\n @if (isLoading()) {\n <c-element-cover [ngStyle]=\"{'border-radius': '6px', 'z-index': 2}\" />\n }\n </div>\n }\n</c-dropdown>\n\n<ng-template #multiselectVirtualScroller>\n @defer {\n @if ((optionsArray$ | async);as optionsArray) {\n <cdk-virtual-scroll-viewport\n #scrollViewport\n (scrolledIndexChange)=\"handleScrolledIndexChange($event, scrollViewport)\"\n [itemSize]=\"itemSize\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'height.px': optionsMaxHeight, 'maxHeight.px': optionsMaxHeight, 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden' } : { 'minWidth.px': itemMinWidth ?? 196, overflowX: 'hidden'}\"\n maxBufferPx=\"{{itemSize * visibleItems}}\"\n minBufferPx=\"{{itemSize * visibleItems}}\"\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 <div\n [ngClass]=\"{'form-multi-select-options': visibleOptions()}\"\n [ngStyle]=\"optionsMaxHeight !== 'auto' ? { 'maxHeight.px': optionsMaxHeight, overflowY: 'scroll' } : {}\"\n >\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{display:block}:host:focus-visible{outline:none}:host.cdk-focused:not(.disabled) .form-multi-select{outline:none;box-shadow:0 0 0 var(--cui-focus-ring-width) var(--cui-focus-ring-color);border-radius:var(--cui-border-radius, .375rem)}:host:not(.cdk-focused) .form-multi-select:not(.show) input.form-multi-select-search:not([placeholder]){display:none}: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-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"] }]
|
|
10859
10857
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1$2.FocusMonitor }, { type: MultiSelectService }, { type: i0.IterableDiffers }], propDecorators: { allowCreateOptions: [{
|
|
10860
10858
|
type: Input,
|
|
10861
10859
|
args: [{ transform: booleanAttribute }]
|