@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.
- package/accordion/_accordion-theme.scss +1 -1
- package/accordion/accordion-tokens.scss +1 -0
- package/accordion/{accordion-trigger.component.scss → accordion-trigger.scss} +4 -0
- package/accordion/{accordion.component.scss → accordion.scss} +3 -3
- package/accordion/index.d.ts +215 -119
- package/alert/_alert-theme.scss +14 -0
- package/alert/alert.component.scss +24 -13
- package/alert/index.d.ts +63 -29
- package/autocomplete/autocomplete.scss +2 -1
- package/autocomplete/index.d.ts +35 -29
- package/badge/index.d.ts +2 -3
- package/clamped-text/index.d.ts +3 -2
- package/core/index.d.ts +116 -11
- package/core/styles/_core.scss +2 -0
- package/core/styles/common/_animation.scss +31 -24
- package/core/styles/common/_connected-overlay.scss +36 -0
- package/core/styles/common/_select.scss +7 -2
- package/dropdown/dropdown-item.scss +16 -0
- package/dropdown/dropdown-tokens.scss +2 -1
- package/dropdown/dropdown.scss +9 -0
- package/dropdown/index.d.ts +73 -6
- package/fesm2022/koobiq-components-accordion.mjs +406 -303
- package/fesm2022/koobiq-components-accordion.mjs.map +1 -1
- package/fesm2022/koobiq-components-actions-panel.mjs +1 -1
- package/fesm2022/koobiq-components-actions-panel.mjs.map +1 -1
- package/fesm2022/koobiq-components-alert.mjs +88 -48
- package/fesm2022/koobiq-components-alert.mjs.map +1 -1
- package/fesm2022/koobiq-components-app-switcher.mjs +1 -1
- package/fesm2022/koobiq-components-app-switcher.mjs.map +1 -1
- package/fesm2022/koobiq-components-autocomplete.mjs +37 -23
- package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
- package/fesm2022/koobiq-components-badge.mjs +5 -4
- package/fesm2022/koobiq-components-badge.mjs.map +1 -1
- package/fesm2022/koobiq-components-breadcrumbs.mjs +1 -1
- package/fesm2022/koobiq-components-breadcrumbs.mjs.map +1 -1
- package/fesm2022/koobiq-components-clamped-text.mjs +5 -0
- package/fesm2022/koobiq-components-clamped-text.mjs.map +1 -1
- package/fesm2022/koobiq-components-code-block.mjs +1 -1
- package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +98 -4
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-datepicker.mjs +10 -7
- package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-dropdown.mjs +99 -20
- package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-file-upload.mjs +2 -2
- package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
- package/fesm2022/koobiq-components-filter-bar.mjs +203 -32
- package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-form-field.mjs +4 -4
- package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
- package/fesm2022/koobiq-components-icon.mjs +14 -5
- package/fesm2022/koobiq-components-icon.mjs.map +1 -1
- package/fesm2022/koobiq-components-inline-edit.mjs +4 -2
- package/fesm2022/koobiq-components-inline-edit.mjs.map +1 -1
- package/fesm2022/koobiq-components-navbar.mjs +117 -22
- package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-notification-center.mjs +19 -4
- package/fesm2022/koobiq-components-notification-center.mjs.map +1 -1
- package/fesm2022/koobiq-components-popover.mjs +5 -0
- package/fesm2022/koobiq-components-popover.mjs.map +1 -1
- package/fesm2022/koobiq-components-search-expandable.mjs +43 -8
- package/fesm2022/koobiq-components-search-expandable.mjs.map +1 -1
- package/fesm2022/koobiq-components-select.mjs +36 -45
- package/fesm2022/koobiq-components-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-split-button.mjs +3 -10
- package/fesm2022/koobiq-components-split-button.mjs.map +1 -1
- package/fesm2022/koobiq-components-tabs.mjs +29 -17
- package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
- package/fesm2022/koobiq-components-tags.mjs +1 -1
- package/fesm2022/koobiq-components-tags.mjs.map +1 -1
- package/fesm2022/koobiq-components-timepicker.mjs +3 -4
- package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-timezone.mjs +3 -5
- package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
- package/fesm2022/koobiq-components-toast.mjs +1 -1
- package/fesm2022/koobiq-components-toast.mjs.map +1 -1
- package/fesm2022/koobiq-components-tooltip.mjs +118 -6
- package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree-select.mjs +39 -31
- package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
- package/filter-bar/_filter-bar-theme.scss +0 -4
- package/filter-bar/filter-bar-tokens.scss +3 -0
- package/filter-bar/filters.scss +3 -2
- package/filter-bar/index.d.ts +62 -3
- package/filter-bar/pipes/base-pipe.scss +0 -11
- package/filter-bar/pipes/pipe-input.scss +10 -0
- package/icon/icon-button.scss +3 -1
- package/icon/index.d.ts +15 -2
- package/navbar/_navbar-item_vertical.scss +7 -5
- package/navbar/index.d.ts +38 -4
- package/navbar/navbar-brand.scss +17 -7
- package/notification-center/index.d.ts +2 -1
- package/package.json +3 -3
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/prebuilt-themes/theme.css +1 -1
- package/schematics/collection.json +10 -0
- package/schematics/migrations/alert-signals/README.md +64 -0
- package/schematics/migrations/alert-signals/data.js +70 -0
- package/schematics/migrations/alert-signals/index.js +350 -0
- package/schematics/migrations/alert-signals/schema.json +20 -0
- package/schematics/migrations/autocomplete-panel-width-auto/README.md +68 -0
- package/schematics/migrations/autocomplete-panel-width-auto/index.js +70 -0
- package/schematics/migrations/autocomplete-panel-width-auto/schema.json +15 -0
- package/schematics/migrations/filter-bar-signals/README.md +1 -1
- package/schematics/migrations.json +11 -1
- package/schematics/ng-add/index.js +1 -1
- package/schematics/utils/angular-parsing.js +11 -2
- package/search-expandable/index.d.ts +3 -0
- package/select/index.d.ts +51 -24
- package/tabs/_tabs-common.scss +60 -31
- package/tabs/_tabs-theme.scss +12 -0
- package/tabs/index.d.ts +2 -2
- package/tabs/tab-header.scss +14 -0
- package/tabs/tab-nav-bar.scss +4 -0
- package/tabs/tabs-tokens.scss +1 -0
- package/timezone/index.d.ts +1 -3
- package/tooltip/index.d.ts +73 -4
- package/tree-select/index.d.ts +46 -22
package/tooltip/index.d.ts
CHANGED
|
@@ -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 };
|
package/tree-select/index.d.ts
CHANGED
|
@@ -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
|
-
/**
|
|
28
|
-
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
|
119
|
-
*
|
|
120
|
-
*
|
|
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
|
-
|
|
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<
|
|
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
|
|
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
|
|
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
|
}
|