@koobiq/components 18.38.1 → 18.39.1

package/filter-bar/pipes/pipe-multi-select.d.ts

@@ -28,6 +28,7 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     get selectedAllEqualsSelectedNothing(): boolean;
     private get visibleOptions();
     private selectionAllInProgress;
+    private internalSelected;
     /** @docs-private */
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -39,14 +40,16 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     toggleSelectionAllByEnterKey(): void;
     /** @docs-private */
     toggleSelectionAll(emitEvent?: boolean): void;
-    private emitChangePipeEvent;
     /** Comparator of selected options */
     compareByValue: (o1: any, o2: any) => boolean;
     /** handler for select all options in select */
     selectAllHandler: (event: KeyboardEvent) => void;
+    /** @docs-private */
     onClose(): void;
     /** opens select */
     open(): void;
+    private updateInternalSelected;
+    private emitChangePipeEvent;
     private getFilteredOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeMultiSelectComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeMultiSelectComponent, "kbq-pipe-multi-select", never, {}, {}, never, never, true, never>;

package/filter-bar/pipes/pipe-multi-tree-select.d.ts

@@ -31,6 +31,7 @@ export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSele
     get selectedAllEqualsSelectedNothing(): boolean;
     /** true if all visible options selected */
     get allVisibleOptionsSelected(): boolean;
+    private internalSelected;
     constructor();
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -45,10 +46,14 @@ export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSele
     updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
     /** opens select */
     open(): void;
+    onClear(): void;
+    /** @docs-private */
     onOpen(): void;
+    /** @docs-private */
     onClose(): void;
     /** handler for select all options in select */
     selectAllHandler: (event: KeyboardEvent) => void;
+    private updateInternalSelected;
     private emitChangePipeEvent;
     private toggleParents;
     private transformer;

package/list/list-selection.component.d.ts

@@ -4,7 +4,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FocusKeyManager, IFocusableOption } from '@koobiq/cdk/a11y';
-import { KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef, MultipleMode } from '@koobiq/components/core';
+import { KbqOptgroup, KbqOptionActionComponent, KbqPseudoCheckbox, KbqTitleTextRef, MultipleMode } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Observable, Subject } from 'rxjs';
@@ -150,6 +150,7 @@ export declare class KbqListOption implements OnDestroy, OnInit, IFocusableOptio
     actionButton: KbqOptionActionComponent;
     tooltipTrigger: KbqTooltipTrigger;
     dropdownTrigger: KbqDropdownTrigger;
+    pseudoCheckbox: KbqPseudoCheckbox;
     text: ElementRef;
     textElement: ElementRef;
     checkboxPosition: 'before' | 'after';
@@ -172,6 +173,7 @@ export declare class KbqListOption implements OnDestroy, OnInit, IFocusableOptio
     set selected(value: boolean);
     private _selected;
     get tabIndex(): any;
+    get externalPseudoCheckbox(): boolean;
     constructor(elementRef: ElementRef<HTMLElement>, changeDetector: ChangeDetectorRef, ngZone: NgZone, listSelection: KbqListSelection, group: KbqOptgroup);
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -187,7 +189,7 @@ export declare class KbqListOption implements OnDestroy, OnInit, IFocusableOptio
     blur(): void;
     getHostElement(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListOption, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListOption, "kbq-list-option", ["kbqListOption"], { "checkboxPosition": { "alias": "checkboxPosition"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, {}, ["actionButton", "tooltipTrigger", "dropdownTrigger"], ["[kbq-icon]", "*", "[kbq-list-option-caption]", "kbq-option-action"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListOption, "kbq-list-option", ["kbqListOption"], { "checkboxPosition": { "alias": "checkboxPosition"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, {}, ["actionButton", "tooltipTrigger", "dropdownTrigger", "pseudoCheckbox"], ["kbq-pseudo-checkbox", "[kbq-icon]", "*", "[kbq-list-option-caption]", "kbq-option-action"], false, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_selected: unknown;
 }

package/loader-overlay/loader-overlay.scss

@@ -14,6 +14,10 @@
 }
 
 .kbq-loader-overlay {
+    --padding-horizontal: var(--kbq-size-3xl);
+    --loader-margin-bottom: var(--kbq-size-xxl);
+    --content-gap-vertical: var(--kbq-size-l);
+
     position: absolute;
 
     display: flex;
@@ -41,46 +45,33 @@
         max-width: 80%;
     }
 
-    &.kbq-loader-overlay_big {
-        padding-left: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
+    padding-left: var(--padding-horizontal);
+    padding-right: var(--padding-horizontal);
 
-        padding-right: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
+    .kbq-progress-spinner:has(+ .kbq-loader-overlay-text, + .kbq-loader-overlay-caption) {
+        margin-bottom: var(--loader-margin-bottom);
+    }
 
-        .kbq-progress-spinner {
-            margin-bottom: var(--kbq-loader-overlay-size-big-loader-margin-bottom);
-        }
+    .kbq-loader-overlay-text {
+        margin-bottom: var(--content-gap-vertical);
+    }
 
-        .kbq-loader-overlay-text {
-            margin-bottom: var(--kbq-loader-overlay-size-big-content-content-gap-vertical);
-        }
+    &.kbq-loader-overlay_big {
+        --padding-horizontal: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
+        --loader-margin-bottom: var(--kbq-loader-overlay-size-big-loader-margin-bottom);
+        --content-gap-vertical: var(--kbq-loader-overlay-size-big-content-content-gap-vertical);
     }
 
     &.kbq-loader-overlay_normal {
-        padding-left: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
-
-        padding-right: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
-
-        .kbq-progress-spinner {
-            margin-bottom: var(--kbq-loader-overlay-size-normal-loader-margin-bottom);
-        }
-
-        .kbq-loader-overlay-text {
-            margin-bottom: var(--kbq-loader-overlay-size-normal-content-content-gap-vertical);
-        }
+        --padding-horizontal: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
+        --loader-margin-bottom: var(--kbq-loader-overlay-size-normal-loader-margin-bottom);
+        --content-gap-vertical: var(--kbq-loader-overlay-size-normal-content-content-gap-vertical);
     }
 
     &.kbq-loader-overlay_compact {
-        padding-left: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
-
-        padding-right: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
-
-        .kbq-progress-spinner {
-            margin-bottom: var(--kbq-loader-overlay-size-compact-loader-margin-bottom);
-        }
-
-        .kbq-loader-overlay-text {
-            margin-bottom: var(--kbq-loader-overlay-size-compact-content-content-gap-vertical);
-        }
+        --padding-horizontal: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
+        --loader-margin-bottom: var(--kbq-loader-overlay-size-compact-loader-margin-bottom);
+        --content-gap-vertical: var(--kbq-loader-overlay-size-compact-content-content-gap-vertical);
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.38.1",
+    "version": "18.39.1",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.38.1",
-        "@koobiq/angular-moment-adapter": "18.38.1",
-        "@koobiq/angular-luxon-adapter": "18.38.1",
+        "@koobiq/cdk": "18.39.1",
+        "@koobiq/angular-moment-adapter": "18.39.1",
+        "@koobiq/angular-luxon-adapter": "18.39.1",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^10.4.0",
         "@koobiq/tokens-builder": "3.11.0",

package/popover/_popover-theme.scss

@@ -2,7 +2,7 @@
 
 @mixin kbq-popover-theme() {
     .kbq-popover {
-        box-shadow: var(--kbq-popover-borderless-shadow);
+        box-shadow: var(--kbq-popover-container-shadow);
 
         &.kbq-popover_arrowless {
             box-shadow: var(--kbq-popover-container-shadow);
@@ -14,7 +14,7 @@
     }
 
     .kbq-popover__arrow {
-        box-shadow: var(--kbq-popover-borderless-shadow);
+        box-shadow: var(--kbq-popover-container-shadow);
         background: var(--kbq-popover-container-background);
     }
 

package/popover/popover.scss

@@ -25,7 +25,7 @@ $arrow-padding: 24px;
     &.kbq-popover_small {
         max-width: var(--kbq-popover-size-container-width-small);
 
-        & .kbq-popover__content {
+        & .kbq-popover__content_default-paddings.kbq-popover__content {
             padding: var(--kbq-size-l);
         }
     }
@@ -61,7 +61,7 @@ $arrow-padding: 24px;
     border-radius: var(--kbq-popover-size-container-border-radius);
 
     &.kbq-popover__container_with-header {
-        .kbq-popover__content {
+        .kbq-popover__content_default-paddings.kbq-popover__content {
             padding-top: var(--kbq-size-s);
         }
     }
@@ -87,6 +87,7 @@ $arrow-padding: 24px;
 
 .kbq-popover__header {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
 
     overflow: hidden;

package/schematics/ng-add/index.js

@@ -27,8 +27,8 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.14");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.38.1");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.38.1");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.39.1");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.39.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.4.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^10.10.0");

package/timepicker/timepicker.directive.d.ts

@@ -1,6 +1,6 @@
-import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { AfterContentInit, DoCheck, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
-import { DateAdapter, KbqLocaleService } from '@koobiq/components/core';
+import { DateAdapter, ErrorStateMatcher, KbqLocaleService } from '@koobiq/components/core';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import { KbqWarningTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
@@ -10,7 +10,7 @@ import * as i0 from "@angular/core";
 export declare const KBQ_TIMEPICKER_VALUE_ACCESSOR: any;
 /** @docs-private */
 export declare const KBQ_TIMEPICKER_VALIDATORS: any;
-export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, ControlValueAccessor, Validator, OnDestroy {
+export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, ControlValueAccessor, Validator, OnDestroy, DoCheck, AfterContentInit {
     private elementRef;
     private renderer;
     private dateAdapter;
@@ -20,7 +20,6 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
      * @docs-private
      */
     readonly stateChanges: Subject<void>;
-    errorState: boolean;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -31,6 +30,9 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
      * @docs-private
      */
     controlType: string;
+    /** Object used to control when error messages are shown. */
+    get errorStateMatcher(): ErrorStateMatcher;
+    set errorStateMatcher(value: ErrorStateMatcher);
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -81,16 +83,22 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     set selectionEnd(value: number | null);
     /** Localized placeholder */
     get timeFormatPlaceholder(): string;
+    /** @docs-private */
+    get errorState(): boolean;
+    set errorState(value: boolean);
     private readonly uid;
     private readonly validator;
     private lastValueValid;
-    private control;
+    private control?;
     private defaultPlaceholder;
     private separator;
     private onChange;
     private onTouched;
     private localeSubscription;
+    private errorStateTracker;
     constructor(elementRef: ElementRef<HTMLInputElement>, renderer: Renderer2, dateAdapter: DateAdapter<any>, localeService?: KbqLocaleService | undefined);
+    ngDoCheck(): void;
+    ngAfterContentInit(): void;
     ngOnDestroy(): void;
     getSize(): number;
     focus(): void;
@@ -140,9 +148,11 @@ export declare class KbqTimepicker<D> implements KbqFormFieldControl<D>, Control
     private getValidDateOrNull;
     private setViewValue;
     private updateView;
+    /** @docs-private */
+    updateErrorState(): void;
     private setControl;
     private validatorOnChange;
     private updateLocaleParams;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTimepicker<any>, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimepicker<any>, "input[kbqTimepicker]", ["kbqTimepicker"], { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "format": { "alias": "format"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; "kbqValidationTooltip": { "alias": "kbqValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTimepicker<any>, "input[kbqTimepicker]", ["kbqTimepicker"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "format": { "alias": "format"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; "kbqValidationTooltip": { "alias": "kbqValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; }, never, never, false, never>;
 }

package/tooltip/_tooltip-theme.scss

@@ -9,7 +9,6 @@
 
     & .kbq-tooltip__arrow {
         background-color: var(--kbq-tooltip-#{$style-name}-background);
-        box-shadow: var(--kbq-tooltip-borderless-shadow);
     }
 
     &.kbq-tooltip_arrowless {
@@ -18,11 +17,6 @@
 }
 
 @mixin kbq-tooltip-theme() {
-    .kbq-tooltip,
-    .kbq-tooltip__arrow {
-        box-shadow: var(--kbq-tooltip-borderless-shadow);
-    }
-
     .kbq-tooltip.kbq-theme {
         @include kbq-tooltip-color(theme-fade-off);
     }
@@ -33,6 +27,11 @@
 
     .kbq-tooltip.kbq-contrast-fade {
         @include kbq-tooltip-color(contrast-fade-on);
+
+        &.kbq-tooltip,
+        & .kbq-tooltip__arrow {
+            box-shadow: var(--kbq-shadow-popup);
+        }
     }
 
     .kbq-tooltip.kbq-warning {