@koobiq/components 16.0.0-beta.6 → 16.0.0-beta.7

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

@@ -7,5 +7,5 @@ export declare class KbqFileDropDirective {
     onDragLeave(event: DragEvent): void;
     onDrop(event: DragEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFileDropDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFileDropDirective, "[mcFileDrop]", ["mcFileDrop"], {}, { "filesDropped": "filesDropped"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFileDropDirective, "[kbqFileDrop]", ["kbqFileDrop"], {}, { "filesDropped": "filesDropped"; }, never, never, false, never>;
 }

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

@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
+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 * as i0 from "@angular/core";
@@ -16,6 +16,7 @@ export declare const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFil
 export declare class KbqMultipleFileUploadComponent implements AfterViewInit, OnDestroy, KbqInputFile, CanDisable {
     private focusMonitor;
     private cdr;
+    private renderer;
     config: KbqInputFileMultipleLabel;
     accept?: string[];
     disabled: boolean;
@@ -35,7 +36,7 @@ export declare class KbqMultipleFileUploadComponent implements AfterViewInit, On
     private focusMonitorSubscription;
     get acceptedFiles(): string;
     get hasErrors(): boolean;
-    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, config: KbqInputFileMultipleLabel);
+    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, config: KbqInputFileMultipleLabel);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onFileSelectedViaClick({ target }: Event): void;
@@ -46,6 +47,6 @@ export declare class KbqMultipleFileUploadComponent implements AfterViewInit, On
     private mapToFileItem;
     private validateFile;
     private isCorrectExtension;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMultipleFileUploadComponent, [null, null, null, { 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,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+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 * as i0 from "@angular/core";
@@ -7,6 +7,7 @@ export declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileL
 export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDestroy, KbqInputFile, CanDisable {
     private focusMonitor;
     private cdr;
+    private renderer;
     config: KbqInputFileLabel;
     accept: string[];
     disabled: boolean;
@@ -19,7 +20,7 @@ export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDe
     hasFocus: boolean;
     private focusMonitorSubscription;
     get acceptedFiles(): string;
-    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, config: KbqInputFileLabel);
+    constructor(focusMonitor: FocusMonitor, cdr: ChangeDetectorRef, renderer: Renderer2, config: KbqInputFileLabel);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onFileSelectedViaClick({ target }: Event): void;
@@ -29,6 +30,6 @@ export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDe
     private mapToFileItem;
     private validateFile;
     private isCorrectExtension;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, [null, null, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqSingleFileUploadComponent, [null, null, null, { 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/_hint-theme.scss

@@ -62,6 +62,6 @@
     $tokens: map.get($config, tokens);
 
     .kbq-hint .kbq-hint__text {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, hint-font-text));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, hint-font-normal-text));
     }
 }

package/form-field/cleaner.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class KbqCleaner {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCleaner, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["mcCleaner"], {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["kbqCleaner"], {}, {}, never, never, false, never>;
 }

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

@@ -65,11 +65,11 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     /** Throws an error if the form field's control is missing. */
     protected validateControlChild(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["mcFormField"], { "color": { "alias": "color"; "required": false; }; }, {}, ["control", "stepper", "cleaner", "passwordToggle", "hint", "passwordHints", "suffix", "prefix"], ["[kbqPrefix]", "*", "[mcSuffix]", "kbq-cleaner", "kbq-password-toggle", "kbq-stepper", "kbq-hint, kbq-password-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["kbqFormField"], { "color": { "alias": "color"; "required": false; }; }, {}, ["control", "stepper", "cleaner", "passwordToggle", "hint", "passwordHints", "suffix", "prefix"], ["[kbqPrefix]", "*", "[kbqSuffix]", "kbq-cleaner", "kbq-password-toggle", "kbq-stepper", "kbq-hint, kbq-password-hint"], false, never>;
 }
 export declare class KbqFormFieldWithoutBorders {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormFieldWithoutBorders, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFormFieldWithoutBorders, "kbq-form-field[mcFormFieldWithoutBorders]", ["mcFormFieldWithoutBorders"], {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFormFieldWithoutBorders, "kbq-form-field[kbqFormFieldWithoutBorders]", ["kbqFormFieldWithoutBorders"], {}, {}, never, never, false, never>;
 }
 export declare class KbqTrim {
     private readonly noTrim;

package/form-field/form-field.scss

@@ -38,8 +38,8 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.kbq-form-field_without-borders .kbq-form-field__container {
-        border-color: transparent;
-        box-shadow: none;
+        border-color: transparent !important;
+        box-shadow: none !important;
     }
 
     &.kbq-form-field_has-prefix {

package/form-field/hint.d.ts

@@ -13,5 +13,5 @@ export declare class KbqHint extends KbqHintMixinBase {
     fillTextOff: boolean;
     constructor(elementRef: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqHint, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqHint, "kbq-hint", ["mcHint"], { "color": { "alias": "color"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; }, {}, never, ["[kbq-icon]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqHint, "kbq-hint", ["kbqHint"], { "color": { "alias": "color"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; }, {}, never, ["[kbq-icon]", "*"], false, never>;
 }

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

@@ -24,6 +24,7 @@ export declare class KbqPasswordHint implements AfterContentInit {
     min: number;
     max: number;
     regex: RegExp | null;
+    customCheckRule: (value: string) => boolean;
     viewFormField?: KbqFormField;
     hasError: boolean;
     checked: boolean;
@@ -39,5 +40,5 @@ export declare class KbqPasswordHint implements AfterContentInit {
     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; }; "viewFormField": { "alias": "viewFormField"; "required": false; }; }, {}, never, ["*"], false, never>;
+    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>;
 }

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

@@ -1,19 +1,24 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import { ElementRef, NgZone, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, TemplateRef, ViewContainerRef } from '@angular/core';
 import { KbqFormFieldRef } from '@koobiq/components/core';
+import { KbqIconButton } from '@koobiq/components/icon';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i0 from "@angular/core";
-export declare class KbqPasswordToggle extends KbqTooltipTrigger {
+export declare class KbqPasswordToggle extends KbqTooltipTrigger implements AfterViewInit {
     private formField;
+    private changeDetector;
+    icon: KbqIconButton;
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
     kbqTooltipHidden: string | TemplateRef<any>;
     get hidden(): boolean;
-    get icon(): string;
+    get iconClass(): string;
     get visibility(): string;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, formField: KbqFormFieldRef);
+    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, formField: KbqFormFieldRef, changeDetector: ChangeDetectorRef);
+    ngAfterViewInit(): void;
     toggle(event: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, [null, null, null, null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["mcPasswordToggle"], { "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; }; }, {}, never, never, false, never>;
+    private updateState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, [null, null, null, null, null, null, { optional: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["kbqPasswordToggle"], { "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; }; }, {}, never, never, false, never>;
 }

package/form-field/suffix.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class KbqSuffix {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSuffix, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSuffix, "[mcSuffix]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSuffix, "[kbqSuffix]", never, {}, {}, never, never, false, never>;
 }

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

@@ -29,5 +29,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[mcTimepicker],        input[mcDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, false, never>;
+    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>;
 }

package/icon/_icon-theme.scss

@@ -33,9 +33,10 @@
             color: map.get($success, color);
         }
 
-        &[disabled],
         &.kbq-disabled {
             cursor: default;
+
+            pointer-events: none;
         }
     }
 }

package/input/input-number.d.ts

@@ -1,5 +1,7 @@
-import { ElementRef } from '@angular/core';
-import { NgControl } from '@angular/forms';
+import { 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';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare const BIG_STEP = 10;
@@ -10,24 +12,73 @@ export declare function isInt(value: string): boolean;
 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 class KbqNumberInput {
+export declare const KBQ_NUMBER_INPUT_VALUE_ACCESSOR: any;
+export declare class KbqNumberInput implements KbqFormFieldControl<any>, ControlValueAccessor, OnDestroy {
     private elementRef;
-    private ngControl;
+    private readonly renderer;
+    private localeService;
+    /** Emits when the value changes (either due to user input or programmatic change). */
+    valueChange: EventEmitter<number | null>;
+    /** Emits when the disabled state has changed */
+    disabledChange: EventEmitter<boolean>;
+    readonly stateChanges: Subject<void>;
+    id: string;
+    placeholder: string;
+    empty: boolean;
+    required: boolean;
+    errorState: boolean;
+    controlType?: string | undefined;
     bigStep: number;
     step: number;
     min: number;
     max: number;
-    value: any;
+    withThousandSeparator: boolean;
+    /**
+     * Include thousand separator from custom index. For example, it will be useful in tables.
+     */
+    startFormattingFrom?: number;
+    get value(): number | null;
+    set value(value: number | null);
+    private _value;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     focused: boolean;
-    readonly stateChanges: Subject<void>;
     get nativeElement(): HTMLInputElement;
-    constructor(elementRef: ElementRef, ngControl: NgControl, step: string, bigStep: string, min: string, max: string);
+    get viewValue(): string;
+    get ngControl(): any;
+    private control;
+    private readonly allNumberLocaleConfigs;
+    private numberLocaleConfig;
+    private valueFromPaste;
+    private localeSubscription;
+    constructor(elementRef: ElementRef, renderer: Renderer2, step: string, bigStep: string, min: string, max: string, localeService: KbqLocaleService);
+    ngOnDestroy(): void;
+    onContainerClick(): void;
+    focus(): void;
+    writeValue(value: number | null): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     focusChanged(isFocused: boolean): void;
+    onTouched: () => void;
     onKeyDown(event: KeyboardEvent): void;
-    onPaste(event: any): void;
+    onInput(event: InputEvent): void;
+    onPaste(event: ClipboardEvent): void;
     stepUp(step: number): void;
     stepDown(step: number): void;
+    private cvaOnChange;
+    private setViewValue;
     private viewToModelUpdate;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNumberInput, [null, { optional: true; self: true; }, { attribute: "step"; }, { attribute: "big-step"; }, { attribute: "min"; }, { attribute: "max"; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNumberInput, "input[kbqInput][type=\"number\"]", ["mcNumericalInput"], { "bigStep": { "alias": "bigStep"; "required": false; }; "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, {}, never, never, false, never>;
+    private formatViewValue;
+    private formatNumber;
+    private createLocalizedNumberFromParts;
+    /**
+     * Method that returns a string representation of a number without localized separators
+     */
+    private normalizeNumber;
+    private updateLocaleParams;
+    private checkAndNormalizeLocalizedNumber;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNumberInput, [null, null, { attribute: "step"; }, { attribute: "big-step"; }, { attribute: "min"; }, { attribute: "max"; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNumberInput, "input[kbqInput][type=\"number\"]", ["kbqNumericalInput"], { "bigStep": { "alias": "bigStep"; "required": false; }; "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "withThousandSeparator": { "alias": "withThousandSeparator"; "required": false; }; "startFormattingFrom": { "alias": "startFormattingFrom"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
 }

package/link/_link-theme.scss

@@ -168,6 +168,10 @@
 
     .kbq-link {
         @include kbq-typography-level-to-styles($config, map.get($tokens, link-font-normal));
+
+        & .kbq-icon {
+            line-height: inherit;
+        }
     }
 
     .kbq-link.kbq-link_big {

package/link/link.component.d.ts

@@ -40,5 +40,5 @@ export declare class KbqLink extends KbqLinkMixinBase implements OnDestroy, HasT
     getHostElement(): any;
     private updatePrintUrl;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLink, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLink, "[kbq-link]", ["mcLink"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "pseudo": { "alias": "pseudo"; "required": false; }; "noUnderline": { "alias": "noUnderline"; "required": false; }; "big": { "alias": "big"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLink, "[kbq-link]", ["kbqLink"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "pseudo": { "alias": "pseudo"; "required": false; }; "noUnderline": { "alias": "noUnderline"; "required": false; }; "big": { "alias": "big"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon"], never, false, never>;
 }

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

@@ -114,7 +114,7 @@ export declare class KbqListSelection extends KbqListSelectionMixinBase implemen
     private selectAllOptions;
     private copyActiveOption;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListSelection, [null, null, { attribute: "multiple"; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListSelection, "kbq-list-selection", ["mcListSelection"], { "disabled": { "alias": "disabled"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "selectionChange": "selectionChange"; }, ["options"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListSelection, "kbq-list-selection", ["kbqListSelection"], { "disabled": { "alias": "disabled"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "selectionChange": "selectionChange"; }, ["options"], ["*"], false, never>;
 }
 export declare class KbqListOptionCaption {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListOptionCaption, never>;

package/loader-overlay/loader-overlay.scss

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

package/modal/README.md

@@ -6,10 +6,10 @@ The dialog is currently divided into 3 modes - `default`, `confirm box`, `custom
 ```ts
 showConfirm() {
     this.modalService.success({
-        mcContent   : 'Save changes made to the request "All assets with Windows"?',
-        mcOkText    : 'Save',
-        mcCancelText: 'Cancel',
-        mcOnOk      : () => console.log('OK')
+        kbqContent   : 'Save changes made to the request "All assets with Windows"?',
+        kbqOkText    : 'Save',
+        kbqCancelText: 'Cancel',
+        kbqOnOk      : () => console.log('OK')
     });
 }
 ```
@@ -18,7 +18,7 @@ showConfirm() {
 
 ```ts
 let dialogRef = modalService.open({
-    mcComponent: CustomComponent
+    kbqComponent: CustomComponent
 });
 ```
 

package/modal/modal-ref.class.d.ts

@@ -11,12 +11,12 @@ export declare abstract class KbqModalRef<T = any, R = any> {
     abstract close(result?: R): void;
     abstract destroy(result?: R): void;
     /**
-     * Trigger the mcOnOk/mcOnCancel by manual
+     * Trigger the kbqOnOk/kbqOnCancel by manual
      */
     abstract triggerOk(): void;
     abstract triggerCancel(): void;
     /**
-     * Return the component instance of mcContent when specify mcContent as a Component
+     * Return the component instance of kbqContent when specify kbqContent as a Component
      * Note: this method may return undefined if the Component has not ready yet.
      * (it only available after Modal's ngOnInit)
      */

package/modal/modal.component.d.ts

@@ -1,13 +1,14 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { AfterViewInit, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, Renderer2, SimpleChanges, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { KbqComponentColors } from '@koobiq/components/core';
 import { Observable } from 'rxjs';
 import { KbqModalControlService } from './modal-control.service';
 import { KbqModalRef } from './modal-ref.class';
-import { IModalButtonOptions, IModalOptions, ModalSize, ModalType, OnClickCallback } from './modal.type';
+import { IModalButtonOptions, ModalOptions, ModalSize, ModalType, OnClickCallback } from './modal.type';
 import * as i0 from "@angular/core";
 export declare const MODAL_ANIMATE_DURATION = 200;
-export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> implements OnInit, OnChanges, AfterViewInit, OnDestroy, IModalOptions {
+export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> implements OnInit, OnChanges, AfterViewInit, OnDestroy, ModalOptions {
     private overlay;
     private renderer;
     private cfr;
@@ -15,50 +16,51 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private viewContainer;
     private modalControl;
     private changeDetector;
+    private focusMonitor;
     private document;
     componentColors: typeof KbqComponentColors;
-    mcModalType: ModalType;
-    mcComponent: Type<T>;
-    mcContent: string | TemplateRef<{}> | Type<T>;
-    mcComponentParams: any;
-    mcFooter: string | TemplateRef<{}> | IModalButtonOptions<T>[];
-    get mcVisible(): boolean;
-    set mcVisible(value: boolean);
-    private _mcVisible;
-    mcVisibleChange: EventEmitter<boolean>;
-    mcZIndex: number;
-    mcWidth: number | string;
-    mcSize: ModalSize;
-    mcWrapClassName: string;
-    mcClassName: string;
-    mcStyle: object;
-    mcTitle: string | TemplateRef<{}>;
-    mcCloseByESC: boolean;
-    get mcClosable(): boolean;
-    set mcClosable(value: boolean);
-    private _mcClosable;
-    get mcMask(): boolean;
-    set mcMask(value: boolean);
-    private _mcMask;
-    get mcMaskClosable(): boolean;
-    set mcMaskClosable(value: boolean);
-    private _mcMaskClosable;
-    mcMaskStyle: object;
-    mcBodyStyle: object;
-    mcAfterOpen: EventEmitter<void>;
-    mcAfterClose: EventEmitter<R>;
-    mcOkText: string;
-    mcOkType: KbqComponentColors;
-    mcRestoreFocus: boolean;
-    get mcOkLoading(): boolean;
-    set mcOkLoading(value: boolean);
-    private _mcOkLoading;
-    mcOnOk: EventEmitter<T> | OnClickCallback<T>;
-    mcCancelText: string;
-    get mcCancelLoading(): boolean;
-    set mcCancelLoading(value: boolean);
-    private _mcCancelLoading;
-    mcOnCancel: EventEmitter<T> | OnClickCallback<T>;
+    kbqModalType: ModalType;
+    kbqComponent: Type<T>;
+    kbqContent: string | TemplateRef<{}> | Type<T>;
+    kbqComponentParams: any;
+    kbqFooter: string | TemplateRef<{}> | IModalButtonOptions<T>[];
+    get kbqVisible(): boolean;
+    set kbqVisible(value: boolean);
+    private _kbqVisible;
+    kbqVisibleChange: EventEmitter<boolean>;
+    kbqZIndex: number;
+    kbqWidth: number | string;
+    kbqSize: ModalSize;
+    kbqWrapClassName: string;
+    kbqClassName: string;
+    kbqStyle: object;
+    kbqTitle: string | TemplateRef<{}>;
+    kbqCloseByESC: boolean;
+    get kbqClosable(): boolean;
+    set kbqClosable(value: boolean);
+    private _kbqClosable;
+    get kbqMask(): boolean;
+    set kbqMask(value: boolean);
+    private _kbqMask;
+    get kbqMaskClosable(): boolean;
+    set kbqMaskClosable(value: boolean);
+    private _kbqMaskClosable;
+    kbqMaskStyle: object;
+    kbqBodyStyle: object;
+    kbqAfterOpen: EventEmitter<void>;
+    kbqAfterClose: EventEmitter<R>;
+    kbqOkText: string;
+    kbqOkType: KbqComponentColors;
+    kbqRestoreFocus: boolean;
+    get kbqOkLoading(): boolean;
+    set kbqOkLoading(value: boolean);
+    private _kbqOkLoading;
+    kbqOnOk: EventEmitter<T> | OnClickCallback<T>;
+    kbqCancelText: string;
+    get kbqCancelLoading(): boolean;
+    set kbqCancelLoading(value: boolean);
+    private _kbqCancelLoading;
+    kbqOnCancel: EventEmitter<T> | OnClickCallback<T>;
     modalContainer: ElementRef;
     bodyContainer: ViewContainerRef;
     autoFocusedButtons: QueryList<ElementRef>;
@@ -72,11 +74,12 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     get cancelText(): string;
     get hidden(): boolean;
     private focusedElementBeforeOpen;
+    private previouslyFocusedElementOrigin;
     private contentComponentRef;
     private animationState;
     private container;
-    constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, document: any);
-    mcGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef);
+    constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor, document: any);
+    kbqGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
@@ -97,6 +100,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     onKeyDown(event: KeyboardEvent): void;
     onClickCloseBtn(): void;
     onClickOkCancel(type: 'ok' | 'cancel'): void;
+    handleCloseResult(triggerType: 'ok' | 'cancel', canClose: (doClose: boolean | void | {}) => boolean): void;
     isNonEmptyString(value: {}): boolean;
     isTemplateRef(value: {}): boolean;
     isComponent(value: {}): boolean;
@@ -121,5 +125,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, { "mcModalType": { "alias": "mcModalType"; "required": false; }; "mcComponent": { "alias": "mcComponent"; "required": false; }; "mcContent": { "alias": "mcContent"; "required": false; }; "mcComponentParams": { "alias": "mcComponentParams"; "required": false; }; "mcFooter": { "alias": "mcFooter"; "required": false; }; "mcVisible": { "alias": "mcVisible"; "required": false; }; "mcZIndex": { "alias": "mcZIndex"; "required": false; }; "mcWidth": { "alias": "mcWidth"; "required": false; }; "mcSize": { "alias": "mcSize"; "required": false; }; "mcWrapClassName": { "alias": "mcWrapClassName"; "required": false; }; "mcClassName": { "alias": "mcClassName"; "required": false; }; "mcStyle": { "alias": "mcStyle"; "required": false; }; "mcTitle": { "alias": "mcTitle"; "required": false; }; "mcCloseByESC": { "alias": "mcCloseByESC"; "required": false; }; "mcClosable": { "alias": "mcClosable"; "required": false; }; "mcMask": { "alias": "mcMask"; "required": false; }; "mcMaskClosable": { "alias": "mcMaskClosable"; "required": false; }; "mcMaskStyle": { "alias": "mcMaskStyle"; "required": false; }; "mcBodyStyle": { "alias": "mcBodyStyle"; "required": false; }; "mcOkText": { "alias": "mcOkText"; "required": false; }; "mcOkType": { "alias": "mcOkType"; "required": false; }; "mcRestoreFocus": { "alias": "mcRestoreFocus"; "required": false; }; "mcOkLoading": { "alias": "mcOkLoading"; "required": false; }; "mcOnOk": { "alias": "mcOnOk"; "required": false; }; "mcCancelText": { "alias": "mcCancelText"; "required": false; }; "mcCancelLoading": { "alias": "mcCancelLoading"; "required": false; }; "mcOnCancel": { "alias": "mcOnCancel"; "required": false; }; "mcGetContainer": { "alias": "mcGetContainer"; "required": false; }; }, { "mcVisibleChange": "mcVisibleChange"; "mcAfterOpen": "mcAfterOpen"; "mcAfterClose": "mcAfterClose"; "mcOnOk": "mcOnOk"; "mcOnCancel": "mcOnCancel"; }, 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; }; "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>;
 }