@koobiq/components 18.32.0 → 18.34.0

package/form-field/_form-field-theme.scss

@@ -66,32 +66,41 @@
         &.kbq-form-field-type-datepicker,
         &.kbq-form-field-type-input-password,
         &.kbq-form-field-type-tag-list,
-        &.kbq-form-field-type-select.cdk-keyboard-focused {
-            &.cdk-focused {
-                @include _kbq-form-field-state(states-focused);
-
-                & .kbq-form-field__container {
-                    box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-focused-focus-outline);
+        &.kbq-form-field-type-select {
+            &:not(:has(.cdk-keyboard-focused, .kbq-focused)) {
+                &.cdk-focused {
+                    @include _kbq-form-field-state(states-focused);
+
+                    & .kbq-form-field__container {
+                        box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-focused-focus-outline);
+                    }
                 }
-            }
 
-            // Invalid by control `ErrorStateMatcher`
-            &.kbq-form-field_invalid,
-            // Invalid by `KbqValidateDirective`
-            &.kbq-form-field_has-validate-directive.ng-invalid {
-                @include _kbq-form-field-state(states-error);
+                // Invalid by control `ErrorStateMatcher`
+                &.kbq-form-field_invalid,
+                // Invalid by `KbqValidateDirective`
+                &.kbq-form-field_has-validate-directive.ng-invalid {
+                    @include _kbq-form-field-state(states-error);
 
-                &.cdk-focused .kbq-form-field__container {
-                    box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-error-focused-focus-outline);
-                }
+                    &.cdk-focused .kbq-form-field__container {
+                        box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-error-focused-focus-outline);
+                    }
 
-                & .kbq-icon.kbq-empty {
-                    color: var(--kbq-form-field-states-error-text);
-                    -webkit-text-fill-color: var(--kbq-form-field-states-error-text);
+                    & .kbq-icon.kbq-empty {
+                        color: var(--kbq-form-field-states-error-text);
+                        -webkit-text-fill-color: var(--kbq-form-field-states-error-text);
+                    }
                 }
             }
         }
 
+        // todo quick fix for bug DS-4060. Technical debt DS-4096
+        & .kbq-form-field__container:has(.kbq-input:-webkit-autofill),
+        & .kbq-form-field__container:has(.kbq-input:-webkit-autofill:hover),
+        & .kbq-form-field__container:has(.kbq-input:-webkit-autofill:focus) {
+            background-color: var(--kbq-form-field-states-autofill-background) !important;
+        }
+
         &.kbq-disabled {
             @include _kbq-form-field-state(states-disabled);
 

package/form-field/cleaner.d.ts

@@ -1,9 +1,11 @@
+import { KbqIconButton } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 /**
  * Element to be placed in end of the form field.
  * Resets form control by click.
  */
-export declare class KbqCleaner {
+export declare class KbqCleaner extends KbqIconButton {
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCleaner, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["kbqCleaner"], {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["kbqCleaner"], {}, {}, never, ["*"], true, never>;
 }

package/form-field/cleaner.scss

@@ -3,6 +3,10 @@
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-form-field-size-addon-width);
-    height: 100%;
+    width: 26px;
+    height: var(--kbq-size-xxl);
+
+    outline: none;
+
+    border-radius: var(--kbq-size-xxs);
 }

package/form-field/form-field.scss

@@ -54,7 +54,7 @@
 
         padding-left: var(--kbq-form-field-size-infix-left-padding);
 
-        &:has(.kbq-select_multiple):not(:has(.kbq-select__trigger_empty)),
+        &:has(.kbq-select_multiple, .kbq-select_multiline):not(:has(.kbq-select__trigger_empty)),
         &:has(.kbq-tag-list) {
             padding-left: 0;
 
@@ -98,7 +98,11 @@
         justify-content: center;
         align-items: center;
 
-        min-width: var(--kbq-form-field-size-addon-width);
+        & .kbq-prefix,
+        & .kbq-suffix {
+            min-width: var(--kbq-form-field-size-addon-width);
+            text-align: center;
+        }
     }
 
     .kbq-form-field__prefix {

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

@@ -1,4 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, QueryList } from '@angular/core';
+import { KbqComponentColors } from '@koobiq/components/core';
 import { KbqFormField } from './form-field';
 import { KbqHint } from './hint';
 import * as i0 from "@angular/core";
@@ -31,6 +32,12 @@ export declare class KbqPasswordHint extends KbqHint implements AfterContentInit
     hasError: boolean;
     checked: boolean;
     get icon(): string;
+    /**
+     * The form field hint icon color.
+     *
+     * @docs-private
+     */
+    protected get iconColor(): KbqComponentColors;
     private checkRule;
     private get control();
     private lastControlValue;

package/form-field/password-toggle.d.ts

@@ -1,10 +1,15 @@
-import { TemplateRef } from '@angular/core';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, OnDestroy, TemplateRef } from '@angular/core';
 import { KbqIconButton } from '@koobiq/components/icon';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i0 from "@angular/core";
 /** Component which changes password visibility. */
-export declare class KbqPasswordToggle extends KbqTooltipTrigger {
+export declare class KbqPasswordToggle extends KbqTooltipTrigger implements AfterViewInit, OnDestroy, AfterContentInit {
+    protected readonly nativeElement: any;
+    protected readonly focusMonitor: FocusMonitor;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
     private readonly formField;
+    tabindex: number;
     /**
      * @docs-private
      */
@@ -12,6 +17,7 @@ export declare class KbqPasswordToggle extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
     kbqTooltipHidden: string | TemplateRef<any>;
+    protected hasError: boolean;
     /** Form field password control. */
     private get control();
     /**
@@ -27,10 +33,24 @@ export declare class KbqPasswordToggle extends KbqTooltipTrigger {
      */
     get visibility(): 'hidden' | 'visible';
     constructor();
+    /**
+     * @docs-private
+     */
+    ngAfterContentInit(): void;
+    /**
+     * @docs-private
+     */
+    ngAfterViewInit(): void;
+    /**
+     * @docs-private
+     */
+    ngOnDestroy(): void;
     /**
      * @docs-private
      */
     toggle(event: KeyboardEvent): void;
+    private updateState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["kbqPasswordToggle"], { "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["kbqPasswordToggle"], { "tabindex": { "alias": "tabindex"; "required": false; }; "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_tabindex: unknown;
 }

package/form-field/password-toggle.scss

@@ -3,14 +3,10 @@
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-form-field-size-addon-width);
-    height: 100%;
+    width: 26px;
+    height: var(--kbq-size-xxl);
 
-    &::-moz-focus-inner {
-        border: 0;
-    }
+    border-radius: var(--kbq-size-xxs);
 
-    &:focus {
-        outline: none;
-    }
+    outline: none;
 }

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

@@ -4,6 +4,7 @@ import * as i0 from "@angular/core";
 export declare class KbqReactivePasswordHint extends KbqHint {
     private readonly formField;
     private readonly destroyRef;
+    private readonly changeDetectorRef;
     /** Whether the form field control has an error. */
     readonly hasError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**

package/icon/_icon-button-theme.scss

@@ -91,8 +91,14 @@
 
         &.cdk-keyboard-focused {
             box-shadow:
-                inset 0 0 0.1px 1px var(--kbq-states-line-focus-theme),
-                0 0 0.1px 1px var(--kbq-states-line-focus-theme);
+                inset 0 0 0 1px var(--kbq-states-line-focus-theme),
+                0 0 0 1px var(--kbq-states-line-focus-theme);
+
+            &.kbq-error {
+                box-shadow:
+                    inset 0 0 0 1px var(--kbq-states-line-focus-error),
+                    0 0 0 1px var(--kbq-states-line-focus-error);
+            }
         }
     }
 }

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/modal/modal.component.d.ts

@@ -31,7 +31,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     get kbqVisible(): boolean;
     set kbqVisible(value: boolean);
     private _kbqVisible;
-    kbqVisibleChange: EventEmitter<boolean>;
+    readonly kbqVisibleChange: EventEmitter<boolean>;
     kbqWidth: number | string;
     kbqSize: ModalSize;
     kbqWrapClassName: string;
@@ -50,20 +50,20 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private _kbqMaskClosable;
     kbqMaskStyle: object;
     kbqBodyStyle: object;
-    kbqAfterOpen: EventEmitter<void>;
-    kbqAfterClose: EventEmitter<R | undefined>;
+    readonly kbqAfterOpen: EventEmitter<void>;
+    readonly kbqAfterClose: EventEmitter<R | undefined>;
     kbqOkText: string;
     kbqOkType: KbqComponentColors;
     kbqRestoreFocus: boolean;
     get kbqOkLoading(): boolean;
     set kbqOkLoading(value: boolean);
     private _kbqOkLoading;
-    kbqOnOk: EventEmitter<T> | OnClickCallback<T>;
+    readonly kbqOnOk: EventEmitter<T> | OnClickCallback<T>;
     kbqCancelText: string;
     get kbqCancelLoading(): boolean;
     set kbqCancelLoading(value: boolean);
     private _kbqCancelLoading;
-    kbqOnCancel: EventEmitter<T> | OnClickCallback<T>;
+    readonly kbqOnCancel: EventEmitter<T> | OnClickCallback<T>;
     modalContainer: ElementRef;
     bodyContainer: ViewContainerRef;
     autoFocusedButtons: QueryList<ElementRef>;
@@ -85,8 +85,8 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private container;
     constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor);
     kbqGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef);
-    ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     checkOverflow(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.32.0",
+    "version": "18.34.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.32.0",
-        "@koobiq/angular-moment-adapter": "18.32.0",
-        "@koobiq/angular-luxon-adapter": "18.32.0",
+        "@koobiq/cdk": "18.34.0",
+        "@koobiq/angular-moment-adapter": "18.34.0",
+        "@koobiq/angular-luxon-adapter": "18.34.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^10.4.0",
         "@koobiq/tokens-builder": "3.11.0",
@@ -118,12 +118,24 @@
             "esm": "./esm2022/checkbox/koobiq-components-checkbox.mjs",
             "default": "./fesm2022/koobiq-components-checkbox.mjs"
         },
+        "./clamped-text": {
+            "types": "./clamped-text/index.d.ts",
+            "esm2022": "./esm2022/clamped-text/koobiq-components-clamped-text.mjs",
+            "esm": "./esm2022/clamped-text/koobiq-components-clamped-text.mjs",
+            "default": "./fesm2022/koobiq-components-clamped-text.mjs"
+        },
         "./code-block": {
             "types": "./code-block/index.d.ts",
             "esm2022": "./esm2022/code-block/koobiq-components-code-block.mjs",
             "esm": "./esm2022/code-block/koobiq-components-code-block.mjs",
             "default": "./fesm2022/koobiq-components-code-block.mjs"
         },
+        "./content-panel": {
+            "types": "./content-panel/index.d.ts",
+            "esm2022": "./esm2022/content-panel/koobiq-components-content-panel.mjs",
+            "esm": "./esm2022/content-panel/koobiq-components-content-panel.mjs",
+            "default": "./fesm2022/koobiq-components-content-panel.mjs"
+        },
         "./core": {
             "types": "./core/index.d.ts",
             "esm2022": "./esm2022/core/koobiq-components-core.mjs",
@@ -154,6 +166,12 @@
             "esm": "./esm2022/dropdown/koobiq-components-dropdown.mjs",
             "default": "./fesm2022/koobiq-components-dropdown.mjs"
         },
+        "./dynamic-translation": {
+            "types": "./dynamic-translation/index.d.ts",
+            "esm2022": "./esm2022/dynamic-translation/koobiq-components-dynamic-translation.mjs",
+            "esm": "./esm2022/dynamic-translation/koobiq-components-dynamic-translation.mjs",
+            "default": "./fesm2022/koobiq-components-dynamic-translation.mjs"
+        },
         "./ellipsis-center": {
             "types": "./ellipsis-center/index.d.ts",
             "esm2022": "./esm2022/ellipsis-center/koobiq-components-ellipsis-center.mjs",
@@ -375,6 +393,12 @@
             "esm2022": "./esm2022/tree-select/koobiq-components-tree-select.mjs",
             "esm": "./esm2022/tree-select/koobiq-components-tree-select.mjs",
             "default": "./fesm2022/koobiq-components-tree-select.mjs"
+        },
+        "./username": {
+            "types": "./username/index.d.ts",
+            "esm2022": "./esm2022/username/koobiq-components-username.mjs",
+            "esm": "./esm2022/username/koobiq-components-username.mjs",
+            "default": "./fesm2022/koobiq-components-username.mjs"
         }
     },
     "schematics": "./schematics/collection.json",

package/popover/popover-confirm.component.d.ts

@@ -12,7 +12,7 @@ export declare class KbqPopoverConfirmComponent extends KbqPopoverComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPopoverConfirmComponent, "kbq-popover-confirm-component", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqPopoverConfirmTrigger extends KbqPopoverTrigger {
-    confirm: EventEmitter<void>;
+    readonly confirm: EventEmitter<void>;
     get confirmText(): string;
     set confirmText(value: string);
     private _confirmText;

package/popover/popover.component.d.ts

@@ -83,8 +83,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     offset: number | null;
     /** Delay before closing in milliseconds. The default value for kbqTrigger=PopUpTriggers.Hover is 500 ms. */
     leaveDelay: number;
-    placementChange: EventEmitter<any>;
-    visibleChange: EventEmitter<boolean>;
+    readonly placementChange: EventEmitter<any>;
+    readonly visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
     protected get overlayConfig(): OverlayConfig;
     ngOnInit(): void;