@koobiq/components 18.39.0 → 18.39.2

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/navbar/_navbar-item_vertical.scss

@@ -31,6 +31,14 @@
             top: var(--kbq-size-s);
             bottom: 0;
         }
+
+        & + .kbq-navbar-brand.kbq-vertical {
+            padding: var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m);
+
+            &:after {
+                top: 0;
+            }
+        }
     }
 
     &.kbq-expanded {

package/navbar/navbar-brand.scss

@@ -54,10 +54,10 @@ a.kbq-navbar-brand {
     flex-direction: row;
     align-items: center;
 
-    padding: var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m);
+    padding: var(--kbq-size-m);
 
     &:after {
-        top: 0;
+        top: var(--kbq-size-s);
         right: var(--kbq-size-s);
         bottom: var(--kbq-size-s);
         left: var(--kbq-size-s);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.39.0",
+    "version": "18.39.2",
     "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.39.0",
-        "@koobiq/angular-moment-adapter": "18.39.0",
-        "@koobiq/angular-luxon-adapter": "18.39.0",
+        "@koobiq/cdk": "18.39.2",
+        "@koobiq/angular-moment-adapter": "18.39.2",
+        "@koobiq/angular-luxon-adapter": "18.39.2",
         "@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/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.39.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.39.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.39.2");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.39.2");
         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 {