@koobiq/components 19.7.0 → 19.8.0

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.7.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.7.0",
-        "@koobiq/angular-moment-adapter": "19.7.0",
-        "@koobiq/angular-luxon-adapter": "19.7.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);