@coreui/angular-pro 5.7.14 → 5.7.15
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.
|
@@ -2997,7 +2997,11 @@ class MultiSelectComponent {
|
|
|
2997
2997
|
return this.multiSelectOptionsContent.reset(sortedOptions);
|
|
2998
2998
|
});
|
|
2999
2999
|
this.scrollViewportView.changes
|
|
3000
|
-
.pipe(take(1),
|
|
3000
|
+
.pipe(take(1), tap((changes) => {
|
|
3001
|
+
changes.toArray()[0]
|
|
3002
|
+
?.getElementRef()
|
|
3003
|
+
?.nativeElement?.firstElementChild?.classList.add('form-multi-select-options');
|
|
3004
|
+
}), map((changes) => changes.toArray()[0]), tap((scrollViewport) => {
|
|
3001
3005
|
if (!this.scrollViewport) {
|
|
3002
3006
|
this.scrollViewport = scrollViewport;
|
|
3003
3007
|
const cdkVirtualScrollContentWrapper = this.scrollViewport.getElementRef().nativeElement?.firstElementChild;
|
|
@@ -3105,7 +3109,7 @@ class MultiSelectComponent {
|
|
|
3105
3109
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
3106
3110
|
multi: true
|
|
3107
3111
|
}
|
|
3108
|
-
], 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\n #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [class]=\"multiselectClasses()\"\n [popperOptions]=\"popperOptions()\"\n>\n <div\n #dropdownToggle=\"cDropdownToggle\"\n [caret]=\"false\"\n [disabled]=\"isDisabled\"\n cDropdownToggle\n role=\"button\"\n class=\"form-multi-select-input-group\"\n >\n <span\n [class]=\"multiselectSelectionClasses()\"\n [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n >\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 [attr.aria-label]=\"ariaCleanerLabel()\"\n class=\"form-multi-select-cleaner\"\n type=\"button\"\n ></button>\n }\n <button\n (click)=\"handleIndicatorClick($event)\"\n [disabled]=\"isDisabled\"\n [attr.aria-label]=\"ariaIndicatorLabel()\"\n class=\"form-multi-select-indicator\"\n type=\"button\"\n ></button>\n </div>\n </div>\n @if (!isDisabled) {\n <div\n #dropdownMenu=\"cDropdownMenu\"\n [visible]=\"dropdown.visible()\"\n cDropdownMenu\n class=\"form-multi-select-dropdown\"\n role=\"menu\"\n >\n @if (visibleOptions() && options.length > 0) {\n @if (selectAll() && multiple() && !vScroller) {\n <div class=\"form-multi-select-dropdown-header\">\n <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n {{ selectAllLabel() }}\n </button>\n </div>\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\" role=\"status\">{{ 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 = $safeNavigationMigration(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]=\"\n optMaxHeight !== 'auto'\n ? {\n 'height.px': optMaxHeight,\n 'maxHeight.px': optMaxHeight,\n 'minWidth.px': optMinWidth,\n overflowX: 'hidden'\n }\n : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n \"\n maxBufferPx=\"{{ bufferPx }}\"\n minBufferPx=\"{{ bufferPx }}\"\n class=\"form-multi-select-options\"\n tabindex=\"-1\"\n >\n <ng-container\n #cdkVirtualFor\n *cdkVirtualFor=\"\n let option of optionsArray;\n trackBy: trackByFn;\n templateCacheSize: 0;\n even as even;\n odd as odd;\n index as index;\n count as count;\n first as first;\n last as last\n \"\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\n [class.form-multi-select-options]=\"visibleOptions()\"\n [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, 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 (\n option of userOptionsArray$ | async;\n track option;\n let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last\n ) {\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{display:contents}:host .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}:host-context(.input-group) :host:not(:first-child) .form-multi-select-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .form-multi-select-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .form-multi-select-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .form-multi-select-input-group{border-start-end-radius:var(--cui-form-multi-select-border-radius);border-end-end-radius:var(--cui-form-multi-select-border-radius)}\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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" }], changeDetection: i0.ChangeDetectionStrategy.Eager, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
|
|
3112
|
+
], 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\n #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [class]=\"multiselectClasses()\"\n [popperOptions]=\"popperOptions()\"\n>\n <div\n #dropdownToggle=\"cDropdownToggle\"\n [caret]=\"false\"\n [disabled]=\"isDisabled\"\n cDropdownToggle\n role=\"button\"\n class=\"form-multi-select-input-group\"\n >\n <span\n [class]=\"multiselectSelectionClasses()\"\n [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n >\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 [attr.aria-label]=\"ariaCleanerLabel()\"\n class=\"form-multi-select-cleaner\"\n type=\"button\"\n ></button>\n }\n <button\n (click)=\"handleIndicatorClick($event)\"\n [disabled]=\"isDisabled\"\n [attr.aria-label]=\"ariaIndicatorLabel()\"\n class=\"form-multi-select-indicator\"\n type=\"button\"\n ></button>\n </div>\n </div>\n @if (!isDisabled) {\n <div\n #dropdownMenu=\"cDropdownMenu\"\n [visible]=\"dropdown.visible()\"\n cDropdownMenu\n class=\"form-multi-select-dropdown\"\n role=\"menu\"\n >\n @if (visibleOptions() && options.length > 0) {\n @if (selectAll() && multiple() && !vScroller) {\n <div class=\"form-multi-select-dropdown-header\">\n <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n {{ selectAllLabel() }}\n </button>\n </div>\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\" role=\"status\">{{ 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 = $safeNavigationMigration(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]=\"\n optMaxHeight !== 'auto'\n ? {\n 'height.px': optMaxHeight,\n 'maxHeight.px': optMaxHeight,\n 'minWidth.px': optMinWidth,\n overflowX: 'hidden'\n }\n : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n \"\n maxBufferPx=\"{{ bufferPx }}\"\n minBufferPx=\"{{ bufferPx }}\"\n tabindex=\"-1\"\n >\n <ng-container\n #cdkVirtualFor\n *cdkVirtualFor=\"\n let option of optionsArray;\n trackBy: trackByFn;\n templateCacheSize: 0;\n even as even;\n odd as odd;\n index as index;\n count as count;\n first as first;\n last as last\n \"\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\n [class.form-multi-select-options]=\"visibleOptions()\"\n [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, 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 (\n option of userOptionsArray$ | async;\n track option;\n let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last\n ) {\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 .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}:host-context(.input-group) :host:not(:first-child) .form-multi-select-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .form-multi-select-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .form-multi-select-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .form-multi-select-input-group{border-start-end-radius:var(--cui-form-multi-select-border-radius);border-end-end-radius:var(--cui-form-multi-select-border-radius)}\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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" }], changeDetection: i0.ChangeDetectionStrategy.Eager, deferBlockDependencies: [() => [NgTemplateOutlet, /* @ts-ignore */
|
|
3109
3113
|
import('@angular/cdk/scrolling').then(m => m.CdkFixedSizeVirtualScroll), /* @ts-ignore */
|
|
3110
3114
|
import('@angular/cdk/scrolling').then(m => m.CdkVirtualScrollViewport), /* @ts-ignore */
|
|
3111
3115
|
import('@angular/cdk/scrolling').then(m => m.CdkVirtualForOf), NgStyle,
|
|
@@ -3148,7 +3152,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "22.1.0", ng
|
|
|
3148
3152
|
'[attr.aria-expanded]': 'visible()',
|
|
3149
3153
|
'[attr.aria-disabled]': 'disabled()',
|
|
3150
3154
|
'[attr.tabindex]': 'tabIndex'
|
|
3151
|
-
}, 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\n #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [class]=\"multiselectClasses()\"\n [popperOptions]=\"popperOptions()\"\n>\n <div\n #dropdownToggle=\"cDropdownToggle\"\n [caret]=\"false\"\n [disabled]=\"isDisabled\"\n cDropdownToggle\n role=\"button\"\n class=\"form-multi-select-input-group\"\n >\n <span\n [class]=\"multiselectSelectionClasses()\"\n [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n >\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 [attr.aria-label]=\"ariaCleanerLabel()\"\n class=\"form-multi-select-cleaner\"\n type=\"button\"\n ></button>\n }\n <button\n (click)=\"handleIndicatorClick($event)\"\n [disabled]=\"isDisabled\"\n [attr.aria-label]=\"ariaIndicatorLabel()\"\n class=\"form-multi-select-indicator\"\n type=\"button\"\n ></button>\n </div>\n </div>\n @if (!isDisabled) {\n <div\n #dropdownMenu=\"cDropdownMenu\"\n [visible]=\"dropdown.visible()\"\n cDropdownMenu\n class=\"form-multi-select-dropdown\"\n role=\"menu\"\n >\n @if (visibleOptions() && options.length > 0) {\n @if (selectAll() && multiple() && !vScroller) {\n <div class=\"form-multi-select-dropdown-header\">\n <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n {{ selectAllLabel() }}\n </button>\n </div>\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\" role=\"status\">{{ 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 = $safeNavigationMigration(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]=\"\n optMaxHeight !== 'auto'\n ? {\n 'height.px': optMaxHeight,\n 'maxHeight.px': optMaxHeight,\n 'minWidth.px': optMinWidth,\n overflowX: 'hidden'\n }\n : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n \"\n maxBufferPx=\"{{ bufferPx }}\"\n minBufferPx=\"{{ bufferPx }}\"\n
|
|
3155
|
+
}, 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\n #dropdown=\"cDropdown\"\n [(visible)]=\"visible\"\n [autoClose]=\"'outside'\"\n [class]=\"multiselectClasses()\"\n [popperOptions]=\"popperOptions()\"\n>\n <div\n #dropdownToggle=\"cDropdownToggle\"\n [caret]=\"false\"\n [disabled]=\"isDisabled\"\n cDropdownToggle\n role=\"button\"\n class=\"form-multi-select-input-group\"\n >\n <span\n [class]=\"multiselectSelectionClasses()\"\n [class.form-multi-select-selection-tags]=\"selType === 'tags' && selectedOpts.length\"\n >\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 [attr.aria-label]=\"ariaCleanerLabel()\"\n class=\"form-multi-select-cleaner\"\n type=\"button\"\n ></button>\n }\n <button\n (click)=\"handleIndicatorClick($event)\"\n [disabled]=\"isDisabled\"\n [attr.aria-label]=\"ariaIndicatorLabel()\"\n class=\"form-multi-select-indicator\"\n type=\"button\"\n ></button>\n </div>\n </div>\n @if (!isDisabled) {\n <div\n #dropdownMenu=\"cDropdownMenu\"\n [visible]=\"dropdown.visible()\"\n cDropdownMenu\n class=\"form-multi-select-dropdown\"\n role=\"menu\"\n >\n @if (visibleOptions() && options.length > 0) {\n @if (selectAll() && multiple() && !vScroller) {\n <div class=\"form-multi-select-dropdown-header\">\n <button (click)=\"selectAllOptions()\" class=\"form-multi-select-all\" type=\"button\" tabindex=\"0\">\n {{ selectAllLabel() }}\n </button>\n </div>\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\" role=\"status\">{{ 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 = $safeNavigationMigration(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]=\"\n optMaxHeight !== 'auto'\n ? {\n 'height.px': optMaxHeight,\n 'maxHeight.px': optMaxHeight,\n 'minWidth.px': optMinWidth,\n overflowX: 'hidden'\n }\n : { 'minWidth.px': optMinWidth, overflowX: 'hidden' }\n \"\n maxBufferPx=\"{{ bufferPx }}\"\n minBufferPx=\"{{ bufferPx }}\"\n tabindex=\"-1\"\n >\n <ng-container\n #cdkVirtualFor\n *cdkVirtualFor=\"\n let option of optionsArray;\n trackBy: trackByFn;\n templateCacheSize: 0;\n even as even;\n odd as odd;\n index as index;\n count as count;\n first as first;\n last as last\n \"\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\n [class.form-multi-select-options]=\"visibleOptions()\"\n [ngStyle]=\"optMaxHeight !== 'auto' ? { 'maxHeight.px': optMaxHeight, 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 (\n option of userOptionsArray$ | async;\n track option;\n let even = $even, odd = $odd, index = $index, count = $count, first = $first, last = $last\n ) {\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 .cdk-virtual-scroll-viewport{width:var(--cui-dropdown-min-width)}:host .dropdown-menu{--cui-dropdown-padding-y: 0}:host-context(.input-group) :host:not(:first-child) .form-multi-select-input-group{border-start-start-radius:0;border-end-start-radius:0}:host-context(.input-group) :host:not(:last-child) .form-multi-select-input-group{border-start-end-radius:0;border-end-end-radius:0}:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:not(:last-child):has(+[class*=valid-],+[class*=invalid-]) .form-multi-select-input-group,:host-context(.input-group.has-validation,.input-group:not(.has-validation)) :host:last-child .form-multi-select-input-group{border-start-end-radius:var(--cui-form-multi-select-border-radius);border-end-end-radius:var(--cui-form-multi-select-border-radius)}\n"] }]
|
|
3152
3156
|
}], ctorParameters: () => [], propDecorators: { allowCreateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCreateOptions", required: false }] }], ariaCleanerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaCleanerLabel", required: false }] }], ariaIndicatorLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaIndicatorLabel", 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: [{
|
|
3153
3157
|
type: Input
|
|
3154
3158
|
}], 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: [{
|