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

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;
         }
     }
 }
@@ -75,7 +76,6 @@
             background: map.get($success, background);
         }
 
-        &[disabled],
         &.kbq-disabled {
             cursor: default;
         }
@@ -98,11 +98,10 @@
                 color: map.get($theme, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($theme, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($theme, state-disabled);
             }
@@ -114,11 +113,10 @@
                 color: map.get($contrast, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($contrast, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($contrast, state-disabled);
             }
@@ -130,11 +128,10 @@
                 color: map.get($fade-contrast, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($fade-contrast, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($fade-contrast, state-disabled);
             }
@@ -146,11 +143,10 @@
                 color: map.get($error, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($error, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($error, state-disabled);
             }
@@ -162,11 +158,10 @@
                 color: map.get($success, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($success, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($success, state-disabled);
             }
@@ -180,11 +175,10 @@
                 color: map.get($theme, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($theme, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($theme, state-disabled);
             }
@@ -196,11 +190,10 @@
                 color: map.get($contrast, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($contrast, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($contrast, state-disabled);
             }
@@ -212,11 +205,10 @@
                 color: map.get($fade-contrast, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($fade-contrast, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($fade-contrast, state-disabled);
             }
@@ -228,11 +220,10 @@
                 color: map.get($error, state-active);
             }
 
-            &:not([disabled], .kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($error, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($error, state-disabled);
             }
@@ -244,11 +235,10 @@
                 color: map.get($success, state-active);
             }
 
-            &:not([disabled],.kbq-disabled):hover {
+            &:not(.kbq-disabled):hover {
                 color: map.get($success, state-hover);
             }
 
-            &[disabled],
             &.kbq-disabled {
                 color: map.get($success, state-disabled);
             }

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

@@ -146,7 +146,7 @@
 
     @media print {
         .kbq-link_print:not([disabled]) {
-            color: map.get($foreground, text);
+            color: map.get($foreground, contrast);
 
             &.kbq-text-only,
             &.kbq-text-with-icon .kbq-link__text {
@@ -154,7 +154,7 @@
             }
 
             &::after {
-                color: map.get($foreground, text);
+                color: map.get($foreground, contrast);
 
                 content: ":\a" attr(print);
                 white-space: pre;
@@ -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-theme.scss

@@ -30,7 +30,7 @@
     .kbq-list-option {
         @include kbq-list-item(map.get($list-item, default));
 
-        &:hover:not(.kbq-disabled):not([disabled]) {
+        &:hover:not(.kbq-disabled) {
             @include kbq-list-item(map.get($list-item, hover));
         }
 
@@ -41,7 +41,7 @@
         &.kbq-selected {
             @include kbq-list-item(map.get($list-item, selected));
 
-            &:hover:not(.kbq-disabled):not([disabled]) {
+            &:hover:not(.kbq-disabled) {
                 @include kbq-list-item(map.get($list-item, selected-hover));
             }
         }

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/list/list.scss

@@ -21,7 +21,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     @include list.kbq-list-item-base();
 
-    &:not(.kbq-disabled):not([disabled]) {
+    &:not(.kbq-disabled) {
         cursor: pointer;
     }
 
@@ -37,7 +37,3 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
-
-.kbq-list-option:not([disabled]):not(.kbq-disabled){
-    cursor: pointer;
-}

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/markdown/_markdown-theme.scss

@@ -14,8 +14,8 @@
     $markdown: map.get(map.get($theme, components), markdown);
 
     .kbq-markdown {
-        color: map.get($foreground, text);
-        background: map.get($background, background);;
+        color: map.get($foreground, contrast);
+        background: map.get($background, bg);
 
         // h1, h2, h3, h4, h5, h6
         @for $i from 1 through 6 {

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-theme.scss

@@ -5,29 +5,24 @@
 
 
 @mixin kbq-modal-theme($theme) {
-    $tokens: map.get($theme, tokens);
-
-    $foreground: map.get($theme, foreground);
-    $background: map.get($theme, background);
-
     $modal: map.get(map.get($theme, components), modal);
 
     .kbq-modal {
         background: map.get($modal, container-background);
         box-shadow: map.get($modal, container-box-shadow);
 
-        .kbq-modal-content {
-            // У модалки должен быть фон background. Чтобы поповеры и дропдауны было видно поверх модалки
-            background-color: map.get($background, background);
-
-            box-shadow: map.get($modal, shadow);
-        }
+        .kbq-modal-header {
+            & .kbq-modal-title {
+                color: map.get($modal, header);
+            }
 
-        .kbq-modal-title {
-            color: map.get($foreground, text);
+            & .kbq-modal-close {
+                color: map.get($modal, close-button);
+            }
         }
 
-        .kbq-modal-header {
+        .kbq-modal-content {
+            color: map.get($modal, content);
         }
 
         .kbq-modal-header.kbq-modal-body_top-overflow {
@@ -37,13 +32,10 @@
         .kbq-modal-footer.kbq-modal-body_bottom-overflow {
             box-shadow: map.get($modal, body-bottom-shadow);
         }
-
-        .kbq-modal-footer {
-        }
     }
 
     .kbq-modal-mask {
-        background-color: map.get($modal, background-mask);
+        background-color: map.get($modal, overlay);
     }
 }
 

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)
      */