@koobiq/components 18.24.0 → 18.26.0

package/file-upload/single-file-upload.component.d.ts

@@ -10,6 +10,7 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
      * A value responsible for progress spinner type.
      * Loading logic depends on selected mode */
     progressMode: ProgressSpinnerMode;
+    /** Array of file type specifiers */
     accept?: string[];
     disabled: boolean;
     /**
@@ -26,10 +27,16 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     private _file;
     get file(): KbqFileItem | null;
     set file(currentFile: KbqFileItem | null);
-    fileQueueChange: EventEmitter<KbqFileItem | null>;
+    /** Emits an event containing updated file.
+     * public output will be renamed to fileChange in next major release (#DS-3700) */
+    fileChange: EventEmitter<KbqFileItem | null>;
+    /** @docs-private */
     input: ElementRef<HTMLInputElement>;
+    /** @docs-private */
     private readonly hint;
+    /** @docs-private */
     config: KbqInputFileLabel;
+    /** @docs-private */
     separatedCaptionText: string[];
     /** cvaOnChange function registered via registerOnChange (ControlValueAccessor).
      * @docs-private
@@ -39,13 +46,17 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
      * @docs-private
      */
     onTouched: () => void;
+    /** @docs-private */
     get acceptedFiles(): string;
+    /** @docs-private */
     get hasHint(): boolean;
     /**
      * Indicates an invalid state based on file errors or `errorState`,
      * applying a CSS class in HTML for visual feedback.
+     * @docs-private
      */
     get invalid(): boolean;
+    /** @docs-private */
     readonly configuration: KbqInputFileLabel | null;
     constructor();
     ngAfterViewInit(): void;
@@ -65,8 +76,11 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
      * @docs-private
      */
     setDisabledState(isDisabled: boolean): void;
+    /** @docs-private */
     onFileSelectedViaClick({ target }: Event): void;
+    /** @docs-private */
     deleteItem(event?: MouseEvent): void;
+    /** @docs-private */
     onFileDropped(files: FileList | KbqFile[]): void;
     private updateLocaleParams;
     private mapToFileItem;
@@ -74,5 +88,5 @@ export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase impl
     private initDefaultParams;
     private getCaptionText;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; }, { "fileQueueChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload,kbq-file-upload:not([multiple])", never, { "progressMode": { "alias": "progressMode"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "file": { "alias": "file"; "required": false; }; }, { "fileChange": "fileQueueChange"; }, ["hint"], ["[kbq-icon]", "kbq-hint"], false, never>;
 }

package/icon/icon-button.scss

@@ -7,6 +7,10 @@
         cursor: pointer;
     }
 
+    &.kbq-disabled:not(button) {
+        pointer-events: none;
+    }
+
     padding: var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding);
 
     &.kbq-icon-button_small {

package/list/_list-theme.scss

@@ -1,6 +1,6 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
-@mixin kbq-list-item($state-name) {
+@mixin _kbq-list-item($state-name) {
     background: var(--kbq-list-#{$state-name}-container-background);
 
     .kbq-list-text {
@@ -22,32 +22,22 @@
 
 @mixin kbq-list-theme() {
     .kbq-list-option {
-        @include kbq-list-item(default);
+        @include _kbq-list-item(default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-list-item(states-hover);
+            @include _kbq-list-item(states-hover);
         }
 
         &.kbq-selected {
-            @include kbq-list-item(states-selected);
+            @include _kbq-list-item(states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-list-item(states-selected-hover);
+                @include _kbq-list-item(states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-list-item(states-disabled);
-        }
-
-        &:is(.kbq-selected, .kbq-focused):has(+ :is(.kbq-selected, .kbq-focused)) {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-
-        &:is(.kbq-selected, .kbq-focused) + :is(.kbq-selected, .kbq-focused) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
+            @include _kbq-list-item(states-disabled);
         }
     }
 
@@ -61,11 +51,11 @@
 @mixin kbq-list-typography() {
     .kbq-list-item,
     .kbq-list-option {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
 
         .kbq-list-text {
             .kbq-list-option-caption {
-                @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+                @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
             }
         }
     }

package/list/list.scss

@@ -1,7 +1,22 @@
 @use '../core/styles/common/list';
-@use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/vendor-prefixes';
-@use './list-theme' as *;
+@use './list-theme' as theme;
+
+@mixin _kbq-list-item-border-radius() {
+    $selectors: '.kbq-selected';
+
+    border-radius: var(--kbq-size-border-radius);
+
+    &:is(#{$selectors}):has(+ :is(#{$selectors})) {
+        border-bottom-left-radius: unset;
+        border-bottom-right-radius: unset;
+    }
+
+    &:is(#{$selectors}) + :is(#{$selectors}) {
+        border-top-left-radius: unset;
+        border-top-right-radius: unset;
+    }
+}
 
 .kbq-list,
 .kbq-list-selection {
@@ -13,8 +28,7 @@
 .kbq-list-option {
     @include vendor-prefixes.user-select(none);
     @include list.kbq-list-item-base();
-
-    border-radius: var(--kbq-size-border-radius);
+    @include _kbq-list-item-border-radius();
 
     &:not(.kbq-disabled) {
         cursor: pointer;
@@ -35,5 +49,5 @@
     }
 }
 
-@include kbq-list-theme();
-@include kbq-list-typography();
+@include theme.kbq-list-theme();
+@include theme.kbq-list-typography();

package/modal/modal-tokens.scss

@@ -5,7 +5,7 @@
     --kbq-modal-size-border-radius: var(--kbq-size-s);
     --kbq-modal-size-header-padding-vertical: var(--kbq-size-l);
     --kbq-modal-size-header-padding-left: var(--kbq-size-xxl);
-    --kbq-modal-size-header-padding-right: var(--kbq-size-5xl);
+    --kbq-modal-size-header-padding-right: var(--kbq-size-6xl);
     --kbq-modal-size-close-button-margin-left: var(--kbq-size-s);
     --kbq-modal-size-content-padding-horizontal: var(--kbq-size-xxl);
     --kbq-modal-size-content-padding-top: 0;

package/modal/modal.scss

@@ -9,7 +9,7 @@
 
     position: relative;
 
-    top: 48px;
+    top: var(--kbq-size-5xl);
 
     border-radius: var(--kbq-modal-size-border-radius);
 
@@ -50,8 +50,8 @@
     & .kbq-modal-close {
         position: absolute;
 
-        top: 16px;
-        right: 8px;
+        top: var(--kbq-size-l);
+        right: var(--kbq-size-l);
     }
 }
 
@@ -95,6 +95,9 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
+
+    padding-top: var(--kbq-size-3xs);
+    padding-bottom: var(--kbq-size-3xs);
 }
 
 .kbq-modal-body {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.24.0",
+    "version": "18.26.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.24.0",
-        "@koobiq/angular-moment-adapter": "18.24.0",
-        "@koobiq/angular-luxon-adapter": "18.24.0",
+        "@koobiq/cdk": "18.26.0",
+        "@koobiq/angular-moment-adapter": "18.26.0",
+        "@koobiq/angular-luxon-adapter": "18.26.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^9.4.0",
         "@koobiq/tokens-builder": "3.11.0",

package/popover/popover.component.d.ts

@@ -1,6 +1,6 @@
 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 { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, InjectionToken, OnInit, TemplateRef, Type } from '@angular/core';
 import { KbqComponentColors, KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewInit {
@@ -38,7 +38,7 @@ export declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 };
 /** Creates an error to be thrown if the user supplied an invalid popover position. */
 export declare function getKbqPopoverInvalidPositionError(position: string): Error;
-export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit {
+export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit, OnInit {
     protected scrollStrategy: () => ScrollStrategy;
     get popoverVisible(): boolean;
     set popoverVisible(value: boolean);
@@ -86,6 +86,7 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
     protected get overlayConfig(): OverlayConfig;
+    ngOnInit(): void;
     ngAfterContentInit(): void;
     updateData(): void;
     /** Updates the position of the current popover. */
@@ -94,7 +95,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     updateClassMap(newPlacement?: string): void;
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
     defaultClosingActions(): import("rxjs").Observable<MouseEvent>[];
-    closingActions(): import("rxjs").Observable<void | MouseEvent | CdkScrollable>;
+    closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
+    private hideIfNotInViewPort;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
     static ngAcceptInputType_arrow: unknown;