@koobiq/components 17.3.0 → 17.5.0

package/link/link-tokens.scss

@@ -0,0 +1,67 @@
+.kbq-link {
+    --kbq-link-size-state-focused-outline-offset: 0px;
+    --kbq-link-size-state-focused-outline-width: 2px;
+    --kbq-link-size-compact-content-padding: 2px;
+    --kbq-link-size-normal-content-padding: 2px;
+    --kbq-link-size-big-content-padding: 4px;
+    --kbq-link-font-compact-font-size: 12px;
+    --kbq-link-font-compact-line-height: 16px;
+    --kbq-link-font-compact-letter-spacing: normal;
+    --kbq-link-font-compact-font-weight: normal;
+    --kbq-link-font-compact-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-link-font-compact-text-transform: null;
+    --kbq-link-font-compact-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-link-font-normal-font-size: 14px;
+    --kbq-link-font-normal-line-height: 20px;
+    --kbq-link-font-normal-letter-spacing: -0.006em;
+    --kbq-link-font-normal-font-weight: normal;
+    --kbq-link-font-normal-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-link-font-normal-text-transform: null;
+    --kbq-link-font-normal-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-link-font-big-font-size: 16px;
+    --kbq-link-font-big-line-height: 24px;
+    --kbq-link-font-big-letter-spacing: -0.011em;
+    --kbq-link-font-big-font-weight: normal;
+    --kbq-link-font-big-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
+        sans-serif;
+    --kbq-link-font-big-text-transform: null;
+    --kbq-link-font-big-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+}
+
+:where(.kbq-light, .theme-light, .kbq-theme-light) {
+    --kbq-link-text: hsla(216, 100%, 50%, 100%);
+    --kbq-link-border-bottom: hsla(216, 100%, 85%, 100%);
+    --kbq-link-state-visited-text: hsla(277, 72%, 45%, 100%);
+    --kbq-link-state-visited-border-bottom: hsla(277, 72%, 80%, 100%);
+    --kbq-link-state-visited-hover-text: hsla(277, 72%, 40%, 100%);
+    --kbq-link-state-visited-hover-border-bottom: hsla(277, 72%, 80%, 100%);
+    --kbq-link-state-visited-active-text: hsla(277, 72%, 35%, 100%);
+    --kbq-link-state-visited-active-border-bottom: hsla(277, 72%, 80%, 100%);
+    --kbq-link-state-hover-text: hsla(216, 100%, 45%, 100%);
+    --kbq-link-state-hover-border-bottom: hsla(216, 100%, 85%, 100%);
+    --kbq-link-state-active-text: hsla(216, 100%, 40%, 100%);
+    --kbq-link-state-active-border-bottom: hsla(216, 100%, 85%, 100%);
+    --kbq-link-state-focused-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-link-state-disabled-text: hsla(229, 15%, 15%, 32%);
+    --kbq-link-state-disabled-border-bottom: hsla(229, 15%, 15%, 32%);
+}
+
+:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
+    --kbq-link-text: hsla(216, 100%, 65%, 100%);
+    --kbq-link-border-bottom: hsla(216, 100%, 27%, 100%);
+    --kbq-link-state-visited-text: hsla(277, 72%, 50%, 100%);
+    --kbq-link-state-visited-border-bottom: hsla(277, 72%, 30%, 100%);
+    --kbq-link-state-visited-hover-text: hsla(277, 72%, 55%, 100%);
+    --kbq-link-state-visited-hover-border-bottom: hsla(277, 72%, 30%, 100%);
+    --kbq-link-state-visited-active-text: hsla(277, 72%, 60%, 100%);
+    --kbq-link-state-visited-active-border-bottom: hsla(277, 72%, 30%, 100%);
+    --kbq-link-state-hover-text: hsla(216, 100%, 65%, 100%);
+    --kbq-link-state-hover-border-bottom: hsla(216, 100%, 27%, 100%);
+    --kbq-link-state-active-text: hsla(216, 100%, 70%, 100%);
+    --kbq-link-state-active-border-bottom: hsla(216, 100%, 27%, 100%);
+    --kbq-link-state-focused-outline: hsla(216, 100%, 60%, 100%);
+    --kbq-link-state-disabled-text: hsla(229, 15%, 40%, 100%);
+    --kbq-link-state-disabled-border-bottom: hsla(229, 15%, 50%, 32%);
+}

package/markdown/markdown.scss

@@ -20,9 +20,14 @@ $tokens: meta.module-variables(tokens) !default;
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
         .kbq-markdown__h#{$i} {
-            max-width: kbq-css-variable(markdown-h#{$i}-size-max-width);
             margin-top: kbq-css-variable(markdown-h#{$i}-size-margin-top);
             margin-bottom: kbq-css-variable(markdown-h#{$i}-size-margin-bottom);
+
+            @for $i from 1 through 6 {
+                & + .kbq-markdown__h#{$i} {
+                    margin-top: 0;
+                }
+            }
         }
     }
 
@@ -38,14 +43,12 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-markdown__p {
-        max-width: kbq-css-variable(markdown-p-size-max-width);
         margin-top: kbq-css-variable(markdown-p-size-margin-top);
         margin-bottom: kbq-css-variable(markdown-p-size-margin-bottom);
     }
 
     .kbq-markdown__ul,
     .kbq-markdown__ol {
-        max-width: kbq-css-variable(markdown-list-size-max-width);
         margin-top: kbq-css-variable(markdown-list-size-margin-top);
         margin-bottom: kbq-css-variable(markdown-list-size-margin-bottom);
 
@@ -93,7 +96,6 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-markdown__blockquote {
-        max-width: kbq-css-variable(markdown-blockquote-size-max-width);
         margin-top: kbq-css-variable(markdown-blockquote-size-margin-top);
         margin-left: 0;
         margin-bottom: kbq-css-variable(markdown-blockquote-size-margin-bottom);
@@ -129,12 +131,11 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     .kbq-markdown__p > .kbq-markdown__code {
-        max-width: kbq-css-variable(markdown-code-size-max-width);
         padding: kbq-css-variable(markdown-code-size-inline-padding);
     }
 
     .kbq-markdown__img {
-        max-width: kbq-css-variable(markdown-image-size-max-width);
+        max-width: 100%;
         margin-top: kbq-css-variable(markdown-image-size-margin-top);
         margin-bottom: kbq-css-variable(markdown-image-size-margin-bottom);
 
@@ -197,3 +198,7 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 }
+
+.docs-live-example.kbq-markdown {
+    margin-bottom: 128px;
+}

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

@@ -4,9 +4,9 @@ import { KbqModalComponent } from './modal.component';
  * API class that public to users to handle the modal instance.
  * KbqModalRef is aim to avoid accessing to the modal instance directly by users.
  */
-export declare abstract class KbqModalRef<T = any, R = any> {
+export declare abstract class KbqModalRef<C = any, R = unknown> {
     abstract afterOpen: Observable<void>;
-    abstract afterClose: Observable<R>;
+    abstract afterClose: Observable<R | undefined>;
     abstract open(): void;
     abstract close(result?: R): void;
     abstract destroy(result?: R): void;
@@ -20,7 +20,7 @@ export declare abstract class KbqModalRef<T = any, R = any> {
      * Note: this method may return undefined if the Component has not ready yet.
      * (it only available after Modal's ngOnInit)
      */
-    abstract getContentComponent(): T;
+    abstract getContentComponent(): C;
     /**
      * Get the dom element of this Modal
      */

package/modal/modal.component.d.ts

@@ -47,7 +47,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     kbqMaskStyle: object;
     kbqBodyStyle: object;
     kbqAfterOpen: EventEmitter<void>;
-    kbqAfterClose: EventEmitter<R>;
+    kbqAfterClose: EventEmitter<R | undefined>;
     kbqOkText: string;
     kbqOkType: KbqComponentColors;
     kbqRestoreFocus: boolean;
@@ -70,7 +70,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     modalAnimationClassMap: object;
     transformOrigin: string;
     get afterOpen(): Observable<void>;
-    get afterClose(): Observable<R>;
+    get afterClose(): Observable<R | undefined>;
     get okText(): string;
     get cancelText(): string;
     get hidden(): boolean;

package/modal/modal.service.d.ts

@@ -1,33 +1,38 @@
 import { Overlay } from '@angular/cdk/overlay';
+import { InjectionToken, Injector } from '@angular/core';
 import { Observable } from 'rxjs';
 import { KbqModalControlService } from './modal-control.service';
 import { KbqModalRef } from './modal-ref.class';
 import { KbqModalComponent } from './modal.component';
 import { ConfirmType, IModalOptionsForService } from './modal.type';
 import * as i0 from "@angular/core";
+/** Injection token that can be used to access the data that was passed in to a modal. */
+export declare const KBQ_MODAL_DATA: InjectionToken<unknown>;
 export declare class ModalBuilderForService {
-    private overlay;
+    private readonly overlay;
+    readonly options: IModalOptionsForService;
+    private readonly injector;
     private modalRef;
     private overlayRef;
-    constructor(overlay: Overlay, options?: IModalOptionsForService);
+    constructor(overlay: Overlay, options: IModalOptionsForService, injector: Injector);
     getInstance(): KbqModalComponent | null;
     destroyModal(): void;
     private changeProps;
     private createModal;
 }
 export declare class KbqModalService {
-    private overlay;
-    private modalControl;
+    private readonly overlay;
+    private readonly modalControl;
+    private injector;
     get openModals(): KbqModalRef[];
     get afterAllClose(): Observable<void>;
-    constructor(overlay: Overlay, modalControl: KbqModalControlService);
+    constructor(overlay: Overlay, modalControl: KbqModalControlService, injector: Injector);
     closeAll(): void;
-    create<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    confirm<T>(options?: IModalOptionsForService<T>, confirmType?: ConfirmType): KbqModalRef<T>;
-    open<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    success<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    delete<T>(options?: IModalOptionsForService<T>): KbqModalRef<T>;
-    private simpleConfirm;
+    create<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    confirm<C, R = unknown>(options?: IModalOptionsForService<C>, confirmType?: ConfirmType): KbqModalRef<C, R>;
+    open<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    success<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
+    delete<C, R = unknown>(options?: IModalOptionsForService<C>): KbqModalRef<C, R>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqModalService>;
 }

package/modal/modal.type.d.ts

@@ -8,7 +8,7 @@ export declare enum ModalSize {
     Medium = "medium",
     Large = "large"
 }
-export interface ModalOptions<T = any, R = any> {
+export interface ModalOptions<C = any, R = any> {
     kbqModalType?: ModalType;
     kbqVisible?: boolean;
     kbqWidth?: number | string;
@@ -17,15 +17,16 @@ export interface ModalOptions<T = any, R = any> {
     kbqClassName?: string;
     kbqStyle?: object;
     kbqTitle?: string | TemplateRef<{}>;
-    kbqContent?: string | TemplateRef<{}> | Type<T>;
-    kbqComponent?: Type<T>;
+    kbqContent?: string | TemplateRef<{}> | Type<C>;
+    kbqComponent?: Type<C>;
+    /** deprecated. Use field data and KBQ_MODAL_DATA */
     kbqComponentParams?: any;
     kbqClosable?: boolean;
     kbqMask?: boolean;
     kbqMaskClosable?: boolean;
     kbqMaskStyle?: object;
     kbqBodyStyle?: object;
-    kbqFooter?: string | TemplateRef<{}> | IModalButtonOptions<T>[];
+    kbqFooter?: string | TemplateRef<{}> | IModalButtonOptions<C>[];
     kbqGetContainer?: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef) | null;
     kbqAfterOpen?: EventEmitter<void>;
     kbqAfterClose?: EventEmitter<R>;
@@ -34,10 +35,12 @@ export interface ModalOptions<T = any, R = any> {
     kbqOkText?: string;
     kbqOkType?: string;
     kbqOkLoading?: boolean;
-    kbqOnOk?: EventEmitter<T> | OnClickCallback<T>;
+    kbqOnOk?: EventEmitter<C> | OnClickCallback<C>;
     kbqCancelText?: string;
     kbqCancelLoading?: boolean;
-    kbqOnCancel?: EventEmitter<T> | OnClickCallback<T>;
+    kbqOnCancel?: EventEmitter<C> | OnClickCallback<C>;
+    /** Data being injected into the child component. */
+    data?: any;
 }
 export interface IModalOptionsForService<T = any> extends ModalOptions<T> {
     kbqOnOk?: OnClickCallback<T>;

package/navbar/_navbar-theme.scss

@@ -91,7 +91,7 @@
     }
 
     .kbq-navbar-divider {
-        background: kbq-css-variable(line-contrast-fade, map.get($theme, line, contrast-fade));
+        background: kbq-css-variable(line-contrast-less, map.get($theme, line, contrast-less));
     }
 }
 
@@ -106,7 +106,7 @@ button {
 
 @mixin kbq-navbar-typography($config) {
     .kbq-navbar-title {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-strong);
+        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
     }
 
     .kbq-navbar-brand {

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

@@ -1,7 +1,5 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
-import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, TemplateRef } from '@angular/core';
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
@@ -128,13 +126,13 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     get showVerticalDropDownAngle(): boolean;
     get showHorizontalDropDownAngle(): boolean;
     get hasCroppedText(): boolean;
-    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
+    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
     ngAfterContentInit(): void;
     updateTooltip(): void;
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;
     private updateCollapsedState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, { optional: true; }, { optional: true; }]>;
     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", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "*"], false, never>;
 }
 export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDestroy {
@@ -146,12 +144,12 @@ export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDest
     set content(content: string | TemplateRef<any>);
     get disabled(): boolean;
     protected modifier: TooltipModifier;
-    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, focusMonitor: FocusMonitor, direction: Directionality, document: any);
+    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef, document: any);
     onKeydown($event: KeyboardEvent): void;
     ngOnDestroy(): void;
     toggle: () => void;
     private getWindow;
     private windowToggleHandler;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "kbqCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.3.0",
+    "version": "17.5.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -8,24 +8,28 @@
     },
     "keywords": [
         "angular",
-        "koobiq",
-        "components"
+        "component",
+        "service",
+        "directive",
+        "development",
+        "kit",
+        "koobiq"
     ],
     "license": "MIT",
     "bugs": {
         "url": "https://github.com/koobiq/angular-components/issues"
     },
-    "homepage": "https://github.com/koobiq/angular-components/blob/master/README.md",
+    "homepage": "https://github.com/koobiq/angular-components#readme",
     "peerDependencies": {
         "@angular/cdk": "^17.0.0",
         "@angular/forms": "^17.0.0",
-        "@koobiq/cdk": "17.3.0",
-        "@koobiq/angular-moment-adapter": "17.3.0",
-        "@koobiq/angular-luxon-adapter": "17.3.0",
+        "@koobiq/cdk": "17.5.0",
+        "@koobiq/angular-moment-adapter": "17.5.0",
+        "@koobiq/angular-luxon-adapter": "17.5.0",
         "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.3.1",
-        "@koobiq/design-tokens": "3.3.1",
+        "@koobiq/tokens-builder": "3.5.0",
+        "@koobiq/design-tokens": "3.5.0",
         "marked": "^9.0.0",
         "overlayscrollbars": "^2.2.0",
         "ngx-highlightjs": "^10.0.0"

package/popover/_popover-theme.scss

@@ -6,6 +6,7 @@
 
 @mixin kbq-popover-theme($theme) {
     $popover: map.get(map.get($theme, components), popover);
+    $background: map.get($theme, background);
 
     .kbq-popover {
         box-shadow: kbq-css-variable(popover-container-box-shadow, map.get($popover, container, box-shadow));
@@ -20,6 +21,10 @@
         background: kbq-css-variable(popover-container-background, map.get($popover, container, background));
     }
 
+    .kbq-popover__close {
+        background-color: map.get($background, overlay-inverse);
+    }
+
     .kbq-popover__header {
         color: kbq-css-variable(popover-header-text-color, map.get($popover, header, text));
     }

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

@@ -1,6 +1,4 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, ViewContainerRef } from '@angular/core';
+import { EventEmitter, InjectionToken } from '@angular/core';
 import { Subject } from 'rxjs';
 import { KbqPopoverComponent, KbqPopoverTrigger } from './popover.component';
 import * as i0 from "@angular/core";
@@ -10,7 +8,6 @@ export declare class KbqPopoverConfirmComponent extends KbqPopoverComponent {
     onConfirm: Subject<void>;
     confirmButtonText: string;
     confirmText: string;
-    constructor(changeDetectorRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPopoverConfirmComponent, "kbq-popover-confirm-component", never, {}, {}, never, never, false, never>;
 }
@@ -22,10 +19,10 @@ export declare class KbqPopoverConfirmTrigger extends KbqPopoverTrigger {
     get confirmButtonText(): string;
     set confirmButtonText(value: string);
     private _confirmButtonText;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, confirmText: string, confirmButtonText: string);
+    constructor(confirmText: string, confirmButtonText: string);
     updateData(): void;
     setupButtonEvents(): void;
     getOverlayHandleComponentType(): typeof KbqPopoverConfirmComponent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverConfirmTrigger, [{ optional: true; }, { optional: true; }]>;
     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

@@ -1,16 +1,24 @@
-import { Directionality } from '@angular/cdk/bidi';
-import { CdkScrollable, Overlay, OverlayConfig, ScrollDispatcher, ScrollStrategy } from '@angular/cdk/overlay';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
-import { KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
+import { CdkScrollable, Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
+import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, InjectionToken, TemplateRef, Type } from '@angular/core';
+import { KbqComponentColors, KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
-export declare class KbqPopoverComponent extends KbqPopUp {
+export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewInit {
     prefix: string;
     header: string | TemplateRef<any>;
     footer: string | TemplateRef<any>;
     isTrapFocus: boolean;
-    constructor(changeDetectorRef: ChangeDetectorRef);
+    hasCloseButton: boolean;
+    popoverContent: ElementRef<HTMLDivElement>;
+    private debounceTime;
+    private readonly destroyRef;
+    isContentTopOverflow: boolean;
+    isContentBottomOverflow: boolean;
+    ngAfterViewInit(): void;
+    onContentChange(): void;
+    checkContentOverflow(contentElement: HTMLElement): void;
     updateClassMap(placement: string, customClass: string, size: PopUpSizes): void;
     updateTrapFocus(isTrapFocus: boolean): void;
+    protected readonly componentColors: typeof KbqComponentColors;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPopoverComponent, "kbq-popover-component", never, {}, {}, never, never, false, never>;
 }
@@ -26,6 +34,7 @@ export declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 /** Creates an error to be thrown if the user supplied an invalid popover position. */
 export declare function getKbqPopoverInvalidPositionError(position: string): Error;
 export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit {
+    protected scrollStrategy: () => ScrollStrategy;
     get popoverVisible(): boolean;
     set popoverVisible(value: boolean);
     get popoverPlacement(): PopUpPlacements;
@@ -53,6 +62,9 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     private _size;
     get customClass(): string;
     set customClass(value: string);
+    get hasCloseButton(): boolean;
+    set hasCloseButton(value: boolean);
+    private _hasCloseButton;
     /**
      * Controls the behavior of closing the component on scroll.
      * The default value is `false`.
@@ -67,7 +79,6 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
     protected get overlayConfig(): OverlayConfig;
-    constructor(overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality);
     ngAfterContentInit(): void;
     updateData(): void;
     /** Updates the position of the current popover. */
@@ -76,6 +87,6 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     updateClassMap(newPlacement?: string): void;
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
     closingActions(): import("rxjs").Observable<void | MouseEvent | CdkScrollable>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    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>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, 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; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
 }

package/popover/popover.module.d.ts

@@ -5,8 +5,10 @@ import * as i3 from "@angular/common";
 import * as i4 from "@angular/cdk/overlay";
 import * as i5 from "@koobiq/components/button";
 import * as i6 from "@angular/cdk/a11y";
+import * as i7 from "@koobiq/components/icon";
+import * as i8 from "@angular/cdk/observers";
 export declare class KbqPopoverModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqPopoverModule, [typeof i1.KbqPopoverComponent, typeof i1.KbqPopoverTrigger, typeof i2.KbqPopoverConfirmComponent, typeof i2.KbqPopoverConfirmTrigger], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.KbqButtonModule, typeof i6.A11yModule], [typeof i1.KbqPopoverComponent, typeof i1.KbqPopoverTrigger, typeof i2.KbqPopoverConfirmComponent, typeof i2.KbqPopoverConfirmTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqPopoverModule, [typeof i1.KbqPopoverComponent, typeof i1.KbqPopoverTrigger, typeof i2.KbqPopoverConfirmComponent, typeof i2.KbqPopoverConfirmTrigger], [typeof i3.CommonModule, typeof i4.OverlayModule, typeof i5.KbqButtonModule, typeof i6.A11yModule, typeof i7.KbqIconModule, typeof i8.CdkObserveContent], [typeof i1.KbqPopoverComponent, typeof i1.KbqPopoverTrigger, typeof i2.KbqPopoverConfirmComponent, typeof i2.KbqPopoverConfirmTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqPopoverModule>;
 }

package/popover/popover.scss

@@ -69,6 +69,18 @@ $trigger-margin: 9px;
     }
 }
 
+.kbq-popover__content .kbq-popover__close-container {
+    display: flex;
+    justify-content: flex-end;
+    height: 0;
+
+    .kbq-popover__close {
+        top: auto;
+        right: auto;
+        transform: translateY(-50%) translateX(50%);
+    }
+}
+
 .kbq-popover__header {
     display: flex;
     align-items: center;
@@ -83,11 +95,23 @@ $trigger-margin: 9px;
     }
 }
 
+.kbq-popover__header_top-overflow {
+    box-shadow: 0 9px 8px -12px rgba(138, 143, 168, 1);
+}
+
+.kbq-popover__header_with-close-button {
+    padding-right: kbq-css-variable(size-4xl);
+}
+
 .kbq-popover__footer {
     padding: kbq-css-variable(popover-size-footer-padding-vertical)
         kbq-css-variable(popover-size-footer-padding-horizontal);
 }
 
+.kbq-popover__footer_bottom-overflow {
+    box-shadow: 0 -9px 8px -12px rgba(138, 143, 168, 1);
+}
+
 .kbq-popover__arrow {
     position: absolute;
 
@@ -103,3 +127,11 @@ $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__close {
+    position: absolute;
+    z-index: 2;
+    top: kbq-css-variable(size-s);
+    right: kbq-css-variable(size-s);
+    border-radius: kbq-css-variable(button-size-border-radius);
+}