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

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>;
 }

package/modal/modal.scss

@@ -66,7 +66,6 @@ $tokens: meta.module-variables(tokens) !default;
     border-radius: var(--kbq-modal-size-border-radius, map.get($tokens, modal-size-border-radius));
 
     background-clip: padding-box;
-    background-color: white;
 }
 
 .kbq-modal-header {

package/modal/modal.type.d.ts

@@ -6,44 +6,43 @@ export type ConfirmType = 'confirm' | 'success' | 'warn';
 export declare enum ModalSize {
     Small = "small",
     Medium = "medium",
-    Normal = "medium",
     Large = "large"
 }
-export interface IModalOptions<T = any, R = any> {
-    mcModalType?: ModalType;
-    mcVisible?: boolean;
-    mcZIndex?: number;
-    mcWidth?: number | string;
-    mcSize?: ModalSize;
-    mcWrapClassName?: string;
-    mcClassName?: string;
-    mcStyle?: object;
-    mcTitle?: string | TemplateRef<{}>;
-    mcContent?: string | TemplateRef<{}> | Type<T>;
-    mcComponent?: Type<T>;
-    mcComponentParams?: any;
-    mcClosable?: boolean;
-    mcMask?: boolean;
-    mcMaskClosable?: boolean;
-    mcMaskStyle?: object;
-    mcBodyStyle?: object;
-    mcFooter?: string | TemplateRef<{}> | IModalButtonOptions<T>[];
-    mcGetContainer?: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef) | null;
-    mcAfterOpen?: EventEmitter<void>;
-    mcAfterClose?: EventEmitter<R>;
-    mcCloseByESC?: boolean;
-    mcRestoreFocus?: boolean;
-    mcOkText?: string;
-    mcOkType?: string;
-    mcOkLoading?: boolean;
-    mcOnOk?: EventEmitter<T> | OnClickCallback<T>;
-    mcCancelText?: string;
-    mcCancelLoading?: boolean;
-    mcOnCancel?: EventEmitter<T> | OnClickCallback<T>;
+export interface ModalOptions<T = any, R = any> {
+    kbqModalType?: ModalType;
+    kbqVisible?: boolean;
+    kbqZIndex?: number;
+    kbqWidth?: number | string;
+    kbqSize?: ModalSize;
+    kbqWrapClassName?: string;
+    kbqClassName?: string;
+    kbqStyle?: object;
+    kbqTitle?: string | TemplateRef<{}>;
+    kbqContent?: string | TemplateRef<{}> | Type<T>;
+    kbqComponent?: Type<T>;
+    kbqComponentParams?: any;
+    kbqClosable?: boolean;
+    kbqMask?: boolean;
+    kbqMaskClosable?: boolean;
+    kbqMaskStyle?: object;
+    kbqBodyStyle?: object;
+    kbqFooter?: string | TemplateRef<{}> | IModalButtonOptions<T>[];
+    kbqGetContainer?: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef) | null;
+    kbqAfterOpen?: EventEmitter<void>;
+    kbqAfterClose?: EventEmitter<R>;
+    kbqCloseByESC?: boolean;
+    kbqRestoreFocus?: boolean;
+    kbqOkText?: string;
+    kbqOkType?: string;
+    kbqOkLoading?: boolean;
+    kbqOnOk?: EventEmitter<T> | OnClickCallback<T>;
+    kbqCancelText?: string;
+    kbqCancelLoading?: boolean;
+    kbqOnCancel?: EventEmitter<T> | OnClickCallback<T>;
 }
-export interface IModalOptionsForService<T = any> extends IModalOptions<T> {
-    mcOnOk?: OnClickCallback<T>;
-    mcOnCancel?: OnClickCallback<T>;
+export interface IModalOptionsForService<T = any> extends ModalOptions<T> {
+    kbqOnOk?: OnClickCallback<T>;
+    kbqOnCancel?: OnClickCallback<T>;
 }
 export interface IModalButtonOptions<T = any> {
     label: string;
@@ -56,6 +55,6 @@ export interface IModalButtonOptions<T = any> {
     loading?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
     disabled?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
     autoFocus?: boolean;
-    mcModalMainAction?: boolean;
+    kbqModalMainAction?: boolean;
     onClick?(this: IModalButtonOptions<T>, contentComponentInstance?: T): (void | {}) | Promise<(void | {})>;
 }

package/navbar/_navbar-theme.scss

@@ -79,7 +79,7 @@
         &.cdk-keyboard-focused .kbq-navbar-item__overlay {
             box-shadow:
                 inset 0 0 0 2px map.get(map.get($theme, states), focused-color),
-                inset 0 0 0 3px map.get($background, background);
+                inset 0 0 0 3px map.get($background, bg);
         }
         /* stylelint-enable no-descending-specificity */
     }

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

@@ -59,7 +59,7 @@ export declare class KbqNavbarBrand implements AfterContentInit, OnDestroy {
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarBrand, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarBrand, "kbq-navbar-brand, [kbq-navbar-brand]", ["mcNavbarBrand"], {}, {}, ["logo", "title"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarBrand, "kbq-navbar-brand, [kbq-navbar-brand]", ["kbqNavbarBrand"], {}, {}, ["logo", "title"], ["*"], false, never>;
 }
 export declare class KbqNavbarDivider {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarDivider, never>;
@@ -146,7 +146,7 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger {
     onKeyDown($event: KeyboardEvent): void;
     private updateCollapsedState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["mcNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "mcTrigger"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "subTitle", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "kbq-navbar-subtitle, [kbq-navbar-subtitle]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["kbqNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "subTitle", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "kbq-navbar-subtitle, [kbq-navbar-subtitle]", "*"], false, never>;
 }
 export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDestroy {
     navbar: KbqVerticalNavbar;

package/navbar/navbar.component.d.ts

@@ -1,3 +1,4 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList } from '@angular/core';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
 import { Observable, Subject } from 'rxjs';
@@ -6,6 +7,7 @@ import * as i0 from "@angular/core";
 export type KbqNavbarContainerPositionType = 'left' | 'right';
 export declare class KbqFocusableComponent implements AfterContentInit, OnDestroy {
     protected changeDetectorRef: ChangeDetectorRef;
+    private focusMonitor;
     focusableItems: QueryList<KbqNavbarFocusableItem>;
     keyManager: FocusKeyManager<KbqNavbarFocusableItem>;
     get tabIndex(): any;
@@ -16,7 +18,8 @@ export declare class KbqFocusableComponent implements AfterContentInit, OnDestro
     protected readonly destroyed: Subject<void>;
     private optionFocusSubscription;
     private optionBlurSubscription;
-    constructor(changeDetectorRef: ChangeDetectorRef);
+    private focusMonitorSubscription;
+    constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     focus(): void;
@@ -44,7 +47,7 @@ export declare class KbqNavbar extends KbqFocusableComponent implements AfterVie
     private get totalItemsWidth();
     private get collapsableItems();
     private resizeSubscription;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/navbar/vertical-navbar.component.d.ts

@@ -1,9 +1,11 @@
-import { AfterContentInit, ChangeDetectorRef, QueryList } from '@angular/core';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, QueryList } from '@angular/core';
 import { Subject } from 'rxjs';
 import { KbqNavbarBento, KbqNavbarItem, KbqNavbarRectangleElement } from './navbar-item.component';
 import { KbqFocusableComponent } from './navbar.component';
 import * as i0 from "@angular/core";
 export declare class KbqVerticalNavbar extends KbqFocusableComponent implements AfterContentInit {
+    protected elementRef: ElementRef;
     rectangleElements: QueryList<KbqNavbarRectangleElement>;
     items: QueryList<KbqNavbarItem>;
     bento: KbqNavbarBento;
@@ -11,7 +13,7 @@ export declare class KbqVerticalNavbar extends KbqFocusableComponent implements
     get expanded(): boolean;
     set expanded(value: boolean);
     private _expanded;
-    constructor(changeDetectorRef: ChangeDetectorRef);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     toggle(): void;
     onKeyDown(event: KeyboardEvent): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "16.0.0-beta.6",
+    "version": "16.0.0-beta.8",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -17,18 +17,16 @@
     },
     "homepage": "https://gitlab.ptsecurity.com/frontend/design-system/mosaic/-/blob/master/README.md",
     "peerDependencies": {
-        "@angular/animations": "16.1.5",
-        "@angular/cdk": "16.1.5",
-        "@angular/core": "16.1.5",
-        "@angular/common": "16.1.5",
-        "@angular/forms": "16.1.5",
-        "@koobiq/cdk": "^16.0.0-beta.6",
-        "@koobiq/angular-moment-adapter": "^1.1.0",
-        "@koobiq/angular-luxon-adapter": "^1.1.0",
-        "@mosaic-design/date-formatter": "^1.1.0",
+        "@angular/cdk": "^16.1.5",
+        "@angular/forms": "^16.1.5",
+        "@koobiq/cdk": "^16.0.0-beta.8",
+        "@koobiq/angular-moment-adapter": "^16.0.0-beta.8",
+        "@koobiq/angular-luxon-adapter": "^16.0.0-beta.8",
+        "@mosaic-design/date-formatter": "^2.1.1",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.0.0-beta.0",
-        "@koobiq/design-tokens": "3.0.0-beta.6"
+        "@koobiq/tokens-builder": "^3.0.0-beta.6",
+        "@koobiq/design-tokens": "^3.0.0-beta.6",
+        "marked": "^4.0.18"
     },
     "dependencies": {
         "tslib": "^2.4.0"
@@ -64,18 +62,18 @@
             "esm": "./esm2022/alert/koobiq-components-alert.mjs",
             "default": "./fesm2022/koobiq-components-alert.mjs"
         },
-        "./autocomplete": {
-            "types": "./autocomplete/index.d.ts",
-            "esm2022": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
-            "esm": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
-            "default": "./fesm2022/koobiq-components-autocomplete.mjs"
-        },
         "./badge": {
             "types": "./badge/index.d.ts",
             "esm2022": "./esm2022/badge/koobiq-components-badge.mjs",
             "esm": "./esm2022/badge/koobiq-components-badge.mjs",
             "default": "./fesm2022/koobiq-components-badge.mjs"
         },
+        "./autocomplete": {
+            "types": "./autocomplete/index.d.ts",
+            "esm2022": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
+            "esm": "./esm2022/autocomplete/koobiq-components-autocomplete.mjs",
+            "default": "./fesm2022/koobiq-components-autocomplete.mjs"
+        },
         "./button": {
             "types": "./button/index.d.ts",
             "esm2022": "./esm2022/button/koobiq-components-button.mjs",
@@ -184,18 +182,18 @@
             "esm": "./esm2022/loader-overlay/koobiq-components-loader-overlay.mjs",
             "default": "./fesm2022/koobiq-components-loader-overlay.mjs"
         },
-        "./markdown": {
-            "types": "./markdown/index.d.ts",
-            "esm2022": "./esm2022/markdown/koobiq-components-markdown.mjs",
-            "esm": "./esm2022/markdown/koobiq-components-markdown.mjs",
-            "default": "./fesm2022/koobiq-components-markdown.mjs"
-        },
         "./modal": {
             "types": "./modal/index.d.ts",
             "esm2022": "./esm2022/modal/koobiq-components-modal.mjs",
             "esm": "./esm2022/modal/koobiq-components-modal.mjs",
             "default": "./fesm2022/koobiq-components-modal.mjs"
         },
+        "./markdown": {
+            "types": "./markdown/index.d.ts",
+            "esm2022": "./esm2022/markdown/koobiq-components-markdown.mjs",
+            "esm": "./esm2022/markdown/koobiq-components-markdown.mjs",
+            "default": "./fesm2022/koobiq-components-markdown.mjs"
+        },
         "./navbar": {
             "types": "./navbar/index.d.ts",
             "esm2022": "./esm2022/navbar/koobiq-components-navbar.mjs",
@@ -256,18 +254,18 @@
             "esm": "./esm2022/splitter/koobiq-components-splitter.mjs",
             "default": "./fesm2022/koobiq-components-splitter.mjs"
         },
-        "./table": {
-            "types": "./table/index.d.ts",
-            "esm2022": "./esm2022/table/koobiq-components-table.mjs",
-            "esm": "./esm2022/table/koobiq-components-table.mjs",
-            "default": "./fesm2022/koobiq-components-table.mjs"
-        },
         "./tabs": {
             "types": "./tabs/index.d.ts",
             "esm2022": "./esm2022/tabs/koobiq-components-tabs.mjs",
             "esm": "./esm2022/tabs/koobiq-components-tabs.mjs",
             "default": "./fesm2022/koobiq-components-tabs.mjs"
         },
+        "./table": {
+            "types": "./table/index.d.ts",
+            "esm2022": "./esm2022/table/koobiq-components-table.mjs",
+            "esm": "./esm2022/table/koobiq-components-table.mjs",
+            "default": "./fesm2022/koobiq-components-table.mjs"
+        },
         "./tags": {
             "types": "./tags/index.d.ts",
             "esm2022": "./esm2022/tags/koobiq-components-tags.mjs",

package/popover/README.md

@@ -4,15 +4,15 @@
 
 | Property               | Description                                                                                                                                                                              | Type                  | Default |
 |------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|---------|
-| mcPlacement            | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                             | string                | bottom  |
-| mcTrigger              | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                       | string                | hover   |
-| mcVisible              | Ручное управление показом, используется только при mcTrigger="manual"                                                                                                             | boolean               | false   |
-| mcPopoverHeader        | Содержимое шапки Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.      | string | ng-template  | –       |
-| mcPopoverContent       | Содержимое компонента Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости. | string | ng-template  | –       |
-| mcPopoverFooter        | Содержимое подвала Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.    | string | ng-template  | –       |
-| mcPopoverDisabled      | Флаг для запрета показа                                                                                                                                                                  | boolean               | false   |
-| mcPopoverClass         | Добавление своих классов                                                                                                                                                                 | string | string[]     | –       |
-| mcVisibleChange        | Callback на изменение видимости компонента                                                                                                                                               | EventEmitter<boolean> | –       |
+| kbqPlacement            | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                             | string                | bottom  |
+| kbqTrigger              | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                       | string                | hover   |
+| kbqVisible              | Ручное управление показом, используется только при kbqTrigger="manual"                                                                                                             | boolean               | false   |
+| kbqPopoverHeader        | Содержимое шапки Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.      | string | ng-template  | –       |
+| kbqPopoverContent       | Содержимое компонента Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости. | string | ng-template  | –       |
+| kbqPopoverFooter        | Содержимое подвала Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.    | string | ng-template  | –       |
+| kbqPopoverDisabled      | Флаг для запрета показа                                                                                                                                                                  | boolean               | false   |
+| kbqPopoverClass         | Добавление своих классов                                                                                                                                                                 | string | string[]     | –       |
+| kbqVisibleChange        | Callback на изменение видимости компонента                                                                                                                                               | EventEmitter<boolean> | –       |
 
 ## Example
 
@@ -22,11 +22,11 @@
 </ng-template>
  
 <button
-    mcPopover
-    [mcTrigger]="'hover'"
-    [mcPlacement]="'top'"
-    [mcPopoverHeader]="'Это header'"
-    [mcPopoverContent]="customContent">
+    kbqPopover
+    [kbqTrigger]="'hover'"
+    [kbqPlacement]="'top'"
+    [kbqPopoverHeader]="'Это header'"
+    [kbqPopoverContent]="customContent">
     Найти Эйяфьядлайёкюдль
 </button>
 ```

package/popover/_popover-theme.scss

@@ -5,92 +5,33 @@
 
 
 @mixin kbq-popover-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
     $popover: map.get(map.get($theme, components), popover);
 
+    $container: map.get($popover, container);
+
     $header: map.get($popover, header);
+    $content: map.get($popover, content);
     $footer: map.get($popover, footer);
 
     .kbq-popover {
-        border-color: map.get($popover, border);
-        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    }
-
-    .kbq-popover__header {
-        color: map.get($header, text);
-        background: map.get($header, background);
-        border-bottom-color: map.get($header, border);
-    }
-
-    .kbq-popover__container,
-    .kbq-popover__content {
-        color: map.get($popover, text);
-        background-color: map.get($popover, background);
-    }
-
-    .kbq-popover__footer {
-        border-top-color: map.get($footer, border);
-        background-color: map.get($footer, background);
-    }
-
-    .kbq-popover .kbq-popover__arrow {
-        border-color: map.get($popover, border);
-    }
-
-    .kbq-popover_placement-top .kbq-popover__arrow,
-    .kbq-popover_placement-top-left .kbq-popover__arrow,
-    .kbq-popover_placement-top-right .kbq-popover__arrow {
-        background-color: map.get($popover, background);
-        border-top-color: map.get($popover, border);
-        border-left-color: map.get($popover, border);
-    }
-
-    .kbq-popover_placement-top .kbq-popover__arrow.kbq-popover__arrow_with-footer,
-    .kbq-popover_placement-top-left .kbq-popover__arrow.kbq-popover__arrow_with-footer,
-    .kbq-popover_placement-top-right .kbq-popover__arrow.kbq-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-top-color: map.get($footer, border);
-        border-left-color: map.get($footer, border);
-    }
-
-    .kbq-popover_placement-right .kbq-popover__arrow,
-    .kbq-popover_placement-right-top .kbq-popover__arrow,
-    .kbq-popover_placement-right-bottom .kbq-popover__arrow {
-        background-color: map.get($popover, background);
-        border-top-color: map.get($popover, background);
-        border-right-color: map.get($popover, background);
+        box-shadow: map.get($container, box-shadow);
     }
 
-    .kbq-popover_placement-right-bottom .kbq-popover__arrow.kbq-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-top-color: map.get($footer, border);
-        border-right-color: map.get($footer, border);
+    .kbq-popover__container {
+        background: map.get($container, background);
     }
 
-    .kbq-popover_placement-left .kbq-popover__arrow,
-    .kbq-popover_placement-left-top .kbq-popover__arrow,
-    .kbq-popover_placement-left-bottom .kbq-popover__arrow {
-        background-color: map.get($popover, background);
-        border-bottom-color: map.get($popover, background);
-        border-left-color: map.get($popover, background);
+    .kbq-popover__arrow {
+        box-shadow: map.get($container, box-shadow);
+        background: map.get($container, background);
     }
 
-    .kbq-popover_placement-left-bottom .kbq-popover__arrow.kbq-popover__arrow_with-footer {
-        background-color: map.get($footer, background);
-        border-bottom-color: map.get($footer, border);
-        border-left-color: map.get($footer, border);
+    .kbq-popover__header {
+        color: map.get($header, text);
     }
 
-    .kbq-popover_placement-bottom .kbq-popover__arrow,
-    .kbq-popover_placement-bottom-left .kbq-popover__arrow,
-    .kbq-popover_placement-bottom-right .kbq-popover__arrow,
-    .kbq-popover_placement-bottom .kbq-popover__arrow.kbq-popover__arrow_with-footer,
-    .kbq-popover_placement-bottom-left .kbq-popover__arrow.kbq-popover__arrow_with-footer,
-    .kbq-popover_placement-bottom-right .kbq-popover__arrow.kbq-popover__arrow_with-footer {
-        background-color: map.get($popover, background);
-        border-right-color: map.get($popover, background);
-        border-bottom-color: map.get($popover, background);
+    .kbq-popover__content {
+        color: map.get($content, text);
     }
 }
 
@@ -98,14 +39,10 @@
     $tokens: map.get($config, tokens);
 
     .kbq-popover__header {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-header-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-font-header));
     }
 
     .kbq-popover__content {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-font-default));
-    }
-
-    .kbq-popover__footer {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-footer-font-default));
+        @include kbq-typography-level-to-styles($config, map.get($tokens, popover-font-content));
     }
 }

package/popover/popover-animations.d.ts

@@ -1,4 +1,4 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
-export declare const mcPopoverAnimations: {
+export declare const kbqPopoverAnimations: {
     readonly popoverState: AnimationTriggerMetadata;
 };

package/popover/popover-confirm.component.d.ts

@@ -29,5 +29,5 @@ export declare class KbqPopoverConfirmTrigger extends KbqPopoverTrigger {
     setupButtonEvents(): void;
     getOverlayHandleComponentType(): typeof KbqPopoverConfirmComponent;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverConfirmTrigger, "[mcPopoverConfirm]", ["mcPopoverConfirm"], { "confirmText": { "alias": "mcPopoverConfirmText"; "required": false; }; "confirmButtonText": { "alias": "mcPopoverConfirmButtonText"; "required": false; }; }, { "confirm": "confirm"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverConfirmTrigger, "[kbqPopoverConfirm]", ["kbqPopoverConfirm"], { "confirmText": { "alias": "kbqPopoverConfirmText"; "required": false; }; "confirmButtonText": { "alias": "kbqPopoverConfirmButtonText"; "required": false; }; }, { "confirm": "confirm"; }, never, never, false, never>;
 }