@coreui/angular-pro 5.6.1 → 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: [{
|
|
@@ -9897,9 +9915,14 @@ class TimePickerComponent {
|
|
|
9897
9915
|
onBlur() {
|
|
9898
9916
|
this.onTouched();
|
|
9899
9917
|
}
|
|
9900
|
-
dropdownRef;
|
|
9901
|
-
|
|
9902
|
-
|
|
9918
|
+
dropdownRef = viewChild(DropdownComponent, { ...(ngDevMode ? { debugName: "dropdownRef" } : {}), read: ElementRef });
|
|
9919
|
+
contentTemplates = contentChildren(TemplateIdDirective, { ...(ngDevMode ? { debugName: "contentTemplates" } : {}), descendants: true });
|
|
9920
|
+
templates = computed(() => {
|
|
9921
|
+
return this.contentTemplates().reduce((acc, child) => {
|
|
9922
|
+
acc[child.id] = child.templateRef;
|
|
9923
|
+
return acc;
|
|
9924
|
+
}, {});
|
|
9925
|
+
}, ...(ngDevMode ? [{ debugName: "templates" }] : []));
|
|
9903
9926
|
listOfHours;
|
|
9904
9927
|
listOfHours12;
|
|
9905
9928
|
listOfMinutes;
|
|
@@ -10056,13 +10079,6 @@ class TimePickerComponent {
|
|
|
10056
10079
|
}
|
|
10057
10080
|
}
|
|
10058
10081
|
}
|
|
10059
|
-
ngAfterViewInit() {
|
|
10060
|
-
setTimeout(() => {
|
|
10061
|
-
this.contentTemplates.forEach((child) => {
|
|
10062
|
-
this.templates[child.id] = child.templateRef;
|
|
10063
|
-
});
|
|
10064
|
-
});
|
|
10065
|
-
}
|
|
10066
10082
|
setTimeLists() {
|
|
10067
10083
|
this.dayPeriods = getDayPeriods(this.locale(), this.dateTimeFormatOptions());
|
|
10068
10084
|
this.hour12 = isHour12(this.locale());
|
|
@@ -10194,7 +10210,7 @@ class TimePickerComponent {
|
|
|
10194
10210
|
if (this.disabled()) {
|
|
10195
10211
|
return;
|
|
10196
10212
|
}
|
|
10197
|
-
this.dropdownRef?.nativeElement?.classList.remove('show');
|
|
10213
|
+
this.dropdownRef()?.nativeElement?.classList.remove('show');
|
|
10198
10214
|
setTimeout(() => {
|
|
10199
10215
|
this.onBlur();
|
|
10200
10216
|
}, 100);
|
|
@@ -10203,7 +10219,7 @@ class TimePickerComponent {
|
|
|
10203
10219
|
if (this.disabled()) {
|
|
10204
10220
|
return;
|
|
10205
10221
|
}
|
|
10206
|
-
this.dropdownRef?.nativeElement?.classList.add('show');
|
|
10222
|
+
this.dropdownRef()?.nativeElement?.classList.add('show');
|
|
10207
10223
|
}
|
|
10208
10224
|
setChangeHandlers() {
|
|
10209
10225
|
if (this.variant() !== 'select') {
|
|
@@ -10241,7 +10257,7 @@ class TimePickerComponent {
|
|
|
10241
10257
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
10242
10258
|
multi: true
|
|
10243
10259
|
}
|
|
10244
|
-
], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "@if (variant() === 'select') {\n <div class=\"date-picker-timepickers\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" [class]=\"timePickerClasses()\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n @for (hour of listOfHours12; track hour.value; let i = $index) {\n <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n {{ hour.label }}\n </option>\n }\n </select>\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n @for (minute of listOfMinutes; track minute.value; let i = $index) {\n <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n {{ minute.label }}\n </option>\n }\n </select>\n @if (seconds()) {\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n @for (second of listOfSeconds; track second.value; let i = $index) {\n <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n {{ second.label }}\n </option>\n }\n </select>\n }\n @if (hour12) {\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n @for (dayPeriod of dayPeriods; track dayPeriod.value) {\n <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n {{ dayPeriod.label }}\n </option>\n }\n </select>\n }\n </div>\n </div>\n </div>\n}\n@if (variant() === 'roll') {\n <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [class]=\"timePickerClasses()\" [visible]=\"visible()\">\n <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n <input (blur)=\"handleBlur($event);\"\n (change)=\"handleTimeInputChange($event)\"\n (focus)=\"handleFocus($event)\"\n [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [formControl]=\"timeInputCtrl\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"inputReadOnly() ?? null\"\n class=\"time-picker-input\"\n >\n @if (indicator()) {\n <div class=\"time-picker-indicator\"></div>\n }\n @if (cleaner() && time && !disabled()) {\n <div (click)=\"!disabled() && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n }\n </div>\n <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfHours12\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"hour\"\n role=\"listbox\"\n />\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfMinutes\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"minute\"\n role=\"listbox\"\n />\n @if (seconds()) {\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfSeconds\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"second\"\n role=\"listbox\"\n />\n }\n @if (hour12) {\n <c-time-picker-roll-am-pm\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled()\"\n [elements]=\"dayPeriods\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"dayPeriod\"\n role=\"listbox\"\n />\n }\n </div>\n @if (
|
|
10260
|
+
], queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdownRef", first: true, predicate: DropdownComponent, descendants: true, read: ElementRef, isSignal: true }], exportAs: ["cTimePicker"], usesOnChanges: true, ngImport: i0, template: "@if (variant() === 'select') {\n <div class=\"date-picker-timepickers\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" [class]=\"timePickerClasses()\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n @for (hour of listOfHours12; track hour.value; let i = $index) {\n <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n {{ hour.label }}\n </option>\n }\n </select>\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n @for (minute of listOfMinutes; track minute.value; let i = $index) {\n <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n {{ minute.label }}\n </option>\n }\n </select>\n @if (seconds()) {\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n @for (second of listOfSeconds; track second.value; let i = $index) {\n <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n {{ second.label }}\n </option>\n }\n </select>\n }\n @if (hour12) {\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n @for (dayPeriod of dayPeriods; track dayPeriod.value) {\n <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n {{ dayPeriod.label }}\n </option>\n }\n </select>\n }\n </div>\n </div>\n </div>\n}\n@if (variant() === 'roll') {\n <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [class]=\"timePickerClasses()\" [visible]=\"visible()\">\n <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n <input (blur)=\"handleBlur($event);\"\n (change)=\"handleTimeInputChange($event)\"\n (focus)=\"handleFocus($event)\"\n [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [formControl]=\"timeInputCtrl\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"inputReadOnly() ?? null\"\n class=\"time-picker-input\"\n >\n @if (indicator()) {\n <div class=\"time-picker-indicator\"></div>\n }\n @if (cleaner() && time && !disabled()) {\n <div (click)=\"!disabled() && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n }\n </div>\n <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfHours12\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"hour\"\n role=\"listbox\"\n />\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfMinutes\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"minute\"\n role=\"listbox\"\n />\n @if (seconds()) {\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfSeconds\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"second\"\n role=\"listbox\"\n />\n }\n @if (hour12) {\n <c-time-picker-roll-am-pm\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled()\"\n [elements]=\"dayPeriods\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"dayPeriod\"\n role=\"listbox\"\n />\n }\n </div>\n @let tmpl = templates();\n @if (tmpl?.['timePickerFooter']) {\n <div class=\"time-picker-footer\">\n <ng-container *ngTemplateOutlet=\"tmpl?.['timePickerFooter']; context: {$implicit: dropdown}\" />\n </div>\n }\n </div>\n </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DropdownComponent, selector: "c-dropdown", inputs: ["alignment", "autoClose", "direction", "placement", "popper", "popperOptions", "variant", "visible"], outputs: ["visibleChange"], exportAs: ["cDropdown"] }, { kind: "directive", type: DropdownToggleDirective, selector: "[cDropdownToggle]", inputs: ["dropdownComponent", "disabled", "caret", "split"], exportAs: ["cDropdownToggle"] }, { kind: "directive", type: DropdownMenuDirective, selector: "[cDropdownMenu]", inputs: ["alignment", "visible"], exportAs: ["cDropdownMenu"] }, { kind: "directive", type: FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: TimePickerRollColComponent, selector: "c-time-picker-roll-col", inputs: ["disabled", "elements", "onClick", "refresh", "selected"], outputs: ["selectedChange"], exportAs: ["cTimePickerRollCol"] }, { kind: "component", type: TimePickerRollAmPmComponent, selector: "c-time-picker-roll-am-pm", inputs: ["disabled", "elements", "onClick", "refresh", "selected"], outputs: ["selectedChange"] }] });
|
|
10245
10261
|
}
|
|
10246
10262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
10247
10263
|
type: Component,
|
|
@@ -10262,16 +10278,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
10262
10278
|
}
|
|
10263
10279
|
], host: {
|
|
10264
10280
|
'(focusout)': 'onBlur()'
|
|
10265
|
-
}, template: "@if (variant() === 'select') {\n <div class=\"date-picker-timepickers\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" [class]=\"timePickerClasses()\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n @for (hour of listOfHours12; track hour.value; let i = $index) {\n <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n {{ hour.label }}\n </option>\n }\n </select>\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n @for (minute of listOfMinutes; track minute.value; let i = $index) {\n <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n {{ minute.label }}\n </option>\n }\n </select>\n @if (seconds()) {\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n @for (second of listOfSeconds; track second.value; let i = $index) {\n <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n {{ second.label }}\n </option>\n }\n </select>\n }\n @if (hour12) {\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n @for (dayPeriod of dayPeriods; track dayPeriod.value) {\n <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n {{ dayPeriod.label }}\n </option>\n }\n </select>\n }\n </div>\n </div>\n </div>\n}\n@if (variant() === 'roll') {\n <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [class]=\"timePickerClasses()\" [visible]=\"visible()\">\n <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n <input (blur)=\"handleBlur($event);\"\n (change)=\"handleTimeInputChange($event)\"\n (focus)=\"handleFocus($event)\"\n [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [formControl]=\"timeInputCtrl\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"inputReadOnly() ?? null\"\n class=\"time-picker-input\"\n >\n @if (indicator()) {\n <div class=\"time-picker-indicator\"></div>\n }\n @if (cleaner() && time && !disabled()) {\n <div (click)=\"!disabled() && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n }\n </div>\n <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfHours12\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"hour\"\n role=\"listbox\"\n />\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfMinutes\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"minute\"\n role=\"listbox\"\n />\n @if (seconds()) {\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfSeconds\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"second\"\n role=\"listbox\"\n />\n }\n @if (hour12) {\n <c-time-picker-roll-am-pm\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled()\"\n [elements]=\"dayPeriods\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"dayPeriod\"\n role=\"listbox\"\n />\n }\n </div>\n @if (
|
|
10281
|
+
}, template: "@if (variant() === 'select') {\n <div class=\"date-picker-timepickers\">\n <div class=\"picker time-picker\">\n <div [formGroup]=\"selectTime\" [class]=\"timePickerClasses()\" class=\"time-picker-body\">\n <span class=\"time-picker-inline-icon\"></span>\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectHours\">\n @for (hour of listOfHours12; track hour.value; let i = $index) {\n <option [attr.disabled]=\"hour.disabled || null\" [ngValue]=\"hour.value\">\n {{ hour.label }}\n </option>\n }\n </select>\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectMinutes\">\n @for (minute of listOfMinutes; track minute.value; let i = $index) {\n <option [attr.disabled]=\"minute.disabled || null\" [ngValue]=\"minute.value\">\n {{ minute.label }}\n </option>\n }\n </select>\n @if (seconds()) {\n {{ ' :' }}<select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectSeconds\">\n @for (second of listOfSeconds; track second.value; let i = $index) {\n <option [attr.disabled]=\"second.disabled || null\" [ngValue]=\"second.value\">\n {{ second.label }}\n </option>\n }\n </select>\n }\n @if (hour12) {\n <select (blur)=\"onBlur()\" [attr.disabled]=\"disabled() || null\" [sizing]=\"size() ?? ''\"\n cSelect class=\"time-picker-inline-select ms-0\" formControlName=\"selectDayPeriod\">\n @for (dayPeriod of dayPeriods; track dayPeriod.value) {\n <option [ngValue]=\"dayPeriod.value\" class=\"time-picker-roll-cell\">\n {{ dayPeriod.label }}\n </option>\n }\n </select>\n }\n </div>\n </div>\n </div>\n}\n@if (variant() === 'roll') {\n <c-dropdown #dropdown=\"cDropdown\" [autoClose]=\"'outside'\" [class]=\"timePickerClasses()\" [visible]=\"visible()\">\n <div [caret]=\"false\" cDropdownToggle class=\"time-picker-input-group\">\n <input (blur)=\"handleBlur($event);\"\n (change)=\"handleTimeInputChange($event)\"\n (focus)=\"handleFocus($event)\"\n [attr.pattern]=\"hour12 ? '(((0[1-9])|(1[0-2])):([0-5])([0-9])\\\\s(A|P)M)' : '([01]?[0-9]|2[0-3]):[0-5][0-9]'\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [formControl]=\"timeInputCtrl\"\n [placeholder]=\"placeholder()\"\n [readonly]=\"inputReadOnly() ?? null\"\n class=\"time-picker-input\"\n >\n @if (indicator()) {\n <div class=\"time-picker-indicator\"></div>\n }\n @if (cleaner() && time && !disabled()) {\n <div (click)=\"!disabled() && handleClear($event)\" class=\"time-picker-cleaner\" role=\"button\"></div>\n }\n </div>\n <div #dropdownMenu=\"cDropdownMenu\" cDropdownMenu class=\"time-picker-dropdown py-0\">\n <div class=\"time-picker-body time-picker-roll\" style=\"position: relative;\">\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'hour')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfHours12\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"hour\"\n role=\"listbox\"\n />\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'minute')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfMinutes\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"minute\"\n role=\"listbox\"\n />\n @if (seconds()) {\n <c-time-picker-roll-col\n (selectedChange)=\"handleSelectTimeChange($event, 'second')\"\n [disabled]=\"disabled()\"\n [elements]=\"listOfSeconds\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"second\"\n role=\"listbox\"\n />\n }\n @if (hour12) {\n <c-time-picker-roll-am-pm\n (selectedChange)=\"handleSelectDayPeriodChange($event)\"\n [disabled]=\"disabled()\"\n [elements]=\"dayPeriods\"\n [refresh]=\"dropdownMenu.visible()\"\n [selected]=\"dayPeriod\"\n role=\"listbox\"\n />\n }\n </div>\n @let tmpl = templates();\n @if (tmpl?.['timePickerFooter']) {\n <div class=\"time-picker-footer\">\n <ng-container *ngTemplateOutlet=\"tmpl?.['timePickerFooter']; context: {$implicit: dropdown}\" />\n </div>\n }\n </div>\n </c-dropdown>\n}\n", styles: [".disabled{pointer-events:none}\n"] }]
|
|
10266
10282
|
}], propDecorators: { cleaner: [{ type: i0.Input, args: [{ isSignal: true, alias: "cleaner", required: false }] }], dateTimeFormatOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTimeFormatOptions", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterHours: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterHours", required: false }] }], filterMinutes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMinutes", required: false }] }], filterSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSeconds", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], inputReadOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputReadOnly", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], time: [{
|
|
10267
10283
|
type: Input
|
|
10268
|
-
}], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], dropdownRef: [{
|
|
10269
|
-
type: ViewChild,
|
|
10270
|
-
args: [DropdownComponent, { read: ElementRef }]
|
|
10271
|
-
}], contentTemplates: [{
|
|
10272
|
-
type: ContentChildren,
|
|
10273
|
-
args: [TemplateIdDirective, { descendants: true }]
|
|
10274
|
-
}] } });
|
|
10284
|
+
}], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], dropdownRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DropdownComponent), { ...{ read: ElementRef }, isSignal: true }] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TemplateIdDirective), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
10275
10285
|
|
|
10276
10286
|
class TimePickerModule {
|
|
10277
10287
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TimePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -11833,57 +11843,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
|
|
|
11833
11843
|
}] });
|
|
11834
11844
|
|
|
11835
11845
|
class MultiSelectOptgroupComponent {
|
|
11836
|
-
|
|
11846
|
+
static ngAcceptInputType_disabled;
|
|
11837
11847
|
#destroyRef = inject(DestroyRef);
|
|
11848
|
+
#multiSelectService = inject(MultiSelectService);
|
|
11849
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
11850
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
11838
11851
|
visible = signal(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
|
|
11839
|
-
|
|
11840
|
-
|
|
11841
|
-
|
|
11842
|
-
|
|
11852
|
+
multiSelectOptions = contentChildren(MultiSelectOptionComponent, { ...(ngDevMode ? { debugName: "multiSelectOptions" } : {}), descendants: true });
|
|
11853
|
+
#optionsEffect = effect(() => {
|
|
11854
|
+
const disabled = this.disabled();
|
|
11855
|
+
const options = this.multiSelectOptions();
|
|
11856
|
+
options?.forEach((option) => {
|
|
11857
|
+
option.disabled = disabled || option.disabled;
|
|
11858
|
+
});
|
|
11859
|
+
}, ...(ngDevMode ? [{ debugName: "#optionsEffect" }] : []));
|
|
11860
|
+
hostClasses = computed(() => {
|
|
11843
11861
|
return {
|
|
11844
11862
|
'form-multi-select-options': true,
|
|
11845
11863
|
'd-none': !this.visible()
|
|
11846
11864
|
};
|
|
11847
|
-
}
|
|
11865
|
+
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
11848
11866
|
ngAfterContentInit() {
|
|
11849
|
-
this.updateMultiSelectOptions();
|
|
11850
11867
|
this.watchOptGroupContent();
|
|
11851
11868
|
}
|
|
11852
|
-
ngOnChanges(changes) {
|
|
11853
|
-
if (changes['disabled']) {
|
|
11854
|
-
this.updateMultiSelectOptions();
|
|
11855
|
-
}
|
|
11856
|
-
}
|
|
11857
|
-
updateMultiSelectOptions() {
|
|
11858
|
-
this.multiSelectOptions?.forEach((option) => {
|
|
11859
|
-
option.disabled = this.disabled || option.disabled;
|
|
11860
|
-
});
|
|
11861
|
-
}
|
|
11862
11869
|
watchOptGroupContent() {
|
|
11863
|
-
this
|
|
11870
|
+
this.#multiSelectService.optionsArray$
|
|
11864
11871
|
.pipe(tap((x) => {
|
|
11865
|
-
this.visible.set(this.multiSelectOptions?.some((option) => option.visible));
|
|
11872
|
+
this.visible.set(this.multiSelectOptions()?.some((option) => option.visible));
|
|
11866
11873
|
}), takeUntilDestroyed(this.#destroyRef))
|
|
11867
11874
|
.subscribe();
|
|
11868
11875
|
}
|
|
11869
11876
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MultiSelectOptgroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11870
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MultiSelectOptgroupComponent, isStandalone: true, selector: "c-multi-select-optgroup", inputs: { label: "label",
|
|
11877
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: MultiSelectOptgroupComponent, isStandalone: true, selector: "c-multi-select-optgroup", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "multiSelectOptions", predicate: MultiSelectOptionComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
11878
|
+
@let lbl = label();
|
|
11879
|
+
@if (lbl && visible()) {
|
|
11880
|
+
<c-multi-select-optgroup-label>{{ lbl }}</c-multi-select-optgroup-label>
|
|
11881
|
+
}
|
|
11882
|
+
<ng-content />
|
|
11883
|
+
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11871
11884
|
}
|
|
11872
11885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MultiSelectOptgroupComponent, decorators: [{
|
|
11873
11886
|
type: Component,
|
|
11874
|
-
args: [{ selector: 'c-multi-select-optgroup',
|
|
11875
|
-
|
|
11876
|
-
|
|
11877
|
-
|
|
11878
|
-
|
|
11879
|
-
|
|
11880
|
-
|
|
11881
|
-
|
|
11882
|
-
|
|
11883
|
-
|
|
11884
|
-
type: HostBinding,
|
|
11885
|
-
args: ['class']
|
|
11886
|
-
}] } });
|
|
11887
|
+
args: [{ selector: 'c-multi-select-optgroup', template: `
|
|
11888
|
+
@let lbl = label();
|
|
11889
|
+
@if (lbl && visible()) {
|
|
11890
|
+
<c-multi-select-optgroup-label>{{ lbl }}</c-multi-select-optgroup-label>
|
|
11891
|
+
}
|
|
11892
|
+
<ng-content />
|
|
11893
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MultiSelectOptgroupLabelComponent], host: {
|
|
11894
|
+
'[class]': 'hostClasses()'
|
|
11895
|
+
}, styles: [":host{display:block}\n"] }]
|
|
11896
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], multiSelectOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MultiSelectOptionComponent), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
11887
11897
|
|
|
11888
11898
|
class MultiSelectModule {
|
|
11889
11899
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|