@koobiq/components 20.1.0 → 20.2.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.
Files changed (120) hide show
  1. package/accordion/_accordion-theme.scss +1 -1
  2. package/accordion/accordion-tokens.scss +1 -0
  3. package/accordion/{accordion-trigger.component.scss → accordion-trigger.scss} +4 -0
  4. package/accordion/{accordion.component.scss → accordion.scss} +3 -3
  5. package/accordion/index.d.ts +215 -119
  6. package/alert/_alert-theme.scss +14 -0
  7. package/alert/alert.component.scss +24 -13
  8. package/alert/index.d.ts +63 -29
  9. package/autocomplete/autocomplete.scss +2 -1
  10. package/autocomplete/index.d.ts +35 -29
  11. package/badge/index.d.ts +2 -3
  12. package/clamped-text/index.d.ts +3 -2
  13. package/core/index.d.ts +116 -11
  14. package/core/styles/_core.scss +2 -0
  15. package/core/styles/common/_animation.scss +31 -24
  16. package/core/styles/common/_connected-overlay.scss +36 -0
  17. package/core/styles/common/_select.scss +7 -2
  18. package/dropdown/dropdown-item.scss +16 -0
  19. package/dropdown/dropdown-tokens.scss +2 -1
  20. package/dropdown/dropdown.scss +9 -0
  21. package/dropdown/index.d.ts +73 -6
  22. package/fesm2022/koobiq-components-accordion.mjs +406 -303
  23. package/fesm2022/koobiq-components-accordion.mjs.map +1 -1
  24. package/fesm2022/koobiq-components-actions-panel.mjs +1 -1
  25. package/fesm2022/koobiq-components-actions-panel.mjs.map +1 -1
  26. package/fesm2022/koobiq-components-alert.mjs +88 -48
  27. package/fesm2022/koobiq-components-alert.mjs.map +1 -1
  28. package/fesm2022/koobiq-components-app-switcher.mjs +1 -1
  29. package/fesm2022/koobiq-components-app-switcher.mjs.map +1 -1
  30. package/fesm2022/koobiq-components-autocomplete.mjs +37 -23
  31. package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
  32. package/fesm2022/koobiq-components-badge.mjs +5 -4
  33. package/fesm2022/koobiq-components-badge.mjs.map +1 -1
  34. package/fesm2022/koobiq-components-breadcrumbs.mjs +1 -1
  35. package/fesm2022/koobiq-components-breadcrumbs.mjs.map +1 -1
  36. package/fesm2022/koobiq-components-clamped-text.mjs +5 -0
  37. package/fesm2022/koobiq-components-clamped-text.mjs.map +1 -1
  38. package/fesm2022/koobiq-components-code-block.mjs +1 -1
  39. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  40. package/fesm2022/koobiq-components-core.mjs +98 -4
  41. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  42. package/fesm2022/koobiq-components-datepicker.mjs +10 -7
  43. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  44. package/fesm2022/koobiq-components-dropdown.mjs +99 -20
  45. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  46. package/fesm2022/koobiq-components-file-upload.mjs +2 -2
  47. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  48. package/fesm2022/koobiq-components-filter-bar.mjs +203 -32
  49. package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
  50. package/fesm2022/koobiq-components-form-field.mjs +4 -4
  51. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  52. package/fesm2022/koobiq-components-icon.mjs +14 -5
  53. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  54. package/fesm2022/koobiq-components-inline-edit.mjs +4 -2
  55. package/fesm2022/koobiq-components-inline-edit.mjs.map +1 -1
  56. package/fesm2022/koobiq-components-navbar.mjs +117 -22
  57. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  58. package/fesm2022/koobiq-components-notification-center.mjs +19 -4
  59. package/fesm2022/koobiq-components-notification-center.mjs.map +1 -1
  60. package/fesm2022/koobiq-components-popover.mjs +5 -0
  61. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  62. package/fesm2022/koobiq-components-search-expandable.mjs +43 -8
  63. package/fesm2022/koobiq-components-search-expandable.mjs.map +1 -1
  64. package/fesm2022/koobiq-components-select.mjs +36 -45
  65. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  66. package/fesm2022/koobiq-components-split-button.mjs +3 -10
  67. package/fesm2022/koobiq-components-split-button.mjs.map +1 -1
  68. package/fesm2022/koobiq-components-tabs.mjs +29 -17
  69. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  70. package/fesm2022/koobiq-components-tags.mjs +1 -1
  71. package/fesm2022/koobiq-components-tags.mjs.map +1 -1
  72. package/fesm2022/koobiq-components-timepicker.mjs +3 -4
  73. package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
  74. package/fesm2022/koobiq-components-timezone.mjs +3 -5
  75. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  76. package/fesm2022/koobiq-components-toast.mjs +1 -1
  77. package/fesm2022/koobiq-components-toast.mjs.map +1 -1
  78. package/fesm2022/koobiq-components-tooltip.mjs +118 -6
  79. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  80. package/fesm2022/koobiq-components-tree-select.mjs +39 -31
  81. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  82. package/filter-bar/_filter-bar-theme.scss +0 -4
  83. package/filter-bar/filter-bar-tokens.scss +3 -0
  84. package/filter-bar/filters.scss +3 -2
  85. package/filter-bar/index.d.ts +62 -3
  86. package/filter-bar/pipes/base-pipe.scss +0 -11
  87. package/filter-bar/pipes/pipe-input.scss +10 -0
  88. package/icon/icon-button.scss +3 -1
  89. package/icon/index.d.ts +15 -2
  90. package/navbar/_navbar-item_vertical.scss +7 -5
  91. package/navbar/index.d.ts +38 -4
  92. package/navbar/navbar-brand.scss +17 -7
  93. package/notification-center/index.d.ts +2 -1
  94. package/package.json +3 -3
  95. package/prebuilt-themes/dark-theme.css +1 -1
  96. package/prebuilt-themes/light-theme.css +1 -1
  97. package/prebuilt-themes/theme.css +1 -1
  98. package/schematics/collection.json +10 -0
  99. package/schematics/migrations/alert-signals/README.md +64 -0
  100. package/schematics/migrations/alert-signals/data.js +70 -0
  101. package/schematics/migrations/alert-signals/index.js +350 -0
  102. package/schematics/migrations/alert-signals/schema.json +20 -0
  103. package/schematics/migrations/autocomplete-panel-width-auto/README.md +68 -0
  104. package/schematics/migrations/autocomplete-panel-width-auto/index.js +70 -0
  105. package/schematics/migrations/autocomplete-panel-width-auto/schema.json +15 -0
  106. package/schematics/migrations/filter-bar-signals/README.md +1 -1
  107. package/schematics/migrations.json +11 -1
  108. package/schematics/ng-add/index.js +1 -1
  109. package/schematics/utils/angular-parsing.js +11 -2
  110. package/search-expandable/index.d.ts +3 -0
  111. package/select/index.d.ts +51 -24
  112. package/tabs/_tabs-common.scss +60 -31
  113. package/tabs/_tabs-theme.scss +12 -0
  114. package/tabs/index.d.ts +2 -2
  115. package/tabs/tab-header.scss +14 -0
  116. package/tabs/tab-nav-bar.scss +4 -0
  117. package/tabs/tabs-tokens.scss +1 -0
  118. package/timezone/index.d.ts +1 -3
  119. package/tooltip/index.d.ts +73 -4
  120. package/tree-select/index.d.ts +46 -22
@@ -1,10 +1,42 @@
1
- import * as rxjs from 'rxjs';
2
1
  import * as i0 from '@angular/core';
3
2
  import { InjectionToken, ElementRef, AfterViewInit, OnChanges, OnDestroy, Renderer2, WritableSignal, TemplateRef, EventEmitter, SimpleChanges, Type } from '@angular/core';
3
+ import * as rxjs from 'rxjs';
4
4
  import { FocusMonitor } from '@angular/cdk/a11y';
5
5
  import { ScrollStrategy, Overlay, OverlayConfig } from '@angular/cdk/overlay';
6
6
  import { KbqPopUp, KbqPopUpTrigger, KbqParentPopup, KbqPopUpPlacementValues, KbqComponentColors } from '@koobiq/components/core';
7
7
 
8
+ /**
9
+ * Default value of the `kbqTooltipSingleInstance` input. Provide `false` at the application level to
10
+ * globally disable the "only one tooltip is visible at a time" behavior.
11
+ */
12
+ declare const KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT: InjectionToken<boolean>;
13
+ /**
14
+ * Contract of a tooltip taking part in the "only one tooltip is visible at a time" group.
15
+ * @docs-private
16
+ */
17
+ interface KbqExclusiveTooltip {
18
+ /** Hides the tooltip because another one has taken its place. */
19
+ hideAsInactive(): void;
20
+ }
21
+ /**
22
+ * Keeps track of the single tooltip that is currently visible, so that showing a new one hides the
23
+ * previous. Holds the *trigger*, not the overlay component — the latter is re-created on every show.
24
+ */
25
+ declare class KbqTooltipRegistry {
26
+ /** Tooltip that currently owns the screen, or `null` when nothing is visible. */
27
+ private visibleTooltip;
28
+ /** Marks the tooltip as the only visible one, hiding the previously visible tooltip. */
29
+ setVisible(tooltip: KbqExclusiveTooltip): void;
30
+ /**
31
+ * Clears the registry, but only when the given tooltip is still the registered one. The guard
32
+ * matters because hiding the previous tooltip is asynchronous: its `visibleChange(false)` arrives
33
+ * after the new tooltip has already been registered, and must not wipe that newer entry.
34
+ */
35
+ clearVisible(tooltip: KbqExclusiveTooltip): void;
36
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipRegistry, never>;
37
+ static ɵprov: i0.ɵɵInjectableDeclaration<KbqTooltipRegistry>;
38
+ }
39
+
8
40
  declare enum TooltipModifier {
9
41
  Default = "default",
10
42
  Warning = "warning",
@@ -48,7 +80,9 @@ declare const KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
48
80
  * tooltip-specific inputs (content, placement, color, arrow, enter/leave delays, modifier and header) and
49
81
  * behavior such as opening on keyboard focus only and positioning relative to the mouse cursor.
50
82
  */
51
- declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> implements AfterViewInit, OnChanges, OnDestroy {
83
+ declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> implements AfterViewInit, OnChanges, OnDestroy, KbqExclusiveTooltip {
84
+ /** Registry holding the single tooltip that is currently visible. */
85
+ private readonly tooltipRegistry;
52
86
  /** @docs-private */
53
87
  protected scrollStrategy: () => ScrollStrategy;
54
88
  /** @docs-private */
@@ -72,6 +106,17 @@ declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> imp
72
106
  * Defaults to `true`.
73
107
  */
74
108
  readonly ignoreTooltipPointerEvents: i0.InputSignal<boolean>;
109
+ /**
110
+ * Whether the tooltip takes part in the "only one tooltip is visible at a time" group: showing it
111
+ * hides the previously visible tooltip, and it is hidden when another tooltip is shown.
112
+ *
113
+ * Defaults to `true`; the default can be changed application-wide with the
114
+ * `KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT` token.
115
+ *
116
+ * Tooltips without an interactive `kbqTrigger` (`manual`, `none`, …) never take part in the group,
117
+ * regardless of this input — they are shown imperatively and are expected to stay pinned.
118
+ */
119
+ readonly singleInstance: i0.InputSignalWithTransform<boolean, unknown>;
75
120
  /**
76
121
  * Changes hiding behavior. By default, tooltip is hidden on mouseleave from trigger.
77
122
  * Setting hideWithTimeout to true will delay tooltip hiding and will not hide when the mouse moves from trigger
@@ -155,9 +200,23 @@ declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> imp
155
200
  * the next show/hide cycle.
156
201
  */
157
202
  ngOnChanges(changes: SimpleChanges): void;
203
+ /**
204
+ * Whether this tooltip takes part in the "only one tooltip is visible at a time" group.
205
+ *
206
+ * Read through the `trigger` getter on purpose: `KbqTitleDirective` always reports `hover`, so title
207
+ * tooltips participate, while `kbqValidationTooltip` consumers (datepicker, timepicker, inline-edit)
208
+ * assign `trigger = 'manual'` and therefore stay out of the group.
209
+ */
210
+ private get participatesInSingleInstance();
158
211
  /**
159
212
  * Sets up an effect that mirrors a `forDisabledComponent`'s disabled signal: when that component is disabled it
160
213
  * makes the host focusable (so the tooltip can still be triggered) and enables the tooltip, otherwise disables it.
214
+ *
215
+ * Also joins the "only one tooltip is visible at a time" group. Both the subscription and the teardown live
216
+ * here rather than in `ngAfterViewInit`/`ngOnDestroy` because several subclasses override those hooks:
217
+ * `KbqTitleDirective` and `KbqEllipsisCenterDirective` skip `super.ngAfterViewInit()`, and `KbqPasswordToggle`
218
+ * skips `super` in both hooks entirely. `destroyRef` additionally covers a trigger destroyed while its
219
+ * tooltip is still visible — that path disposes the overlay without emitting `visibleChange(false)`.
161
220
  */
162
221
  constructor();
163
222
  /**
@@ -172,6 +231,15 @@ declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> imp
172
231
  * the keyboard, and applies cursor-relative positioning when `relativeToPointer` is enabled.
173
232
  */
174
233
  show(delay?: number): void;
234
+ /**
235
+ * Hides the tooltip because another tooltip became visible.
236
+ *
237
+ * Goes straight to the pop-up instead of `hide()`: `hide()` silently no-ops when the last recorded
238
+ * `triggerName` is `mouseleave` and the pop-up itself is hovered. Hiding through the instance keeps
239
+ * `visibleChange(false)` firing, so `isOpen`, `kbqVisibleChange` and the `kbqVisible` input stay in sync.
240
+ * Does nothing when the tooltip is already detached or when closing is prevented.
241
+ * @docs-private */
242
+ hideAsInactive(): void;
175
243
  /** method allows to show the tooltip relative to the given mouse event.
176
244
  * @docs-private */
177
245
  showForMouseEvent(event: MouseEvent): void;
@@ -195,7 +263,7 @@ declare class KbqTooltipTrigger extends KbqPopUpTrigger<KbqTooltipComponent> imp
195
263
  /** @docs-private */
196
264
  protected applyRelativeToPointer(): void;
197
265
  static ɵfac: i0.ɵɵFactoryDeclaration<KbqTooltipTrigger, never>;
198
- static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "forDisabledComponent": { "alias": "forDisabledComponent"; "required": false; "isSignal": true; }; "ignoreTooltipPointerEvents": { "alias": "ignoreTooltipPointerEvents"; "required": false; "isSignal": true; }; "hideWithTimeout": { "alias": "hideWithTimeout"; "required": false; }; "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; "modifier": { "alias": "kbqTooltipModifier"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
266
+ static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTooltipTrigger, "[kbqTooltip]", ["kbqTooltip"], { "forDisabledComponent": { "alias": "forDisabledComponent"; "required": false; "isSignal": true; }; "ignoreTooltipPointerEvents": { "alias": "ignoreTooltipPointerEvents"; "required": false; "isSignal": true; }; "singleInstance": { "alias": "kbqTooltipSingleInstance"; "required": false; "isSignal": true; }; "hideWithTimeout": { "alias": "hideWithTimeout"; "required": false; }; "tooltipVisible": { "alias": "kbqVisible"; "required": false; }; "tooltipPlacement": { "alias": "kbqPlacement"; "required": false; }; "relativeToPointer": { "alias": "kbqRelativeToPointer"; "required": false; }; "tooltipPlacementPriority": { "alias": "kbqPlacementPriority"; "required": false; }; "content": { "alias": "kbqTooltip"; "required": false; }; "disabled": { "alias": "kbqTooltipDisabled"; "required": false; }; "enterDelay": { "alias": "kbqEnterDelay"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "customClass": { "alias": "kbqTooltipClass"; "required": false; }; "context": { "alias": "kbqTooltipContext"; "required": false; }; "color": { "alias": "kbqTooltipColor"; "required": false; }; "arrow": { "alias": "kbqTooltipArrow"; "required": false; }; "offset": { "alias": "kbqTooltipOffset"; "required": false; }; "modifier": { "alias": "kbqTooltipModifier"; "required": false; }; "header": { "alias": "kbqTooltipHeader"; "required": false; }; }, { "placementChange": "kbqPlacementChange"; "visibleChange": "kbqVisibleChange"; }, never, never, true, never>;
199
267
  static ngAcceptInputType_hideWithTimeout: unknown;
200
268
  static ngAcceptInputType_relativeToPointer: unknown;
201
269
  static ngAcceptInputType_arrow: unknown;
@@ -208,4 +276,5 @@ declare class KbqToolTipModule {
208
276
  static ɵinj: i0.ɵɵInjectorDeclaration<KbqToolTipModule>;
209
277
  }
210
278
 
211
- export { KBQ_TOOLTIP_OPEN_TIME, KBQ_TOOLTIP_OPEN_TIME_PROVIDER, KBQ_TOOLTIP_SCROLL_STRATEGY, KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqToolTipModule, KbqTooltipComponent, KbqTooltipTrigger, MIN_TIME_FOR_DELAY, TooltipModifier, kbqTooltipScrollStrategyFactory };
279
+ export { KBQ_TOOLTIP_OPEN_TIME, KBQ_TOOLTIP_OPEN_TIME_PROVIDER, KBQ_TOOLTIP_SCROLL_STRATEGY, KBQ_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_TOOLTIP_SINGLE_INSTANCE_DEFAULT, KbqToolTipModule, KbqTooltipComponent, KbqTooltipRegistry, KbqTooltipTrigger, MIN_TIME_FOR_DELAY, TooltipModifier, kbqTooltipScrollStrategyFactory };
280
+ export type { KbqExclusiveTooltip };
@@ -6,7 +6,7 @@ import * as i1 from '@angular/cdk/overlay';
6
6
  import { ConnectedPosition, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
7
7
  import { ControlValueAccessor, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
8
8
  import * as i5 from '@koobiq/components/core';
9
- import { KbqAbstractSelect, CanUpdateErrorState, ErrorStateMatcher, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqSelectAllEvent, KbqComponentColors } from '@koobiq/components/core';
9
+ import { KbqPanelWidth, KbqPanelMinWidth, KbqPanelMaxWidth, KbqAbstractSelect, CanUpdateErrorState, ErrorStateMatcher, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqSelectAllEvent, KbqComponentColors } from '@koobiq/components/core';
10
10
  import * as i9 from '@koobiq/components/form-field';
11
11
  import { KbqFormFieldControl, KbqCleaner } from '@koobiq/components/form-field';
12
12
  import * as i4 from '@koobiq/components/tags';
@@ -24,19 +24,27 @@ type KbqTreeSelectTriggerValue = {
24
24
  value: string;
25
25
  viewValue: string;
26
26
  };
27
- /** Tree select panel width type. */
28
- type KbqTreeSelectPanelWidth = 'auto' | number | null;
27
+ /**
28
+ * Tree select panel width type.
29
+ * @deprecated Use `KbqPanelWidth` from `@koobiq/components/core` instead.
30
+ */
31
+ type KbqTreeSelectPanelWidth = KbqPanelWidth;
29
32
  /** Options for the `kbq-tree-select` that can be configured using the `KBQ_TREE_SELECT_OPTIONS` injection token. */
30
33
  type KbqTreeSelectOptions = Partial<{
31
34
  /**
32
35
  * Width of the panel. If set to `auto`, the panel will match the trigger width.
33
36
  * If set to null or an empty string, the panel will grow to match the longest option's text.
34
37
  */
35
- panelWidth: KbqTreeSelectPanelWidth;
38
+ panelWidth: KbqPanelWidth;
36
39
  /**
37
40
  * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
38
41
  */
39
- panelMinWidth: Exclude<KbqTreeSelectPanelWidth, 'auto'>;
42
+ panelMinWidth: KbqPanelMinWidth;
43
+ /**
44
+ * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
45
+ * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
46
+ */
47
+ panelMaxWidth: KbqPanelMaxWidth;
40
48
  /**
41
49
  * Whether to enable hiding search by default if options is less than minimum.
42
50
  *
@@ -52,11 +60,16 @@ declare const KBQ_TREE_SELECT_OPTIONS: InjectionToken<Partial<{
52
60
  * Width of the panel. If set to `auto`, the panel will match the trigger width.
53
61
  * If set to null or an empty string, the panel will grow to match the longest option's text.
54
62
  */
55
- panelWidth: KbqTreeSelectPanelWidth;
63
+ panelWidth: KbqPanelWidth;
56
64
  /**
57
65
  * Minimum width of the panel. If minWidth is larger than window width or property set to null, it will be ignored.
58
66
  */
59
- panelMinWidth: Exclude<KbqTreeSelectPanelWidth, "auto">;
67
+ panelMinWidth: KbqPanelMinWidth;
68
+ /**
69
+ * Maximum width of the panel. Caps growth by content only — it never overrides the trigger width or an
70
+ * explicit `panelWidth`. If null, the `--kbq-panel-size-width-max` token applies.
71
+ */
72
+ panelMaxWidth: KbqPanelMaxWidth;
60
73
  /**
61
74
  * Whether to enable hiding search by default if options is less than minimum.
62
75
  *
@@ -115,11 +128,20 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
115
128
  /** Strategy that will be used to handle scrolling while the select panel is open. */
116
129
  scrollStrategy: _angular_cdk_overlay_module_d.ScrollStrategy;
117
130
  /**
118
- * The y-offset of the overlay panel in relation to the trigger's top start corner.
119
- * This must be adjusted to align the selected option text over the trigger text.
120
- * when the panel opens. Will change based on the y-position of the selected option.
131
+ * The y-offset of the overlay panel in relation to the trigger.
132
+ *
133
+ * @deprecated noop. The trigger↔panel gap is now controlled by the `--kbq-connected-overlay-gap` CSS
134
+ * variable (transparent padding inside the pane via the `kbq-connected-overlay_below/_above` panel
135
+ * classes), not by a physical overlay offset — so setting this has no effect. Will be removed in 21.0.0.
121
136
  */
122
137
  offsetY: number;
138
+ /**
139
+ * Minimum space to keep between the overlay and the viewport edge.
140
+ * At least `defaultOffsetY` so CDK's fit check — which runs before the `kbq-connected-overlay_below/_above`
141
+ * gap padding is applied to the pane — stays conservative enough to absorb that padding instead of
142
+ * letting the panel overflow the viewport by the size of the gap.
143
+ */
144
+ protected readonly viewportMargin: number;
123
145
  /**
124
146
  * This position config ensures that the top "start" corner of the overlay
125
147
  * is aligned with with the top "start" of the origin by default (overlapping
@@ -132,7 +154,8 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
132
154
  * Trigger - is a clickable field to open select dropdown panel
133
155
  */
134
156
  readonly trigger: _angular_core.Signal<ElementRef<any>>;
135
- readonly panel: _angular_core.Signal<ElementRef<any>>;
157
+ /** Reference to the overlay panel element. */
158
+ readonly panel: _angular_core.Signal<ElementRef<any> | undefined>;
136
159
  overlayDir: CdkConnectedOverlay;
137
160
  tags: QueryList<KbqTag>;
138
161
  readonly cleaner: _angular_core.Signal<KbqCleaner | undefined>;
@@ -222,22 +245,25 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
222
245
  /** Whether multiple choice is enabled or not. True if multiple or multiline */
223
246
  get multiSelection(): boolean;
224
247
  private _focused;
225
- /** Width of the overlay panel. */
226
- protected overlayWidth: string | number;
227
- /** Min width of the overlay panel. */
228
- protected overlayMinWidth: string | number;
229
248
  /**
230
249
  * Minimum width of the panel.
231
250
  * If minWidth is larger than window width, it will be ignored.
232
251
  */
233
- readonly panelMinWidth: _angular_core.InputSignalWithTransform<number | null, unknown>;
252
+ readonly panelMinWidth: _angular_core.InputSignalWithTransform<KbqPanelMinWidth, unknown>;
234
253
  /** Origin for the overlay panel. */
235
254
  protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
236
255
  /**
237
- * Width of the panel. If set to `auto`, the panel will match the trigger width.
238
- * If set to null or an empty string, the panel will grow to match the longest option's text.
256
+ * Width of the panel. If set to `auto`, the panel will match the trigger width, but will never be
257
+ * narrower than `panelMinWidth`. If set to null or an empty string, the panel will grow to match the
258
+ * longest option's text. Any other value is used as an exact width, and `panelMinWidth` is not applied.
259
+ */
260
+ readonly panelWidth: _angular_core.InputSignal<KbqPanelWidth>;
261
+ /**
262
+ * Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes
263
+ * the panel narrower than the trigger, and never clamps an explicit `panelWidth`.
264
+ * When null, the `--kbq-panel-size-width-max` token applies.
239
265
  */
240
- readonly panelWidth: _angular_core.InputSignal<KbqTreeSelectPanelWidth>;
266
+ readonly panelMaxWidth: _angular_core.InputSignalWithTransform<KbqPanelMaxWidth, unknown>;
241
267
  /**
242
268
  * Controls when the search functionality is displayed based on the number of available options.
243
269
  *
@@ -347,8 +373,6 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
347
373
  private closingActions;
348
374
  private getTotalItemsWidthInMatcher;
349
375
  private getTotalVisibleItems;
350
- /** Gets how wide the overlay panel should be. */
351
- private getOverlayWidth;
352
376
  private buildTriggerClone;
353
377
  private getItemWidth;
354
378
  private refreshTriggerValues;
@@ -369,7 +393,7 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
369
393
  private scrollActiveOptionIntoView;
370
394
  private subscribeOnSearchChanges;
371
395
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTreeSelect, never>;
372
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "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; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], true, never>;
396
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "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; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "selectAllToggle": { "alias": "selectAllToggle"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "selectAllHandler": { "alias": "selectAllHandler"; "required": false; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "searchMinOptionsThreshold": { "alias": "searchMinOptionsThreshold"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "onSelectAll": "onSelectAll"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], true, never>;
373
397
  static ngAcceptInputType_multiple: unknown;
374
398
  static ngAcceptInputType_disabled: unknown;
375
399
  }