@koobiq/components 20.2.0 → 20.3.1

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.
Files changed (213) hide show
  1. package/accordion/_accordion-theme.scss +5 -1
  2. package/accordion/accordion-tokens.scss +2 -0
  3. package/accordion/accordion-trigger.scss +6 -0
  4. package/accordion/accordion.scss +21 -0
  5. package/accordion/index.d.ts +55 -8
  6. package/actions-panel/index.d.ts +25 -13
  7. package/app-switcher/app-switcher-dropdown-app.scss +7 -5
  8. package/app-switcher/app-switcher-dropdown-site.scss +6 -4
  9. package/app-switcher/index.d.ts +41 -4
  10. package/app-switcher/kbq-app-switcher-list-item.scss +6 -8
  11. package/autocomplete/index.d.ts +24 -9
  12. package/breadcrumbs/index.d.ts +1 -1
  13. package/button/index.d.ts +2 -2
  14. package/button-toggle/button-toggle-tokens.scss +2 -0
  15. package/button-toggle/button-toggle.scss +9 -0
  16. package/button-toggle/index.d.ts +5 -0
  17. package/checkbox/index.d.ts +33 -29
  18. package/clamped-text/index.d.ts +1 -1
  19. package/code-block/index.d.ts +24 -19
  20. package/content-panel/index.d.ts +1 -1
  21. package/core/index.d.ts +1125 -199
  22. package/core/option/_action-container-mixins.scss +28 -0
  23. package/core/option/_option-theme.scss +24 -0
  24. package/core/option/action.scss +7 -0
  25. package/core/styles/_koobiq-theme.scss +2 -0
  26. package/core/styles/_tokens.scss +1 -0
  27. package/core/styles/common/_connected-overlay.scss +6 -3
  28. package/core/styles/common/_select.scss +12 -0
  29. package/core/styles/common/_tokens.scss +0 -9
  30. package/core/styles/theming/_index.scss +0 -1
  31. package/core/styles/theming/_theming.scss +34 -5
  32. package/datepicker/index.d.ts +46 -15
  33. package/dl/dl.scss +26 -0
  34. package/dl/index.d.ts +8 -1
  35. package/dropdown/_dropdown-theme.scss +28 -2
  36. package/dropdown/dropdown-item.scss +13 -0
  37. package/dropdown/dropdown.scss +7 -1
  38. package/dropdown/index.d.ts +264 -17
  39. package/dynamic-translation/index.d.ts +1 -1
  40. package/fesm2022/koobiq-components-accordion.mjs +106 -46
  41. package/fesm2022/koobiq-components-accordion.mjs.map +1 -1
  42. package/fesm2022/koobiq-components-actions-panel.mjs +57 -46
  43. package/fesm2022/koobiq-components-actions-panel.mjs.map +1 -1
  44. package/fesm2022/koobiq-components-alert.mjs +16 -16
  45. package/fesm2022/koobiq-components-app-switcher.mjs +233 -38
  46. package/fesm2022/koobiq-components-app-switcher.mjs.map +1 -1
  47. package/fesm2022/koobiq-components-autocomplete.mjs +54 -31
  48. package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
  49. package/fesm2022/koobiq-components-badge.mjs +13 -13
  50. package/fesm2022/koobiq-components-breadcrumbs.mjs +25 -25
  51. package/fesm2022/koobiq-components-breadcrumbs.mjs.map +1 -1
  52. package/fesm2022/koobiq-components-button-toggle.mjs +17 -12
  53. package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
  54. package/fesm2022/koobiq-components-button.mjs +25 -25
  55. package/fesm2022/koobiq-components-checkbox.mjs +69 -92
  56. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  57. package/fesm2022/koobiq-components-clamped-text.mjs +13 -13
  58. package/fesm2022/koobiq-components-code-block.mjs +56 -69
  59. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  60. package/fesm2022/koobiq-components-content-panel.mjs +29 -29
  61. package/fesm2022/koobiq-components-core.mjs +2454 -795
  62. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  63. package/fesm2022/koobiq-components-datepicker.mjs +160 -121
  64. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  65. package/fesm2022/koobiq-components-divider.mjs +7 -7
  66. package/fesm2022/koobiq-components-dl.mjs +23 -15
  67. package/fesm2022/koobiq-components-dl.mjs.map +1 -1
  68. package/fesm2022/koobiq-components-dropdown.mjs +754 -155
  69. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  70. package/fesm2022/koobiq-components-dynamic-translation.mjs +13 -13
  71. package/fesm2022/koobiq-components-ellipsis-center.mjs +7 -7
  72. package/fesm2022/koobiq-components-empty-state.mjs +19 -19
  73. package/fesm2022/koobiq-components-file-upload.mjs +74 -42
  74. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  75. package/fesm2022/koobiq-components-filter-bar.mjs +605 -192
  76. package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
  77. package/fesm2022/koobiq-components-flag.mjs +7 -7
  78. package/fesm2022/koobiq-components-form-field.mjs +359 -165
  79. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  80. package/fesm2022/koobiq-components-icon.mjs +39 -21
  81. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  82. package/fesm2022/koobiq-components-inline-edit.mjs +172 -27
  83. package/fesm2022/koobiq-components-inline-edit.mjs.map +1 -1
  84. package/fesm2022/koobiq-components-input.mjs +41 -24
  85. package/fesm2022/koobiq-components-input.mjs.map +1 -1
  86. package/fesm2022/koobiq-components-link.mjs +8 -8
  87. package/fesm2022/koobiq-components-list.mjs +657 -143
  88. package/fesm2022/koobiq-components-list.mjs.map +1 -1
  89. package/fesm2022/koobiq-components-loader-overlay.mjs +16 -16
  90. package/fesm2022/koobiq-components-markdown.mjs +14 -11
  91. package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
  92. package/fesm2022/koobiq-components-modal.mjs +70 -38
  93. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  94. package/fesm2022/koobiq-components-navbar.mjs +69 -54
  95. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  96. package/fesm2022/koobiq-components-notification-center.mjs +23 -22
  97. package/fesm2022/koobiq-components-notification-center.mjs.map +1 -1
  98. package/fesm2022/koobiq-components-overflow-items.mjs +16 -17
  99. package/fesm2022/koobiq-components-overflow-items.mjs.map +1 -1
  100. package/fesm2022/koobiq-components-popover.mjs +26 -21
  101. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  102. package/fesm2022/koobiq-components-progress-bar.mjs +13 -13
  103. package/fesm2022/koobiq-components-progress-spinner.mjs +13 -13
  104. package/fesm2022/koobiq-components-radio.mjs +10 -10
  105. package/fesm2022/koobiq-components-resizer.mjs +33 -14
  106. package/fesm2022/koobiq-components-resizer.mjs.map +1 -1
  107. package/fesm2022/koobiq-components-scrollbar.mjs +10 -10
  108. package/fesm2022/koobiq-components-search-expandable.mjs +7 -7
  109. package/fesm2022/koobiq-components-search-expandable.mjs.map +1 -1
  110. package/fesm2022/koobiq-components-select.mjs +420 -107
  111. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  112. package/fesm2022/koobiq-components-sidebar.mjs +14 -14
  113. package/fesm2022/koobiq-components-sidepanel.mjs +26 -26
  114. package/fesm2022/koobiq-components-skeleton.mjs +10 -10
  115. package/fesm2022/koobiq-components-split-button.mjs +7 -7
  116. package/fesm2022/koobiq-components-splitter.mjs +17 -17
  117. package/fesm2022/koobiq-components-table.mjs +15 -13
  118. package/fesm2022/koobiq-components-table.mjs.map +1 -1
  119. package/fesm2022/koobiq-components-tabs.mjs +56 -58
  120. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  121. package/fesm2022/koobiq-components-tags.mjs +283 -122
  122. package/fesm2022/koobiq-components-tags.mjs.map +1 -1
  123. package/fesm2022/koobiq-components-textarea.mjs +13 -8
  124. package/fesm2022/koobiq-components-textarea.mjs.map +1 -1
  125. package/fesm2022/koobiq-components-time-range.mjs +29 -24
  126. package/fesm2022/koobiq-components-time-range.mjs.map +1 -1
  127. package/fesm2022/koobiq-components-timepicker.mjs +58 -26
  128. package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
  129. package/fesm2022/koobiq-components-timezone.mjs +76 -39
  130. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  131. package/fesm2022/koobiq-components-title.mjs +7 -7
  132. package/fesm2022/koobiq-components-toast.mjs +51 -26
  133. package/fesm2022/koobiq-components-toast.mjs.map +1 -1
  134. package/fesm2022/koobiq-components-toggle.mjs +72 -64
  135. package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
  136. package/fesm2022/koobiq-components-tooltip.mjs +115 -36
  137. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  138. package/fesm2022/koobiq-components-top-bar.mjs +13 -13
  139. package/fesm2022/koobiq-components-tree-select.mjs +190 -56
  140. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  141. package/fesm2022/koobiq-components-tree.mjs +302 -81
  142. package/fesm2022/koobiq-components-tree.mjs.map +1 -1
  143. package/fesm2022/koobiq-components-username.mjs +27 -27
  144. package/file-upload/index.d.ts +25 -6
  145. package/file-upload/multiple-file-upload.component.scss +14 -0
  146. package/filter-bar/_filter-bar-theme.scss +0 -6
  147. package/filter-bar/index.d.ts +222 -9
  148. package/filter-bar/pipes/pipe-multi-tree-select.scss +0 -6
  149. package/filter-bar/pipes/pipe-multiselect.scss +0 -6
  150. package/filter-bar/pipes/pipe-tree-select.scss +0 -6
  151. package/form-field/_form-field-theme.scss +76 -20
  152. package/form-field/fieldset.scss +10 -0
  153. package/form-field/form-field-tokens.scss +15 -1
  154. package/form-field/form-field.scss +15 -19
  155. package/form-field/index.d.ts +148 -68
  156. package/icon/index.d.ts +31 -6
  157. package/inline-edit/index.d.ts +57 -4
  158. package/inline-edit/inline-edit.scss +10 -0
  159. package/input/index.d.ts +17 -2
  160. package/list/_list-theme.scss +42 -10
  161. package/list/index.d.ts +326 -79
  162. package/list/list-tokens.scss +43 -8
  163. package/list/list.scss +186 -12
  164. package/markdown/index.d.ts +1 -1
  165. package/modal/index.d.ts +22 -5
  166. package/modal/modal-tokens.scss +1 -1
  167. package/navbar/index.d.ts +16 -1
  168. package/navbar/navbar-brand.scss +6 -0
  169. package/navbar/vertical-navbar.scss +6 -0
  170. package/notification-center/notification-item.scss +6 -0
  171. package/package.json +3 -6
  172. package/popover/index.d.ts +2 -2
  173. package/prebuilt-themes/dark-theme.css +1 -1
  174. package/prebuilt-themes/light-theme.css +1 -1
  175. package/prebuilt-themes/theme.css +1 -1
  176. package/resizer/index.d.ts +12 -0
  177. package/schematics/migrations/deprecated-icons/README.md +29 -4
  178. package/schematics/migrations/deprecated-icons/data.js +7 -0
  179. package/schematics/migrations/deprecated-icons/index.js +62 -35
  180. package/schematics/migrations/new-icons-pack/README.md +37 -2
  181. package/schematics/migrations/new-icons-pack/data.js +8 -0
  182. package/schematics/migrations/new-icons-pack/index.js +144 -53
  183. package/schematics/ng-add/index.js +3 -3
  184. package/schematics/utils/angular-parsing.js +30 -12
  185. package/schematics/utils/ast.js +31 -0
  186. package/schematics/utils/icon-migration.js +530 -0
  187. package/schematics/utils/typescript.js +44 -0
  188. package/scrollbar/index.d.ts +1 -1
  189. package/select/index.d.ts +163 -18
  190. package/select/select-tokens.scss +0 -1
  191. package/select/select.scss +0 -2
  192. package/splitter/index.d.ts +1 -1
  193. package/table/_table-theme.scss +4 -0
  194. package/table/index.d.ts +2 -1
  195. package/table/table.scss +8 -0
  196. package/tabs/index.d.ts +0 -1
  197. package/tags/index.d.ts +128 -29
  198. package/textarea/index.d.ts +5 -0
  199. package/time-range/index.d.ts +1 -1
  200. package/timepicker/index.d.ts +4 -0
  201. package/timezone/index.d.ts +9 -5
  202. package/toast/index.d.ts +26 -3
  203. package/toggle/index.d.ts +34 -14
  204. package/tooltip/index.d.ts +54 -11
  205. package/tree/_tree-theme.scss +25 -5
  206. package/tree/index.d.ts +71 -3
  207. package/tree/tree-option.scss +2 -8
  208. package/tree-select/_tree-select-theme.scss +22 -0
  209. package/tree-select/index.d.ts +83 -16
  210. package/core/styles/_tokens.kbq.import.scss +0 -4
  211. package/core/styles/theming/_components-theming.scss +0 -1927
  212. package/filter-bar/pipes/pipe-select.scss +0 -5
  213. package/overflow-items/overflow-items.scss +0 -20
package/select/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as _angular_core from '@angular/core';
2
- import { AfterViewInit, OnDestroy, AfterContentInit, OnInit, DoCheck, ElementRef, DestroyRef, QueryList, TemplateRef, EventEmitter, InjectionToken, Provider } from '@angular/core';
2
+ import { AfterViewInit, OnDestroy, InjectionToken, AfterContentInit, OnInit, DoCheck, ElementRef, DestroyRef, QueryList, TemplateRef, EventEmitter, Provider } from '@angular/core';
3
3
  import * as i5 from '@koobiq/components/tooltip';
4
4
  import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
5
5
  import * as _angular_cdk_overlay_module_d from '@angular/cdk/overlay-module.d';
@@ -9,7 +9,7 @@ import { ConnectedPosition, CdkConnectedOverlay, CdkOverlayOrigin } from '@angul
9
9
  import { CdkVirtualForOf, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
10
10
  import { ControlValueAccessor, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
11
11
  import * as i2 from '@koobiq/components/core';
12
- import { KbqAbstractSelect, CanUpdateErrorState, ErrorStateMatcher, KbqLocaleService, KbqPanelWidth, KbqPanelMinWidth, KbqPanelMaxWidth, KbqOptionBase, ActiveDescendantKeyManager, KbqOption, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqOptionSelectionChange, KbqSelectAllEvent, KbqVirtualOption, KbqComponentColors } from '@koobiq/components/core';
12
+ import { KbqPanelWidth, KbqPanelMinWidth, KbqPanelMaxWidth, KbqPanelMaxHeight, KbqAbstractSelect, CanUpdateErrorState, KbqSiblingPopup, ErrorStateMatcher, KbqLocaleService, KbqOptionBase, ActiveDescendantKeyManager, KbqOption, KbqSelectTrigger, KbqSelectMatcher, KbqOptgroup, KbqSelectSearch, KbqSelectSearchEmptyResult, KbqOptionSelectionChange, KbqSelectAllEvent, KbqVirtualOption, KbqPseudoCheckboxState, KbqComponentColors } from '@koobiq/components/core';
13
13
  import * as i11 from '@koobiq/components/form-field';
14
14
  import { KbqFormFieldControl, KbqCleaner } from '@koobiq/components/form-field';
15
15
  import * as i4 from '@koobiq/components/tags';
@@ -96,6 +96,11 @@ type KbqSelectOptions = Partial<{
96
96
  * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
97
97
  */
98
98
  panelMaxWidth: KbqPanelMaxWidth;
99
+ /**
100
+ * Maximum height of the panel's scrollable option list. Does not include the search field or the
101
+ * footer. If null, the `--kbq-select-panel-size-max-height` token applies.
102
+ */
103
+ panelMaxHeight: KbqPanelMaxHeight;
99
104
  /**
100
105
  * Whether to enable hiding search by default if options is less than minimum.
101
106
  *
@@ -121,6 +126,11 @@ declare const KBQ_SELECT_OPTIONS: InjectionToken<Partial<{
121
126
  * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
122
127
  */
123
128
  panelMaxWidth: KbqPanelMaxWidth;
129
+ /**
130
+ * Maximum height of the panel's scrollable option list. Does not include the search field or the
131
+ * footer. If null, the `--kbq-select-panel-size-max-height` token applies.
132
+ */
133
+ panelMaxHeight: KbqPanelMaxHeight;
124
134
  /**
125
135
  * Whether to enable hiding search by default if options is less than minimum.
126
136
  *
@@ -136,7 +146,7 @@ declare const kbqSelectOptionsProvider: (options: KbqSelectOptions) => Provider;
136
146
  declare const delayBeforeDisplayingResultWithoutOptions = 101;
137
147
  /** Minimum time in milliseconds to display the loading state. */
138
148
  declare const minimumTimeToDisplayLoading = 300;
139
- declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<any>, CanUpdateErrorState {
149
+ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, OnDestroy, OnInit, DoCheck, ControlValueAccessor, KbqFormFieldControl<any>, CanUpdateErrorState, KbqSiblingPopup {
140
150
  private readonly _changeDetectorRef;
141
151
  private readonly _ngZone;
142
152
  private readonly _renderer;
@@ -168,6 +178,11 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
168
178
  * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
169
179
  */
170
180
  panelMaxWidth: KbqPanelMaxWidth;
181
+ /**
182
+ * Maximum height of the panel's scrollable option list. Does not include the search field or the
183
+ * footer. If null, the `--kbq-select-panel-size-max-height` token applies.
184
+ */
185
+ panelMaxHeight: KbqPanelMaxHeight;
171
186
  /**
172
187
  * Whether to enable hiding search by default if options is less than minimum.
173
188
  *
@@ -177,7 +192,6 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
177
192
  */
178
193
  searchMinOptionsThreshold: "auto" | number;
179
194
  }> | null;
180
- private readonly window;
181
195
  /** Whether the component is in an error state. */
182
196
  errorState: boolean;
183
197
  /**
@@ -197,6 +211,12 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
197
211
  selectionModel: SelectionModel<KbqOptionBase>;
198
212
  /** Previously selected options before the current selection was made. */
199
213
  previousSelectionModelSelected: KbqOptionBase[];
214
+ /**
215
+ * Detached copies of the selected options, captured while the option was still rendered.
216
+ * `cdk-virtual-scroll` recycles option views, so a `KbqOption` kept in `selectionModel` can
217
+ * silently start carrying another item's value and label — the copy preserves the original ones.
218
+ */
219
+ private readonly selectedOptionCopies;
200
220
  /** Manages keyboard events for options in the panel. */
201
221
  keyManager: ActiveDescendantKeyManager<KbqOption>;
202
222
  /** The value of the select panel's transform-origin property for animations. */
@@ -221,10 +241,10 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
221
241
  */
222
242
  protected readonly viewportMargin: number;
223
243
  /**
224
- * This position config ensures that the top "start" corner of the overlay
225
- * is aligned with the top "start" of the origin by default (overlapping
226
- * the trigger completely). If the panel cannot fit below the trigger, it
227
- * will fall back to a position above the trigger.
244
+ * Opens the panel below the trigger, falling back to above it when it does not fit.
245
+ *
246
+ * A third position is appended at runtime by `updatePanelAnchor`: a multiline trigger that has grown
247
+ * taller than the panel gets it anchored to its first row and drawn over the rest of it.
228
248
  */
229
249
  positions: ConnectedPosition[];
230
250
  /**
@@ -235,6 +255,8 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
235
255
  readonly panel: _angular_core.Signal<ElementRef<any> | undefined>;
236
256
  /** Reference to the container element that holds the options. */
237
257
  readonly optionsContainer: _angular_core.Signal<ElementRef<any>>;
258
+ /** Reference to the built-in "select all" row, rendered only while `selectAll` is on. */
259
+ readonly selectAllOption: _angular_core.Signal<KbqOption | undefined>;
238
260
  /** Reference to the CDK connected overlay directive. */
239
261
  overlayDir: CdkConnectedOverlay;
240
262
  /** Reference to the optional footer element in the panel. */
@@ -251,10 +273,23 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
251
273
  readonly customMatcher: _angular_core.Signal<KbqSelectMatcher | undefined>;
252
274
  /** Custom template reference for rendering tag content. */
253
275
  readonly customTagTemplateRef: _angular_core.Signal<TemplateRef<any> | undefined>;
254
- /** Reference to the optional cleaner element for clearing selection. */
276
+ /**
277
+ * Reference to the optional cleaner element for clearing selection.
278
+ * @docs-private
279
+ */
255
280
  readonly cleaner: _angular_core.Signal<KbqCleaner | undefined>;
256
281
  /** All of the defined select options. */
257
282
  options: QueryList<KbqOption>;
283
+ /**
284
+ * Everything the key manager navigates: the built-in "select all" row first, then `options`.
285
+ *
286
+ * The row is rendered by the select's own template, so it never reaches the `options` content query.
287
+ * Kept as a separate list rather than folded into `options` because `options` is public API — the
288
+ * filter-bar pipes, `firstFiltered` and the tallies below all mean "the options the consumer
289
+ * projected", and a synthetic entry there would quietly corrupt every one of them.
290
+ * @docs-private
291
+ */
292
+ readonly navigableOptions: QueryList<KbqOption>;
258
293
  /** All of the defined groups of options. */
259
294
  readonly optionGroups: _angular_core.Signal<readonly KbqOptgroup[]>;
260
295
  /** Reference to the optional search component. */
@@ -263,6 +298,8 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
263
298
  readonly searchEmpty: _angular_core.Signal<KbqSelectSearchEmptyResult | undefined>;
264
299
  /** Template string for hidden items text. Supports {{ number }} placeholder. */
265
300
  hiddenItemsText: string;
301
+ /** Label of the "select all" row. Kept in step with the locale service. */
302
+ protected selectAllText: string;
266
303
  /** Determines whether preselected values are displayed. */
267
304
  readonly showPreselectedValues: _angular_core.InputSignal<boolean>;
268
305
  /**
@@ -301,7 +338,12 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
301
338
  private _searchMinOptionsThreshold;
302
339
  /** Combined stream of all of the child options' change events. */
303
340
  readonly optionSelectionChanges: Observable<KbqOptionSelectionChange>;
304
- /** Event emitted when the select panel has been toggled. Emits true when opened, false when closed. */
341
+ /**
342
+ * Event emitted when the select panel has been toggled. Emits true when opened, false when closed.
343
+ * Also serves as the `openedChange` member of the `KbqSiblingPopup` contract — a tooltip sharing
344
+ * this element's host reacts to it, so its emission timing (gated on `panelDoneAnimatingStream`, see
345
+ * `ngOnInit`) matters beyond this output's original consumers.
346
+ */
305
347
  readonly openedChange: EventEmitter<boolean>;
306
348
  /** Event emitted before the select panel starts opening. */
307
349
  readonly beforeOpened: _angular_core.OutputEmitterRef<void>;
@@ -381,6 +423,15 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
381
423
  readonly virtualOptionFactory: _angular_core.InputSignal<((value: any) => KbqVirtualOption) | undefined>;
382
424
  /** When `true`, a repeated Ctrl/Cmd+A deselects all options. Off by default (Ctrl+A only selects). */
383
425
  readonly selectAllToggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
426
+ /**
427
+ * Whether to render the "select all" master checkbox above the options. Multiple selection only.
428
+ *
429
+ * The row acts on the options the user can actually toggle — rendered, enabled and selectable. Since
430
+ * search filtering removes options from the DOM, "select all" under an active query selects only the
431
+ * matches. Enabling it also makes Ctrl/Cmd + A a two-way toggle, so the shortcut and the checkbox
432
+ * never disagree (`selectAllToggle` is implied).
433
+ */
434
+ readonly selectAll: _angular_core.InputSignalWithTransform<boolean, unknown>;
384
435
  /**
385
436
  * Function for handling the Ctrl + A (select all) keyboard combination.
386
437
  * By default, the internal handler selects all options.
@@ -406,6 +457,21 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
406
457
  * When null, the `--kbq-panel-size-width-max` token applies.
407
458
  */
408
459
  readonly panelMaxWidth: _angular_core.InputSignalWithTransform<KbqPanelMaxWidth, unknown>;
460
+ /**
461
+ * Maximum height of the panel's scrollable option list, in pixels. Applied as the
462
+ * `--kbq-select-panel-size-max-height` custom property on the panel, so it also drives the pinned height
463
+ * of a `cdk-virtual-scroll-viewport` — with virtual scroll the value is an exact height, not a cap.
464
+ *
465
+ * The search field and the footer sit outside the scrollable area and add to the panel's total height.
466
+ * When null, the token default (256px) applies.
467
+ */
468
+ readonly panelMaxHeight: _angular_core.InputSignalWithTransform<KbqPanelMaxHeight, unknown>;
469
+ /**
470
+ * `panelMaxHeight` rendered as a CSS length for the `--kbq-select-panel-size-max-height` token.
471
+ * A non-finite value (e.g. `null`) leaves the stylesheet default in place.
472
+ * @docs-private
473
+ */
474
+ protected readonly panelMaxHeightToken: _angular_core.Signal<string | null>;
409
475
  /** Value of the select control. Can be a single value or array of values for multiple selection. */
410
476
  get value(): any;
411
477
  set value(newValue: any);
@@ -436,12 +502,40 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
436
502
  set focused(value: boolean);
437
503
  /** Whether the select panel is currently open. */
438
504
  panelOpen: boolean;
505
+ /** Whether the overlay panel is currently on screen. Part of the `KbqSiblingPopup` contract. */
506
+ get isAttached(): boolean;
439
507
  /** Whether virtual scrolling is enabled for the options panel. */
440
508
  withVirtualScroll: boolean;
441
509
  private _focused;
442
510
  /** Whether the search returned no results. */
443
511
  get isEmptySearchResult(): boolean;
444
- /** Whether the cleaner (clear button) should be shown. */
512
+ /**
513
+ * Whether the "select all" row is currently rendered.
514
+ *
515
+ * Unsupported whenever a selected value can exist as a synthetic `KbqVirtualOption` instead of a
516
+ * real, projected `KbqOption` (see `selectValue`) — under `withVirtualScroll` or
517
+ * `showPreselectedValues`. `selectAllTargets` can only see `this.options`, the currently-rendered
518
+ * `KbqOption`s, so a checkbox built on top of it would misreport "everything selected" after only
519
+ * touching the values that happen to have a rendered option.
520
+ */
521
+ protected get showSelectAll(): boolean;
522
+ /** Whether every option "select all" can act on is selected. */
523
+ get allOptionsSelected(): boolean;
524
+ /** State of the "select all" master checkbox. */
525
+ get selectAllState(): KbqPseudoCheckboxState;
526
+ /**
527
+ * Options "select all" acts on, and the ones its checkbox state is derived from.
528
+ *
529
+ * `KbqOption.select()` and `deselect()` do not consult `disabled` or `selectable()`, so the
530
+ * filtering has to happen here rather than being left to the options themselves.
531
+ */
532
+ private get selectAllTargets();
533
+ /** Adapter shared by the master checkbox and the Ctrl/Cmd + A handler, so the two cannot drift apart. */
534
+ private get selectAllAdapter();
535
+ /**
536
+ * Whether the cleaner (clear button) should be shown.
537
+ * @docs-private
538
+ */
445
539
  get canShowCleaner(): boolean;
446
540
  /** Returns the currently selected option(s). Single value or array for multiple selection. */
447
541
  get selected(): KbqOptionBase | KbqOptionBase[];
@@ -461,11 +555,13 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
461
555
  get colorForState(): KbqComponentColors;
462
556
  /** Whether multiple choice is enabled. True if multiple or multiline mode is active. */
463
557
  get multiSelection(): boolean;
558
+ /** Whether a "select all" batch is running, so the per-option changes propagate only once. */
559
+ private selectAllInProgress;
464
560
  /** Subscription to the close event of the overlay. */
465
561
  private closeSubscription;
466
562
  /** Subscription to the options panel scroll event used by `scrolledToBottom`. */
467
563
  private scrollSubscription;
468
- /** The scroll position of the overlay panel, calculated to center the selected option. */
564
+ /** The scroll offset the panel is restored to when it attaches — the list always opens at the top. */
469
565
  private scrollTop;
470
566
  /** Unique id for this input. Auto-incremented for each instance. */
471
567
  private readonly uid;
@@ -494,11 +590,24 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
494
590
  * @returns Formatted string with the number of hidden items.
495
591
  */
496
592
  hiddenItemsTextFormatter(hiddenItemsText: string, hiddenItems: number): string;
593
+ /**
594
+ * Selects every option "select all" can act on, or deselects them all when they are already selected.
595
+ *
596
+ * Backs both the master checkbox and Ctrl/Cmd + A while `selectAll` is on. Emits a single
597
+ * `selectionChange` for the whole batch, followed by `onSelectAll`.
598
+ */
599
+ protected toggleSelectAll(): void;
600
+ /**
601
+ * Clears the current selection.
602
+ * @docs-private
603
+ */
604
+ clear(): void;
497
605
  /**
498
606
  * Clears the current selection.
499
- * @param $event Mouse event to prevent default behavior.
607
+ * @deprecated Activate the projected `KbqCleaner` instead.
608
+ * @docs-private
500
609
  */
501
- clearValue($event: any): void;
610
+ clearValue(event: Event): void;
502
611
  /** `View -> model callback called when value changes` */
503
612
  onChange: (value: any) => void;
504
613
  /** `View -> model callback called when select has been touched` */
@@ -575,6 +684,14 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
575
684
  * Sets up position change subscription and closing actions.
576
685
  */
577
686
  onAttached(): void;
687
+ /** Element the overlay is positioned and sized against. */
688
+ protected getOverlayOriginElement(): HTMLElement | undefined;
689
+ protected isPanelOpen(): boolean;
690
+ /**
691
+ * A `cdk-virtual-scroll-viewport` pins its height to `--kbq-select-panel-size-max-height` in both
692
+ * directions, so its `scrollHeight` follows the cap rather than the content.
693
+ */
694
+ protected isListHeightPinnedToCap(): boolean;
578
695
  /** Returns the theme to be used on the panel based on parent form field color. */
579
696
  getPanelTheme(): string;
580
697
  /** Returns the full set of classes for the panel: base class, theme and custom `panelClass`. */
@@ -640,6 +757,12 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
640
757
  private getTotalItemsWidthInMatcher;
641
758
  /**
642
759
  * Calculates the width of a single item including margins.
760
+ *
761
+ * The elements measured here are `kbq-tag`s, which are `border-box` and carry horizontal
762
+ * padding. `getComputedStyle().width` resolves to the used content-box width whatever
763
+ * `box-sizing` says, so it dropped that padding from every tag and the matcher believed more
764
+ * tags fit than actually do. `getBoundingClientRect()` is always the border box — the same fix
765
+ * `kbqGetPanelWidthOrigin()` carries for the dropdown trigger.
643
766
  * @param element The DOM element to measure.
644
767
  * @returns Total width including margins and gap.
645
768
  */
@@ -653,6 +776,17 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
653
776
  * Defers execution to avoid change detection errors.
654
777
  */
655
778
  private initializeSelection;
779
+ /** Whether the key manager has no active item, or its active item is missing from the current options list. */
780
+ private isActiveItemStale;
781
+ /**
782
+ * Rebuilds the key manager's list — the "select all" row first, then the projected options — and
783
+ * re-applies the panel's initial highlight whenever the row is what just joined that list.
784
+ *
785
+ * Both callers have to be able to do the second part: whichever of the view query and
786
+ * `options.changes` runs first is the one that brings the row in, and the other then sees a list
787
+ * it is already part of.
788
+ */
789
+ private syncNavigableOptions;
656
790
  /**
657
791
  * Sets the selected option based on a value.
658
792
  * If no option can be found with the designated value, the select trigger is cleared.
@@ -666,16 +800,28 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
666
800
  */
667
801
  private getCorrespondOption;
668
802
  /**
669
- * Finds and selects and option based on its value.
670
- * @returns Option that has the corresponding value.
803
+ * Finds and selects an option based on its value.
804
+ * @returns Option that has the corresponding value, when it is currently rendered.
671
805
  */
672
806
  private selectValue;
807
+ /**
808
+ * Builds a detached option for a value whose `KbqOption` is not rendered, or returns `undefined`
809
+ * when the value cannot be resolved and the consumer gave no way to render it.
810
+ */
811
+ private createVirtualOptionForValue;
673
812
  /**
674
813
  * Single entry point for building a `KbqVirtualOption` from a raw value.
675
814
  * Uses the consumer-provided `virtualOptionFactory` when set, otherwise
676
815
  * wraps the raw value with the select's current `disabled` state.
677
816
  */
678
817
  private createVirtualOption;
818
+ /**
819
+ * Remembers the value and the label of a selected option while its view is still live, so that the
820
+ * selection survives the view being recycled by `cdk-virtual-scroll` for another item.
821
+ */
822
+ private captureSelectedOptionCopy;
823
+ /** Copy of `option` when its view has been recycled for another item, otherwise `option` itself. */
824
+ private resolveSelectedOption;
679
825
  /** Sets up a key manager to listen to keyboard events on the overlay panel. */
680
826
  private initKeyManager;
681
827
  /** Drops current option subscriptions and IDs and resets from scratch. */
@@ -691,7 +837,6 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
691
837
  * the first item instead.
692
838
  */
693
839
  private highlightCorrectOption;
694
- /** Scrolls the active option into view. */
695
840
  private scrollActiveOptionIntoView;
696
841
  /** Comparison function to specify which option is displayed. Defaults to object equality. */
697
842
  private _compareWith;
@@ -712,7 +857,7 @@ declare class KbqSelect extends KbqAbstractSelect implements AfterContentInit, O
712
857
  /** Removes the dropdown class from the overlay container when select closes. */
713
858
  private removeClassFromOverlayContainer;
714
859
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqSelect, never>;
715
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; "isSignal": true; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "scrolledToBottomOffset": { "alias": "scrolledToBottomOffset"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "virtualOptionFactory": { "alias": "virtualOptionFactory"; "required": false; "isSignal": true; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "beforeOpened": "beforeOpened"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "valueChange": "valueChange"; "scrolledToBottom": "scrolledToBottom"; }, ["footer", "cdkVirtualForOf", "virtualScrollViewport", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "optionGroups", "search", "searchEmpty", "options"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
860
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqSelect, "kbq-select", ["kbqSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "showPreselectedValues": { "alias": "showPreselectedValues"; "required": false; "isSignal": true; }; "triggerValuesLimit": { "alias": "triggerValuesLimit"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; "isSignal": true; }; "multiline": { "alias": "multiline"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "scrolledToBottomOffset": { "alias": "scrolledToBottomOffset"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "virtualOptionFactory": { "alias": "virtualOptionFactory"; "required": false; "isSignal": true; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "selectAll": { "alias": "selectAll"; "required": false; "isSignal": true; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "beforeOpened": "beforeOpened"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "valueChange": "valueChange"; "scrolledToBottom": "scrolledToBottom"; }, ["footer", "cdkVirtualForOf", "virtualScrollViewport", "customTrigger", "customMatcher", "customTagTemplateRef", "cleaner", "optionGroups", "search", "searchEmpty", "options"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "*", "kbq-select-footer,[kbq-select-footer]"], true, never>;
716
861
  static ngAcceptInputType_multiple: unknown;
717
862
  static ngAcceptInputType_tabIndex: unknown;
718
863
  static ngAcceptInputType_disabled: unknown;
@@ -10,7 +10,6 @@
10
10
  --kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);
11
11
  --kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);
12
12
  --kbq-select-panel-size-border-radius: var(--kbq-size-border-radius);
13
- --kbq-select-panel-size-max-height: 256px;
14
13
  /* THEME TOKENS */
15
14
  --kbq-select-panel-dropdown-background: var(--kbq-background-card);
16
15
  --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
@@ -19,8 +19,6 @@
19
19
  .kbq-select__content {
20
20
  @extend %kbq-select-content;
21
21
 
22
- box-sizing: initial;
23
-
24
22
  .kbq-option {
25
23
  @include item-active-area(var(--kbq-size-3xs));
26
24
  }
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { OnInit, AfterContentInit, OnDestroy, ElementRef, ChangeDetectorRef, AfterViewInit, QueryList } from '@angular/core';
2
+ import { OnInit, AfterViewInit, OnDestroy, AfterContentInit, ElementRef, ChangeDetectorRef, QueryList } from '@angular/core';
3
3
  import * as i1 from '@koobiq/components/icon';
4
4
 
5
5
  interface IArea {
@@ -28,6 +28,10 @@
28
28
  }
29
29
  }
30
30
 
31
+ &.kbq-table_sticky-header > thead > tr > th {
32
+ background-color: var(--kbq-background-bg);
33
+ }
34
+
31
35
  &.kbq-table_bordered {
32
36
  & > tbody > tr {
33
37
  & th,
package/table/index.d.ts CHANGED
@@ -6,8 +6,9 @@ import * as i2 from '@angular/cdk/platform';
6
6
  declare class KbqTable {
7
7
  readonly border: i0.InputSignalWithTransform<boolean, unknown>;
8
8
  readonly disableHover: i0.InputSignalWithTransform<boolean, unknown>;
9
+ readonly stickyHeader: i0.InputSignalWithTransform<boolean, unknown>;
9
10
  static ɵfac: i0.ɵɵFactoryDeclaration<KbqTable, never>;
10
- static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["kbqTable"], { "border": { "alias": "border"; "required": false; "isSignal": true; }; "disableHover": { "alias": "disableHover"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
11
+ static ɵcmp: i0.ɵɵComponentDeclaration<KbqTable, "table[kbq-table]", ["kbqTable"], { "border": { "alias": "border"; "required": false; "isSignal": true; }; "disableHover": { "alias": "disableHover"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
11
12
  }
12
13
  declare class KbqTableCellContent {
13
14
  readonly button: i0.Signal<KbqButton | undefined>;
package/table/table.scss CHANGED
@@ -37,6 +37,14 @@
37
37
  }
38
38
  }
39
39
 
40
+ .kbq-table.kbq-table_sticky-header {
41
+ & > thead > tr > th {
42
+ position: sticky;
43
+ top: 0;
44
+ z-index: 1;
45
+ }
46
+ }
47
+
40
48
  .kbq-table.kbq-table_bordered {
41
49
  & > tbody > tr {
42
50
  & th,
package/tabs/index.d.ts CHANGED
@@ -94,7 +94,6 @@ declare class KbqTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDest
94
94
  private centeringSub;
95
95
  /** Subscription to events for when the tab body finishes leaving from center position. */
96
96
  private leavingSub;
97
- constructor();
98
97
  /** Set initial visibility or set up subscription for changing visibility. */
99
98
  ngOnInit(): void;
100
99
  /** Clean up centering subscription. */