@koobiq/components 16.0.0-beta.9 → 17.0.0-beta.2

package/file-upload/_file-upload-theme.scss

@@ -135,7 +135,9 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-single-file-upload,
     .kbq-multiple-file-upload {
         .kbq-file-upload__hint:not(.kbq-error) {
-            //color: map-get($foreground, text-less-contrast);
+            $form-field-hint: map.get(map.get($theme, components), form-field-hint);
+
+            color: map.get($form-field-hint, text);
         }
     }
 }
@@ -184,5 +186,12 @@ $tokens: meta.module-variables(tokens) !default;
             }
         }
     }
+
+    .kbq-single-file-upload,
+    .kbq-multiple-file-upload {
+        .kbq-file-upload__hint.kbq-hint .kbq-hint__text {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-text));
+        }
+    }
 }
 /* stylelint-enable no-descending-specificity */

package/file-upload/file-drop.d.ts

@@ -1,8 +1,9 @@
 import { EventEmitter } from '@angular/core';
+import { KbqFile } from './file-upload';
 import * as i0 from "@angular/core";
 export declare class KbqFileDropDirective {
     dragover: boolean;
-    filesDropped: EventEmitter<FileList>;
+    filesDropped: EventEmitter<FileList | KbqFile[]>;
     onDragOver(event: DragEvent): void;
     onDragLeave(event: DragEvent): void;
     onDrop(event: DragEvent): void;

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

@@ -1,5 +1,8 @@
 import { InjectionToken } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+export interface KbqFile extends File {
+    fullPath: string;
+}
 export interface KbqFileItem {
     file: File;
     hasError?: boolean;
@@ -11,7 +14,7 @@ export interface KbqInputFile {
     files: KbqFileItem[] | KbqFileItem | null;
     accept?: string[];
     onFileSelectedViaClick(event: Event): void;
-    onFileDropped(files: FileList): void;
+    onFileDropped(files: FileList | KbqFile[]): void;
 }
 export interface KbqInputFileLabel {
     captionText: string;

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

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
-import { CanDisable } from '@koobiq/components/core';
-import { KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
+import { CanDisable, KbqLocaleService } from '@koobiq/components/core';
+import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
 export interface KbqInputFileMultipleLabel extends KbqInputFileLabel {
     captionTextWhenSelected: string;
@@ -17,7 +17,8 @@ export declare class KbqMultipleFileUploadComponent implements AfterViewInit, On
     private focusMonitor;
     private cdr;
     private renderer;
-    config: KbqInputFileMultipleLabel;
+    readonly configuration: KbqInputFileMultipleLabel;
+    private localeService?;
     accept?: string[];
     disabled: boolean;
     errors: string[];
@@ -33,20 +34,27 @@ export declare class KbqMultipleFileUploadComponent implements AfterViewInit, On
         header: string;
         cssClass: string;
     }[];
+    config: KbqInputFileMultipleLabel;
+    separatedCaptionText: string[];
+    separatedCaptionTextWhenSelected: string[];
+    separatedCaptionTextForCompactSize: string[];
     private focusMonitorSubscription;
     get acceptedFiles(): string;
     get hasErrors(): boolean;
-    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, config: KbqInputFileMultipleLabel);
+    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, configuration: KbqInputFileMultipleLabel, localeService?: KbqLocaleService | undefined);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onFileSelectedViaClick({ target }: Event): void;
-    onFileDropped(files: FileList): void;
+    onFileDropped(files: FileList | KbqFile[]): void;
     deleteFile(index: number, event?: MouseEvent): void;
     onFileListChange(): void;
     onFocus(focusState: boolean): void;
+    private updateLocaleParams;
     private mapToFileItem;
     private validateFile;
     private isCorrectExtension;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, [null, null, null, { optional: true; }]>;
+    private initDefaultParams;
+    private getCaptionText;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, [null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqMultipleFileUploadComponent, "kbq-multiple-file-upload", never, { "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "files": { "alias": "files"; "required": false; }; "size": { "alias": "size"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; }, { "fileQueueChanged": "fileQueueChanged"; }, ["customFileIcon"], ["[hint]"], false, never>;
 }

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

@@ -1,14 +1,15 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
-import { CanDisable } from '@koobiq/components/core';
-import { KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
+import { CanDisable, KbqLocaleService } from '@koobiq/components/core';
+import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
 export declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileLabel;
 export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDestroy, KbqInputFile, CanDisable {
     private focusMonitor;
     private cdr;
     private renderer;
-    config: KbqInputFileLabel;
+    readonly configuration: KbqInputFileLabel;
+    private localeService?;
     accept: string[];
     disabled: boolean;
     errors: string[];
@@ -18,18 +19,23 @@ export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDe
     fileQueueChanged: EventEmitter<KbqFileItem | null>;
     input: ElementRef<HTMLInputElement>;
     hasFocus: boolean;
+    config: KbqInputFileLabel;
+    separatedCaptionText: string[];
     private focusMonitorSubscription;
     get acceptedFiles(): string;
-    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, config: KbqInputFileLabel);
+    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, configuration: KbqInputFileLabel, localeService?: KbqLocaleService | undefined);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onFileSelectedViaClick({ target }: Event): void;
     deleteItem(event?: MouseEvent): void;
-    onFileDropped(files: FileList): void;
+    onFileDropped(files: FileList | KbqFile[]): void;
     onFocus(focusState: boolean): void;
+    private updateLocaleParams;
     private mapToFileItem;
     private validateFile;
     private isCorrectExtension;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, [null, null, null, { optional: true; }]>;
+    private initDefaultParams;
+    private getCaptionText;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, [null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqSingleFileUploadComponent, "kbq-single-file-upload", never, { "accept": { "alias": "accept"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "files": { "alias": "files"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "customValidation": { "alias": "customValidation"; "required": false; }; }, { "fileQueueChanged": "fileQueueChanged"; }, never, ["[hint]", "[kbq-icon]"], false, never>;
 }

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

@@ -12,6 +12,7 @@
     }
 
     .kbq-input,
+    .kbq-tag-input,
     .kbq-textarea {
         color: map.get($state, text);
 
@@ -75,27 +76,20 @@
         &.kbq-disabled {
             @include kbq-form-field-state($disabled);
 
-            .kbq-icon,
-            .kbq-input,
-            .kbq-textarea {
+            .kbq-icon {
                 color: map.get($disabled, text);
-                background: map.get($disabled, background);
                 -webkit-text-fill-color: map.get($disabled, text);
             }
         }
         /* stylelint-enable no-descending-specificity */
     }
 
-    .kbq-form-field__hint > .kbq-hint {
-        $form-field-hint: map.get(map.get($theme, components), form-field-hint);
+    .kbq-form-field__hint {
+        & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
+            $form-field-hint: map.get(map.get($theme, components), form-field-hint);
 
-        color: map.get($form-field-hint, text);
-    }
-
-    .kbq-password-hint {
-        $password-hint: map.get(map.get($theme, components), form-field-password-hint);
-
-        color: map.get($password-hint, text-color);
+            color: map.get($form-field-hint, text);
+        }
     }
 }
 
@@ -106,7 +100,7 @@
         @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-font-text));
     }
 
-    .kbq-form-field__hint > .kbq-hint .kbq-hint__text {
+    .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
         @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-text));
     }
 }

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

@@ -35,6 +35,7 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     hovered: boolean;
     canCleanerClearByEsc: boolean;
     private $unsubscribe;
+    get hasFocus(): boolean;
     get hasHint(): boolean;
     get hasSuffix(): boolean;
     get hasPrefix(): boolean;
@@ -48,6 +49,7 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
     ngAfterViewInit(): void;
+    focusViaKeyboard(): void;
     clearValue($event: any): void;
     onContainerClick($event: any): void;
     onKeyDown(event: KeyboardEvent): void;

package/form-field/form-field.scss

@@ -70,6 +70,10 @@ $tokens: meta.module-variables(tokens) !default;
             );
         }
     }
+
+    & + .kbq-password-hint {
+        margin-top: var(--kbq-size-m, map.get($tokens, size-m));
+    }
 }
 
 .kbq-form-field__container {
@@ -137,7 +141,14 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
     margin-top: var(--kbq-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
 
-    gap: var(--kbq-form-field-hint-size-gap, map.get($tokens, form-field-hint-size-gap));
+    & .kbq-password-hint:first-child {
+        margin-top: var(--kbq-size-s, map.get($tokens, size-s));
+    }
+}
+
+.kbq-password-hint {
+    margin-top: var(--kbq-form-field-hint-size-gap, map.get($tokens, form-field-hint-size-gap));
 }
 
+
 /* stylelint-enable no-descending-specificity */

package/form-field/hint.scss

@@ -7,7 +7,7 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-hint {
-    display: block;
+    display: flex;
 
     & .kbq-icon {
         margin-right: var(--kbq-hint-size-normal-content-padding, map-get($tokens, hint-size-normal-content-padding));

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

@@ -1,5 +1,6 @@
-import { AfterContentInit, ChangeDetectorRef, QueryList } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, QueryList } from '@angular/core';
 import { KbqFormField } from './form-field';
+import { KbqHint } from './hint';
 import * as i0 from "@angular/core";
 export declare enum PasswordRules {
     Length = 0,
@@ -16,7 +17,7 @@ export declare const regExpPasswordValidator: {
     4: RegExp;
 };
 export declare const hasPasswordStrengthError: (passwordHints: QueryList<KbqPasswordHint>) => boolean;
-export declare class KbqPasswordHint implements AfterContentInit {
+export declare class KbqPasswordHint extends KbqHint implements AfterContentInit {
     private changeDetectorRef;
     private formField;
     id: string;
@@ -26,19 +27,20 @@ export declare class KbqPasswordHint implements AfterContentInit {
     regex: RegExp | null;
     customCheckRule: (value: string) => boolean;
     viewFormField?: KbqFormField;
+    fillTextOff: boolean;
     hasError: boolean;
     checked: boolean;
     get icon(): string;
     private checkRule;
     private get control();
     private lastControlValue;
-    constructor(changeDetectorRef: ChangeDetectorRef, formField: any);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, formField: any);
     ngAfterContentInit(): void;
     private checkValue;
     private checkLengthRule;
     private checkRegexRule;
     private checkSpecialSymbolsRegexRule;
     private isValueChanged;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordHint, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordHint, "kbq-password-hint", never, { "id": { "alias": "id"; "required": false; }; "rule": { "alias": "rule"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "regex": { "alias": "regex"; "required": false; }; "customCheckRule": { "alias": "checkRule"; "required": false; }; "viewFormField": { "alias": "viewFormField"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordHint, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordHint, "kbq-password-hint", never, { "id": { "alias": "id"; "required": false; }; "rule": { "alias": "rule"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "regex": { "alias": "regex"; "required": false; }; "customCheckRule": { "alias": "checkRule"; "required": false; }; "viewFormField": { "alias": "viewFormField"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/icon/icon-button.component.d.ts

@@ -13,6 +13,7 @@ export declare class KbqIconButton extends KbqIcon implements OnDestroy, CanColo
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
+    name: string;
     constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngOnDestroy(): void;
     private runFocusMonitor;

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

@@ -4,6 +4,7 @@ import { KbqIcon } from './icon.component';
 import * as i0 from "@angular/core";
 export declare class KbqIconItem extends KbqIcon implements CanColor {
     protected changeDetectorRef: ChangeDetectorRef;
+    name: string;
     constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconItem, [null, { attribute: "kbq-icon-item"; }, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;

package/icon/icon.component.d.ts

@@ -9,13 +9,16 @@ export declare class KbqIconBase {
 /** @docs-private */
 export declare const KbqIconMixinBase: CanColorCtor & typeof KbqIconBase;
 export declare class KbqIcon extends KbqIconMixinBase implements CanColor, AfterContentInit {
+    protected iconName: string;
     protected formField: KbqFormFieldRef;
     protected changeDetectorRef: ChangeDetectorRef;
     small: boolean;
     autoColor: boolean;
     hasError: boolean;
+    protected name: string;
     constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
     getHostElement(): any;
+    updateMaxHeight(): void;
     ngAfterContentInit(): void;
     private updateState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIcon, [null, { attribute: "kbq-icon"; }, { optional: true; }, null]>;

package/input/input-number.d.ts

@@ -1,4 +1,4 @@
-import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { KbqLocaleService } from '@koobiq/components/core';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
@@ -13,7 +13,7 @@ export declare function isDigit(value: string): boolean;
 export declare function getPrecision(value: number): number;
 export declare function add(value1: number, value2: number): number;
 export declare const KBQ_NUMBER_INPUT_VALUE_ACCESSOR: any;
-export declare class KbqNumberInput implements KbqFormFieldControl<any>, ControlValueAccessor, OnDestroy {
+export declare class KbqNumberInput implements KbqFormFieldControl<any>, ControlValueAccessor, AfterContentInit, OnDestroy {
     private elementRef;
     private readonly renderer;
     private localeService;
@@ -53,6 +53,7 @@ export declare class KbqNumberInput implements KbqFormFieldControl<any>, Control
     private valueFromPaste;
     private localeSubscription;
     constructor(elementRef: ElementRef, renderer: Renderer2, step: string, bigStep: string, min: string, max: string, localeService: KbqLocaleService);
+    ngAfterContentInit(): void;
     ngOnDestroy(): void;
     onContainerClick(): void;
     focus(): void;

package/link/_link-theme.scss

@@ -174,6 +174,7 @@
 
         & .kbq-icon {
             line-height: inherit;
+            vertical-align: text-bottom;
         }
     }
 

package/list/_list-theme.scss

@@ -46,8 +46,7 @@
             }
         }
 
-        &.kbq-disabled,
-        &[disabled] {
+        &.kbq-disabled {
             @include kbq-list-item(map.get($list-item, disabled));
         }
     }

package/list/list.scss

@@ -29,9 +29,9 @@ $tokens: meta.module-variables(tokens) !default;
         display: none;
     }
 
-    &:not([disabled]):hover,
-    &:not([disabled]).kbq-focused,
-    &:not([disabled]).kbq-action-button-focused {
+    &:not(.kbq-disabled):hover,
+    &:not(.kbq-disabled).kbq-focused,
+    &:not(.kbq-disabled).kbq-action-button-focused {
         & .kbq-option-action {
             display: flex;
         }

package/loader-overlay/loader-overlay.scss

@@ -2,7 +2,6 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-@use '../core/styles/variables';
 
 
 $tokens: meta.module-variables(tokens) !default;
@@ -31,7 +30,8 @@ $tokens: meta.module-variables(tokens) !default;
     bottom: 0;
     left: 0;
 
-    z-index: variables.$z-index-loader-overlay;
+    // todo
+    z-index: 10;
 
     & .kbq-loader-overlay__container {
         display: flex;

package/modal/_modal-confirm.scss

@@ -7,37 +7,13 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-confirm {
-    .kbq-modal-header {
-
-    }
-
     .kbq-modal-close {
         display: none;
     }
 
-    .kbq-modal-body {
-        padding-right: var(
-            --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
-        );
-
-        padding-left: var(
-            --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
-        );
-
-        padding-bottom: var(
-            --kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom)
-        );
-    }
-
     .kbq-confirm-footer {
         display: flex;
 
-        padding:
-            var(--kbq-modal-size-footer-padding-top, map.get($tokens, modal-size-footer-padding-top))
-            var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontalt))
-            var(--kbq-modal-size-footer-padding-bottom, map.get($tokens, modal-size-footer-padding-bottom))
-            var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontal));
-
         gap: var(
             --kbq-modal-size-footer-content-gap-horizontal, map.get($tokens, modal-size-footer-content-gap-horizontal)
         );

package/modal/modal.component.d.ts

@@ -28,7 +28,6 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     set kbqVisible(value: boolean);
     private _kbqVisible;
     kbqVisibleChange: EventEmitter<boolean>;
-    kbqZIndex: number;
     kbqWidth: number | string;
     kbqSize: ModalSize;
     kbqWrapClassName: string;
@@ -65,6 +64,8 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     bodyContainer: ViewContainerRef;
     autoFocusedButtons: QueryList<ElementRef>;
     modalBody: ElementRef;
+    isTopOverflow: boolean;
+    isBottomOverflow: boolean;
     maskAnimationClassMap: object;
     modalAnimationClassMap: object;
     transformOrigin: string;
@@ -84,6 +85,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    checkOverflow(): void;
     open(): void;
     close(result?: R): void;
     destroy(result?: R): void;
@@ -125,5 +127,5 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
      */
     private changeBodyOverflow;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalComponent<any, any>, "kbq-modal", never, { "kbqModalType": { "alias": "kbqModalType"; "required": false; }; "kbqComponent": { "alias": "kbqComponent"; "required": false; }; "kbqContent": { "alias": "kbqContent"; "required": false; }; "kbqComponentParams": { "alias": "kbqComponentParams"; "required": false; }; "kbqFooter": { "alias": "kbqFooter"; "required": false; }; "kbqVisible": { "alias": "kbqVisible"; "required": false; }; "kbqZIndex": { "alias": "kbqZIndex"; "required": false; }; "kbqWidth": { "alias": "kbqWidth"; "required": false; }; "kbqSize": { "alias": "kbqSize"; "required": false; }; "kbqWrapClassName": { "alias": "kbqWrapClassName"; "required": false; }; "kbqClassName": { "alias": "kbqClassName"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "kbqTitle": { "alias": "kbqTitle"; "required": false; }; "kbqCloseByESC": { "alias": "kbqCloseByESC"; "required": false; }; "kbqClosable": { "alias": "kbqClosable"; "required": false; }; "kbqMask": { "alias": "kbqMask"; "required": false; }; "kbqMaskClosable": { "alias": "kbqMaskClosable"; "required": false; }; "kbqMaskStyle": { "alias": "kbqMaskStyle"; "required": false; }; "kbqBodyStyle": { "alias": "kbqBodyStyle"; "required": false; }; "kbqOkText": { "alias": "kbqOkText"; "required": false; }; "kbqOkType": { "alias": "kbqOkType"; "required": false; }; "kbqRestoreFocus": { "alias": "kbqRestoreFocus"; "required": false; }; "kbqOkLoading": { "alias": "kbqOkLoading"; "required": false; }; "kbqOnOk": { "alias": "kbqOnOk"; "required": false; }; "kbqCancelText": { "alias": "kbqCancelText"; "required": false; }; "kbqCancelLoading": { "alias": "kbqCancelLoading"; "required": false; }; "kbqOnCancel": { "alias": "kbqOnCancel"; "required": false; }; "kbqGetContainer": { "alias": "kbqGetContainer"; "required": false; }; }, { "kbqVisibleChange": "kbqVisibleChange"; "kbqAfterOpen": "kbqAfterOpen"; "kbqAfterClose": "kbqAfterClose"; "kbqOnOk": "kbqOnOk"; "kbqOnCancel": "kbqOnCancel"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalComponent<any, any>, "kbq-modal", never, { "kbqModalType": { "alias": "kbqModalType"; "required": false; }; "kbqComponent": { "alias": "kbqComponent"; "required": false; }; "kbqContent": { "alias": "kbqContent"; "required": false; }; "kbqComponentParams": { "alias": "kbqComponentParams"; "required": false; }; "kbqFooter": { "alias": "kbqFooter"; "required": false; }; "kbqVisible": { "alias": "kbqVisible"; "required": false; }; "kbqWidth": { "alias": "kbqWidth"; "required": false; }; "kbqSize": { "alias": "kbqSize"; "required": false; }; "kbqWrapClassName": { "alias": "kbqWrapClassName"; "required": false; }; "kbqClassName": { "alias": "kbqClassName"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "kbqTitle": { "alias": "kbqTitle"; "required": false; }; "kbqCloseByESC": { "alias": "kbqCloseByESC"; "required": false; }; "kbqClosable": { "alias": "kbqClosable"; "required": false; }; "kbqMask": { "alias": "kbqMask"; "required": false; }; "kbqMaskClosable": { "alias": "kbqMaskClosable"; "required": false; }; "kbqMaskStyle": { "alias": "kbqMaskStyle"; "required": false; }; "kbqBodyStyle": { "alias": "kbqBodyStyle"; "required": false; }; "kbqOkText": { "alias": "kbqOkText"; "required": false; }; "kbqOkType": { "alias": "kbqOkType"; "required": false; }; "kbqRestoreFocus": { "alias": "kbqRestoreFocus"; "required": false; }; "kbqOkLoading": { "alias": "kbqOkLoading"; "required": false; }; "kbqOnOk": { "alias": "kbqOnOk"; "required": false; }; "kbqCancelText": { "alias": "kbqCancelText"; "required": false; }; "kbqCancelLoading": { "alias": "kbqCancelLoading"; "required": false; }; "kbqOnCancel": { "alias": "kbqOnCancel"; "required": false; }; "kbqGetContainer": { "alias": "kbqGetContainer"; "required": false; }; }, { "kbqVisibleChange": "kbqVisibleChange"; "kbqAfterOpen": "kbqAfterOpen"; "kbqAfterClose": "kbqAfterClose"; "kbqOnOk": "kbqOnOk"; "kbqOnCancel": "kbqOnCancel"; }, never, ["*"], false, never>;
 }

package/modal/modal.scss

@@ -1,8 +1,6 @@
 @use 'sass:meta';
 @use 'sass:map';
 
-@use '../core/styles/variables' as *;
-
 @use '../core/styles/tokens';
 
 @use './modal-confirm';
@@ -43,12 +41,26 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-modal_large {
         width: var(--kbq-modal-size-large-width, map.get($tokens, modal-size-large-width));
     }
+
+    // todo реализуем когда будем делать 2.0, пока нет возможности отслеживать наличие/отстутствие футера
+    //&.kbq-modal_no-footer .kbq-modal-body {
+    //    padding-bottom: var(
+    //        --kbq-modal-size-content-padding-bottom-without-footer,
+    //        map.get($tokens, modal-size-content-padding-bottom-without-footer)
+    //    );
+    //}
+
+    & .kbq-modal-close {
+        position: absolute;
+
+        top: 16px;
+        right: 8px;
+    }
 }
 
 .kbq-modal-wrap {
     position: fixed;
 
-    z-index: $z-index-modal;
     top: 0;
     right: 0;
     bottom: 0;
@@ -78,6 +90,10 @@ $tokens: meta.module-variables(tokens) !default;
         var(--kbq-modal-size-header-padding-right, map.get($tokens, modal-size-header-padding-right))
         var(--kbq-modal-size-header-padding-vertical, map.get($tokens, modal-size-header-padding-vertical))
         var(--kbq-modal-size-header-padding-left, map.get($tokens, modal-size-header-padding-left));
+
+    & + .kbq-modal-body {
+        padding-top: var(--kbq-modal-size-content-padding-top, map.get($tokens, modal-size-content-padding-top));
+    }
 }
 
 .kbq-modal-title {
@@ -87,35 +103,33 @@ $tokens: meta.module-variables(tokens) !default;
     overflow: hidden;
 }
 
+/* stylelint-disable no-descending-specificity */
 .kbq-modal-body {
     display: block;
     overflow-y: auto;
 
     max-height: calc(100vh - 260px);
 
-    padding-right: var(
-        --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
-    );
-
-    padding-left: var(
-        --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
-    );
-
-    padding-bottom: var(
-        --kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom)
-    );
+    padding:
+        var(
+            --kbq-modal-size-content-padding-top-without-header,
+            map.get($tokens, modal-size-content-padding-top-without-header)
+        )
+        var(--kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal))
+        var(--kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom))
+        var(--kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal));
 
     word-wrap: break-word;
 }
+/* stylelint-enable no-descending-specificity */
 
-.kbq-modal-footer {
+.kbq-modal-footer,
+.kbq-confirm-footer {
     display: flex;
     align-items: center;
 
     padding:
-        var(--kbq-modal-size-footer-padding-top, map.get($tokens, modal-size-footer-padding-top))
-        var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontalt))
-        var(--kbq-modal-size-footer-padding-bottom, map.get($tokens, modal-size-footer-padding-bottom))
+        var(--kbq-modal-size-footer-padding-vertical, map.get($tokens, modal-size-footer-padding-vertical))
         var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontal));
 
     gap: var(
@@ -126,8 +140,6 @@ $tokens: meta.module-variables(tokens) !default;
 .kbq-modal-mask {
     position: fixed;
 
-    z-index: $z-index-modal-mask;
-
     top: 0;
     right: 0;
     left: 0;

package/modal/modal.type.d.ts

@@ -11,7 +11,6 @@ export declare enum ModalSize {
 export interface ModalOptions<T = any, R = any> {
     kbqModalType?: ModalType;
     kbqVisible?: boolean;
-    kbqZIndex?: number;
     kbqWidth?: number | string;
     kbqSize?: ModalSize;
     kbqWrapClassName?: string;