@koobiq/components 18.14.0 → 18.16.0

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

@@ -40,20 +40,33 @@
             }
         }
 
-        &.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_invalid,
         &.ng-invalid {
             @include kbq-form-field-state(states-error);
+        }
+
+        &.kbq-form-field-type-input,
+        &.kbq-form-field-type-textarea,
+        &.kbq-form-field-type-timepicker,
+        &.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_invalid,
+            &.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);
+                & .kbq-form-field__container {
+                    box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-error-focused-focus-outline);
+                }
             }
         }
 

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

@@ -1,4 +1,4 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
+import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { CanColor, CanColorCtor } from '@koobiq/components/core';
@@ -35,6 +35,8 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     hovered: boolean;
     canCleanerClearByEsc: boolean;
     private readonly destroyRef;
+    get focusOrigin(): FocusOrigin;
+    private _focusOrigin;
     get hasFocus(): boolean;
     get hasHint(): boolean;
     get hasSuffix(): boolean;

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

@@ -49,5 +49,5 @@ export declare class KbqValidateDirective implements AfterContentInit {
     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]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqValidateDirective, "        input[kbqInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, false, never>;
+    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>;
 }

package/link/_link-theme.scss

@@ -101,10 +101,12 @@
 
     color: var(--kbq-#{$base-path}-text);
 
-    &.kbq-text-only,
-    &.kbq-text-with-icon .kbq-link__text,
-    &.kbq-text-with-dot .kbq-link__text {
-        border-bottom-color: var(--kbq-#{$base-path}-border-bottom);
+    &:not(.kbq-link_pseudo) {
+        &.kbq-text-only,
+        &.kbq-text-with-icon .kbq-link__text,
+        &.kbq-text-with-dot .kbq-link__text {
+            border-bottom-color: var(--kbq-#{$base-path}-border-bottom);
+        }
     }
 
     & .kbq-icon {

package/list/_list-theme.scss

@@ -28,10 +28,6 @@
             @include kbq-list-item(states-hover);
         }
 
-        &.kbq-focused {
-            border-color: var(--kbq-list-states-focused-focus-outline-color);
-        }
-
         &.kbq-selected {
             @include kbq-list-item(states-selected);
 
@@ -54,6 +50,12 @@
             border-top-right-radius: 0;
         }
     }
+
+    .kbq-list-selection.cdk-keyboard-focused {
+        & .kbq-list-option.kbq-focused {
+            border-color: var(--kbq-list-states-focused-focus-outline-color);
+        }
+    }
 }
 
 @mixin kbq-list-typography() {

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

@@ -1,6 +1,7 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { SelectionModel } from '@angular/cdk/collections';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList } from '@angular/core';
+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 { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef, MultipleMode } from '@koobiq/components/core';
@@ -34,9 +35,10 @@ export declare class KbqListSelectionBase {
 }
 /** @docs-private */
 export declare const KbqListSelectionMixinBase: CanDisableCtor & HasTabIndexCtor & typeof KbqListSelectionBase;
-export declare class KbqListSelection extends KbqListSelectionMixinBase implements CanDisable, HasTabIndex, AfterContentInit, ControlValueAccessor {
+export declare class KbqListSelection extends KbqListSelectionMixinBase implements CanDisable, HasTabIndex, AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor {
     private changeDetectorRef;
     private clipboard;
+    protected readonly focusMonitor: FocusMonitor;
     keyManager: FocusKeyManager<KbqListOption>;
     options: QueryList<KbqListOption>;
     readonly onSelectAll: EventEmitter<KbqListSelectAllEvent<KbqListOption>>;
@@ -53,6 +55,12 @@ export declare class KbqListSelection extends KbqListSelectionMixinBase implemen
     get tabIndex(): any;
     set tabIndex(value: any);
     private _tabIndex;
+    /**
+     * Function used for comparing an option against the selected value when determining which
+     * options should appear as selected. The first argument is the value of an options. The second
+     * one is a value from the selected value. A boolean must be returned.
+     */
+    compareWith: (o1: any, o2: any) => boolean;
     userTabIndex: number | null;
     get showCheckbox(): boolean;
     readonly selectionChange: EventEmitter<KbqListSelectionChange>;
@@ -64,13 +72,9 @@ export declare class KbqListSelection extends KbqListSelectionMixinBase implemen
     private optionFocusSubscription;
     private optionBlurSubscription;
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, multiple: MultipleMode, clipboard: Clipboard);
-    /**
-     * Function used for comparing an option against the selected value when determining which
-     * options should appear as selected. The first argument is the value of an options. The second
-     * one is a value from the selected value. A boolean must be returned.
-     */
-    compareWith: (o1: any, o2: any) => boolean;
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     focus(): void;
     blur(): void;
     selectAll(): void;

package/markdown/markdown.service.d.ts

@@ -1,8 +1,17 @@
 import { MarkedOptions } from 'marked';
 import * as i0 from "@angular/core";
-/** Service which allows to convert `Markdown` into `HTML` */
+/**
+ * Service for converting Markdown into HTML.
+ */
 export declare class KbqMarkdownService {
-    /** Parses `Markdown` into `HTML` */
+    /**
+     * Converts a given Markdown string into HTML.
+     * NOTE! Method does not sanitize the output HTML string.
+     *
+     * @param markdown - The Markdown string to be converted.
+     * @param options - Optional MarkedOptions to customize the parsing behavior.
+     * @returns The transformed HTML string.
+     */
     parseToHtml(markdown: string, options?: MarkedOptions): string;
     private transform;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdownService, never>;

package/modal/_modal-theme.scss

@@ -1,7 +1,7 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-modal-theme() {
-    .kbq-modal {
+    .kbq-modal-container {
         background: var(--kbq-modal-container-background);
         box-shadow: var(--kbq-modal-container-shadow);
 

package/modal/modal.scss

@@ -4,7 +4,7 @@
 
 @use './modal-theme' as *;
 
-.kbq-modal {
+.kbq-modal-container {
     box-sizing: border-box;
 
     position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.14.0",
+    "version": "18.16.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,13 +24,13 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.14.0",
-        "@koobiq/angular-moment-adapter": "18.14.0",
-        "@koobiq/angular-luxon-adapter": "18.14.0",
+        "@koobiq/cdk": "18.16.0",
+        "@koobiq/angular-moment-adapter": "18.16.0",
+        "@koobiq/angular-luxon-adapter": "18.16.0",
         "@koobiq/date-formatter": "^3.1.4",
         "@koobiq/icons": "^9.2.0",
-        "@koobiq/tokens-builder": "3.10.0",
-        "@koobiq/design-tokens": "3.10.0",
+        "@koobiq/tokens-builder": "3.11.0",
+        "@koobiq/design-tokens": "3.11.2",
         "@radix-ng/primitives": "^0.14.0"
     },
     "dependencies": {

package/popover/popover.component.d.ts

@@ -1,3 +1,4 @@
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { CdkScrollable, Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
 import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, InjectionToken, TemplateRef, Type } from '@angular/core';
 import { KbqComponentColors, KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
@@ -6,9 +7,11 @@ export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewIn
     prefix: string;
     header: string | TemplateRef<any>;
     footer: string | TemplateRef<any>;
+    trigger: KbqPopoverTrigger;
     isTrapFocus: boolean;
     hasCloseButton: boolean;
     popoverContent: ElementRef<HTMLDivElement>;
+    cdkTrapFocus: CdkTrapFocus;
     private debounceTime;
     private readonly destroyRef;
     isContentTopOverflow: boolean;
@@ -18,6 +21,7 @@ export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewIn
     checkContentOverflow(contentElement: HTMLElement): void;
     updateClassMap(placement: string, customClass: string, size: PopUpSizes): void;
     updateTrapFocus(isTrapFocus: boolean): void;
+    onEscape(): void;
     protected readonly componentColors: typeof KbqComponentColors;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPopoverComponent, "kbq-popover-component", never, {}, {}, never, never, false, never>;