@koobiq/components 18.31.0 → 18.33.0

package/form-field/reactive-password-hint.d.ts

@@ -0,0 +1,19 @@
+import { KbqHint } from './hint';
+import * as i0 from "@angular/core";
+/** Password hint to be shown below the password form field control. */
+export declare class KbqReactivePasswordHint extends KbqHint {
+    private readonly formField;
+    private readonly destroyRef;
+    /** Whether the form field control has an error. */
+    readonly hasError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * The form field hint icon.
+     *
+     * @docs-private
+     */
+    protected readonly icon: import("@angular/core").Signal<"kbq-check-s_16" | "kbq-xmark-s_16">;
+    constructor();
+    private makeColor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqReactivePasswordHint, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqReactivePasswordHint, "kbq-reactive-password-hint", ["kbqReactivePasswordHint"], { "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/form-field/stepper.d.ts

@@ -1,25 +1,37 @@
 import { EventEmitter } from '@angular/core';
 import { KbqFormFieldControl } from './form-field-control';
 import * as i0 from "@angular/core";
-/**
- * Used as temporary solution to resolve circular dependency.
- * Moving `KbqStepper` to standalone will resolve the issue
- */
 type KbqNumberInput = KbqFormFieldControl<unknown> & {
-    stepUp: (val: number) => void;
-    stepDown: (val: number) => void;
+    stepUp: (step: number) => void;
+    stepDown: (step: number) => void;
     step: number;
 };
+/** Component which allow to increment or decrement number value. */
 export declare class KbqStepper {
     private readonly formField;
+    /** Emitted when the stepper is incremented. */
     readonly stepUp: EventEmitter<void>;
+    /** Emitted when the stepper is decremented. */
     readonly stepDown: EventEmitter<void>;
-    /** Form field number control. */
+    /**
+     * Form field number control.
+     *
+     * @docs-private
+     */
     protected get control(): KbqNumberInput;
+    /**
+     * @docs-private
+     */
     connectTo(numberInput: KbqNumberInput): void;
+    /**
+     * @docs-private
+     */
     onStepUp($event: MouseEvent): void;
+    /**
+     * @docs-private
+     */
     onStepDown($event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqStepper, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqStepper, "kbq-stepper", never, {}, { "stepUp": "stepUp"; "stepDown": "stepDown"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqStepper, "kbq-stepper", ["kbqStepper"], {}, { "stepUp": "stepUp"; "stepDown": "stepDown"; }, never, never, true, never>;
 }
 export {};

package/form-field/stepper.scss

@@ -1,25 +1,26 @@
 .kbq-stepper {
+    // margin used by design to reduce gap between step arrows
+    $step-margin: -2px;
+
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 
-    width: var(--kbq-form-field-size-icon-button-size);
-    margin-right: var(--kbq-form-field-size-icon-button-margin-right);
+    width: var(--kbq-form-field-size-addon-width);
     height: 100%;
 
-    .kbq-stepper-step-up,
-    .kbq-stepper-step-down {
-        cursor: pointer;
-        width: var(--kbq-form-field-size-icon-button-size);
-        text-align: center;
+    .kbq-stepper-step-up {
+        margin-bottom: $step-margin;
     }
 
-    .kbq-stepper-step-up {
-        transform: scaleY(-1);
+    .kbq-stepper-step-down {
+        margin-top: $step-margin;
     }
 
-    .kbq-icon-button.kbq-icon-button_small {
-        padding: 0;
+    .kbq-stepper-step-up,
+    .kbq-stepper-step-down {
+        width: 100%;
+        text-align: center;
     }
 }

package/form-field/suffix.d.ts

@@ -1,5 +1,6 @@
 import * as i0 from "@angular/core";
+/** Element to be placed at the end of the form field. */
 export declare class KbqSuffix {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSuffix, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSuffix, "[kbqSuffix]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSuffix, "[kbqSuffix]", never, {}, {}, never, never, true, never>;
 }

package/form-field/validate.directive.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef } from '@angular/core';
 import { AbstractControl, FormGroupDirective, NgControl, NgForm, Validator, ValidatorFn } from '@angular/forms';
 import { KbqValidationOptions } from '@koobiq/components/core';
 import { KbqFormField } from './form-field';
@@ -7,22 +7,19 @@ import * as i0 from "@angular/core";
 /**
  * @deprecated Will be removed in next major release (#DS-2838)
  *
- * Legacy mosaic validation
+ * Legacy validation directive.
  *
  * ### How to disable?
  *
  * ```typescript
- * import { KBQ_VALIDATION, KbqValidationOptions } from '@koobiq/components/core';
+ * import { kbqDisableLegacyValidationDirectiveProvider } from '@koobiq/components/core';
  *
  * @NgModule({
- *      providers: [
- *           {
- *              provide: KBQ_VALIDATION,
- *              useValue: { useValidation: false } satisfies KbqValidationOptions
- *           }
- *      ]
+ *      providers: [kbqDisableLegacyValidationDirectiveProvider()]
  * })
  * ```
+ *
+ * @docs-private
  */
 export declare class KbqValidateDirective implements AfterContentInit {
     private formFieldControl;
@@ -33,13 +30,14 @@ export declare class KbqValidateDirective implements AfterContentInit {
     private mcValidation;
     private cdr;
     private readonly parentFormField;
+    private readonly elementRef;
     get isNgModel(): boolean;
     get isFormControlName(): boolean;
     get isFormControl(): boolean;
     get validationControl(): any;
     get parent(): NgForm;
     get hasNotSubmittedParent(): boolean;
-    constructor(formFieldControl: KbqFormFieldControl<any>, rawValidators: Validator[], ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, mcValidation: KbqValidationOptions, cdr: ChangeDetectorRef, parentFormField: KbqFormField | null);
+    constructor(formFieldControl: KbqFormFieldControl<any>, rawValidators: Validator[], ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, mcValidation: KbqValidationOptions, cdr: ChangeDetectorRef, parentFormField: KbqFormField | null, elementRef: ElementRef);
     ngAfterContentInit(): void;
     setValidState(control: AbstractControl, validator: ValidatorFn): void;
     /** This function do next:
@@ -50,6 +48,6 @@ export declare class KbqValidateDirective implements AfterContentInit {
     setMosaicValidation(): void;
     setMosaicValidationForModelControl(): void;
     setMosaicValidationForFormControl(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqValidateDirective, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; host: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqValidateDirective, "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqValidateDirective, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; host: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqValidateDirective, "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, true, never>;
 }

package/input/input-tokens.scss

@@ -1,4 +1,4 @@
 .kbq-input {
-    --kbq-input-size-padding-horizontal: var(--kbq-size-m);
-    --kbq-input-size-padding-vertical: var(--kbq-size-xs);
+    --kbq-input-size-padding-horizontal: 0;
+    --kbq-input-size-padding-vertical: var(--kbq-form-field-size-container-vertical-padding);
 }

package/input/input.module.d.ts

@@ -4,11 +4,10 @@ import * as i2 from "./input-number";
 import * as i3 from "./input-password";
 import * as i4 from "./input-number-validators";
 import * as i5 from "@angular/cdk/a11y";
-import * as i6 from "@koobiq/components/core";
-import * as i7 from "@angular/forms";
-import * as i8 from "@koobiq/components/icon";
+import * as i6 from "@angular/forms";
+import * as i7 from "@koobiq/components/icon";
 export declare class KbqInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqInputModule, [typeof i1.KbqInput, typeof i2.KbqNumberInput, typeof i3.KbqInputPassword, typeof i1.KbqInputMono, typeof i4.MinValidator, typeof i4.MaxValidator], [typeof i5.A11yModule, typeof i6.KbqCommonModule, typeof i7.FormsModule, typeof i8.KbqIconModule], [typeof i1.KbqInput, typeof i2.KbqNumberInput, typeof i3.KbqInputPassword, typeof i1.KbqInputMono, typeof i4.MinValidator, typeof i4.MaxValidator]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqInputModule, [typeof i1.KbqInput, typeof i2.KbqNumberInput, typeof i3.KbqInputPassword, typeof i1.KbqInputMono, typeof i4.MinValidator, typeof i4.MaxValidator], [typeof i5.A11yModule, typeof i6.FormsModule, typeof i7.KbqIconModule], [typeof i1.KbqInput, typeof i2.KbqNumberInput, typeof i3.KbqInputPassword, typeof i1.KbqInputMono, typeof i4.MinValidator, typeof i4.MaxValidator]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqInputModule>;
 }

package/input/input.scss

@@ -14,8 +14,7 @@
     width: 100%;
     min-height: kbq-difference-series-css-variables([size-3xl, calc(var(--kbq-size-border-width) * 2)]);
 
-    padding: kbq-difference-series-css-variables([input-size-padding-vertical, size-border-width])
-        var(--kbq-input-size-padding-horizontal);
+    padding: var(--kbq-input-size-padding-vertical) var(--kbq-input-size-padding-horizontal);
 }
 
 input.kbq-input[type='number'] {

package/list/_list-theme.scss

@@ -1,6 +1,8 @@
 @use '../core/styles/common/tokens';
 
 @mixin _kbq-list-item($state-name) {
+    --kbq-option-background: var(--kbq-list-#{$state-name}-container-background);
+
     background: var(--kbq-list-#{$state-name}-container-background);
 
     .kbq-list-text {
@@ -24,7 +26,8 @@
     .kbq-list-option {
         @include _kbq-list-item(default);
 
-        &:hover:not(.kbq-disabled) {
+        &:hover:not(.kbq-disabled),
+        &.kbq-action-button-focused:not(.kbq-disabled) {
             @include _kbq-list-item(states-hover);
         }
 

package/list/list.module.d.ts

@@ -3,8 +3,9 @@ import * as i1 from "./list.component";
 import * as i2 from "./list-selection.component";
 import * as i3 from "@angular/cdk/a11y";
 import * as i4 from "@koobiq/components/core";
+import * as i5 from "@koobiq/components/icon";
 export declare class KbqListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqListModule, [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption, typeof i2.KbqListOptionCaption], [typeof i3.A11yModule, typeof i4.KbqPseudoCheckboxModule, typeof i4.KbqLineModule, typeof i4.KbqOptionModule], [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption, typeof i2.KbqListOptionCaption, typeof i4.KbqOptionModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqListModule, [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption, typeof i2.KbqListOptionCaption], [typeof i3.A11yModule, typeof i4.KbqPseudoCheckboxModule, typeof i4.KbqLineModule, typeof i4.KbqOptionModule, typeof i4.KbqActionContainer, typeof i5.KbqIconModule], [typeof i1.KbqList, typeof i2.KbqListSelection, typeof i1.KbqListItem, typeof i2.KbqListOption, typeof i2.KbqListOptionCaption, typeof i4.KbqOptionModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqListModule>;
 }

package/list/list.scss

@@ -32,19 +32,13 @@
 
     &:not(.kbq-disabled) {
         cursor: pointer;
-    }
-
-    & .kbq-option-action {
-        display: none;
-        height: var(--kbq-size-xl);
-        align-items: center;
-    }
 
-    &:not(.kbq-disabled):hover,
-    &:not(.kbq-disabled).kbq-focused,
-    &:not(.kbq-disabled).kbq-action-button-focused {
-        & .kbq-option-action {
-            display: flex;
+        &:hover,
+        &.kbq-focused,
+        &.kbq-action-button-focused {
+            & .kbq-action-container {
+                display: flex;
+            }
         }
     }
 }

package/navbar/navbar-item.component.d.ts

@@ -24,6 +24,7 @@ export declare class KbqNavbarBento {
 export declare class KbqNavbarTitle implements AfterViewInit {
     protected readonly isBrowser: boolean;
     protected readonly nativeElement: any;
+    private readonly window;
     readonly hovered: Subject<boolean>;
     outerElementWidth: number;
     isTextOverflown: boolean;
@@ -88,6 +89,7 @@ export declare class KbqNavbarFocusableItem implements AfterContentInit, AfterVi
 export declare class KbqNavbarRectangleElement {
     protected readonly isBrowser: boolean;
     protected readonly nativeElement: any;
+    private readonly window;
     readonly state: Subject<void>;
     get horizontal(): boolean;
     set horizontal(value: boolean);
@@ -141,6 +143,7 @@ export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDest
     navbar: KbqVerticalNavbar;
     private changeDetectorRef;
     protected readonly document: Document;
+    private readonly window;
     customIcon: KbqIcon;
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
@@ -150,7 +153,6 @@ export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDest
     onKeydown($event: KeyboardEvent): void;
     ngOnDestroy(): void;
     toggle: () => void;
-    private getWindow;
     private windowToggleHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "kbqCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;

package/overflow-items/overflow-items.d.ts

@@ -65,6 +65,10 @@ export declare class KbqOverflowItem extends ElementVisibilityManager {
  * Directive for managing the visibility of items that overflow the container.
  */
 export declare class KbqOverflowItems {
+    private readonly elementRef;
+    private readonly resizeObserver;
+    private readonly renderer;
+    private readonly document;
     /**
      * `KbqOverflowItem` directive references.
      */
@@ -85,6 +89,12 @@ export declare class KbqOverflowItems {
      * @default 0
      */
     readonly debounceTime: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    /**
+     * List of additional elements to observe for resize changes.
+     *
+     * @default document.body
+     */
+    readonly additionalResizeObserverTargets: import("@angular/core").InputSignal<Element | Element[]>;
     /**
      * Emits when the set of hidden items changes.
      */
@@ -93,11 +103,8 @@ export declare class KbqOverflowItems {
      * Set of hidden item IDs.
      */
     readonly hiddenItemIDs: import("@angular/core").Signal<ReadonlySet<unknown>>;
-    private readonly elementRef;
-    private readonly resizeObserver;
-    private readonly renderer;
-    private readonly document;
     constructor();
+    private setupObservers;
     /**
      * Sort items by their `order` attribute.
      * If an item does not have an `order` defined, its index is used as a fallback.
@@ -121,5 +128,5 @@ export declare class KbqOverflowItems {
      */
     private readonly hasScrollbar;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItems, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItems, "[kbqOverflowItems]", ["kbqOverflowItems"], { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItems, "[kbqOverflowItems]", ["kbqOverflowItems"], { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "additionalResizeObserverTargets": { "alias": "additionalResizeObserverTargets"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.31.0",
+    "version": "18.33.0",
     "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.31.0",
-        "@koobiq/angular-moment-adapter": "18.31.0",
-        "@koobiq/angular-luxon-adapter": "18.31.0",
+        "@koobiq/cdk": "18.33.0",
+        "@koobiq/angular-moment-adapter": "18.33.0",
+        "@koobiq/angular-luxon-adapter": "18.33.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^10.4.0",
         "@koobiq/tokens-builder": "3.11.0",