@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.10

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>;
@@ -124,9 +124,9 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger {
     collapsedText: string;
     get trigger(): string;
     set trigger(value: string);
-    get collapsed(): boolean;
     set collapsed(value: boolean);
     private _collapsed;
+    isCollapsed: boolean;
     get croppedText(): string;
     get collapsable(): boolean;
     set collapsable(value: boolean);
@@ -144,8 +144,9 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger {
     updateTooltip(): void;
     getTitleWidth(): number;
     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; }; "collapsed": { "alias": "collapsed"; "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.1",
+    "version": "16.0.0-beta.10",
     "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.1",
-        "@koobiq/angular-moment-adapter": "^1.1.0",
-        "@koobiq/angular-luxon-adapter": "^1.1.0",
-        "@mosaic-design/date-formatter": "^1.1.0",
-        "@ptsecurity/mosaic-icons": "^6.6.2",
-        "@koobiq/tokens-builder": "3.0.0-beta.0",
-        "@koobiq/tokens-koobiq": "3.0.0-beta.0"
+        "@angular/cdk": "^16.1.5",
+        "@angular/forms": "^16.1.5",
+        "@koobiq/cdk": "^16.0.0-beta.10",
+        "@koobiq/angular-moment-adapter": "^16.0.0-beta.10",
+        "@koobiq/angular-luxon-adapter": "^16.0.0-beta.10",
+        "@mosaic-design/date-formatter": "^2.1.1",
+        "@koobiq/icons": "^7.1.0",
+        "@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"
@@ -46,8 +44,8 @@
             "esm": "./esm2022/koobiq-components.mjs",
             "default": "./fesm2022/koobiq-components.mjs"
         },
-        "./prebuilt-themes/default-theme.css": {
-            "style": "./prebuilt-themes/default-theme.css"
+        "./prebuilt-themes/light-theme.css": {
+            "style": "./prebuilt-themes/light-theme.css"
         },
         "./prebuilt-themes/dark-theme.css": {
             "style": "./prebuilt-themes/dark-theme.css"
@@ -70,6 +68,12 @@
             "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"
+        },
         "./button": {
             "types": "./button/index.d.ts",
             "esm2022": "./esm2022/button/koobiq-components-button.mjs",
@@ -124,18 +128,18 @@
             "esm": "./esm2022/dl/koobiq-components-dl.mjs",
             "default": "./fesm2022/koobiq-components-dl.mjs"
         },
-        "./ellipsis-center": {
-            "types": "./ellipsis-center/index.d.ts",
-            "esm2022": "./esm2022/ellipsis-center/koobiq-components-ellipsis-center.mjs",
-            "esm": "./esm2022/ellipsis-center/koobiq-components-ellipsis-center.mjs",
-            "default": "./fesm2022/koobiq-components-ellipsis-center.mjs"
-        },
         "./dropdown": {
             "types": "./dropdown/index.d.ts",
             "esm2022": "./esm2022/dropdown/koobiq-components-dropdown.mjs",
             "esm": "./esm2022/dropdown/koobiq-components-dropdown.mjs",
             "default": "./fesm2022/koobiq-components-dropdown.mjs"
         },
+        "./ellipsis-center": {
+            "types": "./ellipsis-center/index.d.ts",
+            "esm2022": "./esm2022/ellipsis-center/koobiq-components-ellipsis-center.mjs",
+            "esm": "./esm2022/ellipsis-center/koobiq-components-ellipsis-center.mjs",
+            "default": "./fesm2022/koobiq-components-ellipsis-center.mjs"
+        },
         "./file-upload": {
             "types": "./file-upload/index.d.ts",
             "esm2022": "./esm2022/file-upload/koobiq-components-file-upload.mjs",
@@ -196,18 +200,18 @@
             "esm": "./esm2022/navbar/koobiq-components-navbar.mjs",
             "default": "./fesm2022/koobiq-components-navbar.mjs"
         },
-        "./progress-bar": {
-            "types": "./progress-bar/index.d.ts",
-            "esm2022": "./esm2022/progress-bar/koobiq-components-progress-bar.mjs",
-            "esm": "./esm2022/progress-bar/koobiq-components-progress-bar.mjs",
-            "default": "./fesm2022/koobiq-components-progress-bar.mjs"
-        },
         "./popover": {
             "types": "./popover/index.d.ts",
             "esm2022": "./esm2022/popover/koobiq-components-popover.mjs",
             "esm": "./esm2022/popover/koobiq-components-popover.mjs",
             "default": "./fesm2022/koobiq-components-popover.mjs"
         },
+        "./progress-bar": {
+            "types": "./progress-bar/index.d.ts",
+            "esm2022": "./esm2022/progress-bar/koobiq-components-progress-bar.mjs",
+            "esm": "./esm2022/progress-bar/koobiq-components-progress-bar.mjs",
+            "default": "./fesm2022/koobiq-components-progress-bar.mjs"
+        },
         "./progress-spinner": {
             "types": "./progress-spinner/index.d.ts",
             "esm2022": "./esm2022/progress-spinner/koobiq-components-progress-spinner.mjs",
@@ -220,17 +224,11 @@
             "esm": "./esm2022/radio/koobiq-components-radio.mjs",
             "default": "./fesm2022/koobiq-components-radio.mjs"
         },
-        "./sidepanel": {
-            "types": "./sidepanel/index.d.ts",
-            "esm2022": "./esm2022/sidepanel/koobiq-components-sidepanel.mjs",
-            "esm": "./esm2022/sidepanel/koobiq-components-sidepanel.mjs",
-            "default": "./fesm2022/koobiq-components-sidepanel.mjs"
-        },
-        "./splitter": {
-            "types": "./splitter/index.d.ts",
-            "esm2022": "./esm2022/splitter/koobiq-components-splitter.mjs",
-            "esm": "./esm2022/splitter/koobiq-components-splitter.mjs",
-            "default": "./fesm2022/koobiq-components-splitter.mjs"
+        "./risk-level": {
+            "types": "./risk-level/index.d.ts",
+            "esm2022": "./esm2022/risk-level/koobiq-components-risk-level.mjs",
+            "esm": "./esm2022/risk-level/koobiq-components-risk-level.mjs",
+            "default": "./fesm2022/koobiq-components-risk-level.mjs"
         },
         "./select": {
             "types": "./select/index.d.ts",
@@ -244,6 +242,18 @@
             "esm": "./esm2022/sidebar/koobiq-components-sidebar.mjs",
             "default": "./fesm2022/koobiq-components-sidebar.mjs"
         },
+        "./sidepanel": {
+            "types": "./sidepanel/index.d.ts",
+            "esm2022": "./esm2022/sidepanel/koobiq-components-sidepanel.mjs",
+            "esm": "./esm2022/sidepanel/koobiq-components-sidepanel.mjs",
+            "default": "./fesm2022/koobiq-components-sidepanel.mjs"
+        },
+        "./splitter": {
+            "types": "./splitter/index.d.ts",
+            "esm2022": "./esm2022/splitter/koobiq-components-splitter.mjs",
+            "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",

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

@@ -1,14 +1,12 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, ViewContainerRef } from '@angular/core';
-import { ThemePalette } from '@koobiq/components/core';
 import { Subject } from 'rxjs';
 import { KbqPopoverComponent, KbqPopoverTrigger } from './popover.component';
 import * as i0 from "@angular/core";
 export declare const KBQ_POPOVER_CONFIRM_TEXT: InjectionToken<string>;
 export declare const KBQ_POPOVER_CONFIRM_BUTTON_TEXT: InjectionToken<string>;
 export declare class KbqPopoverConfirmComponent extends KbqPopoverComponent {
-    themePalette: typeof ThemePalette;
     onConfirm: Subject<void>;
     confirmButtonText: string;
     confirmText: string;
@@ -29,5 +27,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>;
 }

package/popover/popover.component.d.ts

@@ -16,12 +16,12 @@ export declare class KbqPopoverComponent extends KbqPopUp {
 }
 export declare const KBQ_POPOVER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
-export declare function mcPopoverScrollStrategyFactory(overlay: Overlay): () => ScrollStrategy;
+export declare function kbqPopoverScrollStrategyFactory(overlay: Overlay): () => ScrollStrategy;
 /** @docs-private */
 export declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
     deps: (typeof Overlay)[];
-    useFactory: typeof mcPopoverScrollStrategyFactory;
+    useFactory: typeof kbqPopoverScrollStrategyFactory;
 };
 /** Creates an error to be thrown if the user supplied an invalid popover position. */
 export declare function getKbqPopoverInvalidPositionError(position: string): Error;
@@ -71,5 +71,5 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
     closingActions(): import("rxjs").Observable<void | import("@angular/cdk/scrolling").CdkScrollable | MouseEvent>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[mcPopover]", ["mcPopover"], { "popoverVisible": { "alias": "mcPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "mcPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "mcPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "mcPopoverHeader"; "required": false; }; "content": { "alias": "mcPopoverContent"; "required": false; }; "footer": { "alias": "mcPopoverFooter"; "required": false; }; "disabled": { "alias": "mcPopoverDisabled"; "required": false; }; "trigger": { "alias": "mcTrigger"; "required": false; }; "size": { "alias": "mcPopoverSize"; "required": false; }; "customClass": { "alias": "mcPopoverClass"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "placementChange": "mcPopoverPlacementChange"; "visibleChange": "mcPopoverVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
 }

package/popover/popover.scss

@@ -3,18 +3,24 @@
 
 @use '../core/styles/variables';
 @use '../core/pop-up/pop-up';
+@use '../core/styles/common';
 
 @use '../core/styles/tokens';
 
 
 $tokens: meta.module-variables(tokens) !default;
 
+
+$arrow-size: 12px;
+$trigger-margin: 9px;
+
 .kbq-popover {
     position: relative;
 
-    border-radius: var(--kbq-popover-size-border-radius, map.get($tokens, popover-size-border-radius));
-    border-width: var(--kbq-popover-size-border-width, map.get($tokens, popover-size-border-width));
-    border-style: solid;
+    border-radius: var(
+        --kbq-popover-size-container-border-radius,
+        map.get($tokens, popover-size-container-border-radius)
+    );
 
     box-sizing: border-box;
 
@@ -24,65 +30,81 @@ $tokens: meta.module-variables(tokens) !default;
     white-space: pre-line;
 
     &.kbq-popover_small {
-        max-width: var(--kbq-popover-size-small-width, map.get($tokens, popover-size-small-width));
+        max-width: var(--kbq-popover-size-container-width-small, map.get($tokens, popover-size-container-width-small));
     }
 
     &.kbq-popover_medium {
-        max-width: var(--kbq-popover-size-medium-width, map.get($tokens, popover-size-medium-width));
+        max-width:
+            var(--kbq-popover-size-container-width-medium, map.get($tokens, popover-size-container-width-medium));
     }
 
     &.kbq-popover_large {
-        max-width: var(--kbq-popover-size-large-width, map.get($tokens, popover-size-large-width));
+        max-width: var(--kbq-popover-size-container-width-large, map.get($tokens, popover-size-container-width-large));
     }
 
-    $popover-distance: calc(var(--kbq-popover-size-trigger-margin, #{map.get($tokens, popover-size-trigger-margin)}));
+    @include pop-up.popup-margins(kbq-popover, 8px);
+}
 
-    @include pop-up.popup-margins(kbq-popover, $popover-distance);
+.kbq-popover__content {
+    overflow-y: auto;
+
+    padding:
+        var(--kbq-popover-size-content-padding-top, map.get($tokens, popover-size-content-padding-top))
+        var(--kbq-popover-size-content-padding-horizontal, map.get($tokens, popover-size-content-padding-horizontal))
+        var(--kbq-popover-size-content-padding-bottom, map.get($tokens, popover-size-content-padding-bottom));
 }
 
 .kbq-popover__container {
+    overflow: hidden;
+
     display: flex;
     flex-direction: column;
 
-    max-height: var(--kbq-popover-size-max-height, map.get($tokens, popover-size-max-height));
-    border-radius: var(--kbq-popover-size-border-radius, map.get($tokens, popover-size-border-radius));
-    overflow: hidden;
+    max-height: var(--kbq-popover-size-container-max-height, map.get($tokens, popover-size-container-max-height));
+
+    border-radius: var(
+        --kbq-popover-size-container-border-radius,
+        map.get($tokens, popover-size-container-border-radius)
+    );
+
+    &.kbq-popover__container_with-header {
+        .kbq-popover__content {
+            padding-top: var(
+                --kbq-popover-size-content-padding-vertical, map.get($tokens, popover-size-content-padding-vertical)
+            );
+        }
+    }
+
+    &.kbq-popover__container_with-footer {
+        .kbq-popover__content {
+            padding-bottom: var(
+                --kbq-popover-size-content-padding-vertical, map.get($tokens, popover-size-content-padding-vertical)
+            );
+        }
+    }
 }
 
 .kbq-popover__header {
     display: flex;
     align-items: center;
 
-    height: var(--kbq-popover-header-size-height, map.get($tokens, popover-header-size-height));
-
-    padding: var(--kbq-popover-header-size-padding, map.get($tokens, popover-header-size-padding));
-
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-}
-
-.kbq-popover__content {
     overflow: hidden;
 
-    padding: var(--kbq-popover-size-padding, map.get($tokens, popover-size-padding));
+    padding:
+        var(--kbq-popover-size-header-padding-top, map.get($tokens, popover-size-header-padding-top))
+        var(--kbq-popover-size-header-padding-horizontal, map.get($tokens, popover-size-header-padding-horizontal))
+        var(--kbq-popover-size-header-padding-bottom, map.get($tokens, popover-size-header-padding-bottom))
+        var(--kbq-popover-size-header-padding-horizontal, map.get($tokens, popover-size-header-padding-horizontal));
 
-    &.kbq-popover__content_padding_bottom {
-        padding-bottom: calc(
-            var(--kbq-popover-size-padding, map.get($tokens, popover-size-padding)) +
-            var(--kbq-popover-footer-size-margin-top, map.get($tokens, popover-footer-size-margin-top))
-        );
+    & .kbq-popover__header-text {
+        @include common.kbq-truncate-line();
     }
 }
 
 .kbq-popover__footer {
-    box-sizing: border-box;
-
-    height: var(--kbq-popover-footer-size-height, map.get($tokens, popover-footer-size-height));
-
-    padding: var(--kbq-popover-footer-size-padding, map.get($tokens, popover-footer-size-padding));
-
-    border-top-width: 1px;
-    border-top-style: solid;
+    padding:
+        var(--kbq-popover-size-footer-padding-vertical, map.get($tokens, popover-size-footer-padding-vertical))
+        var(--kbq-popover-size-footer-padding-horizontal, map.get($tokens, popover-size-footer-padding-horizontal));
 }
 
 .kbq-popover__arrow {
@@ -90,25 +112,13 @@ $tokens: meta.module-variables(tokens) !default;
 
     z-index: -1;
 
-    width: var(--kbq-popover-size-arrow-size, #{map.get($tokens, popover-size-arrow-size)});
-    height: var(--kbq-popover-size-arrow-size, #{map.get($tokens, popover-size-arrow-size)});
-
-    border: solid 1px;
+    width: $arrow-size;
+    height: $arrow-size;
 
     transform: rotate(45deg);
 }
 
-$arrow-offset: calc((var(--kbq-popover-size-arrow-size, #{map.get($tokens, popover-size-arrow-size) - 1}) / -2));
-$arrow-padding: calc(18px - var(--kbq-popover-size-trigger-margin, #{map.get($tokens, popover-size-trigger-margin)}));
+$arrow-offset: calc(($arrow-size - 1px) / -2);
+$arrow-padding: calc(18px - $trigger-margin);
 
 @include pop-up.popup-arrow-positions(kbq-popover, $arrow-offset, $arrow-padding);
-
-.kbq-popover-confirm .kbq-popover__content {
-    padding: 24px 16px 16px;
-
-    button {
-        margin-top: 16px;
-        display: block;
-        margin-left: auto;
-    }
-}