@koobiq/components 18.8.0 → 18.9.1

package/tree/tree-option.scss

@@ -16,6 +16,7 @@
     border-width: var(--kbq-tree-size-container-focus-outline-width);
     border-style: solid;
     border-color: transparent;
+    border-radius: var(--kbq-size-border-radius);
 
     padding-top: kbq-difference-series-css-variables(
         [ tree-size-container-padding-vertical,
@@ -67,4 +68,14 @@
             display: flex;
         }
     }
+
+    &:is(.kbq-selected, .kbq-focused, .kbq-active):has(+ :is(.kbq-selected, .kbq-focused, .kbq-active)) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    &:is(.kbq-selected, .kbq-focused, .kbq-active) + :is(.kbq-selected, .kbq-focused, .kbq-active) {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
 }

package/tree/tree-tokens.scss

@@ -7,43 +7,7 @@
     --kbq-tree-size-container-content-gap-vertical: 0px;
     --kbq-tree-size-container-focus-outline-width: var(--kbq-size-3xs);
     --kbq-tree-size-text-padding-vertical: var(--kbq-size-3xs);
-}
-
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-tree-default-container-background: transparent;
-    --kbq-tree-default-text-color: var(--kbq-foreground-contrast);
-    --kbq-tree-default-icon-color: var(--kbq-icon-contrast);
-    --kbq-tree-default-tree-toggle-color: var(--kbq-icon-contrast-fade);
-    --kbq-tree-default-action-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-tree-default-caption-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-tree-states-hover-container-background: var(--kbq-states-background-transparent-hover);
-    --kbq-tree-states-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-tree-states-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-tree-states-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);
-    --kbq-tree-states-hover-action-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-tree-states-hover-caption-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-tree-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
-    --kbq-tree-states-selected-container-background: var(--kbq-background-theme-less);
-    --kbq-tree-states-selected-text-color: var(--kbq-foreground-contrast);
-    --kbq-tree-states-selected-icon-color: var(--kbq-icon-contrast);
-    --kbq-tree-states-selected-tree-toggle-color: var(--kbq-icon-contrast-fade);
-    --kbq-tree-states-selected-action-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-tree-states-selected-caption-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-tree-states-selected-hover-container-background: var(--kbq-states-background-theme-less-hover);
-    --kbq-tree-states-selected-hover-text-color: var(--kbq-foreground-contrast);
-    --kbq-tree-states-selected-hover-icon-color: var(--kbq-icon-contrast);
-    --kbq-tree-states-selected-hover-tree-toggle-color: var(--kbq-icon-contrast-fade);
-    --kbq-tree-states-selected-hover-action-button-color: var(--kbq-icon-contrast-fade);
-    --kbq-tree-states-selected-hover-caption-color: var(--kbq-foreground-contrast-secondary);
-    --kbq-tree-states-disabled-container-background: transparent;
-    --kbq-tree-states-disabled-text-color: var(--kbq-states-foreground-disabled);
-    --kbq-tree-states-disabled-icon-color: var(--kbq-states-icon-disabled);
-    --kbq-tree-states-disabled-tree-toggle-color: var(--kbq-states-icon-disabled);
-    --kbq-tree-states-disabled-action-button-color: var(--kbq-states-icon-disabled);
-    --kbq-tree-states-disabled-caption-color: var(--kbq-states-foreground-disabled);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    /* THEME TOKENS */
     --kbq-tree-default-container-background: transparent;
     --kbq-tree-default-text-color: var(--kbq-foreground-contrast);
     --kbq-tree-default-icon-color: var(--kbq-icon-contrast);

package/tree-select/_tree-select-theme.scss

@@ -24,9 +24,13 @@
         background: var(--kbq-select-panel-dropdown-background);
 
         & .kbq-select__footer {
-            border-color: var(--kbq-divider-color);
+            border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
         }
     }
+
+    .kbq-select__search-container {
+        border-bottom-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
+    }
 }
 
 @mixin kbq-tree-select-typography() {

package/tree-select/tree-select-tokens.scss

@@ -1,9 +1,5 @@
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-select-panel-dropdown-background: var(--kbq-background-card);
-    --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+.kbq-tree-select__panel {
+    /* THEME TOKENS */
     --kbq-select-panel-dropdown-background: var(--kbq-background-card);
     --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
 }

package/tree-select/tree-select.component.d.ts

@@ -1,7 +1,7 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
-import { CdkConnectedOverlay, ConnectedPosition, ViewportRuler } from '@angular/cdk/overlay';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
+import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectedPosition, ViewportRuler } from '@angular/cdk/overlay';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit, Provider, QueryList, Renderer2, SimpleChanges, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanDisable, CanDisableCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, HasTabIndex, HasTabIndexCtor, KbqLocaleService, KbqSelectMatcher, KbqSelectSearch, KbqSelectTrigger } from '@koobiq/components/core';
 import { KbqCleaner, KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
@@ -9,11 +9,35 @@ import { KbqTag } from '@koobiq/components/tags';
 import { KbqTreeOption, KbqTreeSelection } from '@koobiq/components/tree';
 import { Observable, Subject } from 'rxjs';
 import * as i0 from "@angular/core";
-export interface ITriggerValue {
+/** Tree select trigger value type. */
+export type KbqTreeSelectTriggerValue = {
     disabled: boolean;
     value: string;
     viewValue: string;
+};
+/** @deprecated Will be removed in the next major release, use `KbqTreeSelectTriggerValue` instead */
+export interface ITriggerValue extends KbqTreeSelectTriggerValue {
 }
+/** Tree select panel width type. */
+export type KbqTreeSelectPanelWidth = 'auto' | number | null;
+/** Options for the `kbq-tree-select` that can be configured using the `KBQ_TREE_SELECT_OPTIONS` injection token. */
+export type KbqTreeSelectOptions = Partial<{
+    /**
+     * Width of the panel. If set to `auto`, the panel will match the trigger width.
+     * If set to null or an empty string, the panel will grow to match the longest option's text.
+     */
+    panelWidth: KbqTreeSelectPanelWidth;
+}>;
+/** Injection token that can be used to provide the default options for the `kbq-tree-select`. */
+export declare const KBQ_TREE_SELECT_OPTIONS: InjectionToken<Partial<{
+    /**
+     * Width of the panel. If set to `auto`, the panel will match the trigger width.
+     * If set to null or an empty string, the panel will grow to match the longest option's text.
+     */
+    panelWidth: KbqTreeSelectPanelWidth;
+}>>;
+/** Utility provider for `KBQ_TREE_SELECT_OPTIONS`. */
+export declare const kbqTreeSelectOptionsProvider: (options: KbqTreeSelectOptions) => Provider;
 /** Change event object that is emitted when the select value has changed. */
 export declare class KbqTreeSelectChange {
     source: KbqTreeSelect;
@@ -47,6 +71,8 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private readonly dir;
     private readonly parentFormField;
     private localeService?;
+    protected readonly isBrowser: boolean;
+    private readonly defaultOptions;
     /** A name for this control that can be used by `kbq-form-field`. */
     controlType: string;
     hiddenItems: number;
@@ -155,10 +181,23 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     get focused(): boolean;
     set focused(value: boolean);
     private _focused;
+    /** Width of the overlay panel. */
+    protected overlayWidth: string | number;
+    /** Min width of the overlay panel. */
+    protected overlayMinWidth: string | number;
+    /** Overlay panel class. */
+    protected readonly overlayPanelClass = "kbq-select-overlay";
+    /** Origin for the overlay panel. */
+    protected overlayOrigin?: CdkOverlayOrigin | ElementRef;
+    /**
+     * Width of the panel. If set to `auto`, the panel will match the trigger width.
+     * If set to null or an empty string, the panel will grow to match the longest option's text.
+     */
+    panelWidth: KbqTreeSelectPanelWidth;
     get panelOpen(): boolean;
     get canShowCleaner(): boolean;
     isEmptySearchResult: boolean;
-    triggerValues: ITriggerValue[];
+    triggerValues: KbqTreeSelectTriggerValue[];
     private closeSubscription;
     private _panelOpen;
     private originalOnKeyDown;
@@ -245,6 +284,8 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private closingActions;
     private getTotalItemsWidthInMatcher;
     private getTotalVisibleItems;
+    /** Gets how wide the overlay panel should be. */
+    private getOverlayWidth;
     private buildTriggerClone;
     private getItemWidth;
     private handleClosedKeydown;
@@ -278,6 +319,6 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private _compareWith;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
 }
 export {};