@koobiq/components 19.6.0 → 19.8.0

package/icon/icon.component.d.ts

@@ -1,20 +1,33 @@
-import { AfterContentInit, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, DestroyRef, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
 import { KbqColorDirective } from '@koobiq/components/core';
+import { ReplaySubject } from 'rxjs';
+import { KbqIconRegistry } from './icon-registry';
 import * as i0 from "@angular/core";
-export declare class KbqIcon extends KbqColorDirective implements AfterContentInit {
+export declare class KbqIcon extends KbqColorDirective implements AfterContentInit, OnChanges {
     readonly elementRef: ElementRef<HTMLElement>;
     protected readonly formField: import("@koobiq/components/core").KbqFormFieldRef | null;
     protected readonly changeDetectorRef: ChangeDetectorRef;
+    protected readonly registry: KbqIconRegistry | null;
+    protected readonly destroyRef: DestroyRef;
     small: boolean;
     autoColor: boolean;
     hasError: boolean;
-    /** Name of an icon within a @koobiq/icons. */
+    /** Name of an icon within a @koobiq/icons. Accepts "namespace:name" syntax. */
     iconName: string;
     protected name: string;
+    /**
+     * True when icon is being rendered as inline SVG.
+     * @docs-private
+     */
+    protected svgIcon: boolean;
+    /** @docs-private */
+    protected readonly svgIconName: ReplaySubject<string | undefined>;
     getHostElement(): HTMLElement;
     updateMaxHeight(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterContentInit(): void;
     private updateState;
+    private parseIconSize;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIcon, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqIcon, "[kbq-icon]", never, { "small": { "alias": "small"; "required": false; }; "autoColor": { "alias": "autoColor"; "required": false; }; "iconName": { "alias": "kbq-icon"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/icon/icon.scss

@@ -1,5 +1,12 @@
 @use './icon-theme' as *;
 
+.kbq-icon {
+    > svg {
+        fill: currentColor;
+        vertical-align: middle;
+    }
+}
+
 .kbq-icon-rotate_90 {
     transform: rotate(90deg);
 }

package/icon/public-api.d.ts

@@ -1,4 +1,6 @@
 export * from './icon-button.component';
 export * from './icon-item.component';
+export * from './icon-registry';
+export * from './icon-registry-providers';
 export * from './icon.component';
 export * from './icon.module';

package/inline-edit/inline-edit.d.ts

@@ -62,6 +62,8 @@ export declare class KbqInlineEdit {
     readonly editModeWidth: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
     /** User-defined tooltip placement */
     readonly tooltipPlacement: import("@angular/core").InputSignal<PopUpPlacements | undefined>;
+    /** Classes to be passed to the inline edit panel. */
+    readonly overlayPanelClass: import("@angular/core").InputSignal<string | string[]>;
     /** Handler function to retrieve the current value */
     readonly getValueHandler: import("@angular/core").InputSignal<(() => unknown) | undefined>;
     /** Handler function to update the value */
@@ -155,5 +157,5 @@ export declare class KbqInlineEdit {
     private getInputNativeElement;
     private markAllAsTouched;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqInlineEdit, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqInlineEdit, "kbq-inline-edit", ["kbqInlineEdit"], { "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; "showTooltipOnError": { "alias": "showTooltipOnError"; "required": false; "isSignal": true; }; "validationTooltip": { "alias": "validationTooltip"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "editModeWidth": { "alias": "editModeWidth"; "required": false; "isSignal": true; }; "tooltipPlacement": { "alias": "tooltipPlacement"; "required": false; "isSignal": true; }; "overlayPanelClass": { "alias": "overlayPanelClass"; "required": false; "isSignal": true; }; "getValueHandler": { "alias": "getValueHandler"; "required": false; "isSignal": true; }; "setValueHandler": { "alias": "setValueHandler"; "required": false; "isSignal": true; }; "canSaveOnEnter": { "alias": "canSaveOnEnter"; "required": false; "isSignal": true; }; "interactiveSelectors": { "alias": "interactiveSelectors"; "required": false; "isSignal": true; }; }, { "saved": "saved"; "canceled": "canceled"; "modeChange": "modeChange"; }, ["menu", "label", "formFieldRefList"], ["kbq-label", "[kbqInlineEditViewMode]", "[kbqInlineEditMenu]", "[kbqInlineEditEditMode]"], true, [{ directive: typeof i1.CdkMonitorFocus; inputs: {}; outputs: {}; }]>;
 }

package/inline-edit/inline-edit.scss

@@ -78,11 +78,6 @@
     .kbq-label {
         color: var(--kbq-inline-edit-label-color);
     }
-
-    .kbq-inline-edit__focus_container {
-        display: flex;
-        flex-direction: column;
-    }
 }
 
 @mixin _inline-edit-typography {
@@ -123,13 +118,8 @@
     }
 
     &.kbq-inline-edit_view {
-        .kbq-inline-edit__view-container {
-            display: flex;
-            text-overflow: ellipsis;
-        }
-
+        .kbq-inline-edit__view-container,
         .kbq-inline-edit__view-content {
-            display: inline-block;
             text-overflow: ellipsis;
         }
     }

package/link/_link-theme.scss

@@ -29,8 +29,15 @@
         box-decoration-break: clone;
     }
 
-    &.kbq-text-with-icon .kbq-icon {
-        vertical-align: baseline;
+    &.kbq-text-with-icon {
+        .kbq-icon {
+            vertical-align: baseline;
+
+            &:has(> svg) {
+                vertical-align: middle;
+                line-height: 0;
+            }
+        }
     }
 
     &.kbq-text-with-icon .kbq-link__text {

package/navbar/_navbar-theme.scss

@@ -15,10 +15,6 @@
     & > .kbq-icon.kbq-empty {
         color: var(--kbq-navbar-item-#{$state-name}-content-icon-left) !important;
     }
-
-    .kbq-navbar-item__arrow-icon {
-        color: var(--kbq-navbar-item-#{$state-name}-content-icon-right) !important;
-    }
 }
 
 button {

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

@@ -16,7 +16,9 @@ export declare class KbqNavbarBrand extends KbqTooltipTrigger implements AfterCo
     /** alternative display of the brand name in two lines */
     longTitle: boolean;
     /** text that will be displayed in the tooltip. By default, the text is taken from kbq-navbar-title. */
-    collapsedText: string;
+    get collapsedText(): string;
+    set collapsedText(value: string);
+    private _collapsedText;
     get isLink(): boolean;
     /** @docs-private */
     get croppedText(): string;

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

@@ -122,6 +122,7 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     get hasCroppedText(): boolean;
     constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
     ngAfterContentInit(): void;
+    updateDropdown(): void;
     updateTooltip(): void;
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;

package/navbar/navbar.component.d.ts

@@ -14,6 +14,7 @@ export declare class KbqFocusableComponent implements AfterContentInit, AfterVie
     get tabIndex(): any;
     set tabIndex(value: any);
     private _tabIndex;
+    private lastFocusOrigin;
     get optionFocusChanges(): Observable<KbqNavbarFocusableItemEvent>;
     get optionBlurChanges(): Observable<KbqNavbarFocusableItemEvent>;
     private readonly destroyRef;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.6.0",
+    "version": "19.8.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -25,9 +25,9 @@
         "@angular/cdk": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
-        "@koobiq/cdk": "19.6.0",
-        "@koobiq/angular-moment-adapter": "19.6.0",
-        "@koobiq/angular-luxon-adapter": "19.6.0",
+        "@koobiq/cdk": "19.8.0",
+        "@koobiq/angular-moment-adapter": "19.8.0",
+        "@koobiq/angular-luxon-adapter": "19.8.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/design-tokens": "3.14.0"

package/popover/popover.scss

@@ -23,7 +23,7 @@ $arrow-padding: 24px;
     z-index: 1;
 
     &.kbq-popover_small {
-        max-width: var(--kbq-popover-size-container-width-small);
+        width: var(--kbq-popover-size-container-width-small);
 
         & .kbq-popover__content_default-paddings.kbq-popover__content {
             padding: var(--kbq-size-l);
@@ -31,11 +31,11 @@ $arrow-padding: 24px;
     }
 
     &.kbq-popover_medium {
-        max-width: var(--kbq-popover-size-container-width-medium);
+        width: var(--kbq-popover-size-container-width-medium);
     }
 
     &.kbq-popover_large {
-        max-width: var(--kbq-popover-size-container-width-large);
+        width: var(--kbq-popover-size-container-width-large);
     }
 
     @include pop-up.popup-margins(kbq-popover, 8px);