@koobiq/components 18.31.0 → 18.32.0

package/tabs/tabs.module.d.ts

@@ -9,13 +9,12 @@ import * as i7 from "./tab-content.directive";
 import * as i8 from "@angular/cdk/portal";
 import * as i9 from "@angular/cdk/a11y";
 import * as i10 from "@angular/cdk/scrolling";
-import * as i11 from "@koobiq/components/core";
-import * as i12 from "@koobiq/components/icon";
-import * as i13 from "@koobiq/components/tooltip";
-import * as i14 from "@angular/cdk/observers";
-import * as i15 from "./tab-nav-bar";
+import * as i11 from "@koobiq/components/icon";
+import * as i12 from "@koobiq/components/tooltip";
+import * as i13 from "@angular/cdk/observers";
+import * as i14 from "./tab-nav-bar";
 export declare class KbqTabsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTabsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabBody, typeof i5.KbqTabBodyPortal, typeof i6.KbqTabHeader, typeof i7.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i8.PortalModule, typeof i9.A11yModule, typeof i10.CdkScrollableModule, typeof i11.KbqCommonModule, typeof i12.KbqIconModule, typeof i13.KbqToolTipModule, typeof i14.CdkObserveContent, typeof i15.KbqTabNavBar, typeof i15.KbqTabLink, typeof i15.KbqTabNavPanel], [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabBody, typeof i5.KbqTabBodyPortal, typeof i6.KbqTabHeader, typeof i7.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler, typeof i15.KbqTabNavBar, typeof i15.KbqTabLink, typeof i15.KbqTabNavPanel]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTabsModule, [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabBody, typeof i5.KbqTabBodyPortal, typeof i6.KbqTabHeader, typeof i7.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler], [typeof i8.PortalModule, typeof i9.A11yModule, typeof i10.CdkScrollableModule, typeof i11.KbqIconModule, typeof i12.KbqToolTipModule, typeof i13.CdkObserveContent, typeof i14.KbqTabNavBar, typeof i14.KbqTabLink, typeof i14.KbqTabNavPanel], [typeof i1.KbqTabGroup, typeof i2.KbqTabLabel, typeof i3.KbqTab, typeof i4.KbqTabLabelWrapper, typeof i5.KbqTabBody, typeof i5.KbqTabBodyPortal, typeof i6.KbqTabHeader, typeof i7.KbqTabContent, typeof i1.KbqAlignTabsCenterCssStyler, typeof i1.KbqAlignTabsEndCssStyler, typeof i1.KbqStretchTabsCssStyler, typeof i1.KbqVerticalTabsCssStyler, typeof i14.KbqTabNavBar, typeof i14.KbqTabLink, typeof i14.KbqTabNavPanel]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTabsModule>;
 }

package/tags/tag-list.scss

@@ -57,9 +57,13 @@
 
 .kbq-form-field-type-tag-list {
     & .kbq-form-field__container {
-        padding: kbq-difference-series-css-variables([tag-input-size-padding-vertical, form-field-size-border-width])
-            var(--kbq-tag-input-size-padding-right)
-            kbq-difference-series-css-variables([tag-input-size-padding-vertical, form-field-size-border-width])
-            var(--kbq-tag-input-size-padding-left);
+        padding-top: kbq-difference-series-css-variables(
+            [tag-input-size-padding-vertical,
+            form-field-size-border-width]
+        );
+        padding-bottom: kbq-difference-series-css-variables(
+            [tag-input-size-padding-vertical,
+            form-field-size-border-width]
+        );
     }
 }

package/textarea/textarea.component.d.ts

@@ -23,6 +23,7 @@ export declare class KbqTextarea implements KbqFormFieldControl<any>, OnInit, On
     set canGrow(value: boolean);
     protected readonly isBrowser: boolean;
     protected readonly renderer: Renderer2;
+    private readonly window;
     private _canGrow;
     /** Maximum number of lines to which the textarea will grow. Default unlimited */
     maxRows: number;

package/textarea/textarea.module.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./textarea.component";
 import * as i2 from "@angular/cdk/a11y";
-import * as i3 from "@koobiq/components/core";
-import * as i4 from "@angular/forms";
+import * as i3 from "@angular/forms";
 export declare class KbqTextareaModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTextareaModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTextareaModule, [typeof i1.KbqTextarea], [typeof i2.A11yModule, typeof i3.KbqCommonModule, typeof i4.FormsModule], [typeof i1.KbqTextarea]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTextareaModule, [typeof i1.KbqTextarea], [typeof i2.A11yModule, typeof i3.FormsModule], [typeof i1.KbqTextarea]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqTextareaModule>;
 }

package/timepicker/timepicker.scss

@@ -6,5 +6,5 @@
 }
 
 .kbq-form-field-type-timepicker {
-    width: auto;
+    width: 136px;
 }

package/toast/toast.component.scss

@@ -70,6 +70,8 @@
 .kbq-toast__content {
     display: flex;
     flex-direction: column;
+
+    white-space: pre-wrap;
 }
 
 .kbq-toast__actions {

package/toggle/_toggle-theme.scss

@@ -49,10 +49,18 @@
         }
     }
 
-    &.kbq-disabled,
-    &.kbq-active.kbq-disabled {
+    &.kbq-disabled {
         @include _kbq-toggle-state($type, states-disabled);
     }
+
+    &.kbq-active.kbq-disabled,
+    &.kbq-indeterminate.kbq-disabled {
+        @include _kbq-toggle-state($type, states-active-disabled);
+
+        .kbq-toggle-bar {
+            opacity: var(--kbq-opacity-disabled);
+        }
+    }
 }
 
 @mixin kbq-toggle-theme() {

package/toggle/toggle-tokens.scss

@@ -30,13 +30,16 @@
     --kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);
     --kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);
+    --kbq-toggle-theme-states-active-disabled-border: var(--kbq-background-theme);
+    --kbq-toggle-theme-states-active-disabled-background: var(--kbq-background-theme);
+    --kbq-toggle-theme-states-active-disabled-circle-background: var(--kbq-icon-white);
     --kbq-toggle-error-default-border: var(--kbq-line-error);
     --kbq-toggle-error-default-background: var(--kbq-background-error-less);
     --kbq-toggle-error-default-circle-background: var(--kbq-icon-error);
     --kbq-toggle-error-states-hover-border: var(--kbq-line-error);
     --kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);
     --kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);
-    --kbq-toggle-error-states-checked-border: var(--kbq-line-error);
+    --kbq-toggle-error-states-checked-border: var(--kbq-background-error);
     --kbq-toggle-error-states-checked-background: var(--kbq-background-error);
     --kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);
     --kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);
@@ -53,4 +56,7 @@
     --kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);
     --kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled);
+    --kbq-toggle-error-states-active-disabled-border: var(--kbq-background-error);
+    --kbq-toggle-error-states-active-disabled-background: var(--kbq-background-error);
+    --kbq-toggle-error-states-active-disabled-circle-background: var(--kbq-icon-white);
 }

package/toggle/toggle.module.d.ts

@@ -1,9 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./toggle.component";
 import * as i2 from "@angular/cdk/a11y";
-import * as i3 from "@koobiq/components/core";
 export declare class KbqToggleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqToggleModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToggleModule, [typeof i1.KbqToggleComponent], [typeof i2.A11yModule, typeof i3.KbqCommonModule], [typeof i1.KbqToggleComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqToggleModule, [typeof i1.KbqToggleComponent], [typeof i2.A11yModule], [typeof i1.KbqToggleComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqToggleModule>;
 }

package/toggle/toggle.scss

@@ -84,15 +84,15 @@ $toggle-thumb-offset: 8px;
             }
         }
 
-        .kbq-toggle-bar {
+        &:not(.kbq-disabled) .kbq-toggle-bar:hover {
             .kbq-toggle__thumb {
-                display: block;
+                left: $toggle-thumb-offset + 2px;
             }
+        }
 
-            &:hover {
-                .kbq-toggle__thumb {
-                    left: $toggle-thumb-offset + 2px;
-                }
+        .kbq-toggle-bar {
+            .kbq-toggle__thumb {
+                display: block;
             }
         }
     }

package/top-bar/top-bar.scss

@@ -1,5 +1,24 @@
 @use '../core/styles/common/tokens';
 
+@mixin _overflow-items-margins {
+    padding: var(--kbq-size-border-width);
+
+    > .kbq-overflow-item {
+        &:not(:last-of-type) {
+            margin-right: var(--kbq-top-bar-container-end-gap);
+        }
+
+        // apply margin if the last item needs to be alwaysVisible
+        &:last-of-type:is(.kbq-overflow-item_always-visible) + .kbq-overflow-items-result {
+            margin-left: var(--kbq-top-bar-container-end-gap);
+        }
+    }
+
+    .kbq-overflow-items-result:first-child {
+        margin-right: var(--kbq-top-bar-container-end-gap);
+    }
+}
+
 .kbq-top-bar {
     display: flex;
     align-items: center;
@@ -12,49 +31,46 @@
     padding: var(--kbq-top-bar-padding-vertical) var(--kbq-top-bar-padding-horizontal);
     border-radius: var(--kbq-top-bar-border-radius);
 
+    &.kbq-top-bar_with-shadow {
+        box-shadow: var(--kbq-top-bar-shadow-bottom);
+        transition: box-shadow var(--kbq-top-bar-shadow-transition);
+    }
+
     .kbq-top-bar-spacer {
         height: 100%;
         flex: 0 0 var(--kbq-top-bar-spacer-min-width);
     }
 
-    .kbq-top-bar-container__start {
-        display: flex;
-        gap: var(--kbq-top-bar-container-start-gap);
-        flex: 1 0 var(--kbq-top-bar-container-start-basis);
-        justify-content: flex-start;
-        min-width: 0;
-    }
-
-    .kbq-top-bar-container__end {
-        display: flex;
-        gap: var(--kbq-top-bar-container-end-gap);
-        justify-content: end;
-    }
-
-    .kbq-top-bar-container__with-overflow-items {
-        gap: unset;
-        justify-content: unset;
-        padding: 1px;
+    .kbq-top-bar-container {
+        &:has(> .kbq-overflow-items) {
+            gap: unset;
+            overflow: hidden;
+        }
 
-        > .kbq-overflow-item {
-            &:not(:last-of-type) {
-                margin-right: var(--kbq-top-bar-container-end-gap);
-            }
+        .kbq-overflow-items {
+            @include _overflow-items-margins;
+        }
 
-            // apply margin if the last item needs to be alwaysVisible
-            &:last-of-type:is([aria-hidden='false']) + .kbq-overflow-items-result {
-                margin-left: var(--kbq-top-bar-container-end-gap);
-            }
+        &.kbq-top-bar-container__start {
+            display: flex;
+            gap: var(--kbq-top-bar-container-start-gap);
+            flex: 1 0 var(--kbq-top-bar-container-start-basis);
+            justify-content: flex-start;
+            min-width: 0;
         }
 
-        .kbq-overflow-items-result:first-child {
-            margin-right: var(--kbq-top-bar-container-end-gap);
+        &.kbq-top-bar-container__end {
+            display: flex;
+            gap: var(--kbq-top-bar-container-end-gap);
+            justify-content: end;
         }
-    }
 
-    &.kbq-top-bar_with-shadow {
-        box-shadow: var(--kbq-top-bar-shadow-bottom);
-        transition: box-shadow var(--kbq-top-bar-shadow-transition);
+        &.kbq-top-bar-container__with-overflow-items {
+            gap: unset;
+            justify-content: unset;
+
+            @include _overflow-items-margins;
+        }
     }
 
     @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);

package/tree/padding.directive.d.ts

@@ -17,9 +17,9 @@ export declare class KbqTreeNodePadding<T> implements AfterViewInit {
     set indent(indent: number | string);
     private _indent;
     get leftPadding(): number;
+    get leftPaddingForFirstLevel(): number;
     /** CSS units used for the indentation value. */
     indentUnits: string;
-    baseLeftPadding: number;
     withIcon: boolean;
     iconWidth: number;
     constructor(treeNode: KbqTreeNode<T>, tree: KbqTreeBase<T>, renderer: Renderer2, element: ElementRef<HTMLElement>, option: KbqTreeOption, dir: Directionality);

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

@@ -201,6 +201,7 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private readonly uid;
     private tempValues;
     private readonly destroyRef;
+    private readonly window;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, renderer: Renderer2, defaultErrorStateMatcher: ErrorStateMatcher, scrollStrategyFactory: any, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, parentFormField: KbqFormField, ngControl: NgControl, localeService?: KbqLocaleService | undefined);
     ngOnInit(): void;
     ngAfterContentInit(): void;
@@ -303,6 +304,7 @@ export declare class KbqTreeSelect extends KbqAbstractSelect implements AfterCon
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "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; }; "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; }; "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-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
+    static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_disabled: unknown;
 }

package/esm2022/form-field/form-field-errors.mjs

@@ -1,7 +0,0 @@
-export function getKbqFormFieldMissingControlError() {
-    return Error('kbq-form-field must contain a KbqFormFieldControl.');
-}
-export function getKbqFormFieldYouCanNotUseCleanerInNumberInputError() {
-    return Error(`You can't use kbq-cleaner with input that have type="number"`);
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1maWVsZC1lcnJvcnMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL2Zvcm0tZmllbGQvZm9ybS1maWVsZC1lcnJvcnMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxVQUFVLGtDQUFrQztJQUM5QyxPQUFPLEtBQUssQ0FBQyxvREFBb0QsQ0FBQyxDQUFDO0FBQ3ZFLENBQUM7QUFFRCxNQUFNLFVBQVUsb0RBQW9EO0lBQ2hFLE9BQU8sS0FBSyxDQUFDLDhEQUE4RCxDQUFDLENBQUM7QUFDakYsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBmdW5jdGlvbiBnZXRLYnFGb3JtRmllbGRNaXNzaW5nQ29udHJvbEVycm9yKCk6IEVycm9yIHtcbiAgICByZXR1cm4gRXJyb3IoJ2ticS1mb3JtLWZpZWxkIG11c3QgY29udGFpbiBhIEticUZvcm1GaWVsZENvbnRyb2wuJyk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXRLYnFGb3JtRmllbGRZb3VDYW5Ob3RVc2VDbGVhbmVySW5OdW1iZXJJbnB1dEVycm9yKCk6IEVycm9yIHtcbiAgICByZXR1cm4gRXJyb3IoYFlvdSBjYW4ndCB1c2Uga2JxLWNsZWFuZXIgd2l0aCBpbnB1dCB0aGF0IGhhdmUgdHlwZT1cIm51bWJlclwiYCk7XG59XG4iXX0=

package/form-field/form-field-errors.d.ts

@@ -1,2 +0,0 @@
-export declare function getKbqFormFieldMissingControlError(): Error;
-export declare function getKbqFormFieldYouCanNotUseCleanerInNumberInputError(): Error;