@koobiq/components 20.4.4 → 20.4.5

package/filter-bar/index.d.ts

@@ -68,6 +68,12 @@ declare abstract class KbqBasePipe<V> implements AfterViewInit {
      * the pipe template. Only consumed by the select / multi-select pipe components.
      */
     protected multilineOptions?: boolean;
+    /**
+     * Message shown in place of the options when the pipe template has none, forwarded from the pipe
+     * template. Only consumed by the select-family pipe components; `undefined` falls back to the localized
+     * `pipe.noOptions` string.
+     */
+    protected noOptionsText?: string;
     /**
      * Whether the current platform is a Mac.
      *
@@ -84,6 +90,16 @@ declare abstract class KbqBasePipe<V> implements AfterViewInit {
     /** localized data
      * @docs-private */
     get localeData(): KbqFilterBarConfiguration;
+    /**
+     * Whether the pipe template provides no values to choose from. Only consumed by the select-family pipe
+     * components, which then show `noOptionsMessage` instead of the list.
+     */
+    protected get noOptions(): boolean;
+    /**
+     * Message the select-family pipe components show when there are no options. A consumer-supplied
+     * configuration may predate `pipe.noOptions`, so the default configuration backs it up.
+     */
+    protected get noOptionsMessage(): string;
     constructor();
     ngAfterViewInit(): void;
     /** templateRef checker utility */
@@ -125,6 +141,12 @@ declare abstract class KbqBasePipe<V> implements AfterViewInit {
      * @docs-private
      */
     protected restoreTriggerFocus(): void;
+    /**
+     * Focuses the pipe's trigger button with `currentFocusOrigin`, unconditionally.
+     *
+     * @docs-private
+     */
+    protected focusTrigger(): void;
     /** @docs-private */
     abstract open(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBasePipe<any>, never>;
@@ -204,6 +226,7 @@ declare const KBQ_FILTER_BAR_DEFAULT_CONFIGURATION: {
         applyButton: string;
         emptySearchResult: string;
         selectAll: string;
+        noOptions: string;
     };
     datePipe: {
         customPeriod: string;
@@ -258,6 +281,7 @@ declare const KBQ_FILTER_BAR_CONFIGURATION: InjectionToken<{
         applyButton: string;
         emptySearchResult: string;
         selectAll: string;
+        noOptions: string;
     };
     datePipe: {
         customPeriod: string;
@@ -432,6 +456,12 @@ interface KbqPipeTemplate extends Omit<KbqPipe, 'value'> {
      * `KbqSelect.multiline`, which lays the trigger's values out in rows.
      */
     multilineOptions?: boolean;
+    /**
+     * Message shown in the dropdown of the `select`, `multiselect`, `tree-select` and `multi-tree-select`
+     * pipes when `values` is empty. Defaults to the localized `pipe.noOptions` string. Ignored by other pipe
+     * types.
+     */
+    noOptionsText?: string;
     /**
      * Earliest selectable instant for the `date` / `datetime` pipe custom period. Accepts any value the
      * configured `DateAdapter` can deserialize (with the default Luxon adapter: an ISO-8601 string, a
@@ -782,6 +812,7 @@ declare class KbqFilterBar implements KbqFilterBarHost {
             applyButton: string;
             emptySearchResult: string;
             selectAll: string;
+            noOptions: string;
         };
         datePipe: {
             customPeriod: string;
@@ -931,6 +962,7 @@ declare class KbqFilterRefresher {
             applyButton: string;
             emptySearchResult: string;
             selectAll: string;
+            noOptions: string;
         };
         datePipe: {
             customPeriod: string;
@@ -1004,6 +1036,7 @@ declare class KbqPipeButton {
         applyButton: string;
         emptySearchResult: string;
         selectAll: string;
+        noOptions: string;
     };
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqPipeButton, never>;

package/inline-edit/index.d.ts

@@ -2,7 +2,7 @@ import * as _koobiq_components_core from '@koobiq/components/core';
 import { KbqConnectedOverlayOriginProvider, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
 import * as _angular_core from '@angular/core';
 import { InjectionToken, ElementRef, TemplateRef } from '@angular/core';
-import { ScrollStrategy, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { ScrollStrategy, CdkConnectedOverlay, ConnectedPosition } from '@angular/cdk/overlay';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqLabel, KbqFormField } from '@koobiq/components/form-field';
 import { KbqSelect } from '@koobiq/components/select';
@@ -182,6 +182,13 @@ declare class KbqInlineEdit implements KbqConnectedOverlayOriginProvider, KbqInl
     protected readonly mode: _angular_core.WritableSignal<KbqInlineEditMode>;
     /** @docs-private */
     protected readonly overlayWidth: _angular_core.WritableSignal<string | number>;
+    /**
+     * Single overlay position that keeps the panel anchored to the view mode element. Fallback positions are
+     * intentionally omitted so the panel does not flip or get pushed away from the origin when space is tight.
+     *
+     * @docs-private
+     */
+    protected readonly overlayPositions: ConnectedPosition[];
     /** @docs-private */
     protected readonly scrollStrategy: _angular_core.WritableSignal<ScrollStrategy>;
     /** @docs-private */

package/modal/modal.scss

@@ -97,6 +97,7 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
+    overflow-wrap: break-word;
 
     padding-top: var(--kbq-size-3xs);
     padding-bottom: var(--kbq-size-3xs);
@@ -114,6 +115,7 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
+    overflow-wrap: break-word;
     text-overflow: ellipsis;
 }
 

package/overflow-items/index.d.ts

@@ -1,6 +1,16 @@
 import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import { KbqOrientation, KbqFlexWrap } from '@koobiq/components/core';
 
+/**
+ * Elements that `KbqOverflowItems` observes for resize changes on top of its own element and
+ * `additionalResizeObserverTargets`. Provided by a component that is as wide as its content, such as the actions panel:
+ * items hidden by `KbqOverflowItems` drop out of that width, so the component does not grow back by itself once there
+ * is room for them again, and only the element that bounds it reports that room.
+ *
+ * @docs-private
+ */
+declare const KBQ_OVERFLOW_ITEMS_RESIZE_OBSERVER_TARGETS: InjectionToken<readonly Element[]>;
 /**
  * Manages the visibility of the element.
  *
@@ -76,6 +86,7 @@ declare class KbqOverflowItems {
     private readonly document;
     private readonly window;
     private readonly platform;
+    private readonly resizeObserverTargets;
     /**
      * `KbqOverflowItem` directive references.
      */
@@ -168,4 +179,4 @@ declare class KbqOverflowItemsModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqOverflowItemsModule>;
 }
 
-export { ElementVisibilityManager, KbqOverflowItem, KbqOverflowItems, KbqOverflowItemsModule, KbqOverflowItemsResult };
+export { ElementVisibilityManager, KBQ_OVERFLOW_ITEMS_RESIZE_OBSERVER_TARGETS, KbqOverflowItem, KbqOverflowItems, KbqOverflowItemsModule, KbqOverflowItemsResult };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "20.4.4",
+    "version": "20.4.5",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -25,8 +25,8 @@
         "@angular/cdk": ">=20.0.0",
         "@angular/core": ">=20.0.0",
         "@angular/forms": ">=20.0.0",
-        "@koobiq/angular-moment-adapter": "20.4.4",
-        "@koobiq/angular-luxon-adapter": "20.4.4",
+        "@koobiq/angular-moment-adapter": "20.4.5",
+        "@koobiq/angular-luxon-adapter": "20.4.5",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3 || ^12.0.0",
         "@koobiq/design-tokens": "^3.14.0"

package/schematics/ng-add/index.js

@@ -27,7 +27,7 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^20.2.14");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^20.4.4");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^20.4.5");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.5.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.5.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^12.2.0");

package/textarea/index.d.ts

@@ -94,8 +94,10 @@ declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, OnChanges
     private _required;
     private valueAccessor;
     private lineHeight;
-    private minHeight;
+    private verticalPadding;
     private rowsCount;
+    /** The `min-height` growth wrote last, so that turning growth off removes it and keeps a consumer's own. */
+    private grownMinHeight;
     constructor();
     ngOnInit(): void;
     ngOnChanges(): void;

package/textarea/textarea-tokens.scss

@@ -1,5 +1,9 @@
 :where(.kbq-textarea) {
-    --kbq-textarea-size-min-height: 64px;
+    --kbq-textarea-size-min-rows: 3;
+    --kbq-textarea-size-min-height: calc(
+        var(--kbq-textarea-size-min-rows) * var(--kbq-typography-text-normal-line-height) + 2 *
+            var(--kbq-textarea-size-padding-vertical)
+    );
     --kbq-textarea-size-max-height: 96px;
     --kbq-textarea-size-padding-vertical: 5px;
     --kbq-textarea-size-padding-horizontal: 11px;

package/toast/toast.component.scss

@@ -86,6 +86,7 @@
 
 .kbq-toast__actions {
     display: flex;
+    flex-wrap: wrap;
 
     padding-top: var(--kbq-toast-size-button-stack-padding-top);
 

package/tree-select/index.d.ts

@@ -7,7 +7,7 @@ import { ConnectedPosition, CdkConnectedOverlay, CdkOverlayOrigin } from '@angul
 import { ControlValueAccessor, NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import * as i5 from '@koobiq/components/core';
 import { KbqPanelWidth, KbqPanelMinWidth, KbqPanelMaxWidth, KbqPanelMaxHeight, KbqAbstractSelect, CanUpdateErrorState, KbqSiblingPopup, ErrorStateMatcher, KbqSelectTrigger, KbqSelectMatcher, KbqSelectSearch, KbqSelectAllEvent, KbqComponentColors } from '@koobiq/components/core';
-import * as i9 from '@koobiq/components/form-field';
+import * as i10 from '@koobiq/components/form-field';
 import { KbqFormFieldControl, KbqCleaner } from '@koobiq/components/form-field';
 import * as i4 from '@koobiq/components/tags';
 import { KbqTag } from '@koobiq/components/tags';
@@ -15,8 +15,9 @@ import * as i2 from '@koobiq/components/tree';
 import { KbqTreeOption, KbqTreeSelection } from '@koobiq/components/tree';
 import { Subject, Observable } from 'rxjs';
 import * as i3 from '@koobiq/components/icon';
-import * as i6 from '@angular/common';
-import * as i7 from '@angular/cdk/a11y';
+import * as i6 from '@koobiq/components/select';
+import * as i7 from '@angular/common';
+import * as i8 from '@angular/cdk/a11y';
 
 /** Tree select trigger value type. */
 type KbqTreeSelectTriggerValue = {
@@ -181,6 +182,8 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     readonly customTagTemplateRef: _angular_core.Signal<TemplateRef<any> | undefined>;
     readonly tree: _angular_core.Signal<KbqTreeSelection | undefined>;
     readonly search: _angular_core.Signal<KbqSelectSearch | undefined>;
+    /** Message projected for an empty tree — the only thing the panel opens onto without options. */
+    private readonly noOptionsMessage;
     hiddenItemsText: string;
     /**
      * Event emitted when the select panel has been toggled.
@@ -460,14 +463,14 @@ declare class KbqTreeSelect extends KbqAbstractSelect implements AfterContentIni
     private scrollActiveOptionIntoView;
     private subscribeOnSearchChanges;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTreeSelect, never>;
-    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; }; "selectAll": { "alias": "selectAll"; "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; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "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>;
+    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; }; "selectAll": { "alias": "selectAll"; "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; }; "panelMaxHeight": { "alias": "panelMaxHeight"; "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", "noOptionsMessage"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-select-no-options, [kbq-select-no-options]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], true, never>;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_disabled: unknown;
 }
 
 declare class KbqTreeSelectModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqTreeSelectModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqTreeSelectModule, never, [typeof i1.OverlayModule, typeof i2.KbqTreeModule, typeof i3.KbqIconModule, typeof i4.KbqTagsModule, typeof i5.KbqPseudoCheckboxModule, typeof i5.KbqSelectSearch, typeof i5.KbqSelectFooter, typeof i5.KbqSelectMatcher, typeof i5.KbqSelectTrigger, typeof i5.KbqSelectSearchEmptyResult, typeof i6.NgTemplateOutlet, typeof i7.A11yModule, typeof KbqTreeSelect], [typeof KbqTreeSelect, typeof i5.KbqSelectSearch, typeof i5.KbqSelectFooter, typeof i5.KbqSelectMatcher, typeof i5.KbqSelectTrigger, typeof i5.KbqSelectSearchEmptyResult, typeof i9.KbqFormFieldModule]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqTreeSelectModule, never, [typeof i1.OverlayModule, typeof i2.KbqTreeModule, typeof i3.KbqIconModule, typeof i4.KbqTagsModule, typeof i5.KbqPseudoCheckboxModule, typeof i5.KbqSelectSearch, typeof i5.KbqSelectFooter, typeof i5.KbqSelectMatcher, typeof i5.KbqSelectTrigger, typeof i5.KbqSelectSearchEmptyResult, typeof i6.KbqSelectNoOptions, typeof i7.NgTemplateOutlet, typeof i8.A11yModule, typeof KbqTreeSelect], [typeof KbqTreeSelect, typeof i5.KbqSelectSearch, typeof i5.KbqSelectFooter, typeof i5.KbqSelectMatcher, typeof i5.KbqSelectTrigger, typeof i5.KbqSelectSearchEmptyResult, typeof i6.KbqSelectNoOptions, typeof i10.KbqFormFieldModule]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqTreeSelectModule>;
 }