@mintplayer/ng-bootstrap 21.29.0 → 21.31.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/mintplayer-ng-bootstrap-a11y.mjs +455 -0
- package/fesm2022/mintplayer-ng-bootstrap-a11y.mjs.map +1 -0
- package/fesm2022/mintplayer-ng-bootstrap-accordion.mjs +8 -5
- package/fesm2022/mintplayer-ng-bootstrap-accordion.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-breadcrumb.mjs +10 -4
- package/fesm2022/mintplayer-ng-bootstrap-breadcrumb.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-button-group.mjs +7 -4
- package/fesm2022/mintplayer-ng-bootstrap-button-group.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-calendar.mjs +131 -3
- package/fesm2022/mintplayer-ng-bootstrap-calendar.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs +80 -48
- package/fesm2022/mintplayer-ng-bootstrap-carousel.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-code-snippet.mjs +4 -1
- package/fesm2022/mintplayer-ng-bootstrap-code-snippet.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-color-picker.mjs +218 -14
- package/fesm2022/mintplayer-ng-bootstrap-color-picker.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-datatable.mjs +4 -3
- package/fesm2022/mintplayer-ng-bootstrap-datatable.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-datepicker.mjs +2 -2
- package/fesm2022/mintplayer-ng-bootstrap-datepicker.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-dock.mjs +294 -3
- package/fesm2022/mintplayer-ng-bootstrap-dock.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-dropdown-menu.mjs +163 -18
- package/fesm2022/mintplayer-ng-bootstrap-dropdown-menu.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-dropdown.mjs +179 -7
- package/fesm2022/mintplayer-ng-bootstrap-dropdown.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-file-upload.mjs +14 -4
- package/fesm2022/mintplayer-ng-bootstrap-file-upload.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-has-overlay.mjs +14 -0
- package/fesm2022/mintplayer-ng-bootstrap-has-overlay.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-list-group.mjs +2 -1
- package/fesm2022/mintplayer-ng-bootstrap-list-group.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-marquee.mjs +7 -4
- package/fesm2022/mintplayer-ng-bootstrap-marquee.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-modal.mjs +70 -6
- package/fesm2022/mintplayer-ng-bootstrap-modal.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-multi-range.mjs +693 -0
- package/fesm2022/mintplayer-ng-bootstrap-multi-range.mjs.map +1 -0
- package/fesm2022/mintplayer-ng-bootstrap-multiselect.mjs +5 -4
- package/fesm2022/mintplayer-ng-bootstrap-multiselect.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-navbar-toggler.mjs +6 -6
- package/fesm2022/mintplayer-ng-bootstrap-navbar-toggler.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-navbar.mjs +45 -13
- package/fesm2022/mintplayer-ng-bootstrap-navbar.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-offcanvas.mjs +51 -5
- package/fesm2022/mintplayer-ng-bootstrap-offcanvas.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-pagination.mjs +5 -3
- package/fesm2022/mintplayer-ng-bootstrap-pagination.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-placeholder.mjs +18 -4
- package/fesm2022/mintplayer-ng-bootstrap-placeholder.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-playlist-toggler.mjs +6 -6
- package/fesm2022/mintplayer-ng-bootstrap-playlist-toggler.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-popover.mjs +61 -6
- package/fesm2022/mintplayer-ng-bootstrap-popover.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-priority-nav.mjs +19 -4
- package/fesm2022/mintplayer-ng-bootstrap-priority-nav.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-progress-bar.mjs +8 -5
- package/fesm2022/mintplayer-ng-bootstrap-progress-bar.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-range.mjs +4 -3
- package/fesm2022/mintplayer-ng-bootstrap-range.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-rating.mjs +34 -4
- package/fesm2022/mintplayer-ng-bootstrap-rating.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-reduced-motion.mjs +59 -0
- package/fesm2022/mintplayer-ng-bootstrap-reduced-motion.mjs.map +1 -0
- package/fesm2022/mintplayer-ng-bootstrap-resizable.mjs +91 -2
- package/fesm2022/mintplayer-ng-bootstrap-resizable.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-scheduler.mjs +16 -5
- package/fesm2022/mintplayer-ng-bootstrap-scheduler.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-scrollspy.mjs +2 -2
- package/fesm2022/mintplayer-ng-bootstrap-scrollspy.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-searchbox.mjs +28 -5
- package/fesm2022/mintplayer-ng-bootstrap-searchbox.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-select.mjs +4 -3
- package/fesm2022/mintplayer-ng-bootstrap-select.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-select2.mjs +18 -4
- package/fesm2022/mintplayer-ng-bootstrap-select2.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-signature-pad.mjs +4 -3
- package/fesm2022/mintplayer-ng-bootstrap-signature-pad.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-tab-control.mjs +2 -2
- package/fesm2022/mintplayer-ng-bootstrap-tab-control.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-table.mjs +10 -3
- package/fesm2022/mintplayer-ng-bootstrap-table.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-tile-manager.mjs +143 -29
- package/fesm2022/mintplayer-ng-bootstrap-tile-manager.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-timepicker.mjs +2 -2
- package/fesm2022/mintplayer-ng-bootstrap-timepicker.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-toast.mjs +7 -4
- package/fesm2022/mintplayer-ng-bootstrap-toast.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-toggle-button.mjs +42 -21
- package/fesm2022/mintplayer-ng-bootstrap-toggle-button.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-tooltip.mjs +33 -4
- package/fesm2022/mintplayer-ng-bootstrap-tooltip.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-treeview.mjs +17 -7
- package/fesm2022/mintplayer-ng-bootstrap-treeview.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-typeahead.mjs +50 -8
- package/fesm2022/mintplayer-ng-bootstrap-typeahead.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-virtual-datatable.mjs +34 -12
- package/fesm2022/mintplayer-ng-bootstrap-virtual-datatable.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-web-components-a11y.mjs +74 -0
- package/fesm2022/mintplayer-ng-bootstrap-web-components-a11y.mjs.map +1 -0
- package/fesm2022/mintplayer-ng-bootstrap-web-components-scheduler.mjs +1476 -71
- package/fesm2022/mintplayer-ng-bootstrap-web-components-scheduler.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-web-components-splitter.mjs +194 -2
- package/fesm2022/mintplayer-ng-bootstrap-web-components-splitter.mjs.map +1 -1
- package/fesm2022/mintplayer-ng-bootstrap-web-components-tab-control.mjs +4 -0
- package/fesm2022/mintplayer-ng-bootstrap-web-components-tab-control.mjs.map +1 -1
- package/package.json +18 -2
- package/types/mintplayer-ng-bootstrap-a11y.d.ts +196 -0
- package/types/mintplayer-ng-bootstrap-accordion.d.ts +4 -2
- package/types/mintplayer-ng-bootstrap-breadcrumb.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-button-group.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-calendar.d.ts +32 -0
- package/types/mintplayer-ng-bootstrap-carousel.d.ts +56 -3
- package/types/mintplayer-ng-bootstrap-code-snippet.d.ts +1 -0
- package/types/mintplayer-ng-bootstrap-color-picker.d.ts +75 -4
- package/types/mintplayer-ng-bootstrap-datatable.d.ts +1 -1
- package/types/mintplayer-ng-bootstrap-dock.d.ts +51 -0
- package/types/mintplayer-ng-bootstrap-dropdown-menu.d.ts +54 -9
- package/types/mintplayer-ng-bootstrap-dropdown.d.ts +57 -2
- package/types/mintplayer-ng-bootstrap-file-upload.d.ts +4 -1
- package/types/mintplayer-ng-bootstrap-has-overlay.d.ts +14 -0
- package/types/mintplayer-ng-bootstrap-marquee.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-modal.d.ts +25 -1
- package/types/mintplayer-ng-bootstrap-multi-range.d.ts +170 -0
- package/types/mintplayer-ng-bootstrap-multiselect.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-navbar-toggler.d.ts +4 -2
- package/types/mintplayer-ng-bootstrap-navbar.d.ts +25 -1
- package/types/mintplayer-ng-bootstrap-offcanvas.d.ts +23 -1
- package/types/mintplayer-ng-bootstrap-pagination.d.ts +3 -1
- package/types/mintplayer-ng-bootstrap-placeholder.d.ts +5 -1
- package/types/mintplayer-ng-bootstrap-playlist-toggler.d.ts +4 -2
- package/types/mintplayer-ng-bootstrap-popover.d.ts +21 -1
- package/types/mintplayer-ng-bootstrap-priority-nav.d.ts +4 -1
- package/types/mintplayer-ng-bootstrap-progress-bar.d.ts +4 -2
- package/types/mintplayer-ng-bootstrap-range.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-rating.d.ts +3 -0
- package/types/mintplayer-ng-bootstrap-reduced-motion.d.ts +36 -0
- package/types/mintplayer-ng-bootstrap-resizable.d.ts +4 -0
- package/types/mintplayer-ng-bootstrap-scheduler.d.ts +42 -9
- package/types/mintplayer-ng-bootstrap-scrollspy.d.ts +1 -1
- package/types/mintplayer-ng-bootstrap-searchbox.d.ts +8 -1
- package/types/mintplayer-ng-bootstrap-select.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-select2.d.ts +3 -0
- package/types/mintplayer-ng-bootstrap-signature-pad.d.ts +2 -1
- package/types/mintplayer-ng-bootstrap-table.d.ts +8 -1
- package/types/mintplayer-ng-bootstrap-tile-manager.d.ts +21 -2
- package/types/mintplayer-ng-bootstrap-toast.d.ts +6 -1
- package/types/mintplayer-ng-bootstrap-toggle-button.d.ts +11 -0
- package/types/mintplayer-ng-bootstrap-tooltip.d.ts +5 -0
- package/types/mintplayer-ng-bootstrap-treeview.d.ts +12 -1
- package/types/mintplayer-ng-bootstrap-typeahead.d.ts +11 -3
- package/types/mintplayer-ng-bootstrap-virtual-datatable.d.ts +14 -1
- package/types/mintplayer-ng-bootstrap-web-components-a11y.d.ts +34 -0
- package/types/mintplayer-ng-bootstrap-web-components-scheduler-core.d.ts +35 -11
- package/types/mintplayer-ng-bootstrap-web-components-scheduler.d.ts +246 -0
- package/types/mintplayer-ng-bootstrap-web-components-splitter.d.ts +95 -37
|
@@ -1,13 +1,106 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input,
|
|
2
|
+
import { inject, ElementRef, input, computed, afterNextRender, ChangeDetectionStrategy, Component, signal, contentChildren } from '@angular/core';
|
|
3
3
|
import { BsDropdownDirective } from '@mintplayer/ng-bootstrap/dropdown';
|
|
4
|
+
import { BsIdService } from '@mintplayer/ng-bootstrap/a11y';
|
|
5
|
+
|
|
6
|
+
class BsDropdownItemComponent {
|
|
7
|
+
/**
|
|
8
|
+
* Resolved after first render so static `id="…"` attributes set by the consumer
|
|
9
|
+
* and any sibling host bindings have applied first. Read-only access for any
|
|
10
|
+
* other directive on the same element (e.g. BsRovingFocusItem) that needs a
|
|
11
|
+
* stable target id for aria-activedescendant.
|
|
12
|
+
*/
|
|
13
|
+
get itemId() {
|
|
14
|
+
return this.elementRef.nativeElement.id;
|
|
15
|
+
}
|
|
16
|
+
constructor() {
|
|
17
|
+
this.parent = inject(BsDropdownDirective, { optional: true });
|
|
18
|
+
this.menu = inject(BsDropdownMenuComponent, { optional: true });
|
|
19
|
+
/** Public so BsDropdownMenuComponent can imperatively focus this item during keyboard nav. */
|
|
20
|
+
this.elementRef = inject(ElementRef);
|
|
21
|
+
this.ids = inject(BsIdService);
|
|
22
|
+
this.isSelected = input(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
|
|
23
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
24
|
+
this.itemRole = computed(() => this.parent?.popupRole() === 'listbox' ? 'option' : 'menuitem', ...(ngDevMode ? [{ debugName: "itemRole" }] : /* istanbul ignore next */ []));
|
|
25
|
+
this.ariaSelected = computed(() => {
|
|
26
|
+
if (this.parent?.popupRole() !== 'listbox')
|
|
27
|
+
return null;
|
|
28
|
+
return this.isSelected() ? 'true' : 'false';
|
|
29
|
+
}, ...(ngDevMode ? [{ debugName: "ariaSelected" }] : /* istanbul ignore next */ []));
|
|
30
|
+
/**
|
|
31
|
+
* Roving tabindex in menu mode: the focused item is 0, others -1.
|
|
32
|
+
* In listbox mode (typeahead/select2/etc.), the consumer applies bsRovingFocusItem
|
|
33
|
+
* externally for activedescendant management; this binding stays null so it
|
|
34
|
+
* doesn't fight that directive.
|
|
35
|
+
*/
|
|
36
|
+
this.tabindex = computed(() => {
|
|
37
|
+
if (!this.menu?.isMenuMode())
|
|
38
|
+
return null;
|
|
39
|
+
if (this.disabled())
|
|
40
|
+
return -1;
|
|
41
|
+
return this.menu.isItemFocused(this) ? 0 : -1;
|
|
42
|
+
}, ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
|
|
43
|
+
afterNextRender(() => {
|
|
44
|
+
if (!this.elementRef.nativeElement.id) {
|
|
45
|
+
this.elementRef.nativeElement.id = this.ids.next('bs-dropdown-item');
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
onFocus() {
|
|
50
|
+
this.menu?.setFocusedItem(this);
|
|
51
|
+
}
|
|
52
|
+
onActivate(event) {
|
|
53
|
+
if (this.disabled())
|
|
54
|
+
return;
|
|
55
|
+
event.preventDefault();
|
|
56
|
+
this.elementRef.nativeElement.click();
|
|
57
|
+
}
|
|
58
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
59
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsDropdownItemComponent, isStandalone: true, selector: "bs-dropdown-item", inputs: { isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocus()", "keydown.enter": "onActivate($event)", "keydown.space": "onActivate($event)" }, properties: { "attr.role": "itemRole()", "attr.aria-selected": "ariaSelected()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.tabindex": "tabindex()" } }, ngImport: i0, template: "<li role=\"presentation\" class=\"dropdown-item cursor-pointer\" [class.active]=\"isSelected()\" [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n</li>\n", styles: [":host(.bs-rovingfocus-active)>.dropdown-item:not(.disabled):not(.active){color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
60
|
+
}
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDropdownItemComponent, decorators: [{
|
|
62
|
+
type: Component,
|
|
63
|
+
args: [{ selector: 'bs-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
64
|
+
'[attr.role]': 'itemRole()',
|
|
65
|
+
'[attr.aria-selected]': 'ariaSelected()',
|
|
66
|
+
'[attr.aria-disabled]': 'disabled() ? "true" : null',
|
|
67
|
+
'[attr.tabindex]': 'tabindex()',
|
|
68
|
+
'(focus)': 'onFocus()',
|
|
69
|
+
'(keydown.enter)': 'onActivate($event)',
|
|
70
|
+
'(keydown.space)': 'onActivate($event)',
|
|
71
|
+
}, template: "<li role=\"presentation\" class=\"dropdown-item cursor-pointer\" [class.active]=\"isSelected()\" [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n</li>\n", styles: [":host(.bs-rovingfocus-active)>.dropdown-item:not(.disabled):not(.active){color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}\n"] }]
|
|
72
|
+
}], ctorParameters: () => [], propDecorators: { isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
4
73
|
|
|
5
|
-
// import { BsDropdownComponent } from '@mintplayer/ng-bootstrap/dropdown';
|
|
6
74
|
class BsDropdownMenuComponent {
|
|
7
75
|
constructor() {
|
|
8
76
|
this.bsDropdown = inject(BsDropdownDirective, { optional: true });
|
|
9
77
|
this.maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
|
|
10
78
|
this.dropdownWith = signal(null, ...(ngDevMode ? [{ debugName: "dropdownWith" }] : /* istanbul ignore next */ []));
|
|
79
|
+
this.menuRole = computed(() => this.bsDropdown?.popupRole() ?? null, ...(ngDevMode ? [{ debugName: "menuRole" }] : /* istanbul ignore next */ []));
|
|
80
|
+
this.menuId = computed(() => this.bsDropdown?.menuId() || null, ...(ngDevMode ? [{ debugName: "menuId" }] : /* istanbul ignore next */ []));
|
|
81
|
+
/**
|
|
82
|
+
* Items projected into this menu. Used in menu mode (popupRole='menu') to
|
|
83
|
+
* implement roving-tabindex keyboard navigation. In listbox mode, callers
|
|
84
|
+
* (typeahead/select2/etc.) typically apply their own bsRovingFocus directly,
|
|
85
|
+
* so this menu's keyboard handler is a no-op.
|
|
86
|
+
*/
|
|
87
|
+
this.dropdownItems = contentChildren(BsDropdownItemComponent, { ...(ngDevMode ? { debugName: "dropdownItems" } : /* istanbul ignore next */ {}), descendants: true });
|
|
88
|
+
/** True when this is a plain menu (default), false when used as a combobox listbox. */
|
|
89
|
+
this.isMenuMode = computed(() => this.bsDropdown?.popupRole() !== 'listbox', ...(ngDevMode ? [{ debugName: "isMenuMode" }] : /* istanbul ignore next */ []));
|
|
90
|
+
/** Index into dropdownItems() of the item that currently holds the roving tabindex (menu mode). */
|
|
91
|
+
this.focusedIndex = signal(0, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
|
|
92
|
+
}
|
|
93
|
+
isItemFocused(item) {
|
|
94
|
+
if (!this.isMenuMode())
|
|
95
|
+
return false;
|
|
96
|
+
return this.dropdownItems()[this.focusedIndex()] === item;
|
|
97
|
+
}
|
|
98
|
+
setFocusedItem(item) {
|
|
99
|
+
if (!this.isMenuMode())
|
|
100
|
+
return;
|
|
101
|
+
const idx = this.dropdownItems().indexOf(item);
|
|
102
|
+
if (idx >= 0)
|
|
103
|
+
this.focusedIndex.set(idx);
|
|
11
104
|
}
|
|
12
105
|
onResize() {
|
|
13
106
|
if ((typeof window !== 'undefined') && this.bsDropdown && this.bsDropdown.sameDropdownWidth()) {
|
|
@@ -18,29 +111,81 @@ class BsDropdownMenuComponent {
|
|
|
18
111
|
ngAfterViewInit() {
|
|
19
112
|
this.onResize();
|
|
20
113
|
}
|
|
114
|
+
onKeydown(event) {
|
|
115
|
+
if (!this.isMenuMode())
|
|
116
|
+
return;
|
|
117
|
+
const items = this.dropdownItems();
|
|
118
|
+
if (items.length === 0)
|
|
119
|
+
return;
|
|
120
|
+
let handled = false;
|
|
121
|
+
switch (event.key) {
|
|
122
|
+
case 'ArrowDown':
|
|
123
|
+
this.moveFocus(+1);
|
|
124
|
+
handled = true;
|
|
125
|
+
break;
|
|
126
|
+
case 'ArrowUp':
|
|
127
|
+
this.moveFocus(-1);
|
|
128
|
+
handled = true;
|
|
129
|
+
break;
|
|
130
|
+
case 'Home':
|
|
131
|
+
this.moveTo(this.firstEnabledIndex());
|
|
132
|
+
handled = true;
|
|
133
|
+
break;
|
|
134
|
+
case 'End':
|
|
135
|
+
this.moveTo(this.lastEnabledIndex());
|
|
136
|
+
handled = true;
|
|
137
|
+
break;
|
|
138
|
+
}
|
|
139
|
+
if (handled)
|
|
140
|
+
event.preventDefault();
|
|
141
|
+
}
|
|
142
|
+
moveFocus(delta) {
|
|
143
|
+
const items = this.dropdownItems();
|
|
144
|
+
const total = items.length;
|
|
145
|
+
if (total === 0)
|
|
146
|
+
return;
|
|
147
|
+
let cursor = this.focusedIndex();
|
|
148
|
+
for (let i = 0; i < total; i++) {
|
|
149
|
+
cursor = (cursor + delta + total) % total;
|
|
150
|
+
if (!items[cursor].disabled()) {
|
|
151
|
+
this.moveTo(cursor);
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
firstEnabledIndex() {
|
|
157
|
+
return this.dropdownItems().findIndex(it => !it.disabled());
|
|
158
|
+
}
|
|
159
|
+
lastEnabledIndex() {
|
|
160
|
+
const items = this.dropdownItems();
|
|
161
|
+
for (let i = items.length - 1; i >= 0; i--) {
|
|
162
|
+
if (!items[i].disabled())
|
|
163
|
+
return i;
|
|
164
|
+
}
|
|
165
|
+
return -1;
|
|
166
|
+
}
|
|
167
|
+
moveTo(index) {
|
|
168
|
+
if (index < 0)
|
|
169
|
+
return;
|
|
170
|
+
this.focusedIndex.set(index);
|
|
171
|
+
const target = this.dropdownItems()[index];
|
|
172
|
+
if (target) {
|
|
173
|
+
target.elementRef.nativeElement.focus();
|
|
174
|
+
}
|
|
175
|
+
}
|
|
21
176
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDropdownMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
177
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: BsDropdownMenuComponent, isStandalone: true, selector: "bs-dropdown-menu", inputs: { maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()", "keydown": "onKeydown($event)" }, properties: { "style.width": "dropdownWith()", "attr.role": "menuRole()", "attr.id": "menuId()" } }, queries: [{ propertyName: "dropdownItems", predicate: BsDropdownItemComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ul role=\"presentation\" class=\"dropdown-menu position-static w-100 overflow-auto show\" [style.max-height.px]=\"maxHeight()\">\n <ng-content></ng-content>\n</ul>\n", styles: [":host ::ng-deep .dropup,:host ::ng-deep .dropend,:host ::ng-deep .dropdown,:host ::ng-deep .dropstart,:host ::ng-deep .dropup-center,:host ::ng-deep .dropdown-center{position:relative}:host ::ng-deep .dropdown-toggle{white-space:nowrap}:host ::ng-deep .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:\"\";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}:host ::ng-deep .dropdown-toggle:empty:after{margin-left:0}:host ::ng-deep .dropdown-menu{--bs-dropdown-zindex: 1000;--bs-dropdown-min-width: 10rem;--bs-dropdown-padding-x: 0;--bs-dropdown-padding-y: .5rem;--bs-dropdown-spacer: .125rem;--bs-dropdown-font-size: 1rem;--bs-dropdown-color: var(--bs-body-color);--bs-dropdown-bg: var(--bs-body-bg);--bs-dropdown-border-color: var(--bs-border-color-translucent);--bs-dropdown-border-radius: var(--bs-border-radius);--bs-dropdown-border-width: var(--bs-border-width);--bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));--bs-dropdown-divider-bg: var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y: .5rem;--bs-dropdown-box-shadow: var(--bs-box-shadow);--bs-dropdown-link-color: var(--bs-body-color);--bs-dropdown-link-hover-color: var(--bs-body-color);--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);--bs-dropdown-link-active-color: #fff;--bs-dropdown-link-active-bg: #0d6efd;--bs-dropdown-link-disabled-color: var(--bs-tertiary-color);--bs-dropdown-item-padding-x: 1rem;--bs-dropdown-item-padding-y: .25rem;--bs-dropdown-header-color: #6c757d;--bs-dropdown-header-padding-x: 1rem;--bs-dropdown-header-padding-y: .5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}:host ::ng-deep .dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}:host ::ng-deep .dropdown-menu-start{--bs-position: start}:host ::ng-deep .dropdown-menu-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-end{--bs-position: end}:host ::ng-deep .dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media(min-width:576px){:host ::ng-deep .dropdown-menu-sm-start{--bs-position: start}:host ::ng-deep .dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-sm-end{--bs-position: end}:host ::ng-deep .dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media(min-width:768px){:host ::ng-deep .dropdown-menu-md-start{--bs-position: start}:host ::ng-deep .dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-md-end{--bs-position: end}:host ::ng-deep .dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media(min-width:992px){:host ::ng-deep .dropdown-menu-lg-start{--bs-position: start}:host ::ng-deep .dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-lg-end{--bs-position: end}:host ::ng-deep .dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media(min-width:1200px){:host ::ng-deep .dropdown-menu-xl-start{--bs-position: start}:host ::ng-deep .dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-xl-end{--bs-position: end}:host ::ng-deep .dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media(min-width:1400px){:host ::ng-deep .dropdown-menu-xxl-start{--bs-position: start}:host ::ng-deep .dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-xxl-end{--bs-position: end}:host ::ng-deep .dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}:host ::ng-deep .dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}:host ::ng-deep .dropup .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:\"\";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}:host ::ng-deep .dropup .dropdown-toggle:empty:after{margin-left:0}:host ::ng-deep .dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}:host ::ng-deep .dropend .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:\"\";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}:host ::ng-deep .dropend .dropdown-toggle:empty:after{margin-left:0}:host ::ng-deep .dropend .dropdown-toggle:after{vertical-align:0}:host ::ng-deep .dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}:host ::ng-deep .dropstart .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:\"\"}:host ::ng-deep .dropstart .dropdown-toggle:after{display:none}:host ::ng-deep .dropstart .dropdown-toggle:before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:\"\";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}:host ::ng-deep .dropstart .dropdown-toggle:empty:after{margin-left:0}:host ::ng-deep .dropstart .dropdown-toggle:before{vertical-align:0}:host ::ng-deep .dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}:host ::ng-deep .dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;border-radius:var(--bs-dropdown-item-border-radius, 0)}:host ::ng-deep .dropdown-item:hover,:host ::ng-deep .dropdown-item:focus{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}:host ::ng-deep .dropdown-item.active,:host ::ng-deep .dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}:host ::ng-deep .dropdown-item.disabled,:host ::ng-deep .dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}:host ::ng-deep .dropdown-menu.show{display:block}:host ::ng-deep .dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}:host ::ng-deep .dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}:host ::ng-deep .dropdown-menu-dark{--bs-dropdown-color: #dee2e6;--bs-dropdown-bg: #343a40;--bs-dropdown-border-color: var(--bs-border-color-translucent);--bs-dropdown-box-shadow: ;--bs-dropdown-link-color: #dee2e6;--bs-dropdown-link-hover-color: #fff;--bs-dropdown-divider-bg: var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg: rgba(255, 255, 255, .15);--bs-dropdown-link-active-color: #fff;--bs-dropdown-link-active-bg: #0d6efd;--bs-dropdown-link-disabled-color: #adb5bd;--bs-dropdown-header-color: #adb5bd}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23
178
|
}
|
|
24
179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDropdownMenuComponent, decorators: [{
|
|
25
180
|
type: Component,
|
|
26
181
|
args: [{ selector: 'bs-dropdown-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
27
182
|
'[style.width]': 'dropdownWith()',
|
|
28
183
|
'(window:resize)': 'onResize()',
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
class
|
|
33
|
-
|
|
34
|
-
this.isSelected = input(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
|
|
35
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
36
|
-
}
|
|
37
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
38
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.11", type: BsDropdownItemComponent, isStandalone: true, selector: "bs-dropdown-item", inputs: { isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<li class=\"dropdown-item cursor-pointer\" [class.active]=\"isSelected()\" [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n</li>", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
39
|
-
}
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDropdownItemComponent, decorators: [{
|
|
41
|
-
type: Component,
|
|
42
|
-
args: [{ selector: 'bs-dropdown-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<li class=\"dropdown-item cursor-pointer\" [class.active]=\"isSelected()\" [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n</li>" }]
|
|
43
|
-
}], propDecorators: { isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
|
|
184
|
+
'[attr.role]': 'menuRole()',
|
|
185
|
+
'[attr.id]': 'menuId()',
|
|
186
|
+
'(keydown)': 'onKeydown($event)',
|
|
187
|
+
}, template: "<ul role=\"presentation\" class=\"dropdown-menu position-static w-100 overflow-auto show\" [style.max-height.px]=\"maxHeight()\">\n <ng-content></ng-content>\n</ul>\n", styles: [":host ::ng-deep .dropup,:host ::ng-deep .dropend,:host ::ng-deep .dropdown,:host ::ng-deep .dropstart,:host ::ng-deep .dropup-center,:host ::ng-deep .dropdown-center{position:relative}:host ::ng-deep .dropdown-toggle{white-space:nowrap}:host ::ng-deep .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:\"\";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}:host ::ng-deep .dropdown-toggle:empty:after{margin-left:0}:host ::ng-deep .dropdown-menu{--bs-dropdown-zindex: 1000;--bs-dropdown-min-width: 10rem;--bs-dropdown-padding-x: 0;--bs-dropdown-padding-y: .5rem;--bs-dropdown-spacer: .125rem;--bs-dropdown-font-size: 1rem;--bs-dropdown-color: var(--bs-body-color);--bs-dropdown-bg: var(--bs-body-bg);--bs-dropdown-border-color: var(--bs-border-color-translucent);--bs-dropdown-border-radius: var(--bs-border-radius);--bs-dropdown-border-width: var(--bs-border-width);--bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));--bs-dropdown-divider-bg: var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y: .5rem;--bs-dropdown-box-shadow: var(--bs-box-shadow);--bs-dropdown-link-color: var(--bs-body-color);--bs-dropdown-link-hover-color: var(--bs-body-color);--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);--bs-dropdown-link-active-color: #fff;--bs-dropdown-link-active-bg: #0d6efd;--bs-dropdown-link-disabled-color: var(--bs-tertiary-color);--bs-dropdown-item-padding-x: 1rem;--bs-dropdown-item-padding-y: .25rem;--bs-dropdown-header-color: #6c757d;--bs-dropdown-header-padding-x: 1rem;--bs-dropdown-header-padding-y: .5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}:host ::ng-deep .dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:var(--bs-dropdown-spacer)}:host ::ng-deep .dropdown-menu-start{--bs-position: start}:host ::ng-deep .dropdown-menu-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-end{--bs-position: end}:host ::ng-deep .dropdown-menu-end[data-bs-popper]{right:0;left:auto}@media(min-width:576px){:host ::ng-deep .dropdown-menu-sm-start{--bs-position: start}:host ::ng-deep .dropdown-menu-sm-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-sm-end{--bs-position: end}:host ::ng-deep .dropdown-menu-sm-end[data-bs-popper]{right:0;left:auto}}@media(min-width:768px){:host ::ng-deep .dropdown-menu-md-start{--bs-position: start}:host ::ng-deep .dropdown-menu-md-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-md-end{--bs-position: end}:host ::ng-deep .dropdown-menu-md-end[data-bs-popper]{right:0;left:auto}}@media(min-width:992px){:host ::ng-deep .dropdown-menu-lg-start{--bs-position: start}:host ::ng-deep .dropdown-menu-lg-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-lg-end{--bs-position: end}:host ::ng-deep .dropdown-menu-lg-end[data-bs-popper]{right:0;left:auto}}@media(min-width:1200px){:host ::ng-deep .dropdown-menu-xl-start{--bs-position: start}:host ::ng-deep .dropdown-menu-xl-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-xl-end{--bs-position: end}:host ::ng-deep .dropdown-menu-xl-end[data-bs-popper]{right:0;left:auto}}@media(min-width:1400px){:host ::ng-deep .dropdown-menu-xxl-start{--bs-position: start}:host ::ng-deep .dropdown-menu-xxl-start[data-bs-popper]{right:auto;left:0}:host ::ng-deep .dropdown-menu-xxl-end{--bs-position: end}:host ::ng-deep .dropdown-menu-xxl-end[data-bs-popper]{right:0;left:auto}}:host ::ng-deep .dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bs-dropdown-spacer)}:host ::ng-deep .dropup .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:\"\";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}:host ::ng-deep .dropup .dropdown-toggle:empty:after{margin-left:0}:host ::ng-deep .dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:var(--bs-dropdown-spacer)}:host ::ng-deep .dropend .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:\"\";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}:host ::ng-deep .dropend .dropdown-toggle:empty:after{margin-left:0}:host ::ng-deep .dropend .dropdown-toggle:after{vertical-align:0}:host ::ng-deep .dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:var(--bs-dropdown-spacer)}:host ::ng-deep .dropstart .dropdown-toggle:after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:\"\"}:host ::ng-deep .dropstart .dropdown-toggle:after{display:none}:host ::ng-deep .dropstart .dropdown-toggle:before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:\"\";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}:host ::ng-deep .dropstart .dropdown-toggle:empty:after{margin-left:0}:host ::ng-deep .dropstart .dropdown-toggle:before{vertical-align:0}:host ::ng-deep .dropdown-divider{height:0;margin:var(--bs-dropdown-divider-margin-y) 0;overflow:hidden;border-top:1px solid var(--bs-dropdown-divider-bg);opacity:1}:host ::ng-deep .dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;border-radius:var(--bs-dropdown-item-border-radius, 0)}:host ::ng-deep .dropdown-item:hover,:host ::ng-deep .dropdown-item:focus{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}:host ::ng-deep .dropdown-item.active,:host ::ng-deep .dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}:host ::ng-deep .dropdown-item.disabled,:host ::ng-deep .dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}:host ::ng-deep .dropdown-menu.show{display:block}:host ::ng-deep .dropdown-header{display:block;padding:var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);margin-bottom:0;font-size:.875rem;color:var(--bs-dropdown-header-color);white-space:nowrap}:host ::ng-deep .dropdown-item-text{display:block;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);color:var(--bs-dropdown-link-color)}:host ::ng-deep .dropdown-menu-dark{--bs-dropdown-color: #dee2e6;--bs-dropdown-bg: #343a40;--bs-dropdown-border-color: var(--bs-border-color-translucent);--bs-dropdown-box-shadow: ;--bs-dropdown-link-color: #dee2e6;--bs-dropdown-link-hover-color: #fff;--bs-dropdown-divider-bg: var(--bs-border-color-translucent);--bs-dropdown-link-hover-bg: rgba(255, 255, 255, .15);--bs-dropdown-link-active-color: #fff;--bs-dropdown-link-active-bg: #0d6efd;--bs-dropdown-link-disabled-color: #adb5bd;--bs-dropdown-header-color: #adb5bd}\n"] }]
|
|
188
|
+
}], propDecorators: { maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], dropdownItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BsDropdownItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
|
|
44
189
|
|
|
45
190
|
/**
|
|
46
191
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mintplayer-ng-bootstrap-dropdown-menu.mjs","sources":["../../../../libs/mintplayer-ng-bootstrap/dropdown-menu/src/dropdown-menu/dropdown-menu.component.ts","../../../../libs/mintplayer-ng-bootstrap/dropdown-menu/src/dropdown-menu/dropdown-menu.component.html","../../../../libs/mintplayer-ng-bootstrap/dropdown-menu/src/dropdown-item/dropdown-item.component.ts","../../../../libs/mintplayer-ng-bootstrap/dropdown-menu/src/dropdown-item/dropdown-item.component.html","../../../../libs/mintplayer-ng-bootstrap/dropdown-menu/mintplayer-ng-bootstrap-dropdown-menu.ts"],"sourcesContent":["import { AfterViewInit, Component, inject, input, signal, ChangeDetectionStrategy} from '@angular/core';\nimport { BsDropdownDirective } from '@mintplayer/ng-bootstrap/dropdown';\n// import { BsDropdownComponent } from '@mintplayer/ng-bootstrap/dropdown';\n\n@Component({\n selector: 'bs-dropdown-menu',\n templateUrl: './dropdown-menu.component.html',\n styleUrls: ['./dropdown-menu.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[style.width]': 'dropdownWith()',\n '(window:resize)': 'onResize()',\n },\n})\nexport class BsDropdownMenuComponent implements AfterViewInit {\n private bsDropdown = inject(BsDropdownDirective, { optional: true });\n\n readonly maxHeight = input<number | null>(null);\n dropdownWith = signal<string | null>(null);\n\n onResize() {\n if ((typeof window !== 'undefined') && this.bsDropdown && this.bsDropdown.sameDropdownWidth()) {\n const element = this.bsDropdown.elementRef.nativeElement;\n this.dropdownWith.set(window.getComputedStyle(element).width);\n }\n }\n\n ngAfterViewInit() {\n this.onResize();\n }\n}\n","<ul class=\"dropdown-menu position-static w-100 overflow-auto show\" [style.max-height.px]=\"maxHeight()\">\n <ng-content></ng-content>\n <!-- <ng-content select=\"bs-dropdown-item\"></ng-content> -->\n</ul>","import { Component, input, ChangeDetectionStrategy} from '@angular/core';\n\n@Component({\n selector: 'bs-dropdown-item',\n templateUrl: './dropdown-item.component.html',\n styleUrls: ['./dropdown-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BsDropdownItemComponent {\n readonly isSelected = input(false);\n readonly disabled = input(false);\n}\n","<li class=\"dropdown-item cursor-pointer\" [class.active]=\"isSelected()\" [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n</li>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAEA;MAYa,uBAAuB,CAAA;AAVpC,IAAA,WAAA,GAAA;QAWU,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,mBAAmB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE3D,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAgB,IAAI,gFAAC;AAC/C,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAgB,IAAI,mFAAC;AAY3C,IAAA;IAVC,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,OAAO,MAAM,KAAK,WAAW,KAAK,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,EAAE;YAC7F,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,aAAa;AACxD,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;QAC/D;IACF;IAEA,eAAe,GAAA;QACb,IAAI,CAAC,QAAQ,EAAE;IACjB;+GAfW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,qUCdpC,uNAGK,EAAA,MAAA,EAAA,CAAA,y4OAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDWQ,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAVnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,eAAe,EAAE,gBAAgB;AACjC,wBAAA,iBAAiB,EAAE,YAAY;AAChC,qBAAA,EAAA,QAAA,EAAA,uNAAA,EAAA,MAAA,EAAA,CAAA,y4OAAA,CAAA,EAAA;;;MEJU,uBAAuB,CAAA;AANpC,IAAA,WAAA,GAAA;AAOW,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,KAAK,iFAAC;AACzB,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,+EAAC;AACjC,IAAA;+GAHY,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,uBAAuB,gWCRpC,mJAEK,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FDMQ,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBANnC,SAAS;+BACE,kBAAkB,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,mJAAA,EAAA;;;AENjD;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"mintplayer-ng-bootstrap-dropdown-menu.mjs","sources":["../../../../libs/mintplayer-ng-bootstrap/dropdown-menu/src/dropdown-item/dropdown-item.component.ts","../../../../libs/mintplayer-ng-bootstrap/dropdown-menu/src/dropdown-item/dropdown-item.component.html","../../../../libs/mintplayer-ng-bootstrap/dropdown-menu/src/dropdown-menu/dropdown-menu.component.ts","../../../../libs/mintplayer-ng-bootstrap/dropdown-menu/src/dropdown-menu/dropdown-menu.component.html","../../../../libs/mintplayer-ng-bootstrap/dropdown-menu/mintplayer-ng-bootstrap-dropdown-menu.ts"],"sourcesContent":["import { afterNextRender, Component, computed, ElementRef, inject, input, ChangeDetectionStrategy } from '@angular/core';\nimport { BsDropdownDirective } from '@mintplayer/ng-bootstrap/dropdown';\nimport { BsIdService } from '@mintplayer/ng-bootstrap/a11y';\nimport { BsDropdownMenuComponent } from '../dropdown-menu/dropdown-menu.component';\n\n@Component({\n selector: 'bs-dropdown-item',\n templateUrl: './dropdown-item.component.html',\n styleUrls: ['./dropdown-item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.role]': 'itemRole()',\n '[attr.aria-selected]': 'ariaSelected()',\n '[attr.aria-disabled]': 'disabled() ? \"true\" : null',\n '[attr.tabindex]': 'tabindex()',\n '(focus)': 'onFocus()',\n '(keydown.enter)': 'onActivate($event)',\n '(keydown.space)': 'onActivate($event)',\n },\n})\nexport class BsDropdownItemComponent {\n private parent = inject(BsDropdownDirective, { optional: true });\n private menu = inject(BsDropdownMenuComponent, { optional: true });\n /** Public so BsDropdownMenuComponent can imperatively focus this item during keyboard nav. */\n readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private ids = inject(BsIdService);\n\n readonly isSelected = input(false);\n readonly disabled = input(false);\n\n readonly itemRole = computed(() =>\n this.parent?.popupRole() === 'listbox' ? 'option' : 'menuitem');\n\n readonly ariaSelected = computed(() => {\n if (this.parent?.popupRole() !== 'listbox') return null;\n return this.isSelected() ? 'true' : 'false';\n });\n\n /**\n * Roving tabindex in menu mode: the focused item is 0, others -1.\n * In listbox mode (typeahead/select2/etc.), the consumer applies bsRovingFocusItem\n * externally for activedescendant management; this binding stays null so it\n * doesn't fight that directive.\n */\n readonly tabindex = computed<number | null>(() => {\n if (!this.menu?.isMenuMode()) return null;\n if (this.disabled()) return -1;\n return this.menu.isItemFocused(this) ? 0 : -1;\n });\n\n /**\n * Resolved after first render so static `id=\"…\"` attributes set by the consumer\n * and any sibling host bindings have applied first. Read-only access for any\n * other directive on the same element (e.g. BsRovingFocusItem) that needs a\n * stable target id for aria-activedescendant.\n */\n get itemId(): string {\n return this.elementRef.nativeElement.id;\n }\n\n constructor() {\n afterNextRender(() => {\n if (!this.elementRef.nativeElement.id) {\n this.elementRef.nativeElement.id = this.ids.next('bs-dropdown-item');\n }\n });\n }\n\n onFocus() {\n this.menu?.setFocusedItem(this);\n }\n\n onActivate(event: Event) {\n if (this.disabled()) return;\n event.preventDefault();\n this.elementRef.nativeElement.click();\n }\n}\n","<li role=\"presentation\" class=\"dropdown-item cursor-pointer\" [class.active]=\"isSelected()\" [class.disabled]=\"disabled()\">\n <ng-content></ng-content>\n</li>\n","import { AfterViewInit, Component, computed, contentChildren, ElementRef, inject, input, signal, ChangeDetectionStrategy } from '@angular/core';\nimport { BsDropdownDirective } from '@mintplayer/ng-bootstrap/dropdown';\nimport { BsDropdownItemComponent } from '../dropdown-item/dropdown-item.component';\n\n@Component({\n selector: 'bs-dropdown-menu',\n templateUrl: './dropdown-menu.component.html',\n styleUrls: ['./dropdown-menu.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[style.width]': 'dropdownWith()',\n '(window:resize)': 'onResize()',\n '[attr.role]': 'menuRole()',\n '[attr.id]': 'menuId()',\n '(keydown)': 'onKeydown($event)',\n },\n})\nexport class BsDropdownMenuComponent implements AfterViewInit {\n private bsDropdown = inject(BsDropdownDirective, { optional: true });\n\n readonly maxHeight = input<number | null>(null);\n dropdownWith = signal<string | null>(null);\n\n readonly menuRole = computed(() => this.bsDropdown?.popupRole() ?? null);\n readonly menuId = computed(() => this.bsDropdown?.menuId() || null);\n\n /**\n * Items projected into this menu. Used in menu mode (popupRole='menu') to\n * implement roving-tabindex keyboard navigation. In listbox mode, callers\n * (typeahead/select2/etc.) typically apply their own bsRovingFocus directly,\n * so this menu's keyboard handler is a no-op.\n */\n readonly dropdownItems = contentChildren(BsDropdownItemComponent, { descendants: true });\n\n /** True when this is a plain menu (default), false when used as a combobox listbox. */\n readonly isMenuMode = computed(() => this.bsDropdown?.popupRole() !== 'listbox');\n\n /** Index into dropdownItems() of the item that currently holds the roving tabindex (menu mode). */\n readonly focusedIndex = signal<number>(0);\n\n isItemFocused(item: BsDropdownItemComponent): boolean {\n if (!this.isMenuMode()) return false;\n return this.dropdownItems()[this.focusedIndex()] === item;\n }\n\n setFocusedItem(item: BsDropdownItemComponent) {\n if (!this.isMenuMode()) return;\n const idx = this.dropdownItems().indexOf(item);\n if (idx >= 0) this.focusedIndex.set(idx);\n }\n\n onResize() {\n if ((typeof window !== 'undefined') && this.bsDropdown && this.bsDropdown.sameDropdownWidth()) {\n const element = this.bsDropdown.elementRef.nativeElement;\n this.dropdownWith.set(window.getComputedStyle(element).width);\n }\n }\n\n ngAfterViewInit() {\n this.onResize();\n }\n\n onKeydown(event: KeyboardEvent) {\n if (!this.isMenuMode()) return;\n const items = this.dropdownItems();\n if (items.length === 0) return;\n\n let handled = false;\n switch (event.key) {\n case 'ArrowDown':\n this.moveFocus(+1);\n handled = true;\n break;\n case 'ArrowUp':\n this.moveFocus(-1);\n handled = true;\n break;\n case 'Home':\n this.moveTo(this.firstEnabledIndex());\n handled = true;\n break;\n case 'End':\n this.moveTo(this.lastEnabledIndex());\n handled = true;\n break;\n }\n if (handled) event.preventDefault();\n }\n\n private moveFocus(delta: 1 | -1): void {\n const items = this.dropdownItems();\n const total = items.length;\n if (total === 0) return;\n let cursor = this.focusedIndex();\n for (let i = 0; i < total; i++) {\n cursor = (cursor + delta + total) % total;\n if (!items[cursor].disabled()) {\n this.moveTo(cursor);\n return;\n }\n }\n }\n\n private firstEnabledIndex(): number {\n return this.dropdownItems().findIndex(it => !it.disabled());\n }\n\n private lastEnabledIndex(): number {\n const items = this.dropdownItems();\n for (let i = items.length - 1; i >= 0; i--) {\n if (!items[i].disabled()) return i;\n }\n return -1;\n }\n\n private moveTo(index: number): void {\n if (index < 0) return;\n this.focusedIndex.set(index);\n const target = this.dropdownItems()[index];\n if (target) {\n target.elementRef.nativeElement.focus();\n }\n }\n}\n","<ul role=\"presentation\" class=\"dropdown-menu position-static w-100 overflow-auto show\" [style.max-height.px]=\"maxHeight()\">\n <ng-content></ng-content>\n</ul>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, forwardRef, ViewContainerRef, TemplateRef, DestroyRef, effect, Directive, ElementRef, contentChild, input, model } from '@angular/core';
|
|
2
|
+
import { inject, forwardRef, ViewContainerRef, TemplateRef, DestroyRef, effect, Directive, ElementRef, contentChild, input, model, signal, afterNextRender, computed, output } from '@angular/core';
|
|
3
3
|
import { BS_DEVELOPMENT } from '@mintplayer/ng-bootstrap';
|
|
4
|
+
import { BsOverlayStackService, BsIdService, BsRovingFocusDirective } from '@mintplayer/ng-bootstrap/a11y';
|
|
4
5
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
5
6
|
import { Overlay } from '@angular/cdk/overlay';
|
|
6
7
|
import { ClickOutsideDirective } from '@mintplayer/ng-click-outside';
|
|
@@ -14,11 +15,20 @@ class BsDropdownMenuDirective extends ClickOutsideDirective {
|
|
|
14
15
|
this.overlay = inject(Overlay);
|
|
15
16
|
this.destroy = inject(DestroyRef);
|
|
16
17
|
this.bsDevelopment = inject(BS_DEVELOPMENT, { optional: true });
|
|
18
|
+
this.overlayStack = inject(BsOverlayStackService);
|
|
17
19
|
this.wait = false;
|
|
18
20
|
this.overlayRef = null;
|
|
19
21
|
this.templatePortal = null;
|
|
22
|
+
this.stackToken = null;
|
|
20
23
|
effect(() => {
|
|
21
24
|
const isOpen = this.dropdown.isOpen();
|
|
25
|
+
if (isOpen && this.stackToken === null) {
|
|
26
|
+
this.stackToken = this.overlayStack.push();
|
|
27
|
+
}
|
|
28
|
+
else if (!isOpen && this.stackToken !== null) {
|
|
29
|
+
this.overlayStack.release(this.stackToken);
|
|
30
|
+
this.stackToken = null;
|
|
31
|
+
}
|
|
22
32
|
if (isOpen) {
|
|
23
33
|
// Prevent creating duplicate overlays if effect re-runs while still open
|
|
24
34
|
if (this.overlayRef) {
|
|
@@ -71,7 +81,9 @@ class BsDropdownMenuDirective extends ClickOutsideDirective {
|
|
|
71
81
|
}
|
|
72
82
|
}
|
|
73
83
|
onEscape(event) {
|
|
74
|
-
this.
|
|
84
|
+
if (this.stackToken !== null && this.overlayStack.isTop(this.stackToken)) {
|
|
85
|
+
this.doClose();
|
|
86
|
+
}
|
|
75
87
|
}
|
|
76
88
|
doClose() {
|
|
77
89
|
const isOpen = this.dropdown.isOpen();
|
|
@@ -102,15 +114,16 @@ class BsDropdownToggleDirective {
|
|
|
102
114
|
this.dropdown.isOpen.set(!this.dropdown.isOpen());
|
|
103
115
|
}
|
|
104
116
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDropdownToggleDirective, deps: [{ token: BsDropdownDirective }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
105
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: BsDropdownToggleDirective, isStandalone: true, selector: "[bsDropdownToggle]", host: { listeners: { "click": "onClick()" }, properties: { "attr.aria-haspopup": "
|
|
117
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: BsDropdownToggleDirective, isStandalone: true, selector: "[bsDropdownToggle]", host: { listeners: { "click": "onClick()" }, properties: { "attr.aria-haspopup": "dropdown.popupRole()", "attr.aria-expanded": "dropdown.isOpen()", "attr.aria-controls": "dropdown.menuId() || null" } }, ngImport: i0 }); }
|
|
106
118
|
}
|
|
107
119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDropdownToggleDirective, decorators: [{
|
|
108
120
|
type: Directive,
|
|
109
121
|
args: [{
|
|
110
122
|
selector: '[bsDropdownToggle]',
|
|
111
123
|
host: {
|
|
112
|
-
'[attr.aria-haspopup]': '
|
|
124
|
+
'[attr.aria-haspopup]': 'dropdown.popupRole()',
|
|
113
125
|
'[attr.aria-expanded]': 'dropdown.isOpen()',
|
|
126
|
+
'[attr.aria-controls]': 'dropdown.menuId() || null',
|
|
114
127
|
'(click)': 'onClick()',
|
|
115
128
|
},
|
|
116
129
|
}]
|
|
@@ -120,13 +133,23 @@ class BsDropdownDirective {
|
|
|
120
133
|
constructor() {
|
|
121
134
|
this.elementRef = inject(ElementRef);
|
|
122
135
|
this.bsDevelopment = inject(BS_DEVELOPMENT, { optional: true });
|
|
136
|
+
this.ids = inject(BsIdService);
|
|
123
137
|
this.menu = contentChild.required(BsDropdownMenuDirective);
|
|
124
138
|
this.toggle = contentChild(BsDropdownToggleDirective, ...(ngDevMode ? [{ debugName: "toggle" }] : /* istanbul ignore next */ []));
|
|
139
|
+
this.rovingFocus = contentChild(BsRovingFocusDirective, { ...(ngDevMode ? { debugName: "rovingFocus" } : /* istanbul ignore next */ {}), descendants: true });
|
|
125
140
|
this.hasBackdrop = input(false, ...(ngDevMode ? [{ debugName: "hasBackdrop" }] : /* istanbul ignore next */ []));
|
|
126
141
|
this.sameWidth = input(false, ...(ngDevMode ? [{ debugName: "sameWidth" }] : /* istanbul ignore next */ []));
|
|
127
142
|
this.closeOnClickOutside = input(true, ...(ngDevMode ? [{ debugName: "closeOnClickOutside" }] : /* istanbul ignore next */ []));
|
|
128
143
|
this.sameDropdownWidth = input(false, ...(ngDevMode ? [{ debugName: "sameDropdownWidth" }] : /* istanbul ignore next */ []));
|
|
129
144
|
this.isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
145
|
+
this.popupRole = input('menu', ...(ngDevMode ? [{ debugName: "popupRole" }] : /* istanbul ignore next */ []));
|
|
146
|
+
/** Reactive id used for the menu's host id and for the toggle's aria-controls. Empty until afterNextRender resolves the host's static id (or generates one), so sibling host bindings on the wrapper element get a chance to land first. */
|
|
147
|
+
this._menuId = signal('', ...(ngDevMode ? [{ debugName: "_menuId" }] : /* istanbul ignore next */ []));
|
|
148
|
+
this.menuId = this._menuId.asReadonly();
|
|
149
|
+
afterNextRender(() => {
|
|
150
|
+
const hostId = this.elementRef.nativeElement.id;
|
|
151
|
+
this._menuId.set(hostId ? `${hostId}-menu` : this.ids.next('bs-dropdown-menu'));
|
|
152
|
+
});
|
|
130
153
|
}
|
|
131
154
|
onBlur() {
|
|
132
155
|
if (this.closeOnClickOutside() && !this.bsDevelopment) {
|
|
@@ -134,21 +157,170 @@ class BsDropdownDirective {
|
|
|
134
157
|
}
|
|
135
158
|
}
|
|
136
159
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
137
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.11", type: BsDropdownDirective, isStandalone: true, selector: "[bsDropdown]", inputs: { hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, sameWidth: { classPropertyName: "sameWidth", publicName: "sameWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, sameDropdownWidth: { classPropertyName: "sameDropdownWidth", publicName: "sameDropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "window:blur": "onBlur()" } }, queries: [{ propertyName: "menu", first: true, predicate: BsDropdownMenuDirective, descendants: true, isSignal: true }, { propertyName: "toggle", first: true, predicate: BsDropdownToggleDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
160
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.11", type: BsDropdownDirective, isStandalone: true, selector: "[bsDropdown]", inputs: { hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, sameWidth: { classPropertyName: "sameWidth", publicName: "sameWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null }, sameDropdownWidth: { classPropertyName: "sameDropdownWidth", publicName: "sameDropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, popupRole: { classPropertyName: "popupRole", publicName: "popupRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "window:blur": "onBlur()" } }, queries: [{ propertyName: "menu", first: true, predicate: BsDropdownMenuDirective, descendants: true, isSignal: true }, { propertyName: "toggle", first: true, predicate: BsDropdownToggleDirective, descendants: true, isSignal: true }, { propertyName: "rovingFocus", first: true, predicate: BsRovingFocusDirective, descendants: true, isSignal: true }], exportAs: ["bsDropdown"], ngImport: i0 }); }
|
|
138
161
|
}
|
|
139
162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsDropdownDirective, decorators: [{
|
|
140
163
|
type: Directive,
|
|
141
164
|
args: [{
|
|
142
165
|
selector: '[bsDropdown]',
|
|
166
|
+
exportAs: 'bsDropdown',
|
|
143
167
|
host: {
|
|
144
168
|
'(window:blur)': 'onBlur()',
|
|
145
169
|
},
|
|
146
170
|
}]
|
|
147
|
-
}], propDecorators: { menu: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BsDropdownMenuDirective), { isSignal: true }] }], toggle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BsDropdownToggleDirective), { isSignal: true }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], sameWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sameWidth", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], sameDropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sameDropdownWidth", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }] } });
|
|
171
|
+
}], ctorParameters: () => [], propDecorators: { menu: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BsDropdownMenuDirective), { isSignal: true }] }], toggle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BsDropdownToggleDirective), { isSignal: true }] }], rovingFocus: [{ type: i0.ContentChild, args: [i0.forwardRef(() => BsRovingFocusDirective), { ...{ descendants: true }, isSignal: true }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], sameWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sameWidth", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], sameDropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sameDropdownWidth", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }, { type: i0.Output, args: ["isOpenChange"] }], popupRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupRole", required: false }] }] } });
|
|
172
|
+
|
|
173
|
+
/**
|
|
174
|
+
* APG Combobox pattern — turns a plain `<input>` into a combobox that drives
|
|
175
|
+
* an adjacent `bsDropdown` popup (typeahead, select2, multiselect, searchbox).
|
|
176
|
+
*
|
|
177
|
+
* The directive owns the input-side ARIA wiring:
|
|
178
|
+
* - `role="combobox"` on the host
|
|
179
|
+
* - `aria-expanded` / `aria-controls` derived from the parent dropdown
|
|
180
|
+
* - `aria-activedescendant` mirroring the dropdown's `bsRovingFocus` active id
|
|
181
|
+
* - `aria-autocomplete` (defaults to `"list"`)
|
|
182
|
+
*
|
|
183
|
+
* Keyboard model:
|
|
184
|
+
* - **ArrowUp/Down/Home/End** — opens the popup if closed; once open,
|
|
185
|
+
* forwards to the dropdown's `bsRovingFocus` (or emits a `navigate` event
|
|
186
|
+
* if no roving-focus is found, so consumers can manage navigation manually).
|
|
187
|
+
* - **Enter** — fires `activate` so the consumer can commit the highlighted
|
|
188
|
+
* option. `stopImmediatePropagation` is called to keep sibling
|
|
189
|
+
* `(keydown.enter)` listeners on the same input (e.g. "submit free-text
|
|
190
|
+
* search") from also firing on the same Enter.
|
|
191
|
+
* - **Escape** — closes the popup and fires `cancel`.
|
|
192
|
+
* - **Tab** — hybrid behaviour: while the popup is open and a roving-focus
|
|
193
|
+
* is present, Tab advances the active descendant; at the boundary, Tab
|
|
194
|
+
* closes the popup and falls through to the browser's default tab order.
|
|
195
|
+
*/
|
|
196
|
+
class BsComboboxDirective {
|
|
197
|
+
constructor() {
|
|
198
|
+
this.dropdown = inject(BsDropdownDirective, { optional: true });
|
|
199
|
+
/** Aliased to bsComboboxAutocomplete to avoid colliding with the host input's native HTML autocomplete attribute. */
|
|
200
|
+
this.autocomplete = input('list', { ...(ngDevMode ? { debugName: "autocomplete" } : /* istanbul ignore next */ {}), alias: 'bsComboboxAutocomplete' });
|
|
201
|
+
/** Override the auto-derived activeDescendant. Defaults to dropdown.rovingFocus()'s id when present. */
|
|
202
|
+
this.activeDescendant = input(null, ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
|
|
203
|
+
this.expanded = computed(() => this.dropdown?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
|
|
204
|
+
this.controls = computed(() => this.dropdown?.menuId() || null, ...(ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []));
|
|
205
|
+
this.resolvedActiveDescendant = computed(() => this.activeDescendant() ?? this.dropdown?.rovingFocus()?.activeDescendantId() ?? null, ...(ngDevMode ? [{ debugName: "resolvedActiveDescendant" }] : /* istanbul ignore next */ []));
|
|
206
|
+
/** Fires only when no BsRovingFocus is found inside the parent dropdown — otherwise arrow keys are forwarded automatically. */
|
|
207
|
+
this.navigate = output();
|
|
208
|
+
this.activate = output();
|
|
209
|
+
this.cancel = output();
|
|
210
|
+
}
|
|
211
|
+
onKeydown(event) {
|
|
212
|
+
// Skip browser/OS chords on the navigation keys; Tab is exempt because Shift+Tab is a legit chord
|
|
213
|
+
// and Ctrl/Alt/Meta+Tab don't reach JS in any browser.
|
|
214
|
+
if (event.key !== 'Tab' && (event.altKey || event.ctrlKey || event.metaKey))
|
|
215
|
+
return;
|
|
216
|
+
const isOpen = this.expanded();
|
|
217
|
+
const rf = this.dropdown?.rovingFocus();
|
|
218
|
+
switch (event.key) {
|
|
219
|
+
case 'ArrowDown':
|
|
220
|
+
if (!isOpen)
|
|
221
|
+
this.dropdown?.isOpen.set(true);
|
|
222
|
+
else if (rf)
|
|
223
|
+
rf.next();
|
|
224
|
+
else
|
|
225
|
+
this.navigate.emit('next');
|
|
226
|
+
event.preventDefault();
|
|
227
|
+
break;
|
|
228
|
+
case 'ArrowUp':
|
|
229
|
+
if (!isOpen)
|
|
230
|
+
this.dropdown?.isOpen.set(true);
|
|
231
|
+
else if (rf)
|
|
232
|
+
rf.prev();
|
|
233
|
+
else
|
|
234
|
+
this.navigate.emit('prev');
|
|
235
|
+
event.preventDefault();
|
|
236
|
+
break;
|
|
237
|
+
case 'Home':
|
|
238
|
+
if (isOpen) {
|
|
239
|
+
if (rf)
|
|
240
|
+
rf.focusFirst();
|
|
241
|
+
else
|
|
242
|
+
this.navigate.emit('first');
|
|
243
|
+
event.preventDefault();
|
|
244
|
+
}
|
|
245
|
+
break;
|
|
246
|
+
case 'End':
|
|
247
|
+
if (isOpen) {
|
|
248
|
+
if (rf)
|
|
249
|
+
rf.focusLast();
|
|
250
|
+
else
|
|
251
|
+
this.navigate.emit('last');
|
|
252
|
+
event.preventDefault();
|
|
253
|
+
}
|
|
254
|
+
break;
|
|
255
|
+
case 'Escape':
|
|
256
|
+
if (isOpen) {
|
|
257
|
+
this.dropdown?.isOpen.set(false);
|
|
258
|
+
this.cancel.emit(event);
|
|
259
|
+
event.preventDefault();
|
|
260
|
+
}
|
|
261
|
+
break;
|
|
262
|
+
case 'Enter':
|
|
263
|
+
if (isOpen) {
|
|
264
|
+
this.activate.emit(event);
|
|
265
|
+
event.preventDefault();
|
|
266
|
+
// Sibling listeners on the same input (e.g. a host-template
|
|
267
|
+
// (keydown.enter) for "submit free-text search") must not also
|
|
268
|
+
// fire when this Enter activated a suggestion — otherwise the
|
|
269
|
+
// queued keyup of the alert-dismiss Enter would re-trigger them.
|
|
270
|
+
event.stopImmediatePropagation();
|
|
271
|
+
}
|
|
272
|
+
break;
|
|
273
|
+
case 'Tab':
|
|
274
|
+
// Hybrid combobox TAB: when the popup is open and a roving-focus is
|
|
275
|
+
// present, TAB advances the active descendant (focus stays in the
|
|
276
|
+
// input). At the boundary, close the popup and fall through to the
|
|
277
|
+
// browser's default tab traversal so focus exits the combobox.
|
|
278
|
+
if (!isOpen || !rf)
|
|
279
|
+
break;
|
|
280
|
+
if (event.shiftKey) {
|
|
281
|
+
if (rf.activeIndex() <= rf.firstEnabledIndex()) {
|
|
282
|
+
this.dropdown?.isOpen.set(false);
|
|
283
|
+
}
|
|
284
|
+
else {
|
|
285
|
+
rf.prev();
|
|
286
|
+
event.preventDefault();
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
else {
|
|
290
|
+
if (rf.activeIndex() >= rf.lastEnabledIndex()) {
|
|
291
|
+
this.dropdown?.isOpen.set(false);
|
|
292
|
+
}
|
|
293
|
+
else {
|
|
294
|
+
rf.next();
|
|
295
|
+
event.preventDefault();
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
break;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsComboboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
302
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: BsComboboxDirective, isStandalone: true, selector: "input[bsCombobox]", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "bsComboboxAutocomplete", isSignal: true, isRequired: false, transformFunction: null }, activeDescendant: { classPropertyName: "activeDescendant", publicName: "activeDescendant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate", activate: "activate", cancel: "cancel" }, host: { attributes: { "role": "combobox" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.aria-autocomplete": "autocomplete()", "attr.aria-haspopup": "\"listbox\"", "attr.aria-expanded": "expanded()", "attr.aria-controls": "controls()", "attr.aria-activedescendant": "resolvedActiveDescendant()" } }, exportAs: ["bsCombobox"], ngImport: i0 }); }
|
|
303
|
+
}
|
|
304
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: BsComboboxDirective, decorators: [{
|
|
305
|
+
type: Directive,
|
|
306
|
+
args: [{
|
|
307
|
+
selector: 'input[bsCombobox]',
|
|
308
|
+
exportAs: 'bsCombobox',
|
|
309
|
+
host: {
|
|
310
|
+
'role': 'combobox',
|
|
311
|
+
'[attr.aria-autocomplete]': 'autocomplete()',
|
|
312
|
+
'[attr.aria-haspopup]': '"listbox"',
|
|
313
|
+
'[attr.aria-expanded]': 'expanded()',
|
|
314
|
+
'[attr.aria-controls]': 'controls()',
|
|
315
|
+
'[attr.aria-activedescendant]': 'resolvedActiveDescendant()',
|
|
316
|
+
'(keydown)': 'onKeydown($event)',
|
|
317
|
+
},
|
|
318
|
+
}]
|
|
319
|
+
}], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "bsComboboxAutocomplete", required: false }] }], activeDescendant: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeDescendant", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }], activate: [{ type: i0.Output, args: ["activate"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
|
|
148
320
|
|
|
149
321
|
/**
|
|
150
322
|
* Generated bundle index. Do not edit.
|
|
151
323
|
*/
|
|
152
324
|
|
|
153
|
-
export { BsDropdownDirective, BsDropdownMenuDirective, BsDropdownToggleDirective };
|
|
325
|
+
export { BsComboboxDirective, BsDropdownDirective, BsDropdownMenuDirective, BsDropdownToggleDirective };
|
|
154
326
|
//# sourceMappingURL=mintplayer-ng-bootstrap-dropdown.mjs.map
|